npx zenora-ui-registry@latest add mask-page-transition
Mask Page Transition
Transitions 313 views•98 uses
Get this component
Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.
npx zenora-ui-registry@latest add mask-page-transitionWrites to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
Page changes played through SVG masks: click a nav link and the next page's full-frame picture opens through horizontal blinds, vertical blinds or a grid of cells while its headline wipes in. The first page plays in on load.
KEY FEATURES
- ·Four mask patterns: horizontal blinds split from their centre lines, vertical blinds, a random grid and a column-by-column grid
- ·Each pattern keeps its own reveal curve, stagger and headline timing; the whole sequence is scaled to the transition time you set
- ·The new picture is drawn over the old one, and the layers beneath are dropped once it covers the frame
- ·Headlines clip in and out with the pattern's own easing, and a segmented progress bar fills as each page opens
- ·The first page plays in as soon as its picture has decoded, and the rest are preloaded so later reveals never open onto a blank frame
- ·Grid density follows the frame's width, and a resize settles the current page at the new size
Props
15 propertiespatternenumhorizontal-blindsimagesstring[]4 imagesnavLabelsstring[]4 imagestitlesstring[]4 imageseyebrowstringVisual experiencedescriptionsstring[]4 imagesbrandstringLuminadurationnumber1.8brightnessnumber80backgroundcolor#000000textColorcolor#ffffffshowProgressbooleantruefontFamilystringvar(--font-instru…textScalenumber100autoPlaybooleantrue