Principios de Movimiento
Animaciones suaves que dan vida a la interfaz sin distraer. Framer Motion como motor principal. Respetar prefers-reduced-motion.
Timing Tokens
instant
100ms
Micro-interacciones (dots, badges)
fast
150ms
Hover states, focus rings
normal
200–250ms
Botones, cards, inputs
smooth
300ms
Dropdowns, tooltips
enter
400–500ms
Transiciones de página, modales
hero
600–800ms
Animaciones de entrada hero
Easings
default
[.25,.46,.45,.94]
Transiciones generales
in-out
ease-in-out
Modales, overlays
spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Cards con scale
out-back
[0.34,1.56,0.64,1]
Elementos de entrada
/* fadeUp — entrada de seções e cards */
const fadeUp = {
hidden: { opacity: 0, y: 28 },
visible: (i: number) => ({
opacity: 1, y: 0,
transition: { delay: i * 0.1, duration: 0.5, ease: [.25,.46,.45,.94] }
})
};
/* stagger — filhos em sequência */
const stagger = { visible: { transition: { staggerChildren: 0.1 } } };
/* VP — viewport options */
const VP = { once: true, margin: '-60px' };🎬 Paper Cutout / Stop-Motion — padrão Fluxr para alta conversão em Reels, TikTok e Meta Ads.
Todo anúncio de alta conversão para Instagram Reels, TikTok e Meta Ads segue o padrão Paper Cutout (Colagem / Stop-Motion tátil) gerado via Remotion / ReelStack com voz nativa ElevenLabs (Gaby / LIA):
- Stack de Renderização: Remotion + ReelStack (9:16 vertical, 30fps com quantização a 15fps stop-motion).
- Voz Oficial: ElevenLabs Multilingual v2 (Voz Gaby / LIA em espanhol peruano es-PE).
- Estética Visual: Fundo craft escuro (#121110), recortes de papel com borda branca 3px, sombras duras (4px 8px 0px rgba(0,0,0,0.55)), fitas adesivas e carimbos táteis.