Split Reveal Preloader
A one-shot intro where a studio name and numeral settle, the first letter drifts up into a compact logo mark, floating tags fade through, then the screen splits along its middle: the top lifts, the bottom drops, and a thin seam widens into the hero with a centered card whose title rolls up. GSAP timeline with SplitText and CustomEase.
npx shadcn@latest add https://ui.aryank.space/r/split-reveal-preloader.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| studio / numeral / logo / cardWord | string | Nullspace Studio / 10 / N10 / Nullspace | Intro name, numeral, compact logo, and hero card word. |
| tags / heroImage | [string, string, string] / string | BLANK tags and hero | Floating intro tags and the revealed hero backdrop. |
| menuLabel / footerLeft / footerRight | string | Menu / Scroll Down / Made by BLANK | Hero nav and footer copy. |
studio / numeral / logo / cardWordtextIntro name, numeral, compact logo, and hero card word.
tagstextThe three floating tags shown during the intro.
heroImageasset-urlHero backdrop revealed behind the split.
gsap