Text Loop⁽⁰⁰⁵⁾

Smooth horizontal ticker loop that scrolls text infinitely across the viewport.

Scroll

Requires:gsap

Loading…

Installation

$npx kibo add text-loop

Usage

1import { TextLoop } from "@/components/kibo/text-loop/component";
2 
3export default function MyComponent() {
4  return (
5    <div className="relative w-full">
6      <TextLoop
7        text="Limitless Design"
8        shape="infinity"
9        separator="✦"
10        ribbonColor="#3b82f6"
11        ribbonWidth={100}
12      />
13    </div>
14  );
15}

Props Reference

Prop	Type	Default	Description
`text`	`string`	"React ✦ Bits"	The text to loop.
`shape`	`TextLoopShape`	"wave"	Pre-defined SVG path shapes.
`path`	`string`	-	Custom SVG path string. Overrides `shape` if provided.
`speed`	`number`	90	Animation speed.
`direction`	`TextLoopDirection`	"forward"	Animation direction.
`separator`	`string`	"✦"	Separator character between text repetitions.
`curviness`	`number`	90	Intensity of the curve (applicable to certain shapes).
`fontSize`	`number`	46	Font size of the text.
`fontWeight`	`number \| string`	800	Font weight of the text.
`letterSpacing`	`number`	2	Letter spacing of the text.
`uppercase`	`boolean`	true	Whether to transform text to uppercase.
`color`	`string`	"#ffffff"	Text color.
`ribbon`	`boolean`	true	Whether to render a background ribbon path.
`ribbonColor`	`string`	"#5227FF"	Color of the ribbon stroke.
`ribbonWidth`	`number`	86	Width of the ribbon stroke.
`pauseOnHover`	`boolean`	true	Pause animation on hover.
`className`	`string`	""	Additional CSS classes.
`style`	`CSSProperties`	{}	Additional inline styles.