WordSpotlight

A moving set of corner marks brings one word into focus while the surrounding words soften.

AnimationsText@gaudi/design-system/animations/WordSpotlightView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { WordSpotlight } from '@gaudi/design-system/animations/WordSpotlight';

Usage

import { WordSpotlight } from '@gaudi/design-system/animations/WordSpotlight';
<WordSpotlight text="Gaudi" />

Examples

Playground

Storybook

Gentle focus

Storybook

API

5 props

Accessibility

The complete text is exposed once; decorative words are hidden from assistive technology. Reduced motion removes blur and corner marks. Pausing stops automatic changes while retaining the current visual focus. Provide a pause control for continuous cycling.

Notes

Visual idea inspired by True Focus from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits code or assets are included.

CipherRevealScrambled characters resolve progressively into readable text on view, hover or focus.GlyphInspectorInspect animated letter outlines with a gliding frame, floating square particles, measurement guides and a live readout. Hover to take control; drag and release a letter to return it to its slot.PhraseCycleA sequence of phrases rotates vertically in a stable space, without moving the surrounding line.TypewriterTypes, pauses and deletes a sequence of phrases while reserving space for the longest one.WarpTextText gently undulates at rest and bends beneath a moving pointer lens. Hover magnifies a local area, adds a soft ripple and optional RGB refraction, then eases back on exit.