Reveal
Fades content in as it scrolls into view.
import
import { Reveal } from '@joshicodes/cock';Stagger
appear replays it here; without it, content already on screen is left alone.
Step 1
Foreplay
Step 2
Build
Step 3
Ship
Behaviour
- Content already on screen at load is left alone, unless you pass `appear`.
- Stagger a row by giving each one a larger `delay`.
- Skips straight to the final state when the visitor has reduced motion turned on.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Reveal
| Prop | Type | Default |
|---|---|---|
delay Milliseconds before the transition starts; use it to stagger siblings. | number | 0 |
duration | number | 500 |
distance How far the content travels up, in pixels. | number | 14 |
once Reveal once, or hide again whenever it leaves the viewport. | boolean | true |
threshold Share of the element that must be visible to trigger. | number | 0.15 |
appear Play the entrance even when the element is already on screen at mount. | boolean | false |
class | string | — |
Snippets of Reveal
| Snippet | Type | Default |
|---|---|---|
children required | Snippet | — |