All recipes

R05 · How to Choose Brand Colours · João Queirós

Choosing a Colour

Every colour at once swirls like marbled ink, then a method drains what doesn't fit, pools one colour and separates it into a few labelled swatches.

26.0s · 1920×1080 · 30fps · one take

The film for my article on how to choose brand colours. A swirl of every colour, marbled like ink, goes through the article's five steps: the colours that don't fit drain away, one primary pools out, and the ink separates into a palette of four, tested on a card, a web page and a social post.

An original score composed in code, built from liquid pads, water drops and chimes. 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.

prompt · verbatim
Make a 26-second 1920x1080 film in HyperFrames for my article "How to Choose Brand Colours That Actually Work
for Your Business". Story: full-frame marbled ink in every colour, and the line "Most brands start with “I like
blue.”" types over it. Then the article's five steps, each in a small card at the top left: 01 three adjectives
(clear, warm, precise) appear and every colour except teal and blue drains to warm grey; 02 twelve competitor
dots form a ring, most of them blue, with one empty slot labelled "the gap"; 03 the ink settles to dark and one
teal pool forms, with "#00A89D" typing beside it; 04 four swatches pour down from the top, 1 primary, 1
secondary, 2 neutrals (#00A89D, #0099D6, #1A1A18, #F5F5F0) with HEX and RGB; 05 the page turns light and the
palette appears on a business card, a web page, a social post, a dark and a light layout. End on "How to choose
brand colours that actually work." and joaoqueiros.com. All copy on screen paraphrases the article; no
statistics.
Technique: WebGL2, one full-screen fragment shader. No simulation: every pixel traces itself back through a
divergence-free flow field (the curl of moving noise) for 28 steps, then samples a dye of hue bands with pale
veins. Uniforms from one clock drive each step: drain, dim, pool, bands, fade. HTML carries the words.
Type: Manrope for labels and codes, Instrument Serif for the lines.
Score: compose it in code with numpy: wavering liquid pads and water drops, a note per competitor dot, a chime per
swatch climbing the chord, a D major resolve.

Remix it

Swap the parts in braces and paste it in. Some starting points:

  • A paint brand's seasonal palette.
  • A city's colours (river, stone, tiles) for a tourism page.
  • A product line's finishes.
  • A data visualisation palette checked for colour blindness.
prompt · template
Make a {duration}-second {width}x{height} film in HyperFrames.
Full-frame marbled ink in every colour while "{opening_line}" types.
Then {n} steps from {source}: {steps}, each one draining, dimming, pooling or separating the ink.
It ends as {k} swatches, {palette_with_codes}, tested on {applications}. Close on {final_line}.
WebGL2, one fragment shader, a time-only flow map, no simulation state. HTML for the words.
Fonts: {fonts}. Score composed in code: {score_idea}, from the same timing table.

Ingredients

stack
HyperFramesHTMLWebGL2GLSLGSAPPython (score)
length
26 s · 1920×1080 · 30 fps · one take
drawing
One WebGL2 fragment shader, no simulation state
palette
#00A89D · #0099D6 · #1A1A18 · #F5F5F0
type
Manrope · Instrument Serif
sound
Liquid pads, water drops and chimes composed in Python, -17 LUFS
cost
€0, all free and open source

how it's built

  1. 01 · 00:00

    A flow map, not a fluid sim

    Each pixel walks back through a moving flow field for 28 small steps and reads the dye where it lands, so any frame renders on its own and the ink still swirls.

  2. 02 · 00:04

    Drain what doesn't fit

    Hues near teal and blue stay; everything else slides to warm greys, keeping its light and dark so the marbling survives.

  3. 03 · 00:08

    A ring with one empty slot

    Twelve competitor dots sit on thirteen places, most of them blue. The empty place is the gap.

  4. 04 · 00:12

    One colour pools

    The ink settles to dark while a teal body grows with a noisy edge, and its code types in beside it.

  5. 05 · 00:16

    Ink into swatches

    Four bands fill down from the top with a wavy front: 1 primary, 1 secondary, 2 neutrals, as the article advises.

  6. 06 · 00:20

    Test before you commit

    The page turns light and the palette is laid onto five small layouts built in HTML: a card, a web page, a social post, dark and light.

gotchas

  • Put shader source in a JavaScript string, not in a script tag of its own: HyperFrames' lint reads every inline script as JavaScript.
  • Create the WebGL context with preserveDrawingBuffer: true and draw inside the painter, so the captured frame is the one painted for that time.
  • White text on teal or bright blue fails contrast. Label those swatches in ink.

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.

download source zip view on github the film page
Back to Recipes