R06 · Brand Readiness Check · João Queirós
Brand Readiness Scan
A scanner line raises an object into a relief of ridge lines and stops on one feature after another while a list ticks them off.
26.0s · 1920×1080 · 30fps · one take
The film for my free Brand Readiness Check. A scanner line sweeps my own business card, raises it into a relief of ridge lines and stops on eight features, one for each question of the check, then shows the four score bands and the check's headline.
An original score composed in code, built from a scanner drone, blips and ticks. 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 my free Brand Readiness Check (8 questions, about 60 seconds,
a score out of 100). Story: my business card (JQ mark, João Queirós, Brand identity designer, joaoqueiros.com,
Porto, Portugal) lies in the dark as a flat outline. A teal scanner line sweeps across it and the card rises
behind the line into a relief of thin ridge lines. Then the scanner stops on eight features, one per question of
the check, about 1.5 seconds each: corner brackets frame the feature, it lights teal, a short label and the full
question appear under the card, and a list on the right ticks it off ("Brand Readiness Check · 3 / 8"). Small
proofs for some checks: the mark at 16 px, in one colour and on a van; a palette and two typefaces; margin
guides; vector anchor points on the mark; a dashed competitor card behind; the card lifting towards you. Then
the four bands as a scale (0 to 39 Starting point, 40 to 69 Growing pains, 70 to 89 Strong foundations, 90 to
100 Ready to scale), without claiming a score for my card. End on "Is your brand ready to grow?", "8 questions ·
about 60 seconds · a score out of 100" and joaoqueiros.com/brand-readiness-check.
Technique: Canvas 2D. Draw the card once into a height map (the mark from its SVG paths, the type, the edge),
blur it a little, then every frame redraw it as horizontal ridge lines lifted by height, back to front, each
filled below with the background so nearer lines hide farther ones. One painter computes every frame from time.
Look: #111110, teal #00A89D, bone #F5F5F0, grey lines. Manrope for labels, Instrument Serif for lines.
Score: compose it in code with numpy: a scanner drone and sweep, a two-note blip per check, a tick per tick,
four steps up for the bands, a C major resolve.Remix it
Swap the parts in braces and paste it in. Some starting points:
- A product's packaging checked against a launch list.
- A website screenshot scanned for accessibility issues.
- A floor plan scanned room by room.
- A contract scanned for its key clauses.
Make a {duration}-second {width}x{height} film in HyperFrames.
{object} lies in the dark as a flat outline. A scanner line sweeps it and it rises into a relief of ridge lines.
The scanner stops on {n} features: {features}. Each lights up with its question: {questions},
and a list ticks it off. Then show {scale_or_result}. Close on {final_line} and {url}.
Canvas 2D: a height map drawn once, redrawn every frame as ridge lines lifted by height.
Palette: {palette}. Fonts: {fonts}. Score composed in code: a drone, a blip per check, from the same timing table.Ingredients
- stack
- HyperFramesHTMLCanvas 2DGSAPPython (score)
- length
- 26 s · 1920×1080 · 30 fps · one take
- drawing
- Canvas 2D: a height map drawn once, 110 ridge lines per frame
- palette
- #111110 · #00A89D · #F5F5F0 · grey lines
- type
- Manrope · Instrument Serif
- sound
- Drone, blips and ticks composed in Python, -17 LUFS
- cost
- €0, all free and open source
how it's built
01 · 00:00
A height map, drawn once
The card is painted in greys on an offscreen canvas: the mark brightest, from its SVG paths, the type lower, the card low. A small blur gives the relief slopes.
02 · 00:02
Ridge lines, back to front
Every 5 px a line crosses the card, lifted by the height beneath it. Each line's area is filled with the background first, so nearer lines hide farther ones.
03 · 00:06
Features as rectangles
Each check is a rectangle on the card: its lines are restroked in teal and corner brackets frame it, while the list on the right ticks it off.
04 · 00:13
Proofs on top
Some checks add their own layer: the mark at 16 px and on a van, margin guides, vector anchor points, a dashed competitor card.
05 · 00:19
The scale, not a score
The bands bar fills from 0 to 100 and lights each band's name, so the film shows how the check scores without claiming a result.
06 · 00:22
Sound from the same clock
Each blip lands as a feature lights up and each tick as it is ticked off, from the same timing table as the picture.
gotchas
- The height map contains type, so build it again once the web fonts are ready, then repaint.
- Draw the SVG mark with Path2D from its path data instead of loading the image, so the height map never waits on a download.
- Tie the reveal to the sweep, not to wherever the scanner is now, or the card vanishes when the scanner moves back to a feature.
source
Take the whole project
MIT for the code, composition and score. The JQ mark and the name João Queirós are not included in the licence.