Echo Text⁽⁰¹²⁾

Generates cascading reverberation text layers with customizable depth and kinetic motion.

Hover

REVERB

Loading…

Installation

$npx kibo add echo-text

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

Prop	Type	Default	Description
`text`	`string`	'Motion Echo'	The text content to display and animate.
`echoes`	`number`	12	Controls the echoes for the component animation.
`lag`	`number`	0.24	Controls the lag for the component animation.
`offset`	`number`	36	Controls the offset for the component animation.
`direction`	`Direction`	'right'	Direction of movement (e.g., 'top', 'bottom', 'left', 'right').
`fade`	`number`	0.72	Controls the fade for the component animation.
`blur`	`number`	3	Controls the blur for the component animation.
`tint`	`string \| false`	'#7dd3fc'	Controls the tint for the component animation.
`mode`	`Mode`	'both'	Controls the mode for the component animation.
`cursorRadius`	`number`	320	Controls the cursor radius for the component animation.
`duration`	`number`	900	Duration of the animation in seconds or milliseconds.
`ease`	`Ease`	'ease-out'	GSAP or cubic-bezier easing curve for animation smoothing.
`fontSize`	`string \| number`	'clamp(3rem, 9vw, 7rem)'	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`string \| number`	800	Font weight (e.g., 400, 700, 900, 'bold').
`color`	`string`	'#f8fafc'	Text or primary fill color.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`CSSProperties`	-	Controls the style for the component animation.