# Stepper: Fortschritts-Stepper-UI

Eine horizontale Fortschrittsanzeige in drei Schritten, Account, Plan und Done, beim zweiten Schritt gezeigt. Videovorlage: Code für Claude kopieren oder in Subclip bearbeiten.

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

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

Ein horizontaler Onboarding-Stepper mit drei beschrifteten Schritten, bei dem der aktive Schritt eingestellt werden kann, um Fortschritt zu zeigen.

- Framework: Remotion
- Kategorie: Oberfläche
- Dauer: 5 s
- Seitenverhältnis: 16:9 Querformat
- Code: Code holen (kostenlose Anmeldung): https://www.subclip.app/de/motion-graphics-templates/remotion/stepper

Ein horizontaler Stepper zeigt drei durch eine Linie verbundene Schritte, Account, Plan und Done, wobei der zweite Schritt, Plan, aktiv ist. Die Vorlage hält diesen Zustand vier Sekunden lang. Im Code folgt der Fortschritt einer stufenlosen Schrittposition, sodass sich die Linie füllt und jeder Schritt aufleuchtet, während der Ablauf vorangeht.

Sie können den aktiven Schritt festlegen, dazu Wiedergabegeschwindigkeit und Hintergrund. Verwenden Sie die Vorlage in einem Onboarding-Walkthrough, einer Checkout- oder Anmeldedemo, einem Erklärvideo nach dem Muster "So funktioniert es in drei Schritten" oder einer Design-System-Präsentation.

## Geeignet für

- Onboarding-Walkthroughs
- Checkout- und Anmeldedemos
- Erklärvideos in drei Schritten
- Präsentationen von Design-Systemen

## Was du anpassen kannst

- `speed`: Wiedergabegeschwindigkeit (Zahl)
- `stageBackground`: Hintergrund rund um die Szene (Farbe)

## So nutzt du diese Vorlage

1. Lade Subclip für Mac oder Windows herunter. Alle Vorlagen auf dieser Seite sind dort bereits vorinstalliert.
2. Öffne das Vorlagen-Panel, wähle Stepper aus und zieh die Vorlage auf deine Timeline.
3. Passe Text, Farben und Timing in den Ebeneneinstellungen an oder lass den KI-Agenten die Änderungen für dich übernehmen.
4. Exportiere dein Video oder lade den Code herunter, um die Vorlage in deinem eigenen Projekt zu verwenden.

Basiert auf Stepper von remocn: https://remocn.dev