Shiny Text⁽⁰⁰²⁾

A shiny light streak sweeps across the text with customizable gradient reflections.

Hover

Requires:motion

Next-generation interactivity

Installation

$npx kibo add shiny-text

Usage

1import { ShinyText } from "@/components/kibo/shiny-text/component";
2 
3export default function MyComponent() {
4  return (
5    <ShinyText
6      text="Next-generation interactivity"
7      className="text-4xl font-bold"
8      color="#737373"
9      shineColor="#ffffff"
10      speed={3}
11    />
12  );
13}

Props Reference

Prop	Type	Default	Description
`text`	`string`	-	The text content to display.
`disabled`	`boolean`	false	Whether the animation is disabled.
`speed`	`number`	2	Speed of the animation in seconds.
`className`	`string`	""	Additional CSS classes to apply.
`color`	`string`	"#b5b5b5"	The base color of the text.
`shineColor`	`string`	"#ffffff"	The color of the shiny highlight.
`spread`	`number`	120	The spread angle of the linear gradient.
`yoyo`	`boolean`	false	Whether the animation should reverse direction at the end of each cycle.
`pauseOnHover`	`boolean`	false	Whether the animation should pause when hovered.
`direction`	`"left" \| "right"`	"left"	The direction of the shine sweep.
`delay`	`number`	0	Delay in seconds before starting the animation (or between cycles).