scroll

CircleRevealScrub

Circular clip-path reveal scrubbed to scroll. Source: njonj0 — https://codepen.io/njonj0/pen/wvyJRea

Playground

Label

Scroll-based previews need you to scroll into view.

Live preview

Scroll through this lane — the circle opens as you scroll

Scrub circle reveal

Code

<CircleRevealScrub className="max-w-md">
  <div className="flex h-48 items-center justify-center rounded-xl bg-gradient-to-tr from-violet-600/50 to-fuchsia-600/50 text-lg font-semibold">
    Scrub circle reveal
  </div>
</CircleRevealScrub>