FATIA 12 — Pizza Studio
12 sabores. Uma experiência interativa.
O FATIA 12 é um projeto conceitual desenvolvido para explorar novas possibilidades de interação em websites comerciais. A experiência apresenta uma pizza interativa com 12 sabores diferentes, permitindo ao visitante selecionar uma fatia e visualizar a pizza completa daquele sabor, com ingredientes, preço e recursos de pedido.
Visualizar projeto
Uma nova forma de escolher o sabor.
O FATIA 12 nasceu como uma demonstração de como elementos tridimensionais e interações criativas podem transformar a apresentação de produtos em um website. Em vez de navegar apenas por uma lista convencional, o usuário pode explorar os sabores diretamente em uma pizza interativa.
O conceito
Uma pizzaria fictícia que combina identidade visual contemporânea, gastronomia e tecnologia para apresentar seus produtos de maneira diferente dos cardápios digitais tradicionais.
Marca, estabelecimento e valores são fictícios. As imagens gastronômicas foram geradas por IA para o projeto. As imagens desta apresentação são capturas reais do website publicado.
O desafio.
Criar uma experiência de seleção de sabores que conectasse elementos visuais, animações e funcionalidades de pedido em uma interface intuitiva.
A solução
Uma interface de pizzaria com identidade visual própria, seleção de sabores por fatia e apresentação dinâmica das informações dos produtos. O objetivo é transformar a escolha de um sabor em uma experiência digital visual, interativa e envolvente.
Interação que acompanha a escolha.
- 12 sabores para descobrir
- Cada setor da pizza inicial representa um sabor. A seleção funciona diretamente na cena 3D e também por botões acessíveis pelo teclado.
- Uma transformação por inteiro
- A escolha revela a cobertura do sabor em toda a superfície da pizza, com uma transição em onda. O painel acompanha a mudança com nome, ingredientes e preço.
- Da pizza à caixa virtual
- Ao adicionar ao carrinho, uma sequência animada acomoda a pizza na caixa e fecha a tampa. O item já fica registrado e a animação pode ser pulada.
- Um pedido para experimentar
- O carrinho permite ajustar quantidades, remover itens e escolher borda recheada. Os totais são recalculados e as escolhas ficam salvas no navegador.
Uma simulação de pedido
A composição com 12 sabores funciona como seletor: cada item do carrinho é uma pizza inteira de um único sabor. A finalização permite escolher retirada ou entrega e copiar um resumo. Nenhum pedido real é enviado e não há cobrança ou processamento de pagamento.
A experiência em tela.
Capturas reais da cena 3D, do sabor selecionado, do carrinho e da versão mobile.
FATIA 12 — hero com pizza 3D
Captura real da demonstração publicada, com a pizza dividida em 12 setores, a identidade Pizza Studio e o convite para escolher um sabor.
Interface e cena trabalhando juntas.
Next.js, React e TypeScript estruturam a aplicação. Three.js, React Three Fiber e Drei compõem a cena tridimensional. GSAP e ScrollTrigger coordenam as transformações e animações.
- Next.js
- React
- TypeScript
- Three.js
- React Three Fiber
- GSAP
- Tailwind CSS
Tailwind CSS e estilos autorais definem a interface responsiva. O carrinho usa localStorage e a preferência por movimento reduzido é respeitada. A experiência completa está disponível na demonstração publicada na Vercel.
Seu negócio também pode ter uma experiência assim.
Desenvolvo sites personalizados, desde páginas institucionais até experiências interativas para apresentar produtos e serviços.