Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt

Use this file to discover all available pages before exploring further.

BlinkingText is a lightweight wrapper component that applies a CSS blink animation to any children passed into it, recreating the nostalgic effect of the legendary <blink> HTML tag. The <blink> element was introduced by Netscape Navigator in the mid-1990s and quickly became one of the most iconic — and divisive — features of the early web. Stripped from modern browsers for accessibility reasons, its distinctive on-off flicker lives on here through a Tailwind animate-blink utility class.

​
Props

​
children
ReactNode
required
Any content to animate — text, icons, badges, or other React elements. Rendered directly inside a <span> with the blink class applied.
​
className
string
default:"\"\""
Additional Tailwind or custom CSS classes applied to the wrapping <span>. Use this to set colour, font, size, or spacing on the blinking element.

​
Import

import { B as BlinkingText } from '../components/Primitives.js';

​
Usage

<BlinkingText>UNDER CONSTRUCTION</BlinkingText>
<BlinkingText className="text-retro-pink font-pixel text-xs">NEW!</BlinkingText>

​
The animate-blink Keyframe

The animation is powered by a Tailwind custom keyframe registered in your tailwind.config.js. The keyframe steps the opacity between fully visible and fully invisible with a step-end timing function — matching the abrupt, non-interpolated flash of the original browser implementation: 
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.animate-blink {
  animation: blink 1s step-end infinite;
}
step-end means the value snaps instantly at each keyframe rather than easing between them, reproducing the hard on/off character of the classic <blink> tag rather than a soft fade.
Accessibility notice: Rapidly blinking content can trigger photosensitive conditions, including seizures, in susceptible individuals. The WCAG 2.1 guideline 2.3 recommends avoiding content that flashes more than three times per second.For production sites, consider one or more of the following mitigations:
  • Wrap usage in a prefers-reduced-motion media query and render static text as the fallback: 
    const prefersReduced =
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

{prefersReduced
  ? <span className={className}>{children}</span>
  : <BlinkingText className={className}>{children}</BlinkingText>}
  • Slow the interval by overriding the animation duration via className: 
    <BlinkingText className="[animation-duration:2s]">NEW!</BlinkingText>
  • Reserve blinking for non-critical decorative text (labels, badges) rather than primary content or calls to action.

Build docs developers (and LLMs) love

Get started for freeTalk to us