cursor-critters

Procedural creatures that walk, turn and chase your mouse pointer.

Zero dependencies · ~10 KB gzipped · MIT · open the live tuner

This demo needs a mouse.
There is no hovering pointer to chase on a touch screen, so the library hides itself instead of showing a dead box. Open this page on a desktop browser.
Browser device-emulation modes report a coarse pointer too, so the demo will stay hidden there as well.

Move the mouse across the box. Leave it alone for a moment and the creature wanders off on its own. The button in the corner swaps between the two creatures, and your choice is remembered.

Use it

<link rel="stylesheet" href="cursor-critters.css">

<div class="cursor-critter-stage">
  <canvas id="cursor-critter" class="cursor-critter-canvas" aria-hidden="true"></canvas>
  <button type="button" id="cursor-critter-swap" class="cursor-critter-swap">Reptile</button>
</div>

<script src="cursor-critters.js" defer></script>

That is the whole integration. The button is optional — drop it and you get a single creature. Nothing is configured in JavaScript unless you want to.

What makes it move

Traction. The body can only accelerate as hard as its planted feet allow, so a crouch–push–glide rhythm falls out of the physics rather than being keyframed.
Inertia everywhere. Speed is momentum and turning accumulates force, so it has to lean into a corner before it can take it.
A wave down the spine. Each joint eases toward its goal angle a little slower than the one ahead of it, which is what makes the body flow instead of snapping into shape.
A fixed 1/120s timestep, so the creature covers the same ground per second on a 60 Hz laptop and a 144 Hz monitor.

It gets out of the way

Hidden entirely without (hover: hover) and (pointer: fine)
Hidden entirely under prefers-reduced-motion: reduce
Stops dead when the tab is hidden or the canvas scrolls out of view
pointer-events: none, so clicks pass through to whatever is behind
Fixed canvas height, so nothing shifts when the script attaches

Built by rightkik · www.PRESS.in.th