Text Generate

Words stream in one by one out of a soft blur, like a model typing its answer, with an optional glowing caret.

Assistant

Sure! Here is a calm, focused plan for your launch week: ship the smallest thing that works, listen closely to the first ten users, and polish only what they actually touch.

Open

text

stagger70

duration700

blur10

caret

caretColor

Installation

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

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-generate.json

Usage

import { TextGenerate } from "@/components/ui/text-generate";

<TextGenerate text="Here is a calm, focused plan for your launch week…" stagger={70} />

Props

Prop	Type	Default	Description
text	string	"Sure! Here is a calm, focused plan for your launch week: ship the smallest thing that works, listen closely to the first ten users, and polish only what they actually touch."	Text to stream in.
stagger	number	70	Delay between words, in ms.
duration	number	700	Fade/unblur duration of each word, in ms.
blur	number	10	Starting blur of each word, in px.
caret	boolean	true	Show a caret that follows the stream and blinks when done.
caretColor	string	"#a3e635"	Caret color.
className	string	—	Extra classes for the root element.