Page curtain
A slanted clip-wipe page transition that carries the incoming page name across the screen.
API reference
Components
<PageCurtainStage />
Scoped section the curtain wipes across.
announce
Live-region text announced on every page change.
children
Page shell: header, content, tabs.
className?
Merged onto the <section>.
ref?
From usePageCurtain().ref.
<PageCurtainContent />
Static page-body wrapper.
children
Current page body.
className?
Merged onto the wrapper.
<PageCurtainTabs />
Page-switch nav with active wash and pending disable.
labels
Page labels in order.
active
Active page index.
isPending?
Disable tabs while a transition is pending.
onSelect
Navigate to a page.
"aria-label"?
Accessible nav name. Default "Pages".
className?
Merged onto the <nav>.
Hooks
usePageCurtain
Page-curtain controller wrapping Motion+'s useCurtains.
usePageCurtain(options: UsePageCurtainOptions): PageCurtaintitles
Per-page titles painted onto the curtain.
angle?
Wipe edge tilt in degrees. Default 9.
initial?
Initial page index. Default 0.
Returns
page
Current page index.
isPending
Whether a transition is in flight.
go
Navigate to a page index.
ref
Attach to PageCurtainStage.
Functions
titledClipWipe
clipWipe curtain effect that paints title onto the covering overlay. clipWipe(options) returns the effect directly, not a factory.
titledClipWipe(title: string, options: TitledClipWipeOptions): CurtainEffectFactorypageCurtainDirection
Wipe direction from index delta.
pageCurtainDirection(current: number, next: number): "left" | "right"Featured in
See the page curtain composed into full sections.
