0000 · 0000
Dappasol / Work / Streets of Punk

Streets of Punk. One scroll, one film.

A sports videographer sells motion. His site was a page. So we built a page that plays.

1
Pinned canvas
The whole site renders through a single WebGL scene. No stacked sections.
60fps
Frame-rate target
The scroll is tuned to hold frame rate on real phones, not just a MacBook.
Weeks
Concept to live
Shipped in weeks, not a quarter. Film pipeline included.

The engagement. Design and build of a cinematic portfolio site for sports videographer and community builder Jatin "Juice" Kumar. Everything custom: the film pipeline, the type, the grade, the audio. Live at streetsofpunk.com.

ClientJatin "Juice" Kumar
SectorSports videography
TypeCinematic scroll-film site
StatusLive

streetsofpunk.com · actual scroll capture, not a mockup

The storyCASE 01
(01) The problem

His films moved. His site didn't.

Clients hire Juice for how his films feel: fast, raw, close to the game. A portfolio grid of thumbnails flattens all of that into a wall of rectangles. Every template he could buy looked like every other videographer's template, and none of them carried the one thing he actually sells.

The brief reduced to a single line: the site has to feel like the work.

(02) What we built

One canvas. The page is the film.

Instead of stacked sections, the whole site is a single pinned WebGL canvas. As you scroll, it scrubs through frame sequences of his 3D world that cross-dissolve into each other, graded by a post-process shader so every frame sits in the same palette. Type animates in word by word. There's a cold open. His real match footage is woven into the sequence, so the 3D and the camera work read as one edit.

Mobile got treated as a performance problem, not a layout problem: smaller frame budgets, tuned sequence sizes, and a scroll that stays smooth on a mid-range phone.

(03) The outcome

A portfolio that works like a showreel.

The site reads as one continuous film from cold open to contact. One canvas, a 60fps scroll target, shipped in weeks. Those are the claims we can measure, so those are the claims we make.

The rest you can judge yourself: it's live, and it looks like nothing else in his feed.

StackTOOLS
Streets of Punk · buildRole
Three.js / WebGLSingle pinned scene, frame-sequence scrubRender
GSAP ScrollTriggerScroll drives the film timelineMotion
Frame-sequence pipelineffmpeg extraction, per-device budgetsFilm
Post-process grade shaderOne palette across 3D and real footageGrade
Vite + static hostingFast loads, no server to babysitShip

How this applies to you

If your work is visual and your website is a template, the gap between the two is costing you jobs. A cinematic build is not decoration: it is the proof, playing, before you ever get on a call.

This is our Cinematic / 3D Flagship lane, from $3,000. Start with the Week-1 Build Audit at $500 flat, credited against the build. Every blocker found or it is free.

Next case
Nugget Nation

Your project next

Let's ship yours.