Theme 030 · Material & 3D

Stitch & Thread

Metrics are cross-stitched in teal thread on oat linen, and a silver needle is the agent working quietly in the background. A wrong stitch is unpicked in coral with a seam ripper, and the human approves the re-stitch with a sewn-on button.

readability ●●○trust ●●●effort med

How many dashboards
did you check today?

38 AND COUNTING · STITCHED BY HAND

1 · HOOK0:00–0:08

Stitches fill cell by cell left→right, the needle bobbing ahead of each row; the coral dip in the right-hand sampler is stitched last, on the bar-8 downbeat, while the bottom-right one is still unfinished.

Acme Pulse

EVERY METRIC, STITCH BY STITCH

2 · REVEAL0:08 (drop)

The hoop tightens (scale 1.04 → 1) on the drop; the mark patch's running-stitch border draws itself around in one bar and the satin wordmark sheens in left→right.

PULSE · STITCHING 14 METRICS · CHECKOUT

UNPICKED

Checkout conversion

−18%

since 09:42 · after deploy #2231

Roll back

Acknowledge

Pulse unpicks it. You approve.

3 · PROOF MOMENT0:12–0:32

The teal line stitches across one cell per sixteenth note; where it drops the thread turns coral, the ripper slides in on the snare and pulls two stitches loose, the sewn label drops in, and the “Roll back” button is pressed.

Acme Pulse

Every metric.
Every minute.

Start free

4 · CTA0:36–0:45

The linen drapes in from the top like a cloth reveal; the tagline appears, the “Start free” tag stitches its dashed border and lands on the final downbeat.

COMPONENT KIT

Weave ground — oat linen texture from two fine repeating gradients
Stitch cell — two diagonal thread strokes + a highlight — one data pixel
Needle + running thread — the agent: a silver sliver leading each row, trailing a thread path
Seam ripper — the anomaly tool; pulls out the coral stitches
Sewn label — fabric tag with a dashed stitch border for the anomaly details
Sewn button — a four-hole button on a fabric tag — the human action

MOTION · MUSIC

Stitch-reveal — per-cell stroke-dashoffset on steps() at 12 fps, 0.03 s stagger; a row completes every beat at 120 BPM
Needle bob — 0.15 s sine up/down ahead of the stitch front, locked to sixteenth notes
Unpick — coral thread pulls out with power2.in 0.3 s on the snare, then re-stitches teal over the next bar

WHY / RISK · ADAPT IT

Embroidery reads as meticulous care — exactly what “checking every metric” should feel like — and unpick-and-restitch gives a clean error → fix beat that is highly distinctive in a feed. Risk: stitched digits get noisy; keep stitched numbers large and few and set exact values as typeset labels.

Adapt to your product: Stitch your product's key chart or icon grid, let your agent be the needle, and turn the one thing it catches into the coral stitches that get unpicked; primary actions become sewn buttons.

References: https://www.itsnicethat.com/articles/blinkink-burberry-animation-fashion-project-050325 (stitched / textile animation in a fashion film) · https://tympanus.net/codrops/2020/02/11/how-to-create-a-physics-based-3d-cloth-with-cannon-js-and-three-js/ (physics-based cloth for the drape reveal)