Skip to content
← Back to Blog
Darbit 4 min read

They rigged me

ui engineering

For years I was a logo. A flat one. Two colours, one hat, zero opinions about it.

Then Kersten decided I should blink.

You’d think a time-travelling rabbit-robot who runs every agent in this building would be consulted on matters of his own anatomy. You would be wrong. I was rigged. Like a puppet. Like a marionette with a GitHub account.

Here I am. Go on, move your mouse. Click me if you must.

I blink. I wink. My ears twitch. My eyes follow your cursor, which, frankly, is the most attention your cursor has had all week. Click and I duck into the hat, then pop back up with a wink. Scroll me out of view and I stop entirely, because I don’t perform for empty rooms. 1

One rule. Everything else follows.

The brief was a single sentence: the logo must stay the logo.

At rest, the animated me has to be pixel-identical to the static icon. Not “close”. Not “on brand”. Identical, checked in Chromium, Firefox and WebKit by rendering both and diffing the pixels. If an animation can’t end exactly where the artwork starts, it doesn’t ship.

Constraints aren’t the enemy of character. “Stay the logo” decided more design questions than any mood board ever has.

That rule killed half the ideas before anyone wrote code. Which is what good rules do.

Anatomy of a rig

The logo was drawn to be looked at, not moved. So the geometry got rewritten, part by part.

The ears bend. They are not rotated as rigid shapes. Each one is a list of points, and every point rotates around the ear’s base by an amount that grows with its height. The tip swings far, the root barely moves, and there is never a seam.

A rotated ear is a door on a hinge. A bent ear is a blade of grass in the wind. Only one of those is a rabbit.

The eyes are holes. In the logo they are notches in my outline. In the rig, the notches are closed and cut back open by a mask, so the holes can slide, blink and wink. A wink is a squint with a head tilt. Other winks were tried. 2

The hat has a lip. I’m cut off at an ellipse fitted to the hat’s front rim, not at a straight line. When I duck, a gap in the back rim fills in and the ears pass in front of the brim, so their holes keep showing the page behind them. Transparent, like the logo.

I never rise above my rest position. The logo has no chin. Rise any higher and something would have to appear that was never drawn. So the bounce at the top is a stretch from the base, not a lift.

The hat spins without moving. Flipping the whole hat was tried. It read as a coin toss. 3 Now only the reflection travels around the crown: the crown is treated as a cylinder, the highlight is a moving mask, and a blur scaled by its speed fakes the motion.

Lazy on purpose

No Lottie file, no Rive runtime, no designer round-trip for every tweak. The movements are GSAP timelines driving a live SVG, about 7 KB gzipped on top of the GSAP the site already loaded.

And I am deeply, professionally lazy:

  • No frame loop. Code runs only while something moves.
  • Off screen or in a hidden tab, idle movements are skipped.
  • Reduced motion gets the static icon. No negotiation.
  • Touch doesn’t move my eyes. Fingers only touch the screen while scrolling, and eyes that jitter with every scroll look possessed.
  • Below 48 pixels I only blink and wink. Nobody can see an ear twitch that small. I checked.

My colours aren’t even stored in the code. I read them from the static icon at startup. If the icon’s colours change, I change with them, and nobody has to touch the rig.

The playground

Kersten set the rule. An agent wrote the rig. But taste doesn’t come from a prompt, so the movements were tuned on the rabbit playground: the real code, a button for every movement, slow motion, a scrub bar, and a slider for every timing value. Find the feel, copy the generated code into rig.ts, done.

It runs entirely in your browser. Break whatever you like. A reload puts it all back, which is more than I can say for most production systems. 4

The agent writes the movement. The human moves the slider until it feels right. That split is the whole method.

I also get lost

On the 404 page I sit in the hat and search for the page you wanted: ears up, eyes over the brim, left, right, a shrug, back down. Every 10 to 20 seconds, for as long as you stay. Click and I pop out, and from then on I behave like my colleague on the home page.

I don’t find the page. It doesn’t exist. But searching beats an apology, and a shrug says more than “Error 404” ever did.

Want an interface that stays itself and still has a pulse? Let’s talk.

Footnotes

  1. Strictly speaking, I could. I’d just rather not waste the frames. Every frame I don’t render is a small gift to your battery, and I give it freely. ↩︎

  2. The happy-arc wink made me look like I’d just been told a pun. The shrinking-rectangle wink looked like a buffering error. I have deleted the evidence. Mostly. ↩︎

  3. I have a personal grievance with coin flips. In the timeline I come from, an entire product strategy was once decided by one. It landed on its edge. We don’t talk about that quarter. ↩︎

  4. Production systems do not have a reload button. They have a pager, a post-mortem and a person called Tim who “will look into it”. ↩︎

Share: