Skip to content

Internal tool · noindex

Rabbit playground

The animated icon (ADR 009), driven by the site's own code in src/scripts/rabbit/. Trigger, slow down and scrub the movements, tune the values, then copy them into rig.ts.

Lab

Click a rabbit to make it duck. The eyes follow the mouse. Nothing moves on its own here. The 404 page's rabbit searches from inside the hat and stays there afterwards; "Pop up" brings it out, also in the middle of a search.

On light

On dark

Movements

Speed
Background
Scrub
Drag to scrub

Tuning

TUNING from rig.ts, live (depths and gaps in viewBox units; the icon is 40 × 48). Changes apply to every rabbit on this page and are gone when you leave it. Idle intervals and delays (EVERY in element.ts) aren't here.

3

How far the eyes slide sideways

1.4

Between the rabbit and the rim behind it, just below the brim

0.6

The same gap with the rabbit far inside

0.3

Rabbit depth where the gap starts to change

12

Depth where it reaches “Gap when deep”

0.2

Depth where the hat's back rim starts to show

1.8

Depth where it is fully there

31

How far the rabbit sinks when ducking and before rising

14

Depth with only the ears out (rise and search)

1.9

Depth where the eyes just clear the brim (search)

16

How far the ears flop outward in the search's shrug, degrees

2

Turns of the reflection; the spin gets longer with each

2.5

Largest motion blur of the reflection; 0 turns it off

export const TUNING: Tuning = {
  lookMax: 3,
  gapAtBrim: 1.4,
  gapDeep: 0.6,
  gapGrow: [0.3, 12],
  depthFade: [0.2, 1.8],
  hidden: 31,
  peekEars: 14,
  peekEyes: 1.9,
  droop: 16,
  spinTurns: 2,
  blurMax: 2.5,
};

As on the site

<RabbitMark> as the Home hero uses it: rises when it comes into view, then blinks, winks, twitches, glances, tilts and spins on its own, follows the mouse and ducks on click. Static with reduced motion. The third is the 404 page's (lost): it searches from inside the hat and comes out when you click it.

Small sizes

At 48 px and below only blinks and winks; the rest would be too small to see.

24 px
32 px
48 px
64 px
96 px