# Stepper: Progress Stepper UI

A horizontal three-step progress indicator, Account, Plan and Done, shown on the second step. Use this video template in Subclip or copy its code for Claude.

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

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

A horizontal onboarding stepper with three labeled steps, where the active step can be set to show progress.

- Framework: Remotion
- Category: UI
- Duration: 5 s
- Aspect ratio: 16:9 landscape
- Code: Get the code (free sign-in): https://www.subclip.app/motion-graphics-templates/remotion/stepper

A horizontal stepper shows three steps, Account, Plan and Done, joined by a line, with the second step, Plan, active. The template holds this state for four seconds. In the code, the progress follows a continuous step position, so the line fills and each step lights up as the flow moves forward.

You can set the active step, plus playback speed and background. Use it in an onboarding walkthrough, a checkout or sign-up demo, a "how it works in three steps" explainer or a design system showcase.

## Use it for

- Onboarding walkthroughs
- Checkout and sign-up demos
- Three-step explainers
- Design system showcases

## What you can change

- `speed`: Playback speed (Number)
- `stageBackground`: Background around the scene (Color)

## How to use this template

1. Download Subclip for Mac or Windows. Every template on this page comes pre-installed.
2. Open the Templates panel, pick Stepper and drop it on your timeline.
3. Change the text, colors and timing in the layer settings, or ask the AI agent to edit it for you.
4. Export your video, or download the code to use the template in your own project.

Built on Stepper from remocn: https://remocn.dev