Gradient Text⁽⁰¹⁷⁾

Silky multi-color gradient background sweep traveling continuously across typography.

Hover

Requires:motion

Gradient Motion

Loading…

Installation

$npx kibo add gradient-text

Usage

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

Props Reference

Prop	Type	Default	Description
`children`	`ReactNode`	-	Child elements or content to render inside the component.
`className`	`string`	''	Additional CSS classes for styling and layout.
`colors`	`string[]`	['#5227FF', '#FF9FFC', '#B497CF']	Controls the colors for the component animation.
`animationSpeed`	`number`	8	Controls the animation speed for the component animation.
`showBorder`	`boolean`	false	Controls the show border for the component animation.
`direction`	`'horizontal' \| 'vertical' \| 'diagonal'`	'horizontal'	Direction of movement (e.g., 'top', 'bottom', 'left', 'right').
`pauseOnHover`	`boolean`	false	Controls the pause on hover for the component animation.
`yoyo`	`boolean`	true	Controls the yoyo for the component animation.