Browse components
Warp Text
Type that ripples like heat haze through an SVG turbulence filter on hover, with an optional RGB fringe, then eases back to crisp.
Installation
npx shadcn@latest add @glint-ui/warp-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/warp-text.json
Usage
import { WarpText } from "@/components/ui/warp-text";
<WarpText text="Warp" strength={28} className="text-8xl font-black" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Warp" | Text to warp. |
| strength | number | 24 | Peak displacement in px. |
| frequency | number | 0.008 | Noise scale; lower is broader waves. |
| speed | number | 1 | Speed of the flowing distortion. |
| chromatic | boolean | true | Split RGB channels for a colored fringe. |
| trigger | "hover" | "always" | "hover" | Warp on hover or keep a gentle warp running. |
| as | "p" | "h1" | "h2" | "h3" | "span" | "div" | "p" | Element to render. |
| className | string | — | Extra classes for the root element. |