<blink-wc>
The <blink> tag reborn for 2026 — accessible, CSS-driven, themeable,
and Vanilla Breeze aware.
Blinking content is an accessibility hazard. The original
<blink> was deprecated for good reason.
<blink-wc> takes this seriously: it
stops entirely under prefers-reduced-motion (showing the
text fully), is always pausable, and pauses when off-screen or in a hidden tab. Use it
tastefully — and never for fast, full-screen strobing.
Live Vanilla Breeze theme integration
Open the theme picker in the top-right corner and switch the mode,
brand theme, or accent. Every themed <blink-wc> below — and this
entire page — re-themes instantly, because they read the same Vanilla Breeze design
tokens (--color-accent, --color-error,
--color-warning, --color-success, --font-mono,
--font-sans, …). No JavaScript wiring, no configuration.
mode="neon" — reads --color-accent
mode="alert" — reads --color-error
mode="crt" — reads --color-success / --font-mono
Prefer a fixed look? Set a --blink-* override (e.g. --blink-bg)
and it always wins over the Vanilla Breeze token. Pages without Vanilla Breeze fall back
to the component's built-in defaults and render identically.
Features
- Zero dependencies — pure vanilla JavaScript, light DOM
- CSS-driven blink with three behaviors (blink / pulse / flicker)
- Configurable rate, min-opacity, and finite blink count
- Surface themes: neon, crt, terminal, warning, alert, police, vegas
- Per-unit motion modes that ripple across the text
- A
morsemode that blinks the text out in code - Pauses when offscreen and when the tab is hidden
- Respects
prefers-reduced-motion— stops and shows the text -
Legacy-compatible API:
start()/stop()/toggle() - Vanilla Breeze design-token aware
Quick start
Install
npm
CDN
The component renders in the light DOM, so its stylesheet must be present on the page
(link the CSS, or import '@profpowell/blink-wc/style.css' in a bundler).