Mask Reveal

Uncovers an image or a card with a mask that slides across it.

Dependenciesmotion

Plate 01

Uncovered, not faded.

Installation#

pnpm dlx shadcn@latest add @balick/mask-reveal

Or pass the full URL: https://ui.balick.me/r/mask-reveal.json

Usage#

import { MaskReveal } from "@/components/ui/mask-reveal"

export function Cover() {
  return (
    <MaskReveal direction="left" zoom inView className="rounded-xl">
      <img src="/cover.jpg" alt="" className="aspect-video w-full object-cover" />
    </MaskReveal>
  )
}

Props#

Prop	Type	Default	Description
`direction` Side the reveal starts from.	`"left" \| "right" \| "up" \| "down"`	"left"	Side the reveal starts from.
`duration` Duration of the reveal, in seconds.	`number`	0.9	Duration of the reveal, in seconds.
`delay` Delay before the reveal, in seconds.	`number`	0	Delay before the reveal, in seconds.
`zoom` Let the content settle from a slight zoom while it is revealed.	`boolean`	false	Let the content settle from a slight zoom while it is revealed.
`inView` Wait until the element scrolls into view before revealing.	`boolean`	false	Wait until the element scrolls into view before revealing.
`inViewMargin` Margin applied to the viewport when inView is set.	`string`	"-50px"	Margin applied to the viewport when inView is set.