Components
Loading preview...
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.
@aayush-duhan
npx shadcn@latest add https://21st.dev/r/aayush-duhan/ink-revealimport 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://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200&q=80"
alt="Landscape"
style={{
position: "absolute",
inset: 0,
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
<Component />
</div>
);
}