Reveal
revealReveals arbitrary content with configurable direction, delay, and viewport trigger.
Usage
Basic usage
A single piece of content floats from the bottom, from blur to clear, and plays immediately after mounting. It is suitable for the first screen hero.
<Reveal trigger="mount">
<div className="card">A piece of content floats from bottom to top, from blur to clear. </div>
</Reveal>Level-by-level arrangement Stagger
The Stagger container presses gap to wake up the internal StaggerItem in sequence, and can overwrite y/scale/blur one by one.
<Stagger trigger="mount" gap={0.1}>
<div className="flex flex-col gap-3">
<StaggerItem>
<div className="card">First line</div>
</StaggerItem>
<StaggerItem>
<div className="card">Second line</div>
</StaggerItem>
<StaggerItem y={22} scale={0.94} blur={12}>
<div className="card">Final item: heavier blur + scale</div>
</StaggerItem>
</div>
</Stagger>Triggered when scrolling into the viewport
Default trigger=in-view: The element appears when it is scrolled into the viewport (once only plays once by default).
<div className="max-h-72 overflow-auto">
<div className="h-64" />
<Reveal>
<div className="card">Reappears when scrolling here (one-time). </div>
</Reveal>
<div className="h-40" />
</div>When to Use
Use it when any block-level content (card/paragraph/list) wants to float and fade in when it enters the viewport or is mounted, or when multiple items are entered in staggered order. This is a general block-level animation primitive that works on any children; only use ScrollFloat for titles that scroll text character by character, and use BorderBeam / ShineBorder for decorative special effects such as border light strips/gloss.
Import
import { Reveal, Stagger, StaggerItem } from "@hulianui/ui"Props
Reveal is shared with Stagger (inherits div props, and eliminates motion conflicting onDrag*/onAnimationStart):
| Name | Type | Default | Description |
|---|---|---|---|
| trigger | "in-view" | "mount" | "in-view" | Play on viewport entry or immediately on mount |
| once | boolean | true | Whether to play only once when in-view |
Reveal (extra):
| Name | Type | Default | Description |
|---|---|---|---|
| y | number | 24 | Starting downward movement distance px (floating from bottom) |
| blur | number | 8 | Starting blur px (focus pulled in, GPU compositing) |
| scale | number | 1 | Start zoom (<1 position like "put on bookshelf") |
| delay | number | — | Delay seconds (used for peak staggering of independent blocks; no delay is required for container orchestration in Stagger) |
Stagger (extra):
| Name | Type | Default | Description |
|---|---|---|---|
| gap | number | 0.08 | Peak offset seconds between sub-items |
| delay | number | 0 | The entire group of starting delay seconds |
StaggerItem (inherits div props, eliminates motion conflict items):
| Name | Type | Default | Description |
|---|---|---|---|
| y | number | 18 | Starting downward movement distance px |
| blur | number | 8 | Start blur px |
| scale | number | 1 | Start zoom (<1 like "Put on bookshelf") |
Usage Guidelines
- Let
Staggercoordinate timing for itsStaggerItemchildren. UseReveal.delayonly when sequencing independent reveal blocks. - This is the client component of motion runtime (including
"use client"): it is already the client boundary in Next.js App Router, and can be combined normally according to the server/client boundary. There is no need to upgrade the entire parent layout to client for it. - Directly render the final state (visible, not blurry) under reduced-motion. Do not use the entry animation as a switch for content visibility.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<Reveal trigger="mount" y={24} blur={8} scale={1}>
<div className="card">Floating content</div>
</Reveal>