Theme 088 · Art movements & eras

Op Art Illusion

Bridget Riley and Victor Vasarely's optical art turned into a monitoring metaphor: healthy data is a perfectly regular pattern that vibrates on the beat, and an anomaly is a warp in the field your eye finds before your brain does. Ink-on-paper stripes, teal concentric rings and one coral compression.

readability ●●○trust ●●○effort med

How many dashboards did you check today?

And the drop still shipped on Friday.

1 · HOOK0:00–0:08

Wavy stripes ripple left→right like Riley's Current, phase shifting a little every 8th note so the frame shimmers; the headline card punches in on the downbeat and the ripple amplitude peaks at 0:07 to feel overwhelming.

Acme Pulse

2 · REVEAL0:08 (drop)

On the drop the waves collapse inward into concentric teal rings that zoom toward the viewer (tunnel pull), the Acme mark sitting in the eye of the tunnel; the ink wordmark bar slides up on beat 3.

14 metrics · pattern holding

CHECKOUT CONVERSION

−18%

since 09:42 · deploy #2231

Roll back

Acknowledge

3 · PROOF MOMENT0:12–0:32

A regular checkerboard scrolls calmly until, on a downbeat, the columns squeeze together into a coral warp; the ring marker draws around it and the evidence card slides up — Roll back is pressed on the next bar and the columns relax.

Every metric.
Every minute.

Start free

Acme Pulse

steady pattern · acme.example

4 · CTA0:36–0:45

Everything straightens into even teal stripes — the pattern is calm again; the headline card and the coral Start free button pop on consecutive downbeats.

COMPONENT KIT

Riley wave field — 52 sine-modulated ink stripes, 11 px, as visual overload
Vasarely tunnel — offset concentric teal/paper rings that pull toward the mark
Checker field — regular squares standing for healthy metrics
Warp zone — column compression where squares turn coral — the anomaly
Ink-bordered card — 8 px ink frame holding type calmly on top of the pattern
Calm stripes — evenly spaced teal bars for the resolved end state

MOTION · MUSIC

Phase shimmer — wave phase += 0.35 rad per 8th note, stepped (no easing) so the vibration locks to 120 BPM
Warp squeeze — column widths animate to the Gaussian compression, sine.inOut 1 s (2 beats); relax with elastic.out after the human clicks
Tunnel pull — ring scale 1→1.25 with expo.in 0.5 s into the drop, then hard cut to the settled frame

WHY / RISK · ADAPT IT

It dramatises the core promise — Pulse sees the break in the pattern — with pure perception, no UI needed, and it is a scroll-stopper in a feed. Risk: strong moiré can shimmer badly after video compression and cause discomfort; keep stripes ≥ 10 px, avoid flicker faster than 3 Hz and always rest text on a solid card.

Adapt to your product: Use the regular pattern for 'normal' in your domain (requests, transactions, builds) and warp it where your product catches something. Replace the evidence card with your own alert UI.

References: https://en.wikipedia.org/wiki/Op_art — optical-art techniques: line vibration, figure-ground, colour contrast · https://en.wikipedia.org/wiki/Bridget_Riley — Current (1964), Movement in Squares (1961)