Fire Serpent
A product film about one Counter-Strike skin, played by the reader's scroll. My own project, made to find out how far a web page can go as cinema.
- The problem
- Skin marketplaces sell a legendary item the way they sell everything else: a thumbnail on a grid and a price. The item players talk about for years gets the same catalogue card as the cheapest sticker.
- The goal
- Make one skin feel like a product launch: seven chapters, one continuous camera, no cut the viewer can see, on any screen, with no framework and no third-party request.
- What I did
- The concept, the art direction and the shot list; the footage, generated and rejected until it held; and the playback engine that ties it to the scroll.
- What it gave
- Live since 17 September, sixteen days after the first frame. It plays as one continuous film, forwards and backwards, with no cut, no loading gap and no jump between chapters. More than 40 generated takes went into the 15 clips that made it.
I play the game. I wanted the item to get a premiere.
The Fire Serpent is one of the rifles players remember. Everywhere it is sold, it is a thumbnail. This project treats it as the continuous subject of a short product film rather than as an item in a catalogue, the way a car or a watch would be launched: seven chapters, from the surface of the finish to the artwork, the specification, the recoil and the legacy.
It is a personal study and a fan project, not affiliated with Valve, and the page says so. It also sets itself a hard rule on content: only the real skin artwork, no invented runes and no added hardware. The spray pattern and item values on the page are labelled as approximations.
Scroll is the playhead.
Each chapter is a video station. The reader's wheel, swipe or arrow key starts a transition clip, and every transition begins on the real last frame of the clip before it, never on the drawn key frame, so the camera never jumps. The page is one continuous shot that the reader drives, forwards and backwards.
The direction was locked on references I collected from motorcycle and architecture films: a dark physical stage, huge condensed warm lettering behind the object, and small annotations at the edges. Copy only ever sits in bands the footage keeps dark and free of events, decided in the shot list before any clip was generated.
A cut the viewer can see is a bug, and it gets a test like any other bug.
Seven chapters, one camera.
The Recoil chapter is the one place the film becomes a toy. A fire control triggers an eleven-round burst with a timed heads-up display over five targets, and after four idle seconds it fires on its own so nobody misses it. The last chapter lands in a temple, lit gold.
Five calls, and what each one cost.
Every transition starts on the previous clip's real last frame.
Generated video drifts. Starting each transition from the true final frame of the clip before it, not from the key frame that was drawn for it, is what makes the seams disappear.
CostSixteen rejected takes, kept on file, before the chain held.
Seams are measured, not eyeballed.
Structural similarity between the last and first frames of every seam, measured at four viewports. The first threshold was wrong: liquid ripple moved the raw score by 0.15 to 0.20 on frames a viewer sees as identical, so the test now runs on blurred frames, which is what the eye compares.
CostA custom acceptance check instead of an off-the-shelf threshold.
A playback engine that can never leave the page stuck.
Hand-offs are frame-accurate through the browser's video frame callback, at most five decoders exist at once with three preloaded, and a circuit breaker releases the page if a clip stalls.
CostMemory, and an engine that is harder to change than a timeline library.
Less motion means no transition footage at all.
For readers who asked their device for less motion, chapters hard-cut with a short crossfade instead of flying through.
CostThose readers see a slideshow of a film.
Zero third-party requests.
Fonts are local, the content security policy is strict, and the clips are guarded against hotlinking. A security review found nothing exploitable.
CostNo analytics, so no audience numbers either.
One film, made of many takes.
Played from start to finish it reads as a single shot: the rifle never jumps, the light never resets, and scrolling back plays the film in reverse rather than reloading it. That is the result that matters, and it was checked rather than assumed: every seam was compared frame by frame at four screen sizes before it shipped.
Made
What it proves is a pipeline: generated footage treated as raw material with an acceptance test, not as a finished asset. The same approach carries to any product launch that wants to be watched rather than scanned.
Best on a laptop, with a wheel or a trackpad.
Sift