R01 · Prompt Engineering · JQ AI SYSTEMS
Token Rain
Text dissolves into particles sampled from its own letters, rains through a sequence of gates and recompiles as new text.
26.0s · 1920×1080 · 30fps · one take
The film for the Prompt Engineering service. A stock AI paragraph has its clichés caught by an anti-pattern scan; they burn into tokens, rain through draft, critique and rewrite, and land as one line in the brand's voice.
An original score composed in code. No spoken dialogue. On-screen text carries the story.
scene breakdown · select a scene to play
The prompt
The brief I gave Claude Code, with the HyperFrames skills installed, to start this film. Approvals and fixes came after, but this is where it began.
Make a 26-second 1920x1080 film in HyperFrames for my Prompt Engineering service. Story: a prompt types "write a launch post for our new product" and a stock AI paragraph streams back, full of clichés. A teal scan line sweeps the paragraph and flags seven anti-patterns with small mono tags (cliché opener, hype, buzzword, empty verb, cliché, em dash, "not x, it's y"). The flagged phrases burn into glowing token particles, then the rest of the draft dissolves too. The camera dives with the rain of tokens through three glowing rings labelled 01 DRAFT, 02 CRITIQUE, 03 REWRITE; the tokens change colour at each ring. They land and recompile as one line in Instrument Serif: "Same model. Your voice." Spare tokens collapse into a glowing rule under it, then my logo, "Prompt Engineering" and the URL. Technique: Three.js WebGPURenderer (WebGL2 backend) with TSL. Sample the real glyph pixels of the DOM text so the particles start exactly where the letters were. Every particle position must be a pure function of time (seeded start, fall, helix through the rings, landing), no simulation state, so the render is deterministic. Brand: #111110 background, #F5F5F0 text, #00A89D teal, Geist and Geist Mono. Score: compose it in code with numpy, synced to the same timing table as the picture. No beat punches on held text. Hold the final line about 4 seconds.
Remix it
Swap the parts in braces and paste it in. Some starting points:
- Messy code that rains through lint, test and review into one clean function.
- A crowded inbox that becomes a single, calm reply.
- A long contract that compiles into one plain sentence.
- Rows of raw data that land as one headline number.
Make a {duration}-second {width}x{height} film in HyperFrames.
A {source_text} appears. A scan line flags {what_is_wrong} with small labels. The flagged parts burn
into particles sampled from the real glyph pixels, then the rest dissolves. The particles fall through
{n} glowing rings labelled {gate_labels}, changing colour at each ring, and recompile as {final_line}.
Close on {lockup}. Palette: {palette}. Fonts: {fonts}. Three.js WebGPURenderer (WebGL2 backend) + TSL,
every particle a pure function of time. Score composed in code, synced to the picture.Ingredients
- stack
- HyperFramesThree.js WebGPURendererTSLGSAPCanvas 2DPython (score)
- length
- 26 s · 1920×1080 · 30 fps · one take
- particles
- 88,872 sprites (29,872 from the letters)
- palette
- #111110 · #F5F5F0 · #00A89D · #0099D6
- type
- Geist · Geist Mono · Instrument Serif
- sound
- Score composed in Python, -17 LUFS
- render
- About a minute on one worker, any recent GPU
- cost
- €0, all free and open source
how it's built
01 · 00:00
Sample the real letters
After the fonts load, every word is measured and drawn on an offscreen canvas at the same pixel position. Its pixels become particle start points, so the dissolve has no seam.
02 · 00:07
Burn left to right
Each particle's release time comes from its x position inside the word. A CSS clip wipe hides the word at the same moment, so letters turn into tokens as you watch.
03 · 00:09
One equation per particle
A TSL shader computes position from time alone: float, fall on a smoothstep, a helix squeezed by a gaussian funnel at each ring, noise turbulence, then landing on a pixel of the final line.
04 · 00:12
A camera that rides the rain
The camera follows the particles' mean fall, sits above the stream and looks down into it. The DOM type rides the same camera function, so type and particles never drift apart.
05 · 00:16
Land, then let the type take over
The particles settle on the line's pixels; sharp type fades in over them and they dim away. Spare tokens stay as a halo and later collapse into the glowing rule.
06 · 00:21
Score from the same clock
The music is generated in Python from the picture's timing table and the per-word times read from the page: a blip per word, a ping per cliché, a crackle per burn, a chime per ring.
gotchas
- Render on one worker. With parallel workers the first frame of each chunk drew the GL scene with a stale time and lost its particles.
- Words set to inline-block report the full line height, not the glyph height. Centre the glyph in the box before sampling.
- Build the timeline inside the async setup and register it last, after the fonts load and the layout is measured.
source
Take the whole project
MIT for the code, composition and score. The JQ AI SYSTEMS logo and name are not included in the licence.