Pro

Ink spoiler

Text kept under a fine drifting ink until it is asked for. Press it and the ink blows outward from where you pressed while the words come through; press again to cover them.

Pro

pnpm dlx shadcn@latest add @caliper/ink-spoiler

Production key created

Northwind workspace · shown once, so store it somewhere safe

Name: Billing webhooks
Secret key
Created: 21 Oct 2026 by Mara Chen

Installs components/ui/ink-spoiler.tsxDepends on none beyond ReactMotion shared motion tokens

When to use

Use it for

Secrets shown once: API keys, recovery codes, a one-time link.
Spoilers and answers in content people choose to read.

Skip it when

Passwords in forms; use the password field.
Anything people need to scan quickly.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Hidden means hidden: While covered the words are hidden from assistive technology too, and the button is named for what it holds: "API key, hidden. Show".
The ink moves only on screen: The drift pauses offscreen and is a still speckle under reduced motion; the reveal swaps at once.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/ink-spoiler

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { InkSpoiler } from "@/components/ui/ink-spoiler"

The worked example comes with Pro

The 40-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

InkSpoiler

component

PropTypeDefault

label *string—

children *ReactNode—

defaultRevealedbooleanfalse

classNamestring—

It is built on native elements and keeps aria-pressed, aria-label and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.