Dragon
A plush dragon that watches your cursor and changes costume for each stage of my process. Built in three days to make one claim felt rather than read.
- The problem
- “I design and I build it in code” is a sentence every hiring manager reads a hundred times a week. Stated, it convinces nobody.
- The goal
- Make the claim something a visitor feels in five seconds, keep them for thirty, then hand them to the work, without splitting my presence in search in two.
- What I did
- The character and his four costumes, the motion, the engine that turns a video into a head that follows you, a mini-game, the loading sequence and the search setup.
- What it gave
- Live in three days. A head that tracks the pointer with no 3D rig at all, 3D props cut from 29 MB to 2.6 MB, and one search identity shared with this site.
The head is a video, and the cursor is the playhead.
There is no rig. The dragon's head is a rendered clip of him turning from one side to the other, and the pointer's horizontal position sets the clip's playhead. Move left, he looks left. The vertical axis only lets his body breathe with you, so he never chases the cursor like a toy on a string.
The scrub is a known trick. What makes it hold up is the detail around it. Every frame of the clip is encoded as a key frame, because without that the head turns in visible steps; it triples the file, about 4.5 MB per costume, and it is worth it. The renderer blinked mid-turn despite the prompt, so blinks were found by counting dark pixels in the eye band and cut out of the scrub range: a blink parked under a resting cursor reads as a bug.
Four costumes, a poke, and a game.
A rail switches four modes, one for each stage of how I work: Research, Design, Code, Ship. Each changes his hoodie, the palette, the headline and the objects around him, and the change is gentle on purpose: colours drift over a second and the objects are re-cast rather than swapped, because a total swap reads as a costume change in a shop. Poke his face and he answers in character: “I read all forty transcripts. You skimmed two.”
He hatches from an egg that fills with the real bytes loaded, because a half-loaded dragon does not look slow, he looks broken. Left alone for four seconds he looks around by himself. Keys 1 to 4 switch modes, and there is one more code for anyone who grew up with a console.
What keeps a toy from being a liability.
No CDN, no third party.
three.js is served from my own server under a strict content security policy, and the deploy script refuses to publish if a CDN link or a missing file creeps back in.
CostUpdates to the library are mine to make by hand.
3D props compressed eleven times.
29 MB of models down to 2.6 MB with quantisation alone, so nothing has to ship a decoder to unpack them.
CostSlightly softer geometry, invisible at the size they are drawn.
One person in search, not two.
The page carries the same structured identity as this site, so a search engine reads both addresses as one person rather than two people who share a name.
CostThe identity now has to change in two repositories on the same day, or neither.
A three-day build with a job to do.
Shipped
Move your mouse slowly.
Tendd