--- name: motion-web-react description: Motion design for React websites - NOT video motion. Interface animation, scroll, depth, cursor, state, fluidity. 16 types of web motion, 5 styles, decision framework, libs, rules, prompts. --- # Motion para Sites React | Squad Film Knowledge > Motion de site NAO e motion de video. > E motion de interface, navegacao, scroll, profundidade, resposta ao cursor, estado e percepcao de fluidez. Site bom com motion nao parece cheio de efeito. Parece **vivo, responsivo, premium e inevitavel**. --- ## 5 Funcoes do Motion em Sites 1. **Orientar navegacao** 2. **Criar percepcao de qualidade** 3. **Dar hierarquia visual** 4. **Recompensar interacao** 5. **Aumentar imersao sem atrapalhar uso** Se o motion atrasa leitura, pesa carregamento ou deixa a navegacao confusa, ele falhou. --- ## Perguntas Obrigatorias Antes de Animar ### 1. O que essa animacao resolve? Guia leitura? Aumenta impacto? Reforca marca? Mostra profundidade? Melhora UX? Cria sensacao premium? ### 2. Quem controla esse movimento? Scroll, hover, clique, autoplay, cursor, device tilt, tempo da pagina? ### 3. Qual o nivel de protagonismo? Microinteracao sutil, hero dominante, transicao entre blocos, background atmosferico, interacao principal? ### 4. A animacao e funcional ou decorativa? Se for so decorativa, ja comeca suspeita. --- ## 16 Tipos de Motion para Sites React ### 1. Entrance Animation Entrada de elementos ao carregar ou entrar no viewport. - **Uso:** hero, cards, titulos, grids, CTAs - **Exemplos:** fade up, slide up, scale in, blur in, stagger reveal - **Erro:** animar tudo igual e ao mesmo tempo ### 2. Scroll Reveal Conteudo revelado conforme scroll. - **Uso:** landing pages, storytelling, cases - **Exemplos:** textos em sequencia, imagens por mascara, cards com stagger - **Erro:** cada scroll virar showzinho cansativo ### 3. Parallax Scroll Camadas em velocidades diferentes criando profundidade. - **Uso:** hero premium, imobiliario, moda, tech, branding - **Exemplos:** fundo lento + texto rapido, montagens 2.5D - **Erro:** exagerar e ficar nauseante ### 4. Scroll-Linked Animation Scroll CONTROLA a animacao (nao so revela). - **Uso:** timelines, apresentacoes imersivas, narrativa interativa - **Exemplos:** texto mudando com progresso, cards fixos trocando - **Erro:** pesado no mobile ### 5. Sticky Scroll Sections Secoes "presas" enquanto conteudo interno evolui. - **Uso:** comparativos, demos de produto, SaaS - **Exemplos:** painel fixo esquerda + conteudo direita mudando - **Erro:** tempo sticky longo demais ### 6. Horizontal Scroll Sections Bloco que rola horizontalmente (controlado por scroll vertical). - **Uso:** showcase, timeline, galeria, portfolio - **Erro:** excesso destroi usabilidade ### 7. Smooth Scroll Rolagem fluida e "cinematica". - **Ferramentas:** Lenis, GSAP ScrollSmoother - **Erro:** prejudicar performance/acessibilidade ### 8. Microinteractions Respostas animadas a hover, clique, foco, estado. - **Uso:** botoes, menus, cards, CTAs, inputs - **Exemplos:** hover scale, underline animado, lift cards - **Erro:** chamar mais atencao que o conteudo ### 9. Page Transitions Animacoes entre rotas/paginas. - **Exemplos:** fade-through, page wipe, slide, mask, morph - **Erro:** transicao lenta demais ### 10. Cursor-Based Motion Movimento reagindo ao mouse. - **Exemplos:** blob seguindo cursor, tilt cards, spotlight - **Erro:** parecer site de agencia de 2018 ### 11. 3D Motion (WebGL) Profundidade real com Three.js, React Three Fiber. - **Uso:** hero, produto, arquitetura, objeto de marca - **Erro:** 3D pesado sem motivo ### 12. 2.5D Motion Profundidade simulada sem 3D real. - **Uso:** hero visual, imobiliario, storytelling - **Exemplos:** camadas separadas, zoom/parallax leve - **Erro:** forcar e ficar fake ### 13. Text Motion on Scroll Tipografia reagindo ao scroll/viewport. - **Exemplos:** texto preenchendo, word swap, mask reveal, scaling type - **Erro:** tipografia vira efeito e perde legibilidade ### 14. Mask Reveal / Clip Reveal Conteudo revelado por mascara/shape. - **Exemplos:** imagem por recorte vertical, video por shape - **Erro:** mascara por usar, sem ganho de leitura ### 15. Section Morph / Layout Morph Bloco muda de forma/posicao e vira outro estado. - **Exemplos:** card vira tela cheia, miniatura vira modal - **Erro:** morph sem correspondencia estrutural ### 16. Data Motion Animacao de numeros, graficos, indicadores. - **Exemplos:** counter, barra preenchendo, KPI reveal - **Erro:** excesso em dado que precisa ser lido rapido --- ## 5 Estilos de Motion ### Minimal Premium Pouco movimento, muito preciso. Fades curtos, blur suave, parallax leve. **Para:** luxo, arquitetura, branding, imobiliario, audiovisual. ### Tech / SaaS Motion orientado por produto. UI animation, sticky storytelling, feature reveals. **Para:** softwares, plataformas, IA, produto digital. ### Editorial / Brand Storytelling Tipografia manda. Kinetic type, mask reveals, hero narratives. **Para:** marca, manifesto, cases, estudio, direcao criativa. ### Immersive / Experimental WebGL, 3D, scroll-driven scenes, mouse interaction. **Para:** experiencias especiais, campanhas, produto premium. ### Product Showcase Produto no centro. Sticky mockups, scroll-linked features, 3D do produto. **Para:** SaaS, apps, eletronicos, tours interativos. --- ## Stack por Objetivo ### Landing premium Entrance animation + scroll reveal + parallax leve + microinteractions + page transitions ### Site SaaS Sticky sections + scroll-linked + UI motion + feature transitions + counters ### Site imersivo Smooth scroll + 2.5D/3D + cursor motion + section morph + mask reveals ### Portfolio sofisticado Editorial type motion + image reveal + page transitions + parallax + hover profundo --- ## Libs e Quando Usar | Lib | Melhor para | |-----|-------------| | **Framer Motion** | Entrance, hover, layout transitions, page transitions, microinteractions | | **GSAP** | Scroll sofisticado, timelines complexas, controle fino, motion premium | | **ScrollTrigger** | Scroll-linked, sticky storytelling, progress control | | **Lenis** | Smooth scroll refinado | | **React Three Fiber** | 3D real, objetos interativos, cenas WebGL | | **Three.js** | Experiencias tecnicas, controle 3D profundo | | **Lottie** | Icones, microanimacoes, vetores leves | --- ## 7 Coisas que Destroem Sites com Motion 1. **Motion demais** — site vira parque de diversoes 2. **Scroll pesado** — usuario sente atraso e perde controle 3. **Mobile ignorado** — bonito no desktop, lixo no celular 4. **Sem fallback** — se 3D falha, site morre 5. **Tudo com mesmo easing** — fica generico 6. **Hero muito pesado** — homepage comeca lenta 7. **Animacao bloqueando leitura** — motion bonito que atrapalha conversao e defeito --- ## 5 Regras Praticas ### Regra 1 Cada sessao precisa de **um protagonista**. Nao texto + 3D + particulas + grafico + hover insano. ### Regra 2 Scroll deve **recompensar**, nao punir. ### Regra 3 Microinteracao e acabamento, nao conceito. ### Regra 4 3D so entra se reforca produto, marca ou imersao — e vale o custo. ### Regra 5 Site precisa funcionar **sem motion extremo**. Motion bom potencializa. Nao salva site ruim. --- ## Prompts Prontos ### Landing premium ``` Criar motion para landing page React com estetica premium, minimalista e sofisticada. Usar entrance animations limpas, scroll reveal refinado, parallax sutil, microinteracoes elegantes e transicoes leves entre secoes. O movimento deve reforcar hierarquia, clareza e percepcao de qualidade, sem prejudicar leitura, performance ou navegacao. ``` ### SaaS / product ``` Criar motion para site React de produto SaaS com scroll-linked storytelling, sticky sections, UI animation, feature reveals, counters, graficos e layout transitions. O objetivo e explicar produto com clareza, mostrar valor e criar percepcao de sofisticacao tech, com ritmo limpo e foco em conversao. ``` ### Site imersivo ``` Criar motion para site React imersivo com smooth scroll, 2.5D depth, cursor-based motion, mask reveals, section transitions e elementos 3D leves. A experiencia deve parecer fluida, premium e viva, sem comprometer performance, usabilidade ou legibilidade. ``` ### Portfolio criativo ``` Criar motion para site React de portfolio com linguagem editorial, tipografia dominante, image reveals, parallax, page transitions sofisticadas e microinteracoes premium. O movimento deve valorizar projetos, dar ritmo a leitura e reforcar percepcao autoral. ``` --- ## Decisao Rapida | Objetivo | Motion ideal | |----------|-------------| | Impressionar no hero | parallax, mask reveal, 2.5D, 3D leve | | Explicar produto | sticky scroll, UI motion, feature transitions | | Mostrar prova | data motion, counters, chart animations | | Reforcar luxo | minimal motion, smooth scroll, reveals limpos | | Criar imersao | scroll-linked, 3D, cursor motion | | Melhorar UX | microinteractions, entrance, transitions suaves |