Scroll Portal

Scroll through frames nested one inside the next

scroll-portal-tw

Customize

Frame Depth

1.0

Perspective

1000px

Scroll Length

1.0vh

Frame Radius

16px

Frame Border

1.0px

Scrub

0.35s

Hold

0.00

Dim

0.55

Props

Name	Type	Default	Description
`scenes`	ScrollPortalScene[]	`[]`	Ordered scenes; each may set background, content, radius and accent.
`frameDepth`	number	`1`	Distance between frames. Larger values nest the next frame smaller.
`perspective`	number	`1000`	Focal length of the camera in pixels. Smaller values exaggerate depth.
`scrollLength`	number	`1`	Scroll runway per scene handoff, in viewport heights.
`frameRadius`	number	`16`	Corner radius of nested frames in pixels.
`frameBorder`	number	`1`	Border width of nested frames in pixels.
`scrub`	number	`0.35`	Catch-up time in seconds. 0 locks the camera to the scroll position.
`hold`	number	`0`	Fraction of each handoff the camera rests before travelling.
`dim`	number	`0.55`	How much nested frames fade with distance, 0 to 1.
`dimColor`	string	`"#000000"`	Colour nested frames fade toward with distance.
`accent`	string	`"rgba(255,255,255,0.18)"`	Fallback border colour when a scene sets no accent.
`mobileBreakpoint`	number	`768`	Viewport width below which depth and perspective are reduced.
`onSceneChange`	(index: number) => void	`undefined`	Called when the scene nearest the camera changes.
`className`	string	`""`	Extra classes for the outer section.

scenesScrollPortalScene[]

Ordered scenes; each may set background, content, radius and accent.

Default[]

frameDepthnumber

Distance between frames. Larger values nest the next frame smaller.

Default1

perspectivenumber

Focal length of the camera in pixels. Smaller values exaggerate depth.

Default1000

scrollLengthnumber

Scroll runway per scene handoff, in viewport heights.

Default1

frameRadiusnumber

Corner radius of nested frames in pixels.

Default16

frameBordernumber

Border width of nested frames in pixels.

Default1

scrubnumber

Catch-up time in seconds. 0 locks the camera to the scroll position.

Default0.35

holdnumber

Fraction of each handoff the camera rests before travelling.

Default0

dimnumber

How much nested frames fade with distance, 0 to 1.

Default0.55

dimColorstring

Colour nested frames fade toward with distance.

Default"#000000"

accentstring

Fallback border colour when a scene sets no accent.

Default"rgba(255,255,255,0.18)"

mobileBreakpointnumber

Viewport width below which depth and perspective are reduced.

Default768

onSceneChange(index: number) => void

Called when the scene nearest the camera changes.

Defaultundefined

classNamestring

Extra classes for the outer section.

Default""

Name

Type

Default

Description

scenes

ScrollPortalScene[]

[]

Ordered scenes; each may set background, content, radius and accent.

frameDepth

number

1

Distance between frames. Larger values nest the next frame smaller.

perspective

number

1000

Focal length of the camera in pixels. Smaller values exaggerate depth.

scrollLength

number

1

Scroll runway per scene handoff, in viewport heights.

frameRadius

number

16

Corner radius of nested frames in pixels.

frameBorder

number

1

Border width of nested frames in pixels.

scrub

number

0.35

Catch-up time in seconds. 0 locks the camera to the scroll position.

hold

number

0

Fraction of each handoff the camera rests before travelling.

dim

number

0.55

How much nested frames fade with distance, 0 to 1.

dimColor

string

"#000000"

Colour nested frames fade toward with distance.

accent

string

"rgba(255,255,255,0.18)"

Fallback border colour when a scene sets no accent.

mobileBreakpoint

number

768

Viewport width below which depth and perspective are reduced.

onSceneChange

(index: number) => void

undefined

Called when the scene nearest the camera changes.

className

string

""

Extra classes for the outer section.