Weightless Float Reveal
An ambient, zero-gravity text reveal component. Elements drift upwards into place from randomized depths and rotations, creating an organic, floating effect.
Last Modified:Aug 17, 2026
Install
CLI
weightless-float-reveal
Or install a specific demo variant:
weightless-float-headline-demo
Or install a specific demo variant:
weightless-float-paragraph-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The full string of text to reveal. |
as | React.ElementType | "h1" | The HTML tag to render as. |
splitBy | "word" | "char" | "char" | Whether to split and animate by word or individual character. |
startYMin | number | 40 | Minimum starting Y offset (pixels). |
startYMax | number | 80 | Maximum starting Y offset (pixels). |
startRotationMin | number | -8 | Minimum starting rotation (degrees). |
startRotationMax | number | 8 | Maximum starting rotation (degrees). |
duration | number | 2.5 | The duration of the drift. Long durations enhance the floating effect. |
delay | number | 0 | Delay before the animation begins (in seconds). |
stagger | number | 0.06 | Stagger delay between each element revealing. |
ease | string | "power3.out" | GSAP easing function for the endless coasting physics. |
viewportOnce | boolean | true | If true, plays once. If false, seamlessly reverses on scroll away. |
triggerStart | string | "top 85%" | Viewport threshold for when the animation should start. |