← all 100 themes
Theme 023 · Material & 3D

Origami

One sheet of paper is the whole film: it fanfolds into a stack of printed dashboards, opens into the Acme mark, peeks open to show the anomaly on its inner face, and refolds into an envelope. Crisp creases, faceted shading, teal ink — coral lives only inside the folds.

readability ●●●trust ●●●effort med

How many dashboards
did you check today?

38 DASHBOARDS · PRINTED · FOLDED · UNREAD
1 · HOOK0:00–0:08

The fanfold strip unfurls left→right, one panel per eighth note, each crease flashing a dashed line for 4 frames before it folds; the red-lined panel lands on the bar-8 downbeat.

Acme
Acme Pulse
2 · REVEAL0:08 (drop)

Four blintz flaps spring open outward on the drop (power3.out), revealing the mark in the centre square; “Acme Pulse” slides up from under the sheet one beat later.

Pulse opens the fold.
You decide.

WATCHING · 14
Signups+4.1%
Active users12.4k
p95 latency212 ms
Error rate0.4%
LIVE
2,418
events / sec
INSIDE THE FOLD
Checkout conversion
−18%
since 09:42
after deploy #2231
Roll back
Acknowledge
3 · PROOF MOMENT0:12–0:32

The tri-fold opens left→right; the third panel stops at a 30° peek on a snare, showing the coral inner face with the anomaly, holds 2 beats, then the “Roll back” tag lifts its folded corner.

Every metric.
Every minute.

Acme
Acme Pulse
Start free
folds into any inbox
4 · CTA0:36–0:45

The sheet refolds into an envelope — side flaps in, bottom up, top flap down on the downbeat — the mark seal presses on the tip and “Start free” slides out from under it.

COMPONENT KIT

MOTION · MUSIC

WHY / RISK · ADAPT IT

Folding is a perfect metaphor for “hidden until it matters”: everything looks calm on the outside and the problem is literally on the inside of the fold. Paper feels precise and honest. Risk: diagonal CSS-3D folds are fiddly — pre-plan every hinge edge and keep text on panels that face camera.

Adapt to your product: Print your product's key screen onto the sheet and pick the one thing it surfaces as the inner face; any list-type UI (orders, tickets, builds) folds naturally into a tri-fold or accordion.

References: https://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/ (paper-like unfolding in CSS) · https://github.com/joumorisu/CSS-Origami (CSS origami experiments)