A walkthrough of how to replicate modern scroll animations, magnetic cursors, and editorial layouts with plain Next.js and Framer Motion.
Framer é incrível — mas o plano Pro custa caro, e para projetos que precisam de lógica personalizada, às vezes o no-code te limita mais do que libera. A boa notícia: a maioria dos efeitos que fazem os sites do Framer parecerem premium são reproduzíveis com Next.js + Framer Motion, e você mantém controle total do código.
O cursor magnético que você vê neste portfolio é feito com um simples useEffect + requestAnimationFrame. O efeito de parallax no hero usa useScroll + useTransform da Framer Motion — menos de 10 linhas de código. As transições de entrada com texto saindo do overflow são um padrão que chamo de 'clip reveal': basta envolver o elemento em um div com overflow: hidden e animar o translateY.
O segredo não está em usar bibliotecas complexas — está em entender os princípios de easing, timing e hierarquia visual que tornam o movimento elegante. Com isso, Next.js + Framer Motion chegam a 95% do resultado do Framer a uma fração do custo.