ComponentsDistort
Ink bleed
Text soaks in like ink on paper.
Installation
$ npx shadcn@latest add @textlab/ink-bleedNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { InkBleed } from "@/components/textlab/ink-bleed/ink-bleed";
<InkBleed as="h2" text="Written by hand" variant="watercolor" />Variants
inkwatercolorstampProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "ink" | "watercolor" | "stamp" | "ink" | Rough fibrous ink, soft watercolor bloom, or a grainy stamp. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| duration | number | 1.8 | Seconds each part takes. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Editorial, stationery and craft brands.
- Serif display type on paper-like backgrounds.
Skip it
- Thin weights; the threshold can break hairlines.
- Busy photographic backgrounds.
Accessibility and motion
Accessibility
- The filtered layer is decorative; the text is read from a hidden copy.
Motion
- Spreads with the emphasized ease: quick soak, slow settle.
- Edges stay slightly fibrous at rest, like real ink.
Reduced motion. Plain text with no filter.
Performance
- One SVG filter updated for the length of the animation only.