# Scroll Reveal

> Reveal content as it scrolls into view — a gentle rise + fade, once per element. Use to give a long page calm rhythm. Honors prefers-reduced-motion and supports staggering. Do not delay above-the-fold content, and keep at most a few elements animating at once.

- Skill: `xpert-ai/scroll-reveal` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/scroll-reveal`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/scroll-reveal/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/scroll-reveal

---


# 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.