---
name: nexu-io/scroll-reveal
source: https://app.decimal.ai/s/nexu-io-scroll-reveal@1/SKILL.md
source_sha256: 5a2bf498f2bc
---

# scroll-reveal

A gentle rise + fade as elements scroll into view. Part of
[motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.

## When to use it
- Long landing pages and stacked content sections.
- Giving a page a calm sense of pace.

## When NOT to use it (restraint)
- Above-the-fold hero content the reader must see instantly.
- Revealing many elements simultaneously — stagger them, max ~3 at once.

## How to apply
1. Copy `scroll-reveal.css` and `scroll-reveal.js` into the project, and link them.
2. Mark elements:
   ```html
   <section data-reveal>…</section>
   <li data-reveal data-reveal-delay="80">…</li>   <!-- optional stagger, ms -->
   ```
3. An IntersectionObserver adds `.is-in` once, when the element enters the viewport.

## Accessibility & performance
- `prefers-reduced-motion`: everything is shown immediately, no travel.
- Animates `transform`/`opacity` only; unobserves each element after it reveals.

## Framework notes
- React: render `data-reveal` attributes and run the init (or an equivalent `useEffect` +
  IntersectionObserver) after mount.