🏦 Escenario: el onboarding que genera confianza en el usuario
NuBank, Inter, C6 — todas las fintechs modernas usan microanimaciones en el onboarding para reducir la fricción y aumentar la confianza. El usuario no lee las instrucciones; él mira la animación y ya sabrás qué hacer. Lottie ofrece esta experiencia en kilobytes.
¿Por qué Lottie para este proyecto?
Lottie es JSON: un archivo de ~50KB que funciona en React Native, web e iOS/Android sin recompilar. Para microinteracciones de apps, eso supera a cualquier lib programática en velocidad de implementación e fidelidad multiplataforma. GSAP, D3 o Three.js aquí serían excesivos.
✓ Lottie es ideal cuando…
✗ Lottie no es la mejor opción cuando…
📱 Las 4 escenas en secuencia
Cada escena es una microanimación independiente. En Remotion, colocas las 4 en <Series> y cada una se reproduce en el momento adecuado, como en las diapositivas de un onboarding real.
💡 Duración de cada escena
Escena 1 (apertura): 1.5s. Escenas 2 y 3 (acciones): 1.2s cada una. Escena 4 (confirmación): 2s: dale tiempo al usuario para sentir el éxito. Total: ~6s por ciclo de onboarding. Si dura más, el usuario lo salta.
🎛️ Sincronizar Lottie con Remotion
El desafío técnico central: la animación JSON de Lottie tiene su propio sistema de tiempos. Para que el render de Remotion sea determinista, necesitas forzar a Lottie a avanzar frame por frame junto con el 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]);
✅ La escena del checkmark: el momento de alivio
El checkmark de éxito es la escena más importante del onboarding. Es donde el usuario decide si confía en la app. El círculo se dibuja primero mediante stroke-dashoffset, después el check revela el interior, y un ligero bounce final sella la confirmación.
✓ Qué hace eficaz un checkmark
✗ Errores comunes
💡 stroke-dashoffset: el truco del dibujo progresivo
Configura stroke-dasharray igual al perímetro del círculo. Anima stroke-dashoffset de perímetro a cero: eso "dibuja" el trazo progresivamente. Es la técnica más usada en animaciones de UX de confirmación.
💬 El prompt completo
Este es el prompt literal que le das a Claude Code (con la skill Remotion activa). Cada escena numerada corresponde a una microanimación Lottie independiente: Claude genera las 4 composiciones en serie.
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.
💡 "Minimal design" es la palabra clave de Lottie
El diseño minimalista es el estilo nativo de Lottie: íconos flat, trazos limpios, paleta reducida. «Clean» y «minimal» activan ese modo en Claude y evitan que intente crear animaciones complejas que no se traducen bien a JSON Lottie.
🚀 Entregable: de Remotion a la app de producción
Remotion genera el MP4 del onboarding para presentaciones y marketing. Los mismos JSON de Lottie se integran directamente en React Native de la app de producción — cero retrabajo entre el prototipo y el producto final.
Orden de build: de la animación a la app
Generar los JSON de Lottie
Claude Code genera 4 animaciones Lottie como JSON. Guárdalas como animation1.json, animation2.json, etc. Valídalas en LottieFiles.com.
Montar la composición de Remotion
Usa <Series> para secuenciar las 4 escenas. Configura la duración de cada una mediante durationInFrames. Sincroniza Lottie con el frame.
Renderizar MP4 para marketing
Renderizado 1080×1920 (vertical) para Instagram Stories y vista previa de App Store. El video es el mismo onboarding que el usuario verá en la app.
Integrar JSON en React Native
Copia los mismos animation.json al proyecto RN. Usa lottie-react-native con AnimatedLottieView. Cero rediseño.
Lo que aprendiste en este proyecto
- ▸ Microinteracciones y animación UX para apps financieras
- ▸ Sincronización de Lottie con el sistema de frames de Remotion
- ▸ stroke-dashoffset para animaciones de «dibujo progresivo»
- ▸ Del prototipo a la app de producción sin retrabajo
- ▸ Lottie como puente entre diseño e ingeniería
📋 Resumen del Módulo 3.4
- ✓Lottie = JSON ligero, multiplataforma e ideal para microinteracciones de apps
- ✓Sincronizar mediante goToAndStop() garantiza un render determinístico en Remotion
- ✓stroke-dashoffset es la técnica estándar para checkmarks y loading rings
- ✓Los mismos JSON van de Remotion a React Native sin cambios
- ✓Entregable: animaciones listas para producción para una app fintech
Completaste la Trilha 3. Siguiente etapa:
🎬 Tramo 4 — Producción: render, deploy y workflows avanzados →