Browse components
Text Cursor
A trail of glyphs or emoji that spills from the pointer inside its container, spinning and fading as it drifts.
Installation
npx shadcn@latest add @glint-ui/text-cursorFirst 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-cursor.json
Usage
import { TextCursor } from "@/components/ui/text-cursor";
<TextCursor items={["🍋", "✨"]} className="h-96">
<h2>Leave a trail</h2>
</TextCursor>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | string[] | ["✦","✧","✶","⋆"] | Glyphs or emoji, used in order. |
| colors | string[] | ["#bef264","#67e8f9","#f0abfc"] | Colors cycled per glyph. |
| spacing | number | 22 | Px of pointer travel between glyphs. |
| lifetime | number | 1000 | Ms each glyph lives. |
| size | number | 30 | Glyph size in px. |
| spin | number | 180 | Degrees each glyph spins. |
| maxItems | number | 60 | Most glyphs alive at once. |
| children | ReactNode | — | Content the trail plays over. |
| className | string | — | Extra classes for the root element. |