Motion & texture

Parallax Scrolling

Q: How do people describe a Parallax Scrolling in plain words?

when I scroll, the background moves slower than the front Apple-homepage vibes where layers slide past each other scrolling down slowly peels back a background image

Q: How do I implement a Parallax Scrolling?

Add parallax to the hero with CSS-only layers when possible: scroll container perspective: 1px, background translateZ(-1px) scale(2). If using JS, only update transform inside rAF. Honor prefers-reduced-motion by freezing layers. Avoid background-attachment: fixed.

Layers move at different scroll speeds to fake depth.

Also known as parallax layers · depth scroll

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 "Parallax Scrolling".

Add parallax to the hero with CSS-only layers when possible: scroll container perspective: 1px, background translateZ(-1px) scale(2). If using JS, only update transform inside rAF. Honor prefers-reduced-motion by freezing layers. Avoid background-attachment: fixed.

Anatomy:
- layer: Background slow, foreground faster; two layers already work, three max.
- speed ratio: 0.3–0.7 feels natural; wild ratios look like a bug.
- CSS-only: perspective on the parent + translateZ + scale compensation—no JS jank.

Preferred API / pattern: `CSS-only layers or framer-motion useScroll`

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

Acceptance checks

○Avoid: Sync style changes in a raw scroll listener without rAF
○Avoid: background-attachment
○Avoid: Five nested parallax layers
○Avoid: Ignoring reduced-motion

In plain wordsHow people search for it

“when I scroll, the background moves slower than the front”“Apple-homepage vibes where layers slide past each other”“scrolling down slowly peels back a background image”

AnatomyOpen for part names

layer: Background slow, foreground faster; two layers already work, three max.
speed ratio: 0.3–0.7 feels natural; wild ratios look like a bug.
CSS-only: perspective on the parent + translateZ + scale compensation—no JS jank.

How to write itOpen for stack patterns

Web (HTML/CSS)perspective + translateZ (CSS) / rAF + transform

React + Tailwind + shadcn/uiCSS-only layers or framer-motion useScroll

SwiftUIScrollView + visualEffect / GeometryReader offsets

Ant Designcustom CSS/JS on marketing pages

Notes

Landing-page polish and a performance landmine. Prefer pure CSS (perspective + translateZ) so the compositor owns scroll. JS paths must rAF and only touch transform. background-attachment: fixed is broken on iOS Safari—don’t rely on it. Restraint: one hero parallax beats a whole page of sliding wallpaper.

Common mistakesHumans and models trip here

Sync style changes in a raw scroll listener without rAF: layout thrash on low-end phones.
background-attachment: fixed: silently fails on iOS Safari.
Five nested parallax layers: motion sickness and dropped frames.
Ignoring reduced-motion: depth scroll is a common vestibular trigger.

More failure symptoms on AI broke it.

Related patterns

Scroll RevealPlay an entrance when an element enters the viewport—the pacing tool for long pages.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Glassmorphism / Backdrop BlurBlur what’s behind a surface and tint it so the layer reads as translucent glass.

Spotted a wrong name or missing pattern?

Message on X