Circular Text⁽⁰⁰⁷⁾

Renders text along an animated circular path with smooth spin and reactive hover velocity.

HoverScroll

Requires:motion

KIBO*MOTION*EXPERIENCE*

Loading…

Installation

$npx kibo add circular-text

Usage

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

Props Reference

Prop	Type	Default	Description
`text`	`string`	-	The text content to display and animate.
`spinDuration`	`number`	20	Controls the spin duration for the component animation.
`onHover`	`'slowDown' \| 'speedUp' \| 'pause' \| 'goBonkers'`	'speedUp'	Controls the on hover for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.