R11 · Blog · Imagined Worlds
Kinetic Index
Rows of titles drift at four sizes, a search lands on the beat and lights up the matches, then the river tilts into a floor under the headline.
10.0s · 1920×1080 · 30fps · one take
The intro film for this site's blog. The post titles stream past in rows, a live search lights up the matches on the beat, and the river of titles tilts away under the page's headline.
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 10-second 1920x1080 intro film in HyperFrames for my blog, Field notes for imagined worlds, on #0b0a09. The prompt "/index visions --searchable --field-notes" types out in IBM Plex Mono with an ember #ff6d3b caret. On Enter it lifts into the HUD and rows of my real post titles pour out of its line in Fraunces at four sizes, each row drifting at its own speed and direction, separated by ember dots. A search box types three queries, each landing on the beat of a 100 BPM score: the titles that contain the word turn ember with the match underlined, while the rest fade back. Then the river rushes, tilts back into a receding floor and dims, and the headline "Field notes for imagined worlds." drops in word by word, the second line in Fraunces italic ember, with the prompt above it and "Practical research on AI image and video tools." below. Titles only, no thumbnails, and no counts anywhere: the blog grows. Technique: one painter draws every frame from time; build every row's markup up front; a Python script pulls the titles from my blog's data. Score: compose it in code with numpy, 100 BPM in F major: a tick per typed letter, a chime as each search lands, air and a riser for the tilt, and one hit for the headline.
Remix it
Swap the parts in braces and paste it in. Some starting points:
- A shop's product names, searched by colour.
- A restaurant menu, searched by ingredient.
- A changelog, searched by feature.
- A portfolio's client list, searched by sector.
Make a {duration}-second {width}x{height} film in HyperFrames for {subject}, on {background}.
The prompt "{prompt}" types out, then rows of {list} pour out of its line in {display_font} at four sizes, each
row drifting at its own speed. A search types {word_1}, {word_2} and {word_3}, each landing on the beat: the
matching items turn {accent} with the match underlined while the rest fade back.
Then the rows rush and tilt into a floor under the headline "{headline}", word by word.
No counts anywhere. One painter draws every frame from time; build every row's markup up front.
Score composed in code at {bpm} BPM: a tick per letter, a chime on each match, one hit for the headline.Ingredients
- stack
- HyperFramesHTMLCSSGSAPPython (titles, score)
- length
- 10 s · 1920×1080 · 30 fps · one take
- rows
- Four sizes from 30 to 92 px, each with a seeded speed and direction
- palette
- #0b0a09 · #ece7dd · #ff6d3b · #99927f
- type
- Fraunces · Instrument Sans · IBM Plex Mono
- sound
- 100 BPM in F major, composed in Python, -15 LUFS
- cost
- €0, all free and open source
how it's built
01 · 00:00
The prompt types
The page's prompt types out with an ember caret. On Enter it lifts into the HUD, and the rows pour out from its line, the middle rows first.
02 · 00:02
A river of rows
Rows at four sizes fill the frame. Each gets its own order of the titles, a speed and a direction from a seeded hash, so the river has depth and every render is the same.
03 · 00:03
Searches on the beat
Each query types out and lands on a beat of the 100 BPM grid. The matching titles turn ember with the match underlined while the rest fade back.
04 · 00:05
Markup built up front
For each search, every row's HTML is built once at load. On a frame the painter only swaps in the right version and sets opacities.
05 · 00:07
The tilt
The river speeds up and rotates back up to 58 degrees into a floor. Its position comes from the distance travelled so far, so any frame renders on its own.
06 · 00:09
The headline
The river dims and the headline drops in word by word, the second line in Fraunces italic.
gotchas
- Register the italic as its own font family. As an italic style of the same family, Chrome rendered some roman rows in italic.
- Wrap each row in two copies of the same content, so the offset can wrap at one copy's width and the row loops.
- Keep the search words the same in the score and the picture: the score ticks once per typed letter.
source
Take the whole project
MIT for the code, composition and score. The demo titles are made up. The names Imagined Worlds, JQ VISIONS and João Queirós and the site's own prompt and headline are not included in the licence.