Lenis + Motion: construindo o scroll suave do meu site

O scroll suave deste site vem do Lenis, que intercepta o scroll nativo e interpola o movimento — é o que faz a página parecer "pesada" de um jeito bom, em vez de simplesmente pular de posição em posição.

O risco de misturar Lenis com animações do Motion (ex-Framer Motion) é sincronização: se as duas libs calculam posição de formas diferentes, elementos que deveriam entrar na tela "no momento certo" do scroll acabam atrasados ou adiantados. A solução foi deixar o Lenis rodar no nível raiz da aplicação (via ReactLenis root em Providers.tsx) e usar whileInView do Motion normalmente — ele já escuta o viewport real, não precisa saber que o Lenis existe.

A parte que quase ninguém faz direito: prefers-reduced-motion. Este site usa MotionConfig reducedMotion="user" do Motion, que desliga animações automaticamente pra quem configurou isso no sistema operacional — sem precisar duplicar lógica em cada componente.

Resultado: quem não se importa com movimento vê um site que desliza; quem tem enjoo ou sensibilidade a movimento (uma parte real de qualquer audiência) recebe transições instantâneas, sem perder nenhuma funcionalidade. Acessibilidade e sensação de produto caro não são opostos.