ComponentsPixel
Shader ripple
A WebGL ripple bends the title under the pointer.
Installation
$ npx shadcn@latest add @textlab/shader-rippleNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ShaderRipple } from "@/components/textlab/shader-ripple/shader-ripple";
<ShaderRipple as="h1" text="Surface tension" />Variants
ripplelensProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "ripple" | "lens" | "ripple" | Rings travelling out from the pointer, or a magnifying circle under it. |
| strength | number | 1 | Effect strength, 0 to 2. |
| 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
- Signature hero moments that should feel physical.
- Large display words people will hover.
Skip it
- Several on one page; each needs a WebGL context.
- Small text.
Accessibility and motion
Accessibility
- The canvas is decorative; the text is read from a hidden copy.
- Without WebGL, or before it loads, the real text shows in place.
Motion
- Rings travel outward and fade with distance; the effect eases in and out with hover.
Reduced motion. Plain text; the shader never loads.
Performance
- The shader module is imported only when the title enters the viewport.
- Draws only while hovered; one texture upload per resize.