Ink Reveal

New

Brush the pointer over an image to paint its colours in

$ npx @hritik-sharmaa/repeat-ui add card-ink-reveal

Live preview

Move to reveal

Customize

Width420px

Height300px

Brush70px

Mode

Fade

Dry speed0.015

Radius24px

Hint

import CardInkReveal from "@/components/repeat-ui/card-ink-reveal/preview";

<CardInkReveal hint="Move to reveal" />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add card-ink-reveal --variant ts-tailwind

The files are in components/repeat-ui/card-ink-reveal/.

import CardInkReveal from "@/components/repeat-ui/card-ink-reveal/preview";

export default function Page() {
  return <CardInkReveal />;
}

Prop	Type	Default	Description	Options
`src`	`string`	Mountain photo	Image URL.	-
`alt`	`string`	""	Image description for screen readers.	-
`width`	`number`	420	Width in pixels.	-
`height`	`number`	300	Height in pixels.	-
`brushSize`	`number`	70	Brush diameter in pixels.	-
`mode`	`"grayscale" \| "blur" \| "dim"`	"grayscale"	How the image looks before it is painted.	grayscale \| blur \| dim
`fade`	`boolean`	true	Let the paint dry back to the muted image.	-
`fadeSpeed`	`number`	0.015	How fast the paint dries.	-
`radius`	`number`	24	Corner radius in pixels.	-
`hint`	`string`	"Move to reveal"	Label shown until the first stroke; empty hides it.	-
`className`	`string`	""	Extra classes for the root element.	-