ComponentsDistort
Liquid text
Ripples run through the letters under the cursor.
Installation
$ npx shadcn@latest add @textlab/liquid-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { LiquidText } from "@/components/textlab/liquid-text/liquid-text";
<LiquidText as="h2" text="Still water" variant="still" />Variants
ripplewavestillProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "ripple" | "wave" | "still" | "ripple" | Stir under the pointer, keep a slow current running, or stay calm until touched. |
| strength | number | 14 | Displacement in px at full stir. |
| radius | number | 1.6 | Radius of the stirred area in em. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Water, wellness and audio brands.
- Large display words people will hover.
Skip it
- Text that must be read while the pointer is over it.
- Small sizes; the ripple scale is in pixels.
Accessibility and motion
Accessibility
- Only a decorative copy is distorted; screen readers read the text once.
- Outside the pointer's circle the text is untouched.
Motion
- The current drifts slowly on two sine waves so it never loops visibly.
- Stir fades in and out with the pointer instead of switching.
Reduced motion. Plain, still text.
Performance
- One SVG turbulence filter. The loop pauses offscreen and when the tab is hidden.