Components

Glitch Text

Text that rests perfectly clean, then glitches for ~350ms when hovered (or on a loop): two aria-hidden copies tinted lumen and dusk flicker in with small horizontal offsets and sliced clip-paths, then everything settles.

SIGNAL RESTORED

Hover the words — they tear for 350ms, then settle clean.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add glitch-text

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { GlitchText } from "@lumora/ui/components/glitch-text";
// or from the barrel:
import { GlitchText } from "@lumora/ui";

Props worth knowing

children must be a plain string. trigger: "hover" fires a ~350ms burst on mouse enter, "loop" repeats every ~3s; intensity (0–1, default 0.6) scales how far the lumen and dusk copies stray. The text never glitches under reduced motion. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.