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 wanted a mark that feels drawn, not produced. Every finished file holds the same instant in time on every load, and that is what gives it away. So instead of another file in a folder I wrote an engine: the scene is built in front of the eye, line after line.
Everything after that was built around one question: what turns a sequence of dots into a line somebody smeared.
Every layer in the engine is a decision. The fastest way to see which one carries the feeling is to switch them off one by one.
The two marks on the track are the range the engine kept, 1.6 to 3.4. Below it you get geometry, above it you get a tremor.
Flip the switches: the exact same points, with the layers and without them.
Before a single line of code I chose where the hand feel comes from: a painting clip of mine, where you watch a real brush touch canvas. One concrete reference decides more than ten adjectives.
That produced the rule: every stroke gets a hand profile of its own. How far it drifts, at what rate, under what pressure. One hand draws one line, and nobody draws the same line twice.
Same points, same delays. The only difference: one side runs the hand profile, the other draws clean geometry.
Click to redraw, with different hands.
Three primitives, and that is it: a smeared line, a spiral fill, and a wash surface. The rule above them is simple, every scene must combine lines and surfaces. Only lines stays a sketch, only surfaces loses the hand.
The ramp was derived from my own canvases: deep plum, raspberry, orange, gold and cream. Every stroke gets a position on the ramp, and sometimes a journey across it, so color becomes a direction rather than a mix.
Once I tried anchoring the dark end in blue. Technically it worked. To the eye it came out cold, and blue left the brand that same day.
Drag the handle: the exact same stroke, at any point on the ramp. Tap the swatch on the side to see why blue left the brand.
Every scene is a list of strokes with a delay, a duration and a ramp position, which makes it readable like sheet music. The skeleton reads first, the detail follows, then the scene fades and draws itself again with new hands. The same scene, never the same drawing.
Click a scene to draw it again, with a different hand.
The same engine with a different reference, a different ramp and different rules produces an entirely different language. This is not an effect you download from somewhere, it is one brand's signature.
The hero is drawn with two hands, two tracks in parallel. Free painting opens only once it finishes, and from the first touch the cycle stops for good: the system tells the story to the end, then hands over the brush. Whatever you add stays.
When the scene finishes, the brush moves on. Every mark you add stays.
There is a second brush too, entirely different. The first one knows what it draws. The second knows nothing in advance, it only converts the motion of a hand into color: a bundle of bristles along the direction of travel, a thin shadow underneath, a thin band of light on top.
It is deliberately faint, because it decorates the emptiness instead of fighting the headline. This is the brush that lives in the PlaySoul hero, and from there it entered the language.
The first: copy never describes what the scene shows. If a bridge is being stretched on screen, the words will not say bridge or cross. The moment both say the same thing, both get weaker.
The second was learned from a failure. In the PlaySoul hero the animation pulled the eye away from the headline. Since then every piece of motion is ranked against what has to be read first. Two focal points of motion in one screen is a bug, not richness.
The thing that has to be read first
The default here is the failure. Flip the switch to see what it was doing to the headline.
A visual language that is beautifully drawn and thoughtlessly typeset breaks in the middle. The typographic decisions below were written together with the engine, not after it, and each one is defined once and then runs on its own across every page.
Every step is shown here in its real spec, exactly as it runs on this page. Sizes move with the width of the screen, weight and tracking stay fixed.
An extra weight feels at first like another tool of expression, and after three of them nobody can tell what matters. The same block, once with two weights and once with four.
I chose the hand before I chose the code
Before a single line of code I set where the hand feel comes from. One concrete reference decides more than ten adjectives, so everything was derived from a single painting clip and not from an abstract description.
The pixel count changes with every screen and every type size. What stays stable is the number of characters in a line, which is why every measure on this page is written in ch.
The hand is steady most of the way and drifts only in moments, and in the first eight percent of the stroke there is the tremble of the brush landing, exactly like the instant a brush touches a surface before it settles. The radius swells in the middle of the stroke and narrows at the ends, and pressure breathes instead of jumping.
One of those is enough to lower the impression of an entire page. Headings get balanced line breaks, and body text gets treatment that prevents a lone word on the last line. The only fix that is forbidden is the manual one: a forced line break looks perfect at one width and falls apart at every other.
The illustration and the text have to feel like one family, so the brush width in the canvas below was not chosen by eye. The browser measures the stem width of the body font at body size, and the brush calibrates itself to it on load.
The scene is built in front of the eye, line after line.
An effect that drains a battery comes off the site within a week. These six decisions are what let this language live on real pages.
I did not generate an image from a prompt. I set where the hand feel comes from, which ramp is allowed, and what the copy is forbidden to do. The agent wrote the engine. Every decision that determined how this looks is mine.
And the smallest details carry all of it: the tremble in the first eight percent of a stroke, and a dab of light offset by less than a pixel. That is where an effect becomes a language.
I build visual languages that live in code: the reference, the ramp, the rules, and the engine that runs them on every page. No template, and nothing you can download.