Shopping Vila Bella
Landing page de um shopping fictício — exercício deliberado de movimento, hierarquia e layout responsivo.
- Ano
- 2025
- Função
- Sozinho — design e desenvolvimento
- Stack
- React
- TypeScript
- Vite
- Tailwind
- Framer Motion

Por que um cliente fictício
A maior parte do meu trabalho é sistema em que a interface existe para sair da frente — intranet, painel administrativo, lista. Esses são os instintos certos para ferramenta interna e os instintos errados para qualquer coisa que precise vender.
Então me dei o briefing oposto: uma landing page comercial de um shopping que não existe, onde o trabalho inteiro é persuasão visual e nada se esconde atrás de “é ferramenta interna”.
No que foquei
Movimento com propósito. Os elementos animam ao entrar na viewport, usando intersection observer para nada rodar fora da tela. A regra que segurei foi que toda animação precisava dirigir atenção para alguma coisa — movimento decorativo foi cortado.
Hierarquia acima de decoração. Uma landing page de shopping tem muita coisa para dizer ao mesmo tempo: lojas, horários, localização, eventos. O trabalho foi decidir o que quem chega pela primeira vez precisa nos três primeiros segundos e fazer todo o resto esperar a vez.
Responsivo como ponto de partida. Tráfego de varejo é esmagadoramente mobile. O layout estreito foi o primeiro que desenhei, não o que espremi depois.
O que tirei disso
Framer Motion torna muito fácil animar demais. A versão que foi para o ar tem visivelmente menos movimento que a primeira que construí, e ficou melhor por isso — contenção acabou sendo a habilidade de fato treinada.