GlyphInspector
Inspect 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.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
Pointer exploration
Area reveal
Paused at an index
API
15 props
Accessibility
The complete text is exposed once; decorative letters are hidden from assistive technology. Hover and drag do not change the text. Reduced motion removes animated inspection and dragging; an explicitly paused inspector remains visible without motion. Provide a pause control for continuous autoplay.
Notes
- Visual idea inspired by Tech Text from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits code or assets are included.
- Typography is inherited and shrinks to fit the available width. The component reserves space for its particles, readout and bounded drag movement.
Related
CipherRevealScrambled characters resolve progressively into readable text on view, hover or focus.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.WordSpotlightA moving set of corner marks brings one word into focus while the surrounding words soften.