Pulse on icons · staggered wink

Source · Dan, 2026-05-29

"I keep wanting pulses on these icons too, like an easter egg."

Validated on data.gf.cx after the same session locked in the active-dot infinite pulse (the "you are here" marker) and the on-hover pulse on the gate-detail icons. The third move — a permanent, gentle pulse across the source-type glyphs on the active gate card — gave the surface a quiet pulse-of-life that reads more as character than as chrome.

The problem

A row of icons next to a label reads as static decoration. The eye logs them once and moves on. Without motion, you lose two things:

The personality cue. Static iconography is institutional; subtle motion suggests "this surface is alive, somebody's at the keyboard."
The serial relationship. Icons in a row mean the same thing: they're peers. Synchronous motion treats them as one block. Staggered motion treats them as a sequence — which more truthfully maps the underlying data (different sources, processed in order).

The element, in-page

Four glyphs, ~5.2s cycle, 0.9s phase offset between siblings — a quiet ripple left-to-right. The wink occupies roughly 12% of the cycle; the other 88% each glyph sits at rest. Sit with it for ten seconds to catch the full sequence.

Where it applies

Reach for this when:

The icons are peers in a sequence — sources, steps, stages — and staggered motion would truthfully encode their relationship. The first home is data.gf.cx, where the source-type glyphs on the active gate card carry exactly this pulse.
The page is read more than scanned. Easter eggs assume the user will sit with the surface long enough to notice — five to ten seconds at minimum.
The ambient motion doesn't compete with an existing always-on signal nearby — a pulsing active dot, a spinner, a loading bar. One ambient motion per region is the rule.

It does not belong on form fields, navigation, primary CTAs, error states, or anywhere accessibility-critical. Always pair with the reduced-motion cutout below.

Reusable elements

icon-wink keyframe — scale(1) → scale(1.18) + opacity 0.82 → 1; the wink window is frames 0–12%, the rest of the cycle at ease. Copy the @keyframes icon-wink block verbatim and adjust the peak scale for your icon size.
Staggered phase offset — nth-child animation-delay increments (0.9s per sibling for four icons over a 5.2s cycle). Creates an overlapping ripple rather than a strict queue — pick offsets that feel like a sentence, not a metronome.
Transform-origin guard — transform-origin: center on every glyph so the scale emanates from the icon centre, not from a corner. Required; omit it and the icons jump sideways.
Reduced-motion cutout — @media (prefers-reduced-motion: reduce) { .icon-row__glyph { animation: none; opacity: 1; } }. Required any time a permanent animation ships to a public page.

Reference

Source: Dan, 2026-05-29 · "I keep wanting pulses on these icons too, like an easter egg." Validated on the data.gf.cx gate-card source icons during the same session that locked in the active-dot and hover-pulse moves.
In use / example: data.gf.cx — source-type icons on the active gate card carry the staggered wink. Open the page and sit with it for ~10s to catch the full cycle.
Reusable elements: icon-wink keyframe · staggered nth-child delays · transform-origin guard · prefers-reduced-motion cutout (listed above).
Origin: Third in the pulse-as-affordance family: infinite pulse = "you are here" (active marker, always running); hover pulse = "engage" (one-shot on rollover); staggered ambient pulse = "heartbeat" (decorative, sequential). Same CSS technique — scale + opacity keyframes — three semantic registers.