Morph-in Text

Text that morphs into place when it scrolls into view: a blur that tightens while a colour threshold turns it into liquid edges. One SVG filter does it, and plays once, into one text of any length.

Loading preview…

Install

Steps for Next.js.

1
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-components
2
Load 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";
3
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
text	string	—	The text. Remount it with a new key to morph again.
className	string	—	Classes for the root element.

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props