Desktop optimized

Please maximize your browser window or use a larger screen to explore the component library.

Go to home
Satisium UIBeta
Built withbySatishkumar

Z-Axis Reveal

A cinematic deep-space text reveal component. Elements fly in from the Z-axis, scaling down and un-blurring into focus. Best used with DOM pinning to create immersive, Apple-style scrollytelling.

Last Modified:Aug 17, 2026

Install

CLI

z-axis-reveal
$pnpm dlx shadcn@latest add https://ui.satisium.com/r/z-axis-reveal.json

Or install a specific demo variant:

z-axis-char-demo
$pnpm dlx shadcn@latest add https://ui.satisium.com/r/z-axis-char-demo.json

Or install a specific demo variant:

z-axis-word-demo
$pnpm dlx shadcn@latest add https://ui.satisium.com/r/z-axis-word-demo.json

Manual

1. Install Dependencies

Dependencies
$pnpm add gsap @gsap/react clsx tailwind-merge

2. Add Source Code

Props

PropTypeDefaultDescription
textstringRequiredThe full string of text to reveal.
asReact.ElementType"h1"The HTML tag to render as.
splitBy"char" | "word" | "line""word"Granularity of the animation.
momentumnumber1.5The amount of inertia/lag applied to the scroll timeline.
startScalenumber3How massive the text starts in the Z-axis.
blurbooleantrueWhether to apply a cinematic deep-space blur.
pinbooleantrueLocks the text in place while it flies in (scrollytelling).
triggerStartstring"center center"ScrollTrigger start point.
triggerEndstringDynamicAutomatically calculates based on the length of the text block.