<blink-wc>
The <blink> tag reborn for 2026. A modern, accessible, themeable web component
for blinking content — from a buzzing neon sign to a green CRT terminal, a
flashing alert, a string blinked out in Morse code, or (yes) an annoying retro
web effect.
Live demo & docs → — open the theme
picker and watch the themed blinks re-skin with Vanilla Breeze in real time.
A note on accessibility. Blinking and flashing content is a genuine
accessibility hazard (and the original <blink> was deprecated for good
reason). <blink-wc> takes this seriously: it stops entirely under
prefers-reduced-motion, is always pausable, and pauses when off-screen or in
a hidden tab. Use it tastefully — and never for fast, full-screen strobing.
Features
- Zero dependencies — pure vanilla JavaScript, light DOM
- CSS-driven blink with three behaviors (
blink, pulse, flicker)
- Configurable
rate, min-opacity, and count (finite blinks then stop)
- Surface themes and per-unit motion modes (see Modes below)
- A
morse mode that blinks the text out in International Morse code
- Pauses when offscreen (IntersectionObserver) and when the tab is hidden (Page Visibility)
- Respects
prefers-reduced-motion — stops, and shows the text fully
- Legacy-compatible API:
start(), stop(), toggle()
- Custom events:
blink-start, blink-pause, blink-cycle
- Built-in themes and full CSS custom property theming
- Vanilla Breeze design-token aware
- TypeScript definitions included
Installation
npm install @profpowell/blink-wc
Or use via CDN:
<link rel="stylesheet" href="https://unpkg.com/@profpowell/blink-wc/dist/blink-wc.css" />
<script type="module" src="https://unpkg.com/@profpowell/blink-wc/dist/blink-wc.js"></script>
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).
Usage
<link rel="stylesheet" href="dist/blink-wc.css" />
<script type="module" src="dist/blink-wc.js"></script>
<blink-wc>Now you see me…</blink-wc>
Attributes
| Attribute | Type | Default | Description |
|---|
rate | time | 1s | CSS time for one blink cycle |
behavior | string | blink | blink | pulse | flicker | steps |
min-opacity | number | per-mode | Opacity of the "off" phase (0–1) |
count | number | infinite | Number of blinks, then stop |
steps | number | 2 | Step count for the multi-step engine (min 2) |
step-durations | list | equal | Per-step hold weights, e.g. 3 1 1 |
step-by | string | element | element | letter | word — step the whole text or each unit |
pause-on-hover | boolean | — | Also pauses on :focus-within |
play-state | string | running | running | paused |
reduced-motion | string | respect | respect | ignore |
mode | string | — | A visual/motion preset (see Modes below) |
unit | string | letter | letter | word — granularity for the motion modes |
Modes
The mode attribute selects a preset. Surface themes style the container;
per-unit motion modes animate each letter (or word, with unit="word"); and
morse blinks the text out as code.
Surface themes
| Mode | Description |
|---|
neon | A buzzing neon sign that flickers on with a colored glow |
crt | Green phosphor terminal glow over faint scanlines |
terminal | Steady text with a blinking block cursor |
warning | Amber hazard panel that blinks for attention |
alert | A flashing red error banner |
police | Alternating red/blue light bar |
vegas | A glowing gold marquee sign |
Per-unit motion modes
These split the text into per-unit spans and animate each one with a staggered
delay, so the effect ripples across the text. With unit="word" the units are
whole words. They honor prefers-reduced-motion.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
