A heading revealed by drops of ink landing across it and spreading until they meet, with a soft halo at the wet edges.
Written in ink
Customize
Usage
import { InkReveal } from "@/components/motionkit/ink-reveal";
<InkReveal as="h1" className="text-7xl">
Written in ink
</InkReveal>Motion
The exact curves this component runs, plotted with Motion's own maths.
Ink spread
Scrolls into view
Editorial headlines, studio and portfolio heroes, book, wine and craft brands: anything that suits an artisan, hand-made feel.
The heading is masked by nine soft-edged ellipses, one per ink drop, each landing at its own moment and growing with an ease-out so it spreads fast and then soaks in. Mask layers add together, so as the drops grow they merge into one wet shape until the whole heading shows. A blurred copy in the ink colour uses the same mask a moment ahead, so a halo bleeds past the letters, then dries away.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The heading text. |
| ink | string | "#5FAEB4" | Colour of the halo at the spreading edges. |
| duration | number | 1.8 | Seconds for the ink to cover the heading. |
| as | ElementType | "h2" | Element to render. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/ink-reveal. It saves the file to components/motionkit and installs its dependencies.
Ink Reveal is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the heading is simply there, with no ink.
Written in ink
Customize
Usage
import { InkReveal } from "@/components/motionkit/ink-reveal";
<InkReveal as="h1" className="text-7xl">
Written in ink
</InkReveal>Motion
The exact curves this component runs, plotted with Motion's own maths.
Ink spread
Scrolls into view
The live preview is free to explore. Plus unlocks the source for Ink Reveal and every other premium component.