Ink Bleed Text
NewPro
Text soaks into view like ink spreading through paper, using an SVG turbulence and displacement filter, then settles to sharp type.
Customize
2s
0.2s
1
#ff784f
When to use it
- Opening titles on a story game, book or journal page
- Quotes and epigraphs at the top of a long article
- Fantasy or historical game titles, letters and map labels
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 183
Installation
Ink Bleed Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy ink-bleed-text.tsx into components/ui and run npm install motion.
Usage
import { InkBleedText } from "@/components/ui/ink-bleed-text";
<h1 className="font-serif text-6xl text-ink-950">
<InkBleedText text="Dear traveler, the map ends here" duration={2} />
</h1>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text, split into words. Takes its color from the page or from className. |
| delay | number | 0 | Seconds before the first word starts. |
| stagger | number | 0.2 | Seconds between one word and the next. |
| duration | number | 2 | Seconds for one word to spread and settle. |
| spread | number | 1 | How far the ink wanders from the letter shapes. 0 keeps it tight. |
| bleedColor | string | "#ff784f" | Color of the wet edge around the ink. It fades out as the text dries. |
| once | boolean | true | Play only the first time the text enters the viewport. |
| className | string | — | Extra classes for the text. |
Dependencies: motion