Scroll Portal
Scroll flies the camera through nested frames, each revealing the next scene
Customize
Props
14| 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.
[]frameDepthnumberDistance between frames. Larger values nest the next frame smaller.
1perspectivenumberFocal length of the camera in pixels. Smaller values exaggerate depth.
1000scrollLengthnumberScroll runway per scene handoff, in viewport heights.
1frameRadiusnumberCorner radius of nested frames in pixels.
16frameBordernumberBorder width of nested frames in pixels.
1scrubnumberCatch-up time in seconds. 0 locks the camera to the scroll position.
0.35holdnumberFraction of each handoff the camera rests before travelling.
0dimnumberHow much nested frames fade with distance, 0 to 1.
0.55dimColorstringColour nested frames fade toward with distance.
"#000000"accentstringFallback border colour when a scene sets no accent.
"rgba(255,255,255,0.18)"mobileBreakpointnumberViewport width below which depth and perspective are reduced.
768onSceneChange(index: number) => voidCalled when the scene nearest the camera changes.
undefinedclassNamestringExtra classes for the outer section.
""