Polygon Clip Reveal

Parallelogram clip-path reveal on scroll.

Scroll — parallelogram clip opens

Installation

Requires MotionProvider and gsap. Add the polygon clip reveal component with the shadcn CLI.

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

Usage

import { PolygonClipReveal } from "@/void/scroll/polygon-clip-reveal"

<PolygonClipReveal laneHeightVh={100} className="max-w-lg">
  <img src="/hero.jpg" alt="" className="h-64 w-full object-cover" />
</PolygonClipReveal>

Examples

Default

Scroll — parallelogram clip opens

Code

import { PolygonClipReveal } from "@/void/scroll/polygon-clip-reveal"

<PolygonClipReveal laneHeightVh={100} className="max-w-lg">
  <img src="/hero.jpg" alt="" className="h-64 w-full object-cover" />
</PolygonClipReveal>