# Ink Reveal

> A heading revealed by drops of ink landing across it and spreading until they meet, with a soft halo at the wet edges.

Category: Text · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/ink-reveal

## When to use it

Editorial headlines, studio and portfolio heroes, book, wine and craft brands: anything that suits an artisan, hand-made feel.

## How it works

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.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/ink-reveal` after adding their registry token from https://motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** A heading, nothing to focus.
- **Screen readers: Pass.** The real heading is in the page from the start, so it's read whether or not the ink has spread; the halo copy is hidden.
- **Reduced motion: Pass.** With reduced motion on, the heading is simply there, with no ink.
- **Colour contrast: Not applicable.** Inherits your heading colour once revealed.