Curved Loop⁽⁰⁰⁹⁾

Seamlessly repeats and animates text along a customizable SVG bezier curve.

HoverScroll

Loading…

Installation

$npx kibo add curved-loop

Usage

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

Props Reference

Prop	Type	Default	Description
`marqueeText`	`string`	''	Controls the marquee text for the component animation.
`speed`	`number`	2	Speed multiplier for the motion playback.
`className`	`string`	-	Additional CSS classes for styling and layout.
`curveAmount`	`number`	400	Controls the curve amount for the component animation.
`direction`	`'left' \| 'right'`	'left'	Direction of movement (e.g., 'top', 'bottom', 'left', 'right').
`interactive`	`boolean`	true	Controls the interactive for the component animation.