Theme 022 · Material & 3D

Pop-up Book

A hardcover opens on a walnut desk and every spread is one beat of the story, with V-fold paper stands rising out of the gutter. Pulse lives in the paper mechanics: a flag pops up over the one bar that dropped, and the human pulls the tab.

readability ●●○trust ●●●effort med

How many dashboards
did you check today?

PAGE 1 · MONDAY, 9 TABS OPEN

SIGNUPS

ACTIVE USERS

ERRORS

P95 LATENCY

212 ms

CHECKOUT

Friday?

DASHBOARDS

1 · HOOK0:00–0:08

The book falls open on beat 1; the back row of dashboard stands rises out of the gutter, then the front row lags 0.12 s behind — the “38” card pops last on the bar-8 downbeat.

CHAPTER 2 · MEET YOUR BACKGROUND WATCHER

2 · REVEAL0:08 (drop)

The page turns right→left on the drop (rotateY −180°); the sunburst die-cut and the Acme medallion hinge up from flat, and the “Acme Pulse” banner stand snaps upright one beat later.

Pulse flags it.
You pull the tab.

ANOMALY

Checkout conversion

−18%

since 09:42 · after deploy #2231

SIGNUPS

ACTIVE

LATENCY

CHECKOUT

ERRORS

PULL → Roll back

14 METRICS · WATCHED

3 · PROOF MOMENT0:12–0:32

Bars rise left→right one per beat; the checkout bar pops up short and coral, then the anomaly flag unfolds on its strut. The coral pull-tab slides out of the page edge on a snare and the reader pulls it to roll back.

Acme Pulse

Caught before
customers noticed.

A FIELD GUIDE TO QUIET METRICS · VOL. 1

Start freePULL

4 · CTA0:36–0:45

The book claps shut on a downbeat — cover swings in from the right — and the coral “Start free” pull-tab slides out of the page block on the last bar.

COMPONENT KIT

Spread — two CSS-3D page planes hinged at the gutter, cream stock with a gutter shadow
V-fold stand — an upright card that rotates 0→90° off the page; carries a metric or the logo
Fold foot — skewed shadow strip at each stand's base that sells the paper hinge
Sunburst die-cut — alternating teal-tint / cream rays behind the reveal medallion
Strut + flag — a paper strut lifts the anomaly card above the coral bar
Pull-tab — the human action and the CTA: coral paper tab that slides out of the page edge

MOTION · MUSIC

Page turn — rotateY 0 → −180°, power2.inOut 0.9 s; the page lands flat on the downbeat, so start it 0.9 s early (≈2 beats at 120 BPM)
Pop-rise — stands rotateX 90 → 0°, back.out(1.4) 0.45 s, staggered 0.12 s by depth row so each row lands on an eighth note
Linkage — the pull-tab's x drives the flag and bar rotation (tab 0→120 px maps to flag 0→90°), easing none — the reader's pull is the rhythm

WHY / RISK · ADAPT IT

Paper engineering feels crafted and trustworthy, and a pop-up is literally “something rising to your attention” — the anomaly pops while everything else stays flat. Risk: text on angled paper shrinks and warps; keep all copy on stands that face camera and on the flat cover.

Adapt to your product: Turn each of your product's screens into one spread and each key card into a stand; the thing your product catches is the stand that pops up in the alert colour, and your main action becomes the pull-tab.

References: https://en.wikipedia.org/wiki/Pop-up_book (pop-up mechanisms: V-folds, pull-tabs, volvelles) · https://vimeo.com/192946755 (pop-up book animation study)