A canvas illustration engine, no libraries and no build, drawing seven scenes that draw themselves. I did not generate an image from a prompt: I set the reference for the hand feel, the color ramp and the rules, and the agent wrote the engine.
I started from a clip of me painting
I wanted a mark that looks drawn and not produced. The trouble with a finished illustration is that it always freezes at the same instant, and you can tell. So instead of another file in a folder I built an engine that draws the scene in front of the eye, line after line. Most of the work went into one question: what turns a chain of dots into a line that was smeared.
Instead of describing to the agent how it should look, I gave it a clip of me painting. Everything came from there: how far the hand drifts, how the pressure changes, and what happens to the color along a single stroke. The colors came from my canvases too. I tried once anchoring the dark end in blue, it came out cold, so I dropped it.
Every layer in the engine has a job, and the easiest way to see which one does the work is to switch it off.
The first brush knows in advance what it draws. It drifts off the line, it dries, and it leaves a gloss where the pressure dropped.
The second knows nothing in advance. It only turns the motion of a mouse into color, with a bundle of bristles along the direction, a thin shadow underneath and a band of light on top. It came out faint on purpose, so it fills the emptiness instead of competing with the headline.
Flip the switches: the exact same points, with the layers and without them. The two marks on the track are the range the engine kept, 1.6 to 3.4. Below 1.6 the line looks drafted. Above 3.4 it looks shaky.
Every scene is a list of strokes with a delay, a duration and a ramp position. The skeleton reads first, the detail follows, then it fades and draws itself again with new hands.
The same engine, with a different clip and different colors, produces an entirely different language. Not an effect you can download from somewhere.
Build a language like this for your brand →Click the drawing to draw it again, with a different hand
The scene finishes, and the surface stays open
The scene has finished. The surface is yours now, and every mark you add stays.
The first: the text never describes what you see in the drawing. If a bridge is stretched on screen, the words will not say bridge and will not say cross. When the text repeats what the drawing already showed, both are wasted.
The second came out of a failure. In the PlaySoul hero the animation pulled the eye down, away from the headline. Since then I check every piece of motion against what has to be read first, and I do not allow two things moving in one screen.
There is no point in a careful drawing if the text beside it is typeset without thought. Both have to feel like one family, so the brush width was not chosen by eye.
The browser measures the stem width of the body font at body size, and the brush calibrates itself to half of it on load. The numbers below are the measurement, not an estimate.
The same rule applies to headings: balanced line breaks are defined once and run on their own across every page, with no manual break.
The thing that has to be read first
The default here is the failure. Flip the switch.
The scene is built in front of the eye, line after line.
I directed this, I did not draw it by hand
I did not ask the agent for an image. I defined where the hand feel comes from, which colors are allowed and what the text is forbidden to do, and it wrote the engine. What surprised me is that the things that made the difference were the smallest ones: a short tremble at the start of every stroke, and a dab of light offset by less than a pixel.
What is left at the end is not one file but a system: the clip everything was derived from, a closed color list, written rules for motion and for text, and an engine that runs it on every new page without coming back to me. That is what stays with the client.
The clip everything was derived from, the color list, the rules, and the engine that runs them on every new page. All of it stays with the client.