WebGL warp that bends and refracts the text around the pointer.
Every prop is wired to the controls underneath. Move the pointer over the text to bend it.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Bend the moment" | The headline text rendered into the WebGL texture. |
color | string | "#f8f5ff" | Text fill color before the glass refraction pass. |
warpStrength | number | 0.08 | Amount of ambient glass distortion at rest. |
warpScale | number | 1.7 | Size of the moving distortion cells. |
speed | number | 0.55 | Speed of the ambient undulation. |
pointerInfluence | number | 0.42 | Radius of the cursor lensing area. |
pointerStrength | number | 0.38 | Strength of cursor-driven bending and magnification. |
refraction | number | 0.018 | Subtle RGB channel split for the glass edge. |
ripple | boolean | true | Adds a soft ripple to the pointer lens. |
fontSize | string | number | "clamp(3rem, 10vw, 9rem)" | Canvas raster font size. Numbers are pixels. |
fontWeight | string | number | 800 | Font weight used when rasterising the text texture. |
fontFamily | string | "inherit" | Font family used when rasterising the text texture. |
letterSpacing | string | number | "-0.06em" | Tracking applied while drawing the text into the texture. |
lineHeight | string | number | 0.9 | Line height for multi-line text. |
Keyboard shortcuts and ARIA behavior.