Circle Reveal Scrub

Circular clip-path reveal scrubbed to scroll.

Center circle reveal

Installation

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

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

Usage

import { CircleRevealScrub } from "@/void/scroll/circle-reveal-scrub"

<CircleRevealScrub laneHeightVh={100} className="aspect-video max-w-xl">
  <img src="/photo.jpg" alt="" className="h-full w-full object-cover" />
</CircleRevealScrub>

Examples

Default

Center circle reveal

Code

import { CircleRevealScrub } from "@/void/scroll/circle-reveal-scrub"

<CircleRevealScrub laneHeightVh={100} className="aspect-video max-w-xl">
  <img src="/photo.jpg" alt="" className="h-full w-full object-cover" />
</CircleRevealScrub>