01
The article's own steps
Personality, competitors, a primary, supporting colours, tests: every step and every line on screen paraphrases the article, and the palette is the one on the article's own page.
film 026 · code
Brand Colours · Choosing a Colour
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
This film has a recipe: the prompt, a template to remix it and the source. Open the recipe
The study
Turn the article's method into something you watch happen: choosing a brand colour is less about picking one you like and more about removing everything that doesn't fit.
- tools
- HyperFramesHTMLWebGL2GLSLGSAPPython
- techniques
- Time-only flow mapMarbled ink shaderHue drainingInk into swatches
process notes
02
Ink without a simulation
One WebGL2 fragment shader. Each pixel traces itself back through a moving, divergence-free flow for 28 steps, so the ink marbles and any frame can be rendered on its own.
03
One clock
The same timing table drives the shader's drain, pool and swatch uniforms, the HTML steps and a score of water drops and chimes generated in Python.