Rotating Text⁽⁰²⁰⁾

Choreographed flipper cycling through multiple phrases with character-level staggering.

ScrollHover

Requires:motion

ShipInterfaces

Loading…

Installation

$npx kibo add rotating-text

Usage

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

Props Reference

Prop	Type	Default	Description
`texts`	`string[]`	-	Controls the texts for the component animation.
`transition`	`Transition`	{ type: 'spring', damping: 25, stiffness: 300 }	Controls the transition for the component animation.
`initial`	`boolean \| Target \| VariantLabels`	{ y: '100%', opacity: 0 }	Controls the initial for the component animation.
`animate`	`boolean \| VariantLabels \| TargetAndTransition`	{ y: 0, opacity: 1 }	Controls the animate for the component animation.
`exit`	`Target \| VariantLabels`	{ y: '-120%', opacity: 0 }	Controls the exit for the component animation.
`animatePresenceMode`	`'sync' \| 'wait'`	'wait'	Controls the animate presence mode for the component animation.
`animatePresenceInitial`	`boolean`	false	Controls the animate presence initial for the component animation.
`rotationInterval`	`number`	2000	Controls the rotation interval for the component animation.
`staggerDuration`	`number`	0	Controls the stagger duration for the component animation.
`staggerFrom`	`'first' \| 'last' \| 'center' \| 'random' \| number`	'first'	Controls the stagger from for the component animation.
`loop`	`boolean`	true	Controls the loop for the component animation.
`auto`	`boolean`	true	Controls the auto for the component animation.
`splitBy`	`string`	'characters'	Controls the split by for the component animation.
`onNext`	`(index: number) => void`	-	Controls the on next for the component animation.
`mainClassName`	`string`	-	Controls the main class name for the component animation.
`splitLevelClassName`	`string`	-	Controls the split level class name for the component animation.
`elementLevelClassName`	`string`	-	Controls the element level class name for the component animation.