Home

Burger House — Wiki

🇬🇧 English first · 🇪🇸 Español más abajo.

Welcome to the technical documentation of Burger House, a 3D demo website for an artisan burger restaurant.

🔗 Live demo: https://burger-house-3d.web.app

Index

• Arquitectura — component structure and data flow
• Modelos-3D — how GLB models are loaded, cloned and normalized
• Animaciones — GSAP + ScrollTrigger system
• Decisiones-tecnicas — bugs found and how they were solved
• Guia-de-desarrollo — how to add a dish, swap a model or deploy

Project summary

Type	Restaurant landing page (portfolio demo)
Stack	React 19 · Vite · Three.js (R3F) · GSAP · Tailwind v4
3D	Real GLB models from Sketchfab
Hosting	Firebase Hosting (Spark, free)
Status	In production

Site sections

1. Hero — full-screen photo with Ken Burns zoom and animated text.
2. Story (About) — editorial text + 3D model + animated counters.
3. Menu — cards with interactive 3D models of each burger.
4. Contact — venue details + photo with 3D tilt effect.

Between sections there are looping text bands (marquees) reinforcing the "fire / artisan" theme.

---

---

🇪🇸 Versión en español

Bienvenido a la documentación técnica de Burger House, un sitio web 3D de demostración para un restaurante de hamburguesas artesanas.

🔗 Demo en vivo: https://burger-house-3d.web.app

Índice

• Arquitectura — estructura de componentes y flujo de datos
• Modelos-3D — cómo se cargan, clonan y normalizan los GLB
• Animaciones — sistema GSAP + ScrollTrigger
• Decisiones-tecnicas — bugs encontrados y cómo se resolvieron
• Guia-de-desarrollo — cómo añadir un plato, cambiar un modelo o desplegar

Resumen del proyecto

Tipo	Landing page de restaurante (demo de portafolio)
Stack	React 19 · Vite · Three.js (R3F) · GSAP · Tailwind v4
3D	Modelos GLB reales de Sketchfab
Hosting	Firebase Hosting (Spark, gratuito)
Estado	En producción

Secciones del sitio

1. Hero — foto a pantalla completa con zoom Ken Burns y texto animado.
2. Historia (About) — texto editorial + modelo 3D + contadores animados.
3. Carta (Menu) — tarjetas con modelos 3D interactivos de cada hamburguesa.
4. Contacto — datos del local + foto con efecto tilt 3D.

Entre secciones hay bandas de texto (marquees) en bucle que refuerzan el tema "fuego / artesanal".