Demos

1. Legacy <blink> emulation

Drop-in mental model. The classic on/off blink — but pausable and reduced-motion safe.

2. Behaviors

blink (hard on/off), pulse (soft fade), flicker (irregular flutter). rate sets the cycle time.

behavior="blink"

behavior="pulse"

behavior="flicker"

3. count — finite blinks, then stop

Blink three times to grab attention, then settle. Reload to replay.

4. Surface themes

mode="neon" — a buzzing neon sign

mode="crt" — green phosphor glow

mode="terminal" — steady text, blinking cursor

mode="warning" — amber hazard panel

mode="alert" — flashing red banner

mode="police" — alternating red/blue

mode="vegas" — a glowing gold sign

5. mode="morse" & mode="decode" — blink it out in code

morse blinks the text out as International Morse code (with a dot/dash caption). decode flickers each unit through random glyphs, then locks onto the real text — both driven by a small requestAnimationFrame loop.

6. Per-unit motion modes

These split the text into per-character spans and animate each with a staggered delay, so the effect ripples across the words. Add unit="word" to animate whole words.

mode="wave" — a blink travels across

mode="twinkle" — each letter on its own clock

mode="sparkle" — twinkle with a glint

mode="rainbow" — spectrum, blinking

mode="chase" — theater-marquee chase

mode="glitch" — jittery chromatic blink

mode="cascade" — a soft falling pulse

mode="typewriter" — typed out with a caret

mode="zoom" — letters swell toward you

mode="flip3d" — split-flap tumble

mode="swing" — pendulum letters

mode="shake" — nervous jitter

mode="heartbeat" — double-thump pulse

7. unit="word" — animate whole words

Any per-unit mode can run per word instead of per letter.

mode="cascade" unit="word"

mode="twinkle" unit="word"

8. The multi-step engine

With behavior="steps" (or any step mode) the blink advances through N steps across one cycle, and each step is its own style state — data-step="0"…data-step="N-1". A plain blink is the 2-step case. step-durations sets how long each step holds; --blink-step-ease and --blink-step-timing morph between steps (and can differ per step).

mode="extrude" — isometric 3D punch toward you

mode="collapse" — squash flat, then pop

mode="outline" — solid ↔ hollow

mode="morph" — a 4-step colour + transform sequence

mode="depth" — a true-3D punch toward you

mode="revolve" — flips to the back and around

step-by="letter" — the sequence ripples across the letters

Every unit runs the step cycle offset by its index, so the states travel across the text rather than changing in lockstep.

behavior="steps" — roll your own with per-step timing

A custom 3-step traffic light: green holds longest, yellow briefly, red a while (step-durations="6 1 4"), and each light eases in with its own timing — all via blink-wc :is(.blink-content, .blink-char)[data-step='K'] { … }.

9. Programmatic control

start(), stop(), and toggle() work just like the old <blink>. The component also fires blink-cycle on each blink.