R04 · Marks · João Queirós
One Hundred Marks, One Line
One line that never lifts off the page closes into one shape after another, faster and faster, and settles on the last.
26.0s · 1920×1080 · 30fps · one take
One ink line that never lifts off the page runs through 100 marks from Marks, my book of 398 logo identities. It closes into each outline and flows into the next, faster and faster, then settles on the JQ mark.
An original score composed in code: a pencil on paper, one piano note for each mark and soft pads. 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 Marks, my book of 398 logo identities.
Story: a warm paper page. A pen draws one straight line, and the line closes into the outline of the Digitalift
bird. Then it flows, without ever lifting, through the outlines of 100 marks from the book, in book order: three
a second at first, a blur of about twenty a second near the end, then slow again. A small caption in the book's index style names each mark
it lands on ("033 · Rancho Monte Alegre · Symbol · page 20") and a counter reads "007 / 100". The last mark
opens into the outer stroke of my JQ mark, the line turns teal as it lands, and the real mark fills in. End on
"Marks", "398 identities · 160 pages · one book" and joaoqueiros.com/marks.
Outlines: only marks already public on the Marks page, never Veriti. Trace each image with numpy and Pillow:
threshold the ink, close small gaps, keep the biggest blob that isn't a line of text, fill its holes, trace its
outer edge, smooth it and resample it to the same number of points.
Technique: one SVG path. Every outline has the same number of points; roll each one so its first point sits
where the previous one's does, so morphs never twist. One painter computes every frame from time.
Look: #F7F5F0 paper, #151515 ink, grey captions, Manrope for captions, Instrument Serif for "Marks".
Score: compose it in code with numpy: a pencil scratch that follows the line's speed, one soft piano note per
mark climbing as the pace quickens, slow pads, a G major landing and bells for the lockup.Remix it
Swap the parts in braces and paste it in. Some starting points:
- Every icon in a design system flowing into the app's logo.
- A country's regions drawn as one line, ending on the whole map.
- A product range (bottles, chairs, shoes) as silhouettes.
- A typeface's letters from A to Z.
Make a {duration}-second {width}x{height} film in HyperFrames.
On {surface}, a pen draws one line that closes into {first_shape}.
Without lifting, it flows through the outlines of {n} {shapes}, slow, then fast, then slow,
with a caption naming each one: "{caption_format}".
The last one opens into {final_shape}, which fills in as {final_fill}. Close on {final_line}.
One SVG path, every outline resampled to the same point count and rolled to match the previous one.
Palette: {palette}. Fonts: {fonts}. Score composed in code: {score_idea}, synced to the line's speed.Ingredients
- stack
- HyperFramesHTMLSVGGSAPPython (tracing and score)
- length
- 26 s · 1920×1080 · 30 fps · one take
- drawing
- One SVG path, 400 points, rewritten every frame
- outlines
- Traced from images with numpy and Pillow, no vector files needed
- palette
- #F7F5F0 · #151515 · #6F6B62 · #00A79D
- type
- Manrope · Instrument Serif
- sound
- Pencil, piano and pads composed in Python, -17 LUFS
- cost
- €0, all free and open source
how it's built
01 · 00:00
The line is a loop too
The opening line is drawn as a closed loop that goes out and comes back, with the same 400 points as every mark, so the first morph is just another morph.
02 · 00:03
Trace, don't redraw
Each public image is thresholded, its gaps closed and its symbol kept. Its holes are filled and its outer edge traced into one contour: a silhouette, not the detailed drawing.
03 · 00:06
The same number of points
Every contour is resampled to 400 points by arc length, clockwise, centred and scaled alike, so any shape can blend into any other point by point.
04 · 00:12
Roll to match
Each outline is rotated in its point order so its first point sits nearest the previous one's. Without it, a morph turns inside out halfway.
05 · 00:16
A tempo curve
99 steps of different lengths: about three a second at first, about twenty a second near the end, slow again for the last few. Each step moves for 72% of its time and rests for the rest.
06 · 00:20
Land on the real mark
The last outline is the JQ mark's outer path at the exact size it appears, so the line lands on the logo, turns teal and the logo fills in under it.
gotchas
- Logos are their owners' trademarks. The source ships the tracer and twelve demo shapes; the client outlines stay out.
- Threshold on the darkest channel (255 minus the minimum of R, G and B), not on brightness, or pale coloured logos vanish.
- Keep plain circles and badges out of the set: as silhouettes they all look the same and the morph stalls.
source
Take the whole project
MIT for the code, composition and score. The JQ mark, the Marks book and the name João Queirós are not included in the licence.