🏦 Banking Onboarding (Lottie)

NuBank, Inter, C6—all modern fintechs use micro-animations during onboarding to reduce friction and build trust. The user doesn’t read the instructions; they watch the animation and you’ll know what to do. Lottie delivers this experience in kilobytes.

Each scene is an independent micro-animation. In Remotion, you put all 4 in <Series> and each one plays at just the right moment — like real onboarding slides.

The central technical challenge: the Lottie JSON animation has its own timing system. For the Remotion render to be deterministic, you need to force Lottie to advance frame by frame along with the useCurrentFrame().

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Força o Lottie para o frame exato
useEffect(() => {
  if (lottieRef.current) {
    const seconds = frame / fps;
    lottieRef.current.goToAndStop(seconds * 1000, false);
  }
}, [frame, fps]);

The success checkmark is the most important onboarding scene. It’s where the user decides whether to trust the app. The circle draws itself first via stroke-dashoffset, then the check reveals what’s inside, and a slight final bounce seals the confirmation.

This is the exact prompt you give Claude Code (with the Remotion skill active). Each numbered scene maps to an independent Lottie micro-animation — Claude generates all 4 compositions in sequence.

Create a clean onboarding sequence.
Scene 1: User opens mobile banking app.
Scene 2: Money is deposited.
Scene 3: Transfer is sent.
Scene 4: Success checkmark appears.
Use minimal design and smooth motion.

Remotion generates the onboarding MP4 for presentations and marketing. The same Lottie JSONs are integrated directly into the production app’s React Native code— zero rework between prototype and final product.