Text Loop

Lines of text roll endlessly through a soft-masked window, the active line sharp and its neighbours blurred.

Made fordesigners, engineers, founders, storytellers, dreamers

Open

items

interval2200

duration800

visibleLines3

dimInactive

align

Installation

npx shadcn@latest add @glint-ui/text-loop

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/text-loop.json

Usage

import { TextLoop } from "@/components/ui/text-loop";

<p>Made for <TextLoop items={["designers", "engineers", "founders"]} /></p>

Props

Prop	Type	Default	Description
items	string[]	["designers","engineers","founders","storytellers","dreamers"]	Lines to loop through.
interval	number	2200	Ms between steps.
duration	number	800	Ms for one slide.
visibleLines	number	3	Lines visible in the window.
dimInactive	boolean	true	Blur and dim inactive lines.
align	"left" \| "center" \| "right"	"left"	Text alignment.
className	string	—	Extra classes for the root element.