R03 · AI News Curator · JQ AI SYSTEMS
Signal from Noise
Thousands of fragments line up like iron filings, gather around the poles that matter, and the strongest few are pulled out into one reviewed list.
26.0s · 1920×1080 · 30fps · one take
The film for AI News Curator. About 6,000 scattered fragments line up like iron filings, gather around the six real themes of the workflow, and the strongest six become one daily brief that a person reviews before anything is used.
An original score composed in code, built from metallic grains, a magnetic hum and struck tones. 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 AI News Curator, my research briefing workflow. Story: about 6,000 short fragments drift as noise, a few labelled only with source types (github · release, newsletter, docs update, saved link, community note, social post). "Scattered signals," types over them. Then a field switches on: every fragment turns to face it and slides onto the field lines of two magnets, like iron filings. The field splits into six alternating poles, one per real theme (AI tooling, Coding workflows, Design systems, Automation patterns, Public GitHub work, Client research), and the filings flow into them, turning teal near each pole. The brightest fragment of each theme flies to the centre and becomes one row of a "Daily brief" card. A gate line scans down the card and gives each row its review outcome (public content, private research, client context, archived note), then "Nothing is published automatically." The field settles into archive rows by day. End on "Scattered signals, daily briefings." and the case study URL. The status line names the real steps: import, normalize, classify, brief, review, archive. Technique: Canvas 2D only. Trace the field lines once at load from point charges (E = q r / |r|^2), give every fragment a noise state, a dipole state, a six-pole state and an archive state, and blend between them with seeded per-fragment delays. One painter computes every frame from time; no simulation state. Brand: #111110 background, #F5F5F0 bone, #00A89D teal, iron grey #6E6E68, Geist, Geist Mono, Instrument Serif. Score: compose it in code with numpy: metallic grains for the filings, a thunk and a magnetic hum when the field switches on, a struck tone per theme, a pop per row, a scan for the review gate, from the same timing table. Public-safe: no real links, no headlines, no sources.
Remix it
Swap the parts in braces and paste it in. Some starting points:
- Support tickets gathering around product areas into a weekly triage.
- Job applications sorting themselves into a shortlist.
- Customer feedback clustering into a roadmap.
- Photos from a shoot filing themselves into a selects board.
Make a {duration}-second {width}x{height} film in HyperFrames.
{n} fragments labelled {fragment_labels} drift as noise while "{opening_line}" types.
A field switches on and they line up like iron filings, then gather around {k} poles: {pole_names}.
The strongest fragment of each pole flies into {summary_object}, which {review_step}.
The rest settles into {archive_shape}. Close on {final_line}.
Canvas 2D, field lines traced once, every fragment blended between states from time.
Palette: {palette}. Fonts: {fonts}. Score composed in code with metallic grains, synced to the picture.Ingredients
- stack
- HyperFramesHTMLCanvas 2DGSAPPython (score)
- length
- 26 s · 1920×1080 · 30 fps · one take
- drawing
- Canvas 2D only: 6,000 line segments, no WebGL
- palette
- #111110 · #F5F5F0 · #6E6E68 · #00A89D
- type
- Geist · Geist Mono · Instrument Serif
- sound
- Metallic grains, a hum and struck tones composed in Python, -17 LUFS
- render
- A few minutes on a laptop, no GPU needed
- cost
- €0, all free and open source
how it's built
01 · 00:00
Noise with a seed
Every fragment drifts on its own seeded sines, so the scatter looks random but every render draws exactly the same frame.
02 · 00:04
Field lines, traced once
Two charges, then six with alternating signs. Lines are traced from each charge along the field and every fragment takes one point on one line.
03 · 00:09
Four states per fragment
Noise, two magnets, six themes and an archive row. The painter blends position and angle between them with per-fragment delays, and angles blend modulo π because a filing has no head or tail.
04 · 00:13
Signal leaves the field
The brightest fragment of each theme streaks to the centre and becomes an HTML row of the daily brief.
05 · 00:19
A gate, not an autopilot
A scan line passes each row and tags its review outcome, because in the real workflow a person decides and nothing is published automatically.
06 · 00:21
6,000 lines in a few strokes
Colour and alpha are rounded into about 120 buckets, and each bucket is one path and one stroke, so a frame costs a handful of canvas calls.
gotchas
- A canvas draws text with whatever font is loaded at that moment. Load the web font and repaint once it is ready.
- Flex rows in a table-like card shrink their columns unevenly when the content is too wide. Set flex: none on the cells and size the row for its longest label.
- Use seeded randomness instead of Math.random(), or every render scatters the filings differently.
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.