Inset Reveal Scrub

Inset clip-path reveal scrubbed to scroll.

Scroll — inset clip opens over the photo

Installation

Requires MotionProvider and gsap. Add the inset reveal scrub component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/inset-reveal-scrub.json

Usage

import { InsetRevealScrub } from "@/void/scroll/inset-reveal-scrub"

<InsetRevealScrub laneHeightVh={100}>
  <img src="/photo.jpg" alt="" className="h-full w-full object-cover" />
</InsetRevealScrub>

Examples

Default

Scroll — inset clip opens over the photo

Code

import { InsetRevealScrub } from "@/void/scroll/inset-reveal-scrub"

<InsetRevealScrub laneHeightVh={100}>
  <img src="/photo.jpg" alt="" className="h-full w-full object-cover" />
</InsetRevealScrub>