We’re an expertise design companion for manufacturers that love their prospects. We create the digital moments that assist them show it, which frequently means designing the story after which engineering the system that makes it really feel real: visuals, movement, pacing, sound and a real-time performant expertise. The Spark is a kind of inside builds the place we pushed that method all the best way.
It began with a easy concept
We needed a portfolio piece that behaves like a brief movie that occurs to run in a browser, not a scrolling advertising web page with some 3D sprinkled on prime.
So we constructed a narrative a few spark of creativity on the unfastened in a metropolis that’s doing all the things to forestall it from being let out. Scrolling drives the digicam, wakes up characters, and pushes a monitoring system that’s at all times a couple of steps behind. The setting strains to comprise the anomaly, then slowly begins to vary round it.
The Spark is each a small journey and a have a look at how we deal with new concepts inside our personal work.
The place it started
The seed for this mission was planted a couple of years again once we began speaking a few new website. “Cyberpunk” was a recurring dialogue, not as a pores and skin or theme park overlay however as a temper that lined up with what we wish to construct. It related to earlier model experiments with futuristic pandas, outdated console UI, and the rhythm of side-scroller video games.
From there we constructed a storyboard that felt like a whole arc: A spark seems, an automatic system locks onto it, the monitoring stack begins to glitch, and management fractures. The town that begins out chilly and managed steadily opens up and warms. At this stage, we ignored particular instruments and engines on objective and centered on the beats we needed the runtime to assist.
The tip outcome was a story backbone that would survive adjustments in tech. A spark to trace, a system to combat it, and a metropolis that reacts over time. The implementation particulars might transfer beneath that with out breaking the story.
Constructing a world that truly runs
Working in a regular browser and feeling clean on common {hardware} was a non-negotiable. That single constraint drove nearly each technical resolution in order that we had been working collectively on an expertise that doesn’t simply look lovely, but additionally doesn’t soften your GPU.
To create a sturdy and detailed world and not using a wall of geometry, we leaned on a well-recognized trick from recreation growth. Detailed imagery is projected onto easy shapes, so the digicam can journey and you continue to get depth and parallax. We then crafted textures that wrap gentle geometry as an alternative of dense meshes.
Midjourney was helpful within the early passes of that pipeline. Facades, signage, grime and common set dressing began as AI generations. These outputs had been then upscaled with instruments like Magnific and Topaz Bloom to get cleaner base supplies. This was nonetheless not able to ship. In our expertise, AI doesn’t do textual content or symbology effectively, so the group went over them manually. Labels had been redrawn, graffiti was painted correctly, nonsense characters had been changed with legible copy, and small Easter eggs had been added. That human layer is what made the town really feel legit as an alternative of generated.
The vertical structure of the town additionally does some narrative work. Decrease ranges are hotter and extra lived in. You see crops pushing by concrete, dense cables, older tools and extra seen put on. Increased up, the structure will get cleaner, colder and extra refined, nearer to a company sky layer. That gradient is each visible and structural. It offers the spark a path to run and tells the story of how energy and luxury are distributed on this world.
Character and movement
We began with very primary motion to check scroll pacing. Easy loops, a shifting digicam, and a tough sense of timing. Even at that stage these small checks modified the texture of the expertise sufficient that it turned apparent we wanted to herald a correct character animator.
Weight needed to sit appropriately, loops wanted to really feel pure, and the scroll-driven timing wanted to be tight. The panda strikes with intent, and the enforcement robots really feel harmful and tense with out going into horror.
The brief sequence the place the hero meets the spark turned our calibration level for the entire mission. There may be nearly no copy in that scene, but you perceive the connection and the stakes. That second proved that physique language and timing might carry greater than one other layer of on-screen clarification, so we pushed that concept by the remainder of the runtime as an alternative of falling again to textual content.
UI as a storytelling machine
We needed the story textual content to dwell contained in the expertise, not in a separate layer that sits subsequent to it. That’s the reason we skipped voiceover, lip sync and conventional subtitles and saved the script as on display UI that reacts straight to what’s occurring. The interface behaves like one other character on the planet, not a impartial overlay.
There are two important UI modes that observe the story arc. Initially all the things speaks with a chilly system voice. Arduous-edged panels, machine type kind, monitoring bins and terminal-inspired particulars make it clear that an unseen stack is watching and logging motion. When the monitoring fails and drops the spark, that failure is mirrored in how the UI behaves. Components misalign, lose reliability, and begin to break free from the clear machine logic.
As soon as the spark begins to erode that management, the UI relaxes. Corners spherical out, a extra human typeface replaces the digital one, and overlays pull again to disclose extra of the world. You find yourself studying the identical story by setting, characters and interface on the identical time.
The movement on prime of that is small however deliberate. Textual content seems with a typing rhythm, like a dwell feed. When the world shakes, UI components jitter with it. Buttons pulse simply sufficient to really feel current with out competing with the motion. These brief, sharp interactions hold the UI stitched into the story whereas letting the scenes keep in entrance.
Sound that reacts to you
Headphones add quite a lot of depth to The Spark as a result of a lot of the ambiance is carried by sound. The visuals set the stage however the audio makes the town really feel alive.
Ambient beds change as you progress by altitude. Excessive above the streets you hear wind and distant thunder. As you descend, the combo brings in rail noise, site visitors, scanner beeps and extra mechanical texture beneath that base layer. Some components are wired on to your actions. The practice sound pans left to proper because it crosses the body. Footsteps scale with how aggressively you scroll and fade down while you pause.
The important thing element is that these reactions are pushed by scroll velocity as an alternative of solely scroll place. That alternative makes the sound really feel related to what you might be doing in real-time, not only a pointer into a hard and fast timeline. You find yourself with an expertise that behaves extra like an instrument than a locked monitor.
The engine beneath the story
Below the hood, The Spark runs in cables.gl and talks to a Webflow frontend. The primary prototype used uncooked mouse delta to drive movement. That felt wildly completely different throughout units and browsers, so we switched to a devoted scroll container within the DOM that each scene reads from. Every scene owns its personal slice of the scroll vary. Brief beats compress their vary to really feel sharp. Longer beats get more room so you possibly can go searching.
To maintain GPU load and reminiscence in a sane vary, just one scene is energetic at a time. If you attain the top of a scene, the following one begins to load. This method permits us to shortly load the primary scene (which issues if a customer is able to bounce after a clean intro). The brief loaders between scenes are a tradeoff we accepted to assist slower connections.
UI movement is constructed with Webflow Interactions and GSAP, however the triggers dwell in JavaScript. The scroll controller drives each the cables.gl aspect and the Webflow layer so that they keep in sync. The script itself sits in JSON. Because the person crosses particular progress markers, these JSON entries are rendered into UI components and animated in. That break up saved content material manageable, versionable and simpler to tweak with out touching the underlying WebGL scene setup.
What labored, what we’d change, and why we constructed it
We couldn’t be prouder of how The Spark landed. A couple of issues stood out as clear wins.
Projection mapping gave us the depth and scale we needed with out heavy geometry. The CRT type interlace go did greater than anticipated with a small visible layer, tying the look collectively whereas softening aliasing while you transfer shortly. The 2-state UI made the story simple to observe whereas maintaining the quantity of copy low. Making sound react to scroll velocity as an alternative of simply place became one of many largest wins for immersion.
We additionally bumped into actual limits. Cellular technically works, but it surely loses parallax and chops compositions that had been framed for broad. We selected to gate telephones to guard the primary impression, particularly after seeing a selected foldable WebGL bug snap our important character right into a damaged pose.
Mid-scene loading continues to be not best. It’s much less painful than a protracted preliminary wait, however the tradeoff is seen. In a future model we’d probably expose a preload alternative up entrance for folks on quick connections. We’d additionally push extra asset loading into net staff to keep away from any potential important thread stutter, and probably work on a greater animated vegetation system so the decrease metropolis feels much more alive.
Conclusion
At a excessive degree, The Spark exists to indicate how a lot engineering and design pondering sits behind a refined finish product. It’s brief, it runs in a browser, and it mixes artwork course and technical selections in a approach you possibly can really feel.
Simply as necessary, it offers us a platform for no matter comes subsequent. The world and characters can evolve across the underlying engine. That’s the actual consequence for us: a small story that doubles as a check stack for extra.
