scroll-reveal

name	scroll-reveal
description	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.
triggers	["reveal on scroll","fade in on scroll","scroll animation","elegant entrance","滚动出现","高级感"]
od	{"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":null,"preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use scroll-reveal on the content sections of this page: a gentle rise+fade as each enters\nthe viewport, staggered, with a prefers-reduced-motion fallback. Leave the hero visible instantly.\n"}

scroll-reveal

A gentle rise + fade as elements scroll into view. Part of 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:

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