021 · Clay Studio — saas-motion-kit

How many dashboards
did you check today?

SIGNUPS

ACTIVE USERS

CHECKOUT

P95 LATENCY

ERRORS

DASHBOARDS OPEN

1 · HOOK0:00–0:08

Tiles plop onto the table one per beat, dropping from above with squash & stretch; the coral “38” slab lands last on the bar-8 downbeat as the second hook line cuts in.

Acme Pulse

2 · REVEAL0:08 (drop)

The Acme mark falls and squashes onto the plinth (scaleY 0.82 → 1.06) exactly on the drop; stray clay blobs bounce outward and the wordmark presses up from below.

PULSE · WATCHING 14 METRICS

SIGNUPS+4.1%

ACTIVE USERS12.4k

P95 LATENCY212 ms

CHECKOUT CONVERSION

−18%

since 09:42 · after deploy #2231

Pulse caught it. You decide.

Roll back

Acknowledge

3 · PROOF MOMENT0:12–0:32

Calm slabs wobble on stop-motion 12 fps; the stick slides in from bottom-right and pokes the coral slab on a snare hit, leaving a dent. The “Roll back” button sinks 6 px on the next downbeat.

Acme Pulse

You ship.
Pulse watches.

Start free

14 metrics · 2,418 events/sec · watched 24/7

4 · CTA0:36–0:45

Tagline slabs roll in left→right like a rolling pin flattening them; the coral “Start free” pill squashes onto the final downbeat and holds.

COMPONENT KIT

Clay slab — the base card: 42 px radius, inner highlight + inner shade + warm drop shadow
Fingerprint grain — feTurbulence overlay in multiply so every surface looks hand-pressed
Clay numerals — Manrope 800 with stacked highlight / ledge shadows; the hero metric
Clay coil — a line chart drawn as a rolled worm of teal clay (thick round-cap stroke)
Sculpting stick — Pulse's pointer: a wooden tool that pokes the anomaly and leaves a dent
Press-in button — the human action; shadows flip inward and it sinks 6 px when chosen

MOTION · MUSIC

Squash & stretch landing — scaleY 0.82 → 1.06 → 1, elastic.out(1, .5), 0.5 s; contact frame sits on the downbeat (0.5 s = one beat at 120 BPM)
Stop-motion stutter — idle wobble of ±1 px / ±0.6° on steps(12) = animated on twos at 24 fps; keeps every slab alive between beats
Press-in — shadow inset flip + translateY 6 px, power2.out 0.12 s, landing on a snare so the human choice feels physical

WHY / RISK · ADAPT IT

Clay makes a cold monitoring product feel warm and touchable, and one lumpy slab among smooth ones reads as “something's off” with zero copy. Risk: drifts childish if the palette goes pastel — keep the ink, teal and coral saturated and the numbers crisp.

Adapt to your product: Replace each slab with one of your product's cards (orders, builds, tickets); keep the numbers as real typeset text on the clay so they stay legible, and let only the problem card be lumpy and coral.

References: https://hype4.academy/articles/design/claymorphism-in-user-interfaces (claymorphism shadow recipe) · https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/ (soft, gooey 3D material in the browser)

Clay Studio