Scroll Mask

Scroll opens a mask that reveals an image six ways

scroll-mask-tw

Customize

Scroll Length

1.7vh

Settle

0.84

Smooth

0.14

Feather

14%

Stagger

0.55

Columns

Origin X

50%

Origin Y

50%

Angle

108°

Zoom

1.14

Radius

18px

Overlay

0.34

Background

CaptionReveal Content

Word

Image URL

Props

Name	Type	Default	Description
`variant`	"iris" \| "wipe" \| "curtain" \| "slats" \| "grid" \| "type"	`"iris"`	Which mask geometry drives the reveal.
`src`	string	`Unsplash sample`	Image revealed through the mask.
`alt`	string	`""`	Alternative text for the image.
`word`	string	`"SCROLL"`	Word carved out of the frame in the type variant.
`scrollLength`	number	`1.7`	Scroll runway beyond the pinned viewport, in viewport heights.
`settle`	number	`0.84`	Fraction of the runway after which the reveal has fully opened.
`smooth`	number	`0.14`	Follow damping applied to the scroll position. 0 snaps instantly.
`feather`	number	`14`	Edge softness of the mask, as a percentage of the frame.
`stagger`	number	`0.55`	Delay spread across pieces. 0 fires them together.
`columns`	number	`9`	Strip count for slats, column count for grid.
`originX`	number	`50`	Horizontal anchor of the reveal, as a percentage.
`originY`	number	`50`	Vertical anchor of the reveal, as a percentage.
`angle`	number	`108`	Sweep direction of the wipe variant, in degrees.
`zoom`	number	`1.14`	Scale the image starts at before settling back to 1.
`fit`	"cover" \| "contain"	`"cover"`	How the image fills the frame.
`radius`	number	`18`	Corner radius of the frame, in pixels.
`overlay`	number	`0`	Opacity of the scrim laid over the image.
`background`	string	`"transparent"`	Colour behind the frame.
`revealContent`	boolean	`true`	Fade children in as the reveal completes.
`calm`	boolean	`false`	Hold the reveal steady instead of damping toward it.
`children`	ReactNode	`undefined`	Content layered over the frame.
`className`	string	`""`	Extra classes for the outer section.

Which mask geometry drives the reveal.

Default"iris"

srcstring

Image revealed through the mask.

DefaultUnsplash sample

altstring

Alternative text for the image.

Default""

wordstring

Word carved out of the frame in the type variant.

Default"SCROLL"

scrollLengthnumber

Scroll runway beyond the pinned viewport, in viewport heights.

Default1.7

settlenumber

Fraction of the runway after which the reveal has fully opened.

Default0.84

smoothnumber

Follow damping applied to the scroll position. 0 snaps instantly.

Default0.14

feathernumber

Edge softness of the mask, as a percentage of the frame.

Default14

staggernumber

Delay spread across pieces. 0 fires them together.

Default0.55

columnsnumber

Strip count for slats, column count for grid.

Default9

originXnumber

Horizontal anchor of the reveal, as a percentage.

Default50

originYnumber

Vertical anchor of the reveal, as a percentage.

Default50

anglenumber

Sweep direction of the wipe variant, in degrees.

Default108

zoomnumber

Scale the image starts at before settling back to 1.

Default1.14

fit"cover" | "contain"

How the image fills the frame.

Default"cover"

radiusnumber

Corner radius of the frame, in pixels.

Default18

overlaynumber

Opacity of the scrim laid over the image.

Default0

backgroundstring

Colour behind the frame.

Default"transparent"

revealContentboolean

Fade children in as the reveal completes.

Defaulttrue

calmboolean

Hold the reveal steady instead of damping toward it.

Defaultfalse

childrenReactNode

Content layered over the frame.

Defaultundefined

classNamestring

Extra classes for the outer section.

Default""