Handwritten Quote
A quote that writes itself in a handwriting font, stroke by stroke and word by word, with a pen tip riding the edge, then signs the attribution under a rule. It starts when it scrolls into view.
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 |
|---|---|---|---|
| quote | string | — | The quote. A line break is kept as a line break in the handwriting. |
| attribution | string | — | Who said it, signed under the rule. |
| msPerChar | number | 34 | Writing speed: how long each character takes. |
| penTip | boolean | true | A small dot that rides the edge of the word being written. |
| className | string | — | Classes for the root element. |