Build Log: One Pinned Canvas, a Whole Film. How We Built streetsofpunk.com

I am Ishan, I run DappaSol, and this is the build log for streetsofpunk.com, the site we built for Jatin “Juice” Kumar, a sports videographer and community builder. His brief, condensed: more than a videographer, and nothing that looks like a template. We decided the whole page should read as one continuous film. This is what that actually took.

The architecture decision

A normal site scrolls sections past you. A scroll film pins one WebGL canvas to the viewport for the entire page and maps scroll position to playback: your thumb is the scrub bar. Everything else, the kinetic text, the section beats, the woven-in real footage, hangs off that one timeline.

The pipeline: take the footage, extract JPEG frame sequences with ffmpeg, load them as textures, and cross-dissolve between sequences as scroll progresses. A post-process shader does the colour grade so every sequence, shot in different light, reads as one film. Text animates per word, tied to the same scroll position, so type and film move as one thing.

The cold open matters more than any single effect. The first viewport plays before you understand the interface, like a film starting before the title card. That is the moment the site stops feeling like a website.

The trap that ate a day: contain-fit letterboxing

First integration pass, the frames rendered with contain fit, the “safe” choice that never crops. On any viewport whose aspect ratio did not match the footage, that painted letterbox bars, and on a full-bleed cinematic page black bars read as a bug, because they are.

The fix is cover-fit crop math in the draw call: scale the texture to fill the viewport, crop the overflow, and keep the composition’s focal area safe. Obvious in hindsight. The lesson generalises: on a cinematic build, every default that protects content integrity trades against the one thing you are selling, which is the frame filling the screen.

Mobile is a performance problem wearing a layout costume

Every review note said “not mobile friendly”. The layout was fine. What was actually broken was performance: a phone GPU asked to push full-resolution frames through a post-process shader at a 3x device pixel ratio will stutter, and a stuttering film is worse than no film.

What fixed it, in order of impact: cap the device pixel ratio, serve lower-resolution frame sequences to small viewports, and keep the shader work inside a budget. None of it is visible in a screenshot, all of it is visible in your hand. We now treat “mobile friendly” on cinematic builds as a frame-rate number, not a breakpoint checklist.

You cannot screenshot a WebGL page to verify it

Our verification habit is automated screenshots. On this build they came back black: headless captures and pinned WebGL canvases do not get along. The answer was to verify by reading state instead of pixels, evaluating in-page: is the canvas mounted, are textures loaded, what frame is the scrubber on at scroll position X. Pixels lie under automation; state does not.

Two more traps for completeness, both at the boring end: deploying under a base path 404’d every asset until paths were made base-aware, and favicon plus OG images were nearly forgotten because no one scrolls a film and thinks about meta tags. The most cinematic site we had shipped almost went out with a default favicon.

What this means if you want one

The full anatomy is in what is a scroll-driven 3D website and the honest pricing in what a 3D scroll website costs. The build itself is the Cinematic/3D Flagship, from $3,000 fixed, and you can judge the result yourself: scroll the live site on your phone, because that is the hard mode. If it should be your site next, book a 15-minute intro call.