Warp Text⁽⁰³²⁾

High-performance WebGL liquid ripple and sine wave distortion shader warping text.

Hover

Requires:ogl

Installation

$npx kibo add warp-text

Usage

1import { WarpText } from "@/components/kibo/warp-text/component";
2 
3export default function Example() {
4  return (
5    <WarpText />
6  );
7}

Props Reference

Prop	Type	Default	Description
`text`	`string`	'Bend the moment'	The text content to display and animate.
`color`	`string`	'#f8f5ff'	Text or primary fill color.
`warpStrength`	`number`	0.08	Controls the warp strength for the component animation.
`warpScale`	`number`	1.7	Controls the warp scale for the component animation.
`speed`	`number`	0.55	Speed multiplier for the motion playback.
`pointerInfluence`	`number`	0.42	Controls the pointer influence for the component animation.
`pointerStrength`	`number`	0.38	Controls the pointer strength for the component animation.
`refraction`	`number`	0.018	Controls the refraction for the component animation.
`ripple`	`boolean`	true	Controls the ripple for the component animation.
`fontSize`	`string \| number`	'clamp(3rem, 10vw, 9rem)'	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`string \| number`	800	Font weight (e.g., 400, 700, 900, 'bold').
`fontFamily`	`string`	'inherit'	Custom font family to apply to the rendered typography.
`letterSpacing`	`string \| number`	'-0.06em'	Controls the letter spacing for the component animation.
`lineHeight`	`string \| number`	0.9	Controls the line height for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`CSSProperties`	-	Controls the style for the component animation.
`text`	`string`	'Bend the moment'	The text content to display and animate.
`color`	`string`	'#f8f5ff'	Text or primary fill color.
`fontSize`	`string \| number`	'clamp(3rem, 10vw, 9rem)'	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`string \| number`	800	Font weight (e.g., 400, 700, 900, 'bold').
`fontFamily`	`string`	'inherit'	Custom font family to apply to the rendered typography.
`letterSpacing`	`string \| number`	'-0.06em'	Controls the letter spacing for the component animation.
`lineHeight`	`string \| number`	0.9	Controls the line height for the component animation.
`warpStrength`	`number`	0.08	Controls the warp strength for the component animation.
`warpScale`	`number`	1.7	Controls the warp scale for the component animation.
`speed`	`number`	0.55	Speed multiplier for the motion playback.
`pointerInfluence`	`number`	0.42	Controls the pointer influence for the component animation.
`pointerStrength`	`number`	0.38	Controls the pointer strength for the component animation.
`refraction`	`number`	0.018	Controls the refraction for the component animation.
`ripple`	`boolean`	true	Controls the ripple for the component animation.