PRO

Mask Reveal Preloader

A one-shot intro: a logo slides in char by char over a filling progress bar with a mix-blend footer line, then an SVG-shaped mask (a rounded capsule cut from a solid fill) scales up to punch through and reveal the hero, whose image settles from a zoom as the headline, footer copy, and pill buttons animate in.

Component

Spaces unfold in light and shadow, where structure finds its quiet rhythm, and time align in harmony.

Obsidian

Contact
Menu

Spaces defined through light and silence.

Geometry and balance converge, creating environments that breathe with ease.

Install
npx shadcn@latest add https://ui.aryank.space/r/mask-reveal-preloader.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
heroImage / maskShapestringBLANK-hosted JPG / SVGRevealed hero and the capsule mask shape.
logo / headlinestring"Obsidian"Preloader logo and hero headline.
contactLabel / menuLabelstring"Contact" / "Menu"Labels on the two pill buttons.
Customize
maskShapeasset-url

The SVG whose shape is cut from the reveal fill.

headline / footerHeading / footerTexttext

The hero copy revealed after the mask.

Dependencies
gsapreact-icons