Motion Principles
Smooth animations that bring the interface to life without distracting. Framer Motion as the primary engine. Respect prefers-reduced-motion.
Timing Tokens
instant
100ms
Micro-interactions (dots, badges)
fast
150ms
Hover states, focus rings
normal
200–250ms
Buttons, cards, inputs
smooth
300ms
Dropdowns, tooltips
enter
400–500ms
Page transitions, modals
hero
600–800ms
Hero entry animations
Easings
default
[.25,.46,.45,.94]
General transitions
in-out
ease-in-out
Modals, overlays
spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Cards with scale
out-back
[0.34,1.56,0.64,1]
Entry elements
/* 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.