Mask wipe
A directional page transition that wipes the incoming view into place through a soft animated mask. React 19 canary only.
API reference
Components
<MaskWipeStage />
Full-view shell with a persistent announcement node.
announce
Persistent live-region text, for example "Funnels page".
children
Your page shell: header, MaskWipeContent, and navigation.
className?
Merged onto the stage.
<MaskWipeContent />
Directional masked crossfade. React transition types keep both snapshots moving in the direction of the current navigation.
page
The current page index. Keys the entering and exiting view snapshots.
direction
Which side the incoming page should reveal from.
width?
Width of the feather as a percentage of the transitioning view.
children
The current page body.
className?
Merged onto the page body wrapper.
<MaskWipeTabs />
Accessible page switcher.
labels
Page labels in navigation order.
active
The active page index.
onSelect
Navigate to a page index.
"aria-label"?
Accessible navigation name. Defaults to "Pages".
className?
Merged onto the navigation.
Hooks
useMaskWipe
Page-level navigation controller. State updates must run inside startTransition for React to activate its View Transition boundary.
useMaskWipe(options: UseMaskWipeOptions): MaskWipeControllerinitial?
The initial page index. Defaults to 0.
Returns
page
The current page index.
direction
The direction of the latest page change.
go
Navigate to a page inside a React transition.
Functions
maskWipeFrames
The gradient stays fixed while its oversized image moves. Unlike gradient stops, mask-position interpolates continuously in Chromium.
maskWipeFrames(direction: MaskWipeDirection, width = DEFAULT_MASK_WIDTH): MaskWipeAnimationmaskWipeExitFrames
The outgoing snapshot uses the spatial inverse of the incoming mask.
maskWipeExitFrames(direction: MaskWipeDirection, width = DEFAULT_MASK_WIDTH): MaskWipeAnimationmaskWipeDirection
maskWipeDirection(current: number, next: number): MaskWipeDirectionFeatured in
See the mask wipe composed into full sections.
