Ink Reveal

Component 1.3K

About

A canvas overlay that lets users brush away a colored mask to reveal content underneath. Mouse movement creates organic, wobbly ink stamps that expand and fade, producing a natural paint-stroke feel. Fully customizable — control brush size, mask color, lifetime, wobble, and more.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ink Reveal to your project and fits it to your theme.

Code

How Ink Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Component from "@/components/ui/ink-reveal";

export default function DemoOne() {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "400px",
        overflow: "hidden",
        borderRadius: "12px",
      }}
    >
      <img
        src="https://cdn.21st.dev/assets/mirror/2a/2a011b8788c448524c9189fad6be9808822491a353e02e16bcaa723af0267afe.jpg"
        alt="Landscape"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
        }}
      />

      <Component />
    </div>
  );
}