Skip to main content

Specimens, a ShirePath lab study

Specimens

Small interaction studies, each a few dozen lines of TypeScript and CSS with no animation library.

01

Decode

Custom software for new ideas and broken processes.

Each letter cycles through noise until its turn. Hover to run it again.

02

Magnetic

The button leans toward the cursor and springs back when it leaves.

03

Tilt

ShirePath Solutions

Perspective and depth in CSS: the mark sits in front of the card face.

04

Odometer

Each wheel rolls a beat after the one to its left. Click to roll.

05

Trace

The outline is drawn with a dash offset, then the fill comes up.

06

Fling

Throw the puck. It keeps your speed, slows down, and bounces off the walls.

07

Gooey

An SVG blur and an alpha cutoff fuse the drops into one liquid shape. Move through it.