Interactive Film / WebGL / Marathi

Small bite.
Big story.

वडापाव — मुंबईचा अस्सल बॉम्ब is an eleven-scene scroll film about a ten-rupee snack: a real-time 3D stage with generated footage behind it, a Marathi narration track, and a cut that was reordered twice because the obvious running order buried the people and made the gold stop meaning anything.

RoleConcept, Story Edit, Art Direction & Front-End
Timeline2026
CategoryInteractive Film / Cultural Storytelling
TypeReact · Three.js / R3F · GSAP · Lenis · Web Audio
वडापाव — the closing shot, every layer suspended mid-air
11
Scenes
3,380
Viewport-Heights of Scroll
10
Marathi Narration Tracks
₹10
The Subject

The problem
Food films sell the product. A vada pav is not a product — it is the reason five strangers with nothing else in common are all holding the same thing at five different hours of the day.
The approach
Build it as a film, in Marathi, with a real running order — then re-cut that order twice when the first version buried the human faces at eighty percent and ran four warm food scenes back to back.
The outcome
Eleven scenes the reader scrubs at their own pace, ending on the explosion clip played backwards so the scattered pieces gather themselves back into one vada pav.
1966
Dadar Station, where it starts
5
People, five clocks
2
Cool scenes among eleven
22
Audio stems: beds, SFX, voice

01 — The Premise

A ten-rupee snack,
shot like it matters.

Vada pav gets written about in two registers: nostalgia, or nutrition. Neither is how anyone actually meets it — which is standing up, in a hurry, usually in the rain, from a stall that has been there longer than you have. The film sets out to give a street snack the grammar normally reserved for a luxury product, without the irony that usually comes attached when someone does that.

It is written in Marathi first — not translated into it. The prologue is a two-line exchange between strangers: someone shouts an order in from the street, the stall shouts back that it is coming. That exchange only works in the language it happens in, and it set the rule for everything after it.

01
Two voices read as one
Set identically, the shouted order and the stall's reply read as two unrelated fragments — and हाक आली. landed as a non sequitur. It needed three separations at once, not one.
02
Everything was gold
Nine of eleven scenes graded warm. Run four deep, amber stops reading as heat and starts reading as a filter. The palette had to be rationed.
03
The faces arrived too late
In the obvious order, the only human beings in the piece showed up eighth of eleven — the emotional core landing at eighty percent, behind seven scenes of product photography.
04
The ending repeated itself
The finale was a second detonation, and the pav already blows apart in scene 05. Spending the same gesture twice left the ending with nothing to give.

02 — The Cut

Eleven scenes,
in the order that works.

Every scene owns a slice of the scroll measured in viewport-heights, and its typography beats are placed on that scene's own local progress — so re-timing a line never touches a line of 3D code. The running order lives in one array, which is what made re-cutting the film a one-line change rather than a six-hundred-line copy-paste.

00भूकPrologue. Opens in the dark on a held-down city clip; the order is shouted, the stall answers.Held dim
01मुंबईThe running city — rushing city, rushing people, rushing life.Cool
02सगळ्यांच्या हातातFive people, five hours, one photograph sliced and revealed left to right.Warm
03नायकाची एंट्रीThe hero shot. The pav turns, scrubbed, and hands over still whole.Warm
04विस्फोटThe same take continues and detonates. धडाम!Warm
05वड्याचा आत्माNo clip. Plays on black so the cut-out ingredients read as a diagram.Black
06चटणीचा तडकाA three-panel triptych; each chutney arrives over the panel it belongs to.Warm
07तो पहिला घासNo narration — this scene is about a sound. The crust cracks at the reader's pace.Warm
08मुंबईच्या रस्त्यावरून1966, Dadar Station. Mill workers wanted cheap, filling, and eaten walking.Cool
09भावनाOne slow push on a single vada pav. Breakfast, lunch, timepass — and memory.Warm
10मुंबईचा वडा पावThe detonation played backwards: everything scattered gathers back into one.Warm

Frames from the film

मुंबई — the city at night in the rain

मुंबई

