R08 · Music · Imagined Worlds
Boiling Line
Everything looks drawn by hand: ink lines that wobble anew twelve times a second over warm paper, with one watercolour wash.
26.0s · 1920×1080 · 30fps, drawn at 12 a second · one take
The film for this site's Music page, drawn like hand-drawn animation. A sea, a sunset and a small piano are sketched in sepia ink, the lines boil twelve times a second, the piano's keys press on the score's own notes, and a watercolour wash spreads as the sun goes down.
An original score composed in code: soft piano over an ocean wash, with a pen scratching as lines are drawn. 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 the Music page of my site: calm piano and ocean tracks made with Suno. Draw it like hand-drawn animation in sepia ink (#2B2420) on warm paper (#F4EEE2): a pen draws a shaky horizon and a sun with small rays; rows of short wave strokes are sketched, smaller toward the horizon, and roll toward the shore; three birds flap across; a small upright piano is sketched on the sand, part by part, and its keys press one by one on a table of notes; the sun sinks, an orange watercolour wash spreads through the sky, its reflection runs down the water and a teal wash fills the sea. End on "Music", "piano, ocean, made with Suno" and visions.joaoqueiros.com/music, boiling like the lines. No track count. Technique: pure SVG. Every stroke is a polyline drawn in two fineliner passes; on every drawing step (12 a second) its points get a new seeded wobble; strokes draw on with pathLength and a dash. Motion steps on the same 12 drawings a second. The wash is gradients pushed through a turbulence displacement whose seed also changes on the steps; the type gets a gentler one. One painter computes every frame from time. Score: compose it in code with numpy in the spirit of my tracks: a pen scratch while lines draw, an ocean swell, soft pads, and the drawn piano playing the same notes its keys press.
Remix it
Swap the parts in braces and paste it in. Some starting points:
- A recipe drawn ingredient by ingredient.
- A city skyline for a travel page.
- A product sketched before its photo appears.
- A route drawn on a map as the place names are heard.
Make a {duration}-second {width}x{height} film in HyperFrames, drawn like hand-drawn animation.
In {ink_colour} ink on {paper}: {scene_drawings}, drawn on stroke by stroke, then {motion}.
{instrument_or_object} reacts to {event_table}. A {wash_colour} watercolour wash {wash_moment}.
End on {final_line} and {url}, boiling like the lines.
Pure SVG: polylines with a seeded wobble that changes 12 times a second, two passes, dash draw-on.
Score composed in code: {score_idea}, with a pen scratch while lines draw.Ingredients
- stack
- HyperFramesHTMLSVGGSAPPython (score)
- length
- 26 s · 1920×1080 · drawn at 12 a second · one take
- drawing
- Pure SVG: about 140 strokes, two passes each
- palette
- #F4EEE2 paper · #2B2420 ink · #E8894A · #3E8C8A
- type
- Instrument Serif · Manrope
- sound
- Pen, ocean and piano composed in Python, -17 LUFS
- cost
- €0, all free and open source
how it's built
01 · 00:00
Boil on twos
The drawing step is time rounded down to twelfths of a second, and each point's wobble is a hash of the step, the stroke and the point, so it changes 12 times a second and the same frame always wobbles the same way.
02 · 00:01
Two passes
Each stroke is drawn twice, a firm line and a thinner, lighter one with its own wobble, like a fineliner over a pencil line.
03 · 00:04
Motion on the same steps
Waves, birds and the sun move by the stepped time, so nothing glides between drawings.
04 · 00:10
Draw-on without measuring
Every path has pathLength 1, so the dash array is simply how much is drawn and the rest, whatever the shape.
05 · 00:13
Picture and sound share the notes
One table of note times and keys drives the pressed keys in the drawing and the piano in the score.
06 · 00:16
Watercolour from a filter
The wash is gradients run through an SVG turbulence displacement with a soft blur, its seed changing every other step so the wet edge shimmers more slowly than the ink.
gotchas
- Fill drawn objects with the paper colour, or the lines behind them show through.
- Clip the sky and the sea washes apart: two multiply washes that overlap turn brown.
- A press on a drawn key needs more than a thicker line: fill the lower part of the key for a moment.
source
Take the whole project
MIT for the code, composition and score. The names Imagined Worlds and João Queirós are not included in the licence.