Theme 058 · Signature directions

Hand-Drawn Marker

Marker and pencil on warm dotted paper. The rule is strict: scribbles belong to the problem — red rings, crossed-out chores, a looping arrow, a highlighter smear — and an eraser wipes them all away on the drop. From then on the UI stays clean; only neat single-stroke teal ticks and one coral ring around the anomaly survive.

readability ●●●trust ●●○effort med

How many dashboards did you check today?

01Open the dashboard

02Refresh · compare

03Export to sheet

04Ask in chat

05Check again

1 · HOOK0:00–0:08

The question writes in left→right, then each chore is written and struck through half a beat later; the looping arrow swings from “Check again” back to the top and its head stabs in on the bar-3 downbeat, with “38 tabs!!” circled on the next.

You ship. Pulse watches.

Acme Pulse

the scribbles are gone. the checking isn’t your job anymore.

2 · REVEAL0:08 (drop)

On the drop an eraser sweeps left→right in one beat, leaving a clean dot-free band and crumbs; line 1 appears in the cleared strip exactly on 0:08, pencil guides draw, and the lockup is inked over them before the guides fade.

Caught before customers noticed.

Acme Pulse · 14 metrics

Signups+4%

Active users+1%

Checkout conversion−18%

p95 latency212 ms

Error rate0.4 %

Roll backAcknowledge

Roll back? your call.

— Pulse

pencil → real: the seam walks left to right

3 · PROOF MOMENT0:12–0:32

A pencil wireframe draws first, then a sketch→real seam walks left→right turning it into crisp UI; teal ticks land one per beat, the coral ring closes around −18% on the bar-9 downbeat and the sticky note slaps onto the corner on the next.

Acme Pulse

You ship. Pulse watches.

Start free

4 · CTA0:36–0:45

Clean lockup, then one last hand gesture: the teal underline draws under “Pulse watches.” in a single stroke on a downbeat, and the coral “Start free” drops on the sting.

COMPONENT KIT

Dotted paper — warm off-white with a 30 px dot grid; the eraser leaves a dot-free band
Red marker ring — double overshooting ellipse around the one number that matters
Strike-through + loop arrow — marker lines over chores and an arrow that loops back to the start
Highlighter smear — amber at 40 %, ragged ends, under the active item
Sketch → real seam — pencil dashed wireframe that becomes crisp UI as a vertical seam passes
Sticky note + tape — peach note, 5° tilt, teal tape; carries the agent’s one-line suggestion

MOTION · MUSIC

Stroke draw — SVG stroke-dashoffset 100 → 0 over 0.3–0.5 s, power1.inOut, with a 1–2 px jitter pass for hand feel
Eraser wipe — mask rect scaleX 0 → 1 in exactly one beat (0.5 s at 120 BPM), linear, landing on the drop
Sticky slap — rotate 12° → 5°, scale 1.1 → 1, back.out(2) 0.25 s on a downbeat, plus a 2-frame shadow squash

WHY / RISK · ADAPT IT

Hand marks feel human and honest, and the rule “mess = problem, clean = product” makes the before/after legible without words. Risk: too much scribble reads as childish or chaotic — cap the marks per frame and keep all numbers in clean type.

Adapt to your product: Scribble over your users’ current manual process in the hook, erase it on the drop, and let your real UI appear through a sketch→real seam; keep exactly one marker ring for the moment your product catches something.

References: https://roughjs.com/ (Rough.js: sketchy hand-drawn SVG primitives) · https://en.wikipedia.org/wiki/Excalidraw (Excalidraw’s hand-drawn diagram look (built on Rough.js))