Motion & texture

Scroll Reveal

Q: How do I implement a Scroll Reveal?

Add scroll-reveal below the fold: IntersectionObserver threshold 0.15 toggles an .in class for opacity 0→1 and translateY 20→0 over 300ms ease-out, once only. Default styles keep content visible if JS never runs. Skip hero/LCP blocks.

Play an entrance when an element enters the viewport—the pacing tool for long pages.

Also known as reveal on scroll · enter viewport animation · scroll trigger

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Scroll Reveal".

Add scroll-reveal below the fold: IntersectionObserver threshold 0.15 toggles an .in class for opacity 0→1 and translateY 20→0 over 300ms ease-out, once only. Default styles keep content visible if JS never runs. Skip hero/LCP blocks.

Anatomy:
- threshold: Fire at 10–20% visible—waiting for full visibility is too late.
- reveal animation: Fade + 16–24px rise, ~300ms ease-out, restrained.
- once: Unobserve after play; scrolling back should not re-fire.

Preferred API / pattern: `react-intersection-observer / framer-motion whileInView`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Default opacity
○Avoid: Revealing the hero on load
○Avoid: Replaying every time the section re-enters
○Avoid: Scroll listeners calculating getBoundingClientRect every frame

In plain wordsHow people search for it

“as I scroll, sections fade and float up when they hit the screen”“the animation only plays when that block scrolls into view”“landing-page sections that appear one chunk at a time”

AnatomyOpen for part names

threshold: Fire at 10–20% visible—waiting for full visibility is too late.
reveal animation: Fade + 16–24px rise, ~300ms ease-out, restrained.
once: Unobserve after play; scrolling back should not re-fire.

How to write itOpen for stack patterns

Web (HTML/CSS)IntersectionObserver + class toggle

React + Tailwind + shadcn/uireact-intersection-observer / framer-motion whileInView

SwiftUIonScrollVisibilityChange / scrollTransition

Ant Designcustom observer on marketing sections

Notes

Standard storytelling on long landings. Use IntersectionObserver (or platform equivalents)—never raw scroll math. Progressive enhancement: content must be visible by default; JS adds the “hidden until revealed” class. Invert that and a failed script whites out the page. Skip reveal on first-screen LCP content.

Common mistakesHumans and models trip here

Default opacity: 0 in CSS: JS failure blanks the page—default visible, enhance later.
Revealing the hero on load: users wait for theater before content; LCP suffers.
Replaying every time the section re-enters: seasick scrolling.
Scroll listeners calculating getBoundingClientRect every frame: use IntersectionObserver.

More failure symptoms on AI broke it.

Related patterns

Staggered AnimationA group of elements enters with tiny delays between them—turning a flash into a sequence.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Back to TopA control that appears after a long scroll and jumps the user back to the top of the page.Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.

Spotted a wrong name or missing pattern?

Message on X