Vapor Text
Phrases that take turns: each condenses letter by letter out of a haze, holds, then drifts away as vapor while the next condenses. Pointing at it holds the phrase and scrambles it into place again. It keeps the size of its largest phrase, so nothing around it moves.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| phrases | string[][] | — | The phrases to cycle through, each as its lines. One phrase holds still. |
| as | "h1" | "h2" | "h3" | "p" | "span" | "p" | The element it renders as. |
| holdDuration | number | 2600 | How long each phrase holds once it has condensed, in milliseconds. |
| scrambleOnHover | boolean | true | Pointing at it holds the phrase and scrambles it into place again. A hover during a transition waits for the next phrase to settle. |
| className | string | — | Classes for the element, such as its font size. Lines never wrap, so size the text to fit its column. |