Demo públicaReact + TypeScript + Three.js
Abrir experiência WebGL entra como progressive enhancement sem se tornar obrigatório para acessar o conteúdo.
PortfólioProjeto demonstrativo
Projeto demonstrativo · Front-end · WebGL · UX
Dine 3D
O que este experimento demonstra
Case de front-end que combina SSR, interação WebGL, cardápio orientado por dados e validação de reserva em uma experiência gastronômica demonstrativa.
Experiência digital demonstrativa para restaurante contemporâneo, com prato 3D interativo, cardápio orientado por dados e fluxo de reserva validado localmente.
TanStack StartReact 19TypeScriptThree.jsTailwind CSS 4ZodBunWebGL
3DProfundidade
Superfícies, arquitetura e dados organizados em planos visuais.
4DProcesso
Fluxos mostram a sequência entre entrada, decisão, execução e resultado.
5DContexto
Seção ativa, foco e interação reforçam a informação relevante sem mover o layout.
Experimento em ação
Uma experiência gastronômica 3D construída para ser avaliada de verdade.
A demo mostra a superfície implementada e o case explica as decisões de SSR, WebGL, validação, acessibilidade e performance por trás dela.
Galeria implementada
Os 10 pratos que fazem parte da experiência.
Imagens reais usadas no projeto demonstrativo. A coleção visual sustenta a galeria em profundidade sem representar um restaurante ou cardápio comercial real.
01
02
03
04
05
06
07
08
09
10SSR entrega conteúdo e imagem; Three.js entra apenas no cliente.
Movimento reduzido, pixel ratio limitado e descarte de recursos WebGL.
Zod valida regras localmente sem enviar ou persistir dados pessoais.
Contexto e abordagem
O problema que orientou as decisões e a abordagem implementada.
A arquitetura e os fluxos apresentados neste case partem deste contexto e das restrições reais do produto.
Desafio
Adicionar uma camada visual 3D a uma experiência comercial sem comprometer SSR, acessibilidade, movimento reduzido, responsividade ou manutenção. Ao mesmo tempo, o projeto precisava deixar claro que cardápio, restaurante e reserva são demonstrativos e que nenhum dado pessoal é realmente enviado.
Abordagem
A rota mantém conteúdo e navegação disponíveis desde o HTML, enquanto o prato 3D é carregado apenas no cliente com fallback fotográfico. O cardápio foi separado da interface em uma estrutura tipada, e a reserva usa regras puras com Zod para validar nome, data, horário, ocupação e telefone antes de apresentar uma confirmação local.
Responsabilidade
O que esteve sob minha responsabilidade.
Escopo real de atuação no projeto, separado de funcionalidades ou decisões que pertencem a fornecedores e sistemas externos.
Projetar uma experiência 3D que funcione como progressive enhancement e não como pré-requisito para acessar o conteúdo.
Integrar Three.js ao ciclo de vida React com import dinâmico, resize responsivo e descarte explícito de recursos WebGL.
Separar dados do cardápio da composição visual para reduzir acoplamento e preparar uma futura origem por CMS ou API.
Criar regras de reserva independentes da interface e validar entradas com Zod sem simular persistência ou confirmação real.
Tratar movimento reduzido, navegação responsiva, labels de formulário e fallback visual como parte da implementação.
Documentar arquitetura, decisões e trade-offs para que o projeto possa ser avaliado como case técnico.
Implementação técnica
Evidências técnicas do projeto.
Tecnologias e estruturas descritas a partir do código, da configuração e da documentação dos projetos — não por barras subjetivas de habilidade.
3D
Three.js · WebGL
Cena com câmera, renderer, fotografia 1:1, anéis, partículas e estados conectados a um vetor de profundidade compartilhado entre DOM e WebGL.
Profundidade
10 layers · pointer · sensor
Dez camadas CSS independentes, plate transform e atmosfera WebGL respondem em profundidades diferentes ao cursor ou ao movimento do dispositivo.
Performance
Adaptive DPR · 30 FPS mobile
Coarse-pointer reduz DPR, partículas e segmentos; IntersectionObserver evita renderização contínua fora do viewport.
SSR
ClientOnly · fallback
WebGL fica restrito ao navegador e a experiência mantém imagem estática enquanto a camada 3D não está disponível.
Validação
Zod · regras puras
Nome, data, horário, ocupação e telefone são validados fora do JSX antes da confirmação demonstrativa.
Acessibilidade
Reduced motion · semântica
Movimento reduzido desativa o loop contínuo e formulários/navegação preservam labels e estados acessíveis.
Qualidade
Typecheck · lint · tests · build
O projeto inclui scripts explícitos para validação estática, testes de regras e build de produção.
Fluxos principais
Como o sistema funciona na prática.
Cada fluxo é mostrado junto de uma representação visual do produto, para que arquitetura e comportamento sejam compreendidos sem depender apenas de documentação textual.
01SSR→
02imagem fallback→
03ClientOnly→
04Three.js→
05interação
3D como progressive enhancement
Fluxo 01
3D como progressive enhancement
SSR → imagem fallback → ClientOnly → Three.js → interação
O conteúdo principal chega sem depender de WebGL. No navegador, o componente carrega Three.js e substitui progressivamente a representação estática por uma superfície interativa.
SSRimagem fallbackClientOnlyThree.jsinteração
01Dados tipados→
02categoria ativa→
03composição React→
04preço formatado
Cardápio orientado por dados
Fluxo 02
Cardápio orientado por dados
Dados tipados → categoria ativa → composição React → preço formatado
Itens e categorias ficam fora do JSX da rota, permitindo manutenção do conteúdo sem misturar estrutura de interface e dados gastronômicos.
Dados tipadoscategoria ativacomposição Reactpreço formatado
01Formulário→
02Zod→
03regras de data/ocupação→
04confirmação local
Reserva demonstrativa
Fluxo 03
Reserva demonstrativa
Formulário → Zod → regras de data/ocupação → confirmação local
A interface valida a intenção de reserva e comunica o resultado sem enviar nome, telefone ou qualquer outro dado para um servidor.
FormulárioZodregras de data/ocupaçãoconfirmação local
Arquitetura do trabalho
Em vez de uma lista isolada, as decisões estruturais aparecem intercaladas com imagens e representações do sistema.
A01TanStack Start, React 19 e TypeScript estruturam a aplicação e a rota principal
A02Three
A01
TanStack Start, React 19 e TypeScript estruturam a aplicação e a rota principal.
A02
Three.js é importado dinamicamente e executado somente no cliente dentro de ClientOnly.
A03A experiência 3D usa PerspectiveCamera e WebGLRenderer para apresentar a fotografia original integralmente em um plano 1:1, conectada a 10 camadas CSS de profundidade com amplitudes independentes
A04src/hooks/use-depth-motion
A03
A experiência 3D usa PerspectiveCamera e WebGLRenderer para apresentar a fotografia original integralmente em um plano 1:1, conectada a 10 camadas CSS de profundidade com amplitudes independentes.
A04
src/hooks/use-depth-motion.ts centraliza parallax por ponteiro e Device Orientation, escreve CSS variables diretamente no hero e evita rerender da rota a cada frame.
A05HeroDepthLayers mantém 10 superfícies compositor-friendly
A06No mobile, o canvas é passivo para toque, o scroll vertical tem prioridade e a cena reduz DPR, partículas, segmentos geométricos e taxa de renderização
A05
HeroDepthLayers mantém 10 superfícies compositor-friendly; o prato e a atmosfera Three.js recebem o mesmo vetor por ref.
A06
No mobile, o canvas é passivo para toque, o scroll vertical tem prioridade e a cena reduz DPR, partículas, segmentos geométricos e taxa de renderização.
A07src/data/menu
A08src/lib/reservation
A07
src/data/menu.ts mantém o cardápio como estrutura tipada independente da interface.
A08
src/lib/reservation.ts concentra regras puras de validação com Zod; ReservationForm traduz o resultado para UX.
A09Bun executa testes das regras de reserva
A09
Bun executa testes das regras de reserva; typecheck, lint e build completam o fluxo local de qualidade.
Dados, segurança e integridade
Regras que impedem o sistema de depender apenas da interface para manter isolamento, confiabilidade ou publicação correta dos dados.
O formulário é deliberadamente local: nenhum nome, telefone ou pedido de reserva é enviado ou persistido.
Restaurante, cardápio, horários e preços são dados fictícios e estão identificados como demonstração.
O projeto não contém credenciais, endpoint de reservas real ou integração administrativa.
A confirmação da interface representa apenas uma validação local e não uma reserva efetivada.
Validação e entrega
O que é verificado antes de tratar uma alteração como pronta para integração, publicação ou produção.
TypeScript em modo strict valida contratos e estado da aplicação.
Testes Bun cobrem reserva válida, data passada, horário fora da janela e ocupação inválida.
ESLint e build de produção fazem parte do comando agregado de check.
O componente Three.js limita pixel ratio, reduz custo em coarse-pointer e libera geometria, materiais, textura, renderer e contexto WebGL no unmount.
IntersectionObserver evita renderização contínua quando a cena sai do viewport.
No mobile, canvas e host WebGL permanecem passivos para toque e preservam touch-action: pan-y para não bloquear a rolagem.
prefers-reduced-motion neutraliza parallax, impede sensor e reduz animações para usuários que solicitam menos movimento.
Decisões de produto e engenharia
Decisões que mudam comportamento, risco operacional ou capacidade de evolução — e não apenas preferências de estilo de código.
D1
Usar Three.js como camada progressiva em vez de renderizar WebGL como requisito para a página.
D2
Preservar a fotografia original como plano 1:1 em vez de recortá-la dentro de outro prato 3D; profundidade física real exigiria um asset 3D próprio, como GLTF ou fotogrametria.
D3
Separar cardápio em dados tipados para permitir futura troca por CMS/API sem reescrever a composição principal.
D4
Manter a reserva local e explicitamente demonstrativa em vez de criar um backend fictício apenas para aparentar completude.
Trade-offs
O benefício de uma decisão técnica sempre vem acompanhado de custo, restrição ou dependência. Estes são os compromissos mais importantes.
T1
A fotografia em plano preserva integralmente o material visual e mantém a interação leve, mas não pretende reproduzir profundidade física como um modelo fotogramétrico.
T2
O import dinâmico diminui o impacto do Three.js no caminho inicial, mas a primeira ativação da experiência 3D depende do carregamento do chunk no cliente.
T3
Não persistir reservas limita a demonstração comercial, porém evita representar um fluxo operacional que o case não implementa.
T4
O projeto prioriza uma única experiência visual forte; uma produção real exigiria otimização específica para catálogo maior de modelos e dispositivos.
O que este trabalho demonstra
Competências demonstradas pelas decisões, implementação e validação apresentadas neste case.
Demonstra integração de WebGL e Three.js dentro de uma aplicação React com SSR sem acoplar a renderização do servidor ao contexto gráfico.
Transforma fallback, movimento reduzido, descarte de recursos e responsividade em decisões explícitas da experiência 3D.
Separa dados, validação e apresentação em módulos avaliáveis individualmente.
Oferece uma demonstração pública navegável sem fingir que existe restaurante, disponibilidade ou backend de reservas reais.
Projeto demonstrativo criado para avaliação técnica. Restaurante, cardápio, horários, preços e reserva são fictícios; nenhum dado do formulário é enviado ou armazenado.