# Stepper: Интерфейс шагов прогресса

Горизонтальный индикатор прогресса из трех шагов, Account, Plan и Done, показанный на втором шаге. Видеошаблон: код для Claude или монтаж в Subclip.

Canonical URL: https://www.subclip.app/ru/motion-graphics-templates/remotion/stepper

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-stepper.mp4?v=acda60c86a

Горизонтальный индикатор шагов онбординга с тремя подписанными шагами, где активный шаг задается, чтобы показать прогресс.

- Фреймворк: Remotion
- Категория: Интерфейс
- Длительность: 5 с
- Соотношение сторон: 16:9, горизонтальное
- Код: Получить код (бесплатный вход): https://www.subclip.app/ru/motion-graphics-templates/remotion/stepper

Горизонтальный индикатор шагов показывает три шага, Account, Plan и Done, соединенных линией, и второй шаг, Plan, активен. Шаблон держит это состояние четыре секунды. В коде прогресс следует непрерывной позиции шага, поэтому линия заполняется, а каждый шаг загорается по мере продвижения сценария.

Вы можете задать активный шаг, а также скорость воспроизведения и фон. Используйте шаблон в обзоре онбординга, демо оформления заказа или регистрации, ролике "как это работает в три шага" или презентации дизайн-системы.

## Для чего подходит

- Обзоры онбординга
- Демо оформления заказа и регистрации
- Ролики в три шага
- Презентации дизайн-систем

## Что можно изменить

- `speed`: Скорость воспроизведения (Число)
- `stageBackground`: Фон вокруг сцены (Цвет)

## Как использовать этот шаблон

1. Скачайте Subclip для Mac или Windows. Все шаблоны с этой страницы уже установлены в приложении.
2. Откройте панель шаблонов, выберите Stepper и перетащите его на таймлайн.
3. Измените текст, цвета и тайминг в настройках слоя или попросите ИИ-агента сделать это за вас.
4. Экспортируйте видео или скачайте код, чтобы использовать шаблон в своем проекте.

Основан на Stepper из remocn: https://remocn.dev