We’re an expertise design companion for manufacturers that love their clients. We create the digital moments that assist them show it, which regularly 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 type of inside builds the place we pushed that strategy all the best way.
It began with a easy thought
We wished 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 high.
So we constructed a narrative a couple of spark of creativity on the unfastened in a metropolis that’s doing every thing to stop it from being let loose. Scrolling drives the digicam, wakes up characters, and pushes a monitoring system that’s all the time a number 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 venture was planted a number of years again once we began speaking a couple of 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 prefer to construct. It linked 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 regularly opens up and warms. At this stage, we ignored particular instruments and engines on objective and targeted on the beats we wished the runtime to help.
The tip end result was a story backbone that would survive modifications in tech. A spark to trace, a system to combat it, and a metropolis that reacts over time. The implementation particulars may transfer beneath that with out breaking the story.
Constructing a world that really runs
Operating in an ordinary browser and feeling easy on common {hardware} was a non-negotiable. That single constraint drove virtually each technical choice in order that we had been working collectively on an expertise that doesn’t simply look lovely, but in addition doesn’t soften your GPU.
To create a sturdy and detailed world with no wall of geometry, we leaned on a well-known trick from sport improvement. 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 properly, so the crew 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 town really feel legit as an alternative of generated.
The vertical format of town additionally does some narrative work. Decrease ranges are hotter and extra lived in. You see crops pushing by means of concrete, dense cables, older gear and extra seen put on. Greater up, the structure will get cleaner, colder and extra refined, nearer to a company sky layer. That gradient is each visible and structural. It provides 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 usher in 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 quick sequence the place the hero meets the spark turned our calibration level for the entire venture. There’s virtually no copy in that scene, but you perceive the connection and the stakes. That second proved that physique language and timing may carry greater than one other layer of on-screen rationalization, so we pushed that concept by means of the remainder of the runtime as an alternative of falling again to textual content.
UI as a storytelling machine
We wished the story textual content to reside 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 screen UI that reacts straight to what’s taking place. The interface behaves like one other character on the planet, not a impartial overlay.
There are two essential UI modes that comply with the story arc. At first every thing speaks with a chilly system voice. Exhausting-edged panels, machine fashion sort, monitoring packing containers 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 means of setting, characters and interface on the identical time.
The movement on high of that is small however deliberate. Textual content seems with a typing rhythm, like a reside feed. When the world shakes, UI parts jitter with it. Buttons pulse simply sufficient to really feel current with out competing with the motion. These quick, sharp interactions preserve 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 environment is carried by sound. The visuals set the stage however the audio makes town really feel alive.
Ambient beds change as you progress by means of altitude. Excessive above the streets you hear wind and distant thunder. As you descend, the combination brings in rail noise, visitors, scanner beeps and extra mechanical texture beneath that base layer. Some parts 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 whenever 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 linked to what you’re doing in real-time, not only a pointer into a set timeline. You find yourself with an expertise that behaves extra like an instrument than a locked observe.
The engine beneath the story
Underneath 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. Quick beats compress their vary to really feel sharp. Longer beats get extra space so you possibly can go searching.
To maintain GPU load and reminiscence in a sane vary, just one scene is energetic at a time. Once you attain the tip of a scene, the subsequent one begins to load. This strategy permits us to rapidly load the primary scene (which issues if a customer is able to bounce after a clean intro). The quick loaders between scenes are a tradeoff we accepted to help slower connections.
UI movement is constructed with Webflow Interactions and GSAP, however the triggers reside 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 consumer crosses particular progress markers, these JSON entries are rendered into UI parts 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 wished with out heavy geometry. The CRT fashion interlace go did greater than anticipated with a small visible layer, tying the look collectively whereas softening aliasing whenever you transfer rapidly. The 2-state UI made the story simple to comply with whereas maintaining the quantity of copy low. Making sound react to scroll velocity as an alternative of simply place changed into one of many largest wins for immersion.
We additionally bumped into actual limits. Cell technically works, but it surely loses parallax and chops compositions that had been framed for extensive. We selected to gate telephones to guard the primary impression, particularly after seeing a particular foldable WebGL bug snap our essential character right into a damaged pose.
Mid-scene loading continues to be not supreme. It’s much less painful than an extended preliminary wait, however the tradeoff is seen. In a future model we’d probably expose a preload alternative up entrance for individuals on quick connections. We might additionally push extra asset loading into internet staff to keep away from any potential essential thread stutter, and doubtlessly 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 considering sits behind a refined finish product. It’s quick, it runs in a browser, and it mixes artwork path and technical selections in a approach you possibly can really feel.
Simply as vital, it provides us a platform for no matter comes subsequent. The world and characters can evolve across the underlying engine. That’s the actual end result for us: a small story that doubles as a check stack for extra.
