Skip to content
The Spark: A Scroll-Driven WebGL Story That Runs Like a Short Film

The Spark: A Scroll-Driven WebGL Story That Runs Like a Short Film

A spark escapes into a city built to contain it. Scroll to push the story forward. cables.gl handles the 3D, Webflow stitches the UI, and the audio reacts to how fast you move. Projection mapping, CRT post-processing, and tight character animation make it feel like a game cutscene.

Details

Published

What it is

The Spark is a scroll-driven short film that runs in your browser. Not a marketing site with some 3D tacked on. An actual story. A spark of creativity escapes into a city that wants it dead, and you push it forward by scrolling. The environment wakes up around you, enforcement robots track the anomaly, and control systems start glitching as the spark spreads.

Built by the team at The Digital Panda, the piece runs on cables.gl with a Webflow frontend stitching everything together. The city itself is mostly projection mapping, which is an old game dev trick for getting parallax and depth without melting your GPU. Textures started as AI generations, then got upscaled and heavily reworked by hand. Text redrawn, nonsense replaced with legible copy, Easter eggs planted. The CRT interlace post-pass does a lot of work tying the aesthetic together while quietly smoothing out aliasing during fast scrolls. The real surprise is the audio: sound responds to your scroll speed, not just position. Stop scrolling and the city breathes. Rip through a scene and it thrashes with you.

The Codrops write-up goes deep on the technical architecture if you want the full breakdown. Otherwise, put on headphones and just scroll through it.

How it’s made

Technology
WebGL
Framework & Tool
cables.glWebflow
Domain
AI/ML