🏦 Banking Onboarding (Lottie)

NuBank, Inter, C6 — todas as fintechs modernas usam micro-animações no onboarding para reduzir fricção e aumentar confiança. O usuário não lê as instruções; ele assiste à animação e já sabe o que fazer. Lottie entrega essa experiência em kilobytes.

Cada cena é uma micro-animação independente. No Remotion, você coloca as 4 em <Series> e cada uma toca no seu momento certo — como slides de um onboarding real.

O desafio técnico central: a animação JSON do Lottie tem seu próprio sistema de timing. Para que o render do Remotion seja determinístico, você precisa forçar o Lottie a avançar frame-por-frame junto com o 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]);

O checkmark de sucesso é a cena mais importante do onboarding. É onde o usuário decide se confia no app. O círculo se desenha primeiro via stroke-dashoffset, depois o check revela dentro, e um leve bounce final sela a confirmação.

Este é o prompt literal que você dá ao Claude Code (com skill Remotion ativa). Cada cena numerada mapeia para uma micro-animação Lottie independente — o Claude gera as 4 composições em série.

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.

O Remotion gera o MP4 do onboarding para apresentação e marketing. Os mesmos JSONs Lottie são integrados diretamente no React Native do app de produção — zero retrabalho entre protótipo e produto final.