As Copas
- ESTUDIO
- MILWEB
- TIPO
- EXPERIENCIA WEBGL
- ESTADO
- EN LÍNEA
02 / LA IDEA
Sitio inmersivo · estadios históricos en 3D (WebGL)
El contenido deportivo en la web es todo igual: listas de texto sin identidad, nada que alguien quiera compartir.
01 / 01
Sin backend ni base de datos: contenido en módulos TypeScript, SSG total incluyendo página propia por estadio.
02 / 02
8 estadios en 3D generados por parámetros (LatheGeometry + BufferGeometry escrita a mano), no modelos importados.
03 / 03
Miles de instancias posicionadas por PRNG con seed fija: mismo resultado en el servidor y en el cliente, cero errores de hidratación.
04 / 04
El render se pausa fuera del viewport y con la pestaña oculta; fallback amigable si WebGL falla.
0102030404 / BAJO EL CAPÓ
01Sitio 100% estático en Next.js (App Router), sin backend y sin base de datos: historia, curiosidades, estadios y figuritas viven en módulos …+
Sitio 100% estático en Next.js (App Router), sin backend y sin base de datos: historia, curiosidades, estadios y figuritas viven en módulos TypeScript tipados dentro de src/data. Eso se convierte en SSG puro, incluyendo páginas dedicadas por estadio (/estadios/[slug]) generadas vía generateStaticParams, cada una con metadata y canonical propios. Es lo que explica la sensación de carga instantánea incluso en 3G: cero round-trips a cualquier API para renderizar contenido.
02El diferencial es un generador procedural de estadios en React Three Fiber. Cada uno de los 8 estadios icónicos se describe con un StadiumPa…+
El diferencial es un generador procedural de estadios en React Three Fiber. Cada uno de los 8 estadios icónicos se describe con un StadiumParams tipado: perfil radial en puntos [radio, altura] revolucionado con LatheGeometry, proporciones sx/sz propias y un "landmark" único, como la torre art déco en el Centenario, el anillo plano en el Maracanã, el arco gigante en Wembley, la corona dorada en Lusail y las láminas de acero en el MetLife. Las gradas escalonadas no son un asset importado: es una BufferGeometry construida a mano, fila por fila, con vertex colors para simular pasillos de sector y escalones alternados. Y la hinchada es un InstancedMesh de miles de esferas posicionadas por un PRNG determinístico (mulberry32, seed por hash del slug), para nunca variar entre servidor y cliente y nunca romper la hidratación.
03La experiencia 3D fue escrita para sobrevivir al mundo real: prueba de contexto WebGL antes de montar el Canvas (con fallback textual y foto…+
La experiencia 3D fue escrita para sobrevivir al mundo real: prueba de contexto WebGL antes de montar el Canvas (con fallback textual y fotos reales si falla), frameloop="never" cuando la tarjeta sale del viewport o la pestaña queda oculta (IntersectionObserver más visibilitychange, ahorrando batería en el celular), pista de grabación que detecta touch y user agent para no indicar "Win+Alt+R" en un iPhone, y un Modo cine con cámara respirando (seno suave en Y) más una marca de agua discreta grabada en la esquina del video. Esta última existe porque el objetivo del sitio es ser compartido, y un clip sin atribución no trae a nadie de vuelta.
04El proyecto nació con una autoauditoría senior de UX, UI, SEO y accesibilidad, corrida sobre el propio código y sobre el HTML servido en pro…+
El proyecto nació con una autoauditoría senior de UX, UI, SEO y accesibilidad, corrida sobre el propio código y sobre el HTML servido en producción (14 dimensiones, contrastes WCAG calculados par a par). Buena parte del roadmap generado ahí ya fue implementada: countdown con estado posfinal, botón de compartir por estadio y por curiosidad, fallback de WebGL, pausa del render fuera de pantalla, páginas individuales por estadio para SEO long-tail y la marca de agua del Modo cine. Es el tipo de disciplina de "proyecto personal tratado como producto" que normalmente solo aparece en trabajo remunerado.
CONSTRUIDO CON — Next.js · TypeScript · Three.js · React Three Fiber · Tailwind · Framer Motion
06 / RESULTADO
THE AGE OF DRAGONS
