Princípios de Movimento
Animações suaves que dão vida à interface sem distrair. Framer Motion como engine principal. Respeitar prefers-reduced-motion.
Timing Tokens
instant
100ms
Micro-interações (dots, badges)
fast
150ms
Hover states, focus rings
normal
200–250ms
Botões, cards, inputs
smooth
300ms
Dropdowns, tooltips
enter
400–500ms
Page transitions, modais
hero
600–800ms
Animações de entrada hero
Easings
default
[.25,.46,.45,.94]
Transições gerais
in-out
ease-in-out
Modais, overlays
spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Cards com 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.