Estudo de caso - Um site de marca de esports com presença movida a Motion
O site oficial do Low Profile FC para a Streammers League, feito em Next.js com Motion e Motion+, e uma carta foil de criador para cada atleta. No ar em lowprofilefc.mellofattura.com.
- Cliente
- Low Profile FC
- Ano
- Serviço
- Desenvolvimento Web, Motion Design, Experiência de Marca
Visão geral
Onde só jogam animais
Processo
Como a gente entregou
Marca e estrutura
História da temporada em página única: hero → elenco → jogos → grupo → final. A primeira dobra continua sendo da marca.
Dados e mídia
Elenco e criadores tipados. Imagens e vídeo no Vercel Blob, com manifesto hasheado fora do git.
Passe de movimento
Motion+ para Ticker, splitText, ScrambleText, AnimateNumber e Cursor. Springs do Motion para abas, foil e final.
Motor de criadores
Rotas estáticas /creators/[slug] com cartas foil holográficas para cada atleta: inclinação, brilho e virada.
Acabamento e publicação
Proteções de movimento reduzido, MotionScore A, no ar em lowprofilefc.mellofattura.com.
Produto
O site, quadro a quadro
Hero
Criador foil
Elenco · vídeo
Abas do elenco
Final de rolagem
Stack e prova
Movimento onde ele se justifica
Geradas no build, incluindo as rotas de criador
/creators/[slug] com inclinação, brilho e virada
A
Auditoria oficial do Motion+ depois do passe de animação
lowprofilefc.mellofattura.com
Tecnologias
- Next.js 16
- React 19
- Motion
- Motion+
- Tailwind 4
- Headless UI
- TypeScript
- Vercel Blob
O Motion+ move o ticker do slogan, as revelações de seção e os odômetros numéricos. O Motion cuida das abas de elenco com layoutId, das springs do foil e do final controlado por rolagem, com proteções explícitas de movimento reduzido no parallax e nos loops.