Graded cold on purpose, so the food that follows reads as heat.

सगळ्यांच्या हातात — five people holding vada pav

सगळ्यांच्या हातात

One photograph, sliced per person and revealed left to right as you scroll.

विस्फोट — every layer suspended in air

विस्फोट

The burst lands at a frame found by eye, not by scene detection.

चटणीचा तडका — the three chutneys

चटणीचा तडका

A triptych, so all three chutneys are on screen together by the end.

तो पहिला घास — the crust shattering

तो पहिला घास

Re-encoded all-keyframe so the crack can be scrubbed frame by frame.

मुंबईच्या रस्त्यावरून — a tapri in the rain

मुंबईच्या रस्त्यावरून

The second cold scene, placed to break a long warm run in the middle.


03 — The Story Edit

The first order was
chronological. It didn't work.

Two moves away from the obvious sequence carry most of the film's improvement, and neither is a visual change. This is the part of the work that looks like nothing in a screenshot.

Move 01
The people move to third
Was
Eighth of eleven. The only human faces in the piece sat behind seven scenes of product photography.
Now
Meet the city, then its people, then ask what they are all eating. The food arrives as an answer to a question the reader is already holding.
Emotional core at 20% instead of 80%. Nothing about the scene changed — only where it sits.
Move 02
The street comes after the bite
Was
Origin story before the food, which ran four and five warm scenes back to back — over a thousand viewport-heights with no landmark.
Now
Two breaks are spaced through the run instead: आत्मा, which plays on black, and रस्ता, graded cold. No more than two food scenes sit adjacent.
It reads better as story too — you taste it, you hear it, and only then are you told where it came from, which is the turn into भावना.
Move 03
The finale runs backwards
Was
A second detonation, spending the same gesture the film already spent in scene 05.
Now
The same frames, counted down instead of up. Everything hanging in the air gathers itself back into one vada pav.
Free, because the scene is scrubbed anyway — reversing is a range that counts backwards. The same footage means the opposite thing.

04 — Craft

Where the detail
actually went.

Five people, five clocks

The crowd scene is one photograph, sliced per figure and revealed left to right. Each person carries an hour and a reason — which is the entire argument of the film compressed into five lines.

पहाटे ६:००
गिरणी कामगार
शिफ्ट सुरू होण्याआधी.
Mill worker, 6:00 am — before the shift starts.
सकाळी ९:१२
ऑफिसची धावपळ
लिफ्टच्या रांगेत उभं राहून.
The office rush, 9:12 am — standing in the lift queue.
दुपारी ३:४०
कॉलेजचा कट्टा
दहा रुपयांत पोट भरतं.
The college hangout, 3:40 pm — ten rupees fills you up.
संध्याकाळी ७:३०
डिलिव्हरी रायडर
दुसऱ्यांचं जेवण पोहोचवताना.
Delivery rider, 7:30 pm — while delivering other people's dinner.
रात्री ११:०५
टॅक्सी ड्रायव्हर
सिग्नल सुटेपर्यंत.
Taxi driver, 11:05 pm — until the signal turns.

The soul, on black

वड्याचा आत्मा is the only scene with no footage at all. Cut-outs arrive one at a time against pure black so they read as a diagram rather than competing with a video — and the scroll stops on every reveal, not only on the typography beats.

बटाटा potato मोहरी mustard कढीपत्ता curry leaf हळद turmeric लसूण garlic मिरची chilli कोथिंबीर coriander

Finding the bang by looking

The explosion scene is cut to three moments read off a contact sheet: the pav sitting whole in its own steam, the burst, and the aftermath with the pieces separated and hanging. The obvious automation does not find it — ffmpeg's scene detection peaks a full second late, on the frame where the most pixels are moving, because a slow bloom of an explosion never out-scores peak debris. And the beat before the bang is empty on purpose: a bang needs a silence in front of it, or it is just one loud moment among loud moments.


05 — Design System

Gold, rationed.
Chilli, never decorative.

