Product UI
Onboarding Steps — editable Remotion component
A compact animated stepper with a flexible active-step content slot for onboarding, setup flows, launch checklists, and sequential SaaS stories.
Component details
- Version
- 0.1.0
- License
- MIT
- Duration
- 4.0 seconds
- Dimensions
- 1920 × 1080
Install editable source
npx @agent-motion/cli add onboarding-steps@0.1.0
Agent guidance
- Use each step label for the short progress-track name and content for the active-step body.
- In source code, content accepts text, an image element, or any React node, including another Agent Motion component.
- Import calculateOnboardingStepsDuration from the component entrypoint to derive steps.length multiplied by framesPerStep.
- Leave x, y, width, and height unset for a centered component occupying 80% of the composition on each axis.
- Use one concise idea per step; the component derives active, completed, and pending states from the current frame.
- Disable shadow when the stepper is already placed inside another product surface or browser frame.