La Bombonera

A six-chapter cinematic walk from the streets of La Boca into the stands, rendered live in WebGL. Editorial typography over a continuous 3D camera path — an art book that happens to be a real-time scene.

View it live · View the source · Built by Juan Zamora

What it does

• Moves a single WebGL camera along one continuous path as the page scrolls. Six named chapters over eight camera anchors, no cuts, no scene swaps — each is a composed shot on the same path. The barrio and the túnel are anchors you pass through rather than chapters that announce themselves.
• Builds the whole world procedurally: corrugated tin houses, laundry lines strung over the street, a concrete tunnel, a bowl with near-vertical tiers, a flat wall of lit boxes, floodlight towers, and the glow they throw into the night air above the ground.
• Renders its own post-processing at runtime — bright-pass, separable bloom, a filmic tone curve, film grain, vignette and a touch of chromatic aberration, all hand-written as fullscreen passes.
• Layers editorial cards over the live scene whose images are offscreen renders of the same world, plus foreground cutouts painted to canvas with real alpha — chainlink, concrete steps, flags, drums, smoke.
• Keeps working without any of it: reduced motion, no WebGL, a lost GPU context, or the module failing to load at all still leave the complete page readable. Two of those are tested rather than asserted. Killing the context with WEBGL_lose_context leaves the readable text byte-identical, the chapter menu and the language toggle both still working, and the scene comes back when the context is restored. A failed vendor fetch is the other, and it is a real failure mode rather than a hypothetical: the reveal animation hides every paragraph until script reveals it, so without a failsafe it would leave a blank scroll.

Every surface is drawn at runtime

No texture files, no photographic source material. Every surface in the scene is computed in the browser at load:

Surface	How
Corrugated tin	Sine-ribbed shading with rust bleeding from the seams, drawn into an ImageData buffer
Concrete	Layered value noise with formwork joins and aggregate speckle
Pitch	Mown stripes, wear noise, chalk lines drawn with Canvas2D
Chainlink	One diamond lattice tile, reused by the 3D fence and the foreground layers
Editorial plates	The live scene, re-rendered offscreen through the post chain at eight authored framings
Foreground cutouts	Canvas2D silhouettes with real alpha, painted once at boot

The crowd bounce and the falling confetti run in the vertex stage — the beat is a uniform, not a CPU loop.

The one image in the repository is assets/og-preview.jpg, the social card that link previews need. It is composited from the live scene, not sourced.

How it is made

index.html holds everything: document structure, CSS, scene construction, scroll choreography, and interaction logic. A vendored Three.js r185 ESM build provides the renderer. There is no framework, no bundler, no package manager, and no build step.

Scroll position maps to a chapter-anchored t value rather than raw pixels, so every chapter lands on its exact framing regardless of how tall the sections end up. The camera interpolates along a Catmull-Rom path with critical damping, and picks up a deliberate tremor in the stands chapter that fades out either side of it.

Run locally

python3 -m http.server 4173

Then open http://127.0.0.1:4173/.

No environment variables, no analytics, no runtime network requests. Python only serves the files — any static server works.

Project structure

la-bombonera/
├── index.html          everything: markup, CSS, scene, choreography
├── PRODUCT.md          who it is for and what it is
├── ASSETS.md           artwork specs, for art that has not landed yet
├── HANDSHAKE.md        the idea in plain words
├── PROMPT.md           the brief it was built from
├── README.md
├── LICENSE
├── vercel.json         clean URLs, and a year of immutable caching on vendor
└── assets/
    ├── og-preview.jpg  the social card, composited from the live scene
    └── vendor/
        ├── three.module.min.js
        ├── three.core.min.js
        ├── THREE-LICENSE
        └── fonts/      Archivo and Piazzolla, variable Latin subsets

Legend cards

The legends chapter renders from a single LEGENDS array in index.html. Every value in it is a placeholder — no real player, no real appearance count, no real goal tally. Fill it in from a source you trust; career figures are exactly the kind of detail that is easy to get confidently wrong.

To add card art, give an entry an art path and it replaces the placeholder panel on the front:

{ no: '10', name: '...', art: './assets/legends/whoever.webp', position: '...', years: '...', apps: '...', goals: '...', note: '...' }

Cards flip on hover, on keyboard focus, and on click, so they work on touch and with a keyboard rather than hover alone.

Swapping in your own emblems

The badge chapter ships with original emblems invented for this page — shield outlines, rings, stars and bars, drawn procedurally from the shared vocabulary of football crests. No real club crest is drawn anywhere in this project.

They are placeholders by design. To hang your own artwork instead, replace an entry in the EMBLEMS array in index.html with { src: './assets/emblems/your-file.webp' } and load it as a texture.

The same applies to the shirts: they carry a colour and a band and nothing else. No sponsor, no manufacturer mark, no crest.

Design and attribution

An independent, unofficial tribute to Boca Juniors and the barrio of La Boca, and to the format of MengTo's Kage — a five-chapter Three.js night walk. The code here is original and shares none of Kage's source.

Not affiliated with, endorsed by, or licensed by the club. No crest, badge, sponsor mark or kit design appears anywhere in the project; every emblem and shirt in it was invented for this page. The twelve players named in the legends chapter are real, and their career figures are matters of public record — see the source note above the LEGENDS array in index.html, and verify before relying on them.

Vendored Three.js r185 keeps its MIT notice. The type is Argentine: Archivo by Omnibus-Type of Buenos Aires and Piazzolla by Huerta Tipográfica, named for Ástor Piazzolla. Both are used under the SIL Open Font License 1.1, self-hosted as variable Latin subsets with the license text included.

License

MIT — see LICENSE. The vendored Three.js runtime and the fonts remain under their own licenses.