Spark UI
Mask Page Transition

Customize

Pattern
Page Images4 images
Nav Links4 items
Headlines4 items
Eyebrow
Descriptions4 items
Brand
Transition Time
1.8
Image Brightness
80
Background
Text Color
Progress Bar
Font
Text Scale
100%
Auto Play

Mask Page Transition

Transitions
313 views•98 uses

Props

15 properties
patternenumhorizontal-blinds
Shape the mask opens in.
imagesstring[]4 images
One full-frame picture per page, paired with the nav links by position.
navLabelsstring[]4 images
One page per link.
titlesstring[]4 images
Headline per page; a line break splits it.
eyebrowstringPage transition
Small line under each headline.
descriptionsstring[]4 images
Paragraph per page.
brandstringNorthbound
Name at the top left.
durationnumber1.8
How long the mask takes to open fully.
brightnessnumber80
Dims the pictures so the text stays readable.
backgroundcolor#000000
Colour behind the first reveal.
textColorcolor#ffffff
Colour of the text, links and progress.
showProgressbooleantrue
Show the segmented bar along the bottom.
fontFamilystringvar(--font-instru…
Typeface for the headlines and copy.
textScalenumber100
Relative size of the text.
autoPlaybooleantrue
Steps through the pages on its own until a link is clicked.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mask-page-transition

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

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