Seven colours carry the whole film, and the discipline is in how little the accents are used. Gold is heat; it appears where there is heat. Chilli red is reserved for the sharp end — the blast, the hot chutney — and never used as a UI colour.

Palette Tokens
Ink#0A0A0B
Gold#E6A52A
Chilli#D92D20
Chutney#4C7A35
Pav#F1D7A4
Bone#EDE7DA
Typography
वडापाव
A Devanagari display face for the title beats, with a variable Devanagari sans running everything else
दुपारी ३:४०
Monospace for the clock lines, so five different times align down the column
Two Voices, Three Separations
The prologue exchange needed all three at once to read: opposite sides of the frame, different colours, and a cue naming where each came from — रस्त्यावरून and टपरीवरून.
Beats on Local Progress
Typography cues are placed against each scene's own 0→1 progress, so re-timing a line is a number change and never touches 3D code.
The Triptych Builds
The three chutney cards hold rather than fade after their turn, so all three are on screen together at the cut — which is the point of a triptych.

06 — Engineering

Real-time stage,
generated backdrop.

The division is deliberate and it holds everywhere: the food, the camera and every interaction are live 3D, and video is only ever scenery — a matte painting fogged in behind the geometry. Nothing the reader can touch depends on a video's playhead.

Scroll
Lenis smooths the input; scenes claim slices of a 3,380vh page. Scrubbed scenes map their slice onto a clip's currentTime; the rest play on their own.
Scrubbing
Clips meant to be scrubbed are re-encoded all-keyframe, so a seek lands on the requested frame instead of the nearest keyframe. तो पहिला घास is unusable without it.
Video plates
Backdrops pause when their scene is not active — decoding video for a scene nobody is looking at is pure waste, and a paused plate would otherwise freeze on whatever frame it stopped on.
Audio
Twenty-two stems: five ambience beds (rain, crowd, room, hush, tapri), five one-shots (sizzle, blast, crunch, gather, whoosh), two UI ticks, and ten Marathi narration tracks — one per scene, with the crunch scene deliberately left without one.
Narration
Voice is opt-in behind कथा ऐका, with its own volume, pause and replay controls, so the film works read silently or listened to.
Stack
React · Three.js via react-three-fiber, drei and postprocessing · GSAP · Lenis · Vite. Shipped as a static folder.

07 — Outcomes

The edit is
the design work.

Almost everything that made this piece better was a reordering, a removal, or a colour taken away — not something added. The strongest version of the film has fewer warm scenes, fewer layer labels, and one fewer explosion than the first cut did.

3rd
Where the Faces Land
Moved up from eighth, putting the human core at 20% instead of 80%.
2 / 11
Cool Scenes
Spaced through the run so no more than two warm scenes sit adjacent.
0
Repeated Gestures
The finale reverses rather than detonating a second time.
1
File Holding the Cut
Scenes, beats and running order in one place — re-cutting is one line.

08 — Key Learnings

What This Project Taught Me

Learning 01
Order is a design decision
Moving one scene from eighth to third changed the piece more than any shader in it. Nothing about the scene changed — only what the reader was holding when they arrived at it.
Learning 02
An accent used everywhere is not an accent
Nine warm scenes out of eleven meant gold stopped signalling heat. Two cold scenes, deliberately spaced, gave the other nine their meaning back.
Learning 03
Automation finds the wrong frame
Scene detection reliably picked peak debris a second after the explosion. Some cuts have to be found by looking at frames, and knowing when to stop trusting the tool is part of the craft.
Learning 04
The same footage can mean the opposite
Reversing the finale cost nothing — the scene was already scrubbed, so the range just counts down. A shot that had nothing left to say became the one that says the most.

Reflection

"The film is about a snack that costs ten rupees, and the whole argument is in one scene: five people who share no language, no shift and no neighbourhood, holding the same thing at five different hours. Everything else — the explosion, the crunch, the chutneys — is there to earn you the right to that scene. Which is why it eventually had to move to third."
— Rupesh Chavan, Concept, Story Edit & Front-End

Explore Projects

See more case studies

Watch the Film All Case Studies तात्या विंचू
वडापाव — film frame