Scroll Mask

An image revealed through a mask as you scroll

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""

Name

Type

Default

Description

variant

"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.