MORDIDA! — Smash House
Design que desperta o apetite. Interações que fazem a diferença.
O MORDIDA! foi criado como uma demonstração de experiência digital para o setor gastronômico. A proposta combina uma identidade visual vibrante, animações expressivas e funcionalidades interativas, explorando como design e desenvolvimento podem trabalhar juntos para tornar um website mais envolvente.
Visualizar site
O conceito.
Uma hamburgueria fictícia com personalidade própria, construída em torno de uma experiência visual marcante. A identidade explora cores fortes, fotografias gastronômicas, tipografia expressiva e movimento.
Objetivo do projeto
Demonstrar como um site comercial pode unir uma identidade visual forte a funcionalidades que tornam a experiência do usuário mais interessante e intuitiva.
Marca, produtos e preços são fictícios. As imagens gastronômicas foram geradas por IA para o projeto e não representam produtos ou um restaurante real.
Do primeiro olhar ao pedido simulado.
- Hero com profundidade
- Burger central, ingredientes em movimento e uma entrada coordenada. No desktop, a composição também reage discretamente ao mouse e à rolagem.
- Cardápio para explorar
- Produtos organizados em categorias, filtros e informações de ingredientes. O visitante pode abrir cada item e conhecer sua composição.
- Produtos do seu jeito
- Escolha de adicionais, remoção dos ingredientes permitidos e ajuste de quantidade, com atualização do valor antes de adicionar ao carrinho.
- Carrinho demonstrativo
- Gerenciamento de itens, configurações e totais. As escolhas ficam salvas no navegador e podem ser retomadas ao recarregar a página.
Uma finalização para experimentar
O fluxo permite escolher retirada ou entrega, conferir os itens e copiar um resumo do pedido. A experiência é demonstrativa: nenhum pedido real é realizado e não há cobrança ou processamento de pagamento.
Uma experiência em diferentes telas.
Capturas reais do hero, cardápio, versão mobile e carrinho na demonstração publicada.
MORDIDA! — hero no desktop
Captura real do site publicado: burger central, tipografia expressiva e ingredientes em diferentes planos. A cena foi pausada pelo controle disponível no próprio site.
Design e desenvolvimento juntos.
Next.js, React e TypeScript estruturam a interface. Tailwind CSS e estilos autorais compõem o layout, enquanto GSAP e ScrollTrigger coordenam o movimento.
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
O carrinho usa Context API, reducer e localStorage. O layout é responsivo, oferece navegação por teclado e respeita a preferência por movimento reduzido. O site está publicado na Vercel.
Seu negócio pode ter uma experiência assim.
Desenvolvo sites personalizados para apresentar sua marca, destacar seus serviços e facilitar o contato com seus clientes.