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.

Component

Nullspace Studio

10 Nullspace Studio

10

Negative Space

Form & Void

Light Studies

Nullspace

Install

npx shadcn@latest add @compronents/split-reveal-preloader

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

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.

Customize

studio / numeral / logo / cardWordtext

Intro name, numeral, compact logo, and hero card word.

tagstext

The three floating tags shown during the intro.

heroImageasset-url

Hero backdrop revealed behind the split.

Dependencies

gsap