Onboarding Stepper Flow

import { OnboardingStepperFlow } from "@/components/remocn/onboarding-stepper-flow";export const Scene = () => <OnboardingStepperFlow />;

A composition scene that walks a new user through three onboarding steps. A horizontal stepper advances across panels of input, radio, and switch fields, finishing on a Finish button that runs to success. The panel crossfade derives linearly from the stepper's exposed position channel; every other channel comes from a composed primitive's hook.

Installation

$ pnpm dlx shadcn@latest add @remocn/onboarding-stepper-flow

Composed primitives

• Stepper — the horizontal progress indicator; its position channel also drives the panel crossfade
• Input — the account panel's email field, which types itself in
• Radio — the plan selection panel
• Switch — the preferences panel toggles
• Button — the Next and Finish actions, with Finish running through to success

Timeline narrative

The scene opens on step one with the email typing into the input. The stepper advances to step two around frame 64, crossfading to the plan panel where a radio option is selected. It advances again around frame 104 to the preferences panel and its switches. The Finish button then runs to its success state at 156, leaving about 20 frames of settle before the scene ends at 175.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { OnboardingStepperFlow } from "@/components/remocn/onboarding-stepper-flow";
 
const OnboardingScene = () => (
  <OnboardingStepperFlow
    steps={["Account", "Plan", "Settings"]}
    name="jane@acme.com"
    finishLabel="Finish"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="OnboardingStepperFlow"
    component={OnboardingScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

Props