01
A river of real titles
A short Python script pulls the post titles from the blog's data. Rows at four sizes drift at their own speeds, so the index has depth without a single image.
film 018 · code
Blog · Intro
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 study
Open a page of research notes with the thing a reader does there: search. The index finds its own posts, then becomes the floor under the headline.
- tools
- HyperFramesHTMLCSSGSAPFFmpegPython
- techniques
- Kinetic typographyLive searchCut on the beat3D tilt
process notes
02
Search on the beat
Three queries type out and land on the beat; matching titles turn ember with the match underlined while the rest fade back. Every row's markup is built up front, so any frame renders the same.
03
The floor under the headline
The rows rush and tilt back into a receding floor, and the headline drops in word by word. The score is composed in code.