ScrollMask

Clip-path reveal scrubbed by scroll progress. The element starts hidden behind an inset clip and opens as you scroll past — five directions (left, right, top, bottom, center). Use it for image and video reveals where you want the viewer to "open" the media as they scroll.

Four tiles, four mask directions. The clip-path scrubs from from% to 0% with scroll progress.

center

left

right

top

Usage

import { ScrollMask } from '@bwo-ui/react';

<ScrollMask direction="center" from={50} scrub={0.5}>
  <img src="/hero.jpg" alt="" />
</ScrollMask>

<ScrollMask direction="left" from={40} scrub={true}>
  <video autoPlay loop muted src="/reel.mp4" />
</ScrollMask>

Props

Prop	Type	Default	Description
`direction`	`'left' \| 'right' \| 'top' \| 'bottom' \| 'center'`	`'center'`	Where the mask opens from.
`trigger`	`Target`	—	ScrollTrigger element. Defaults to the target itself. Useful when you want the mask scrub bound to a parent section.
`start`	`string`	`'top 80%'`	ScrollTrigger start value — when the scrub begins.
`end`	`string`	`'bottom 40%'`	ScrollTrigger end value — when the scrub is complete.
`scrub`	`boolean \| number`	`0.6`	Scrub lag. true = follow scroll instantly, a number = lag in seconds.
`from`	`number`	`50`	Initial inset percentage (0–50). 50 is fully closed (center direction), 0 fully open.
`as`	`ElementType`	`'div'`	HTML tag or component to render the wrapping element as.