ParallaxImage

Image that translates at a fraction of the scroll speed for depth.

stable display #scroll#motion#image

Mountain landscape reflected in a calm lake

Loading preview…

Usage

Use for hero images, project covers, or decorative imagery where a subtle depth effect adds visual richness as users scroll. Works best with tall images or images with a clear subject in the center.

Do / Don't

- **Do** always provide meaningful `alt` text — the image is real content. - **Do** set `speed` between 0.2 and 0.8 for subtle effects; values above 1 are dramatic. - **Don't** use inside `overflow: hidden` parent containers — the scroll tracking breaks. - **Don't** use for images with critical edge content — parallax clips the edges.

Tokens

motion.ease-out-quart — cubic-bezier(0.165, 0.84, 0.44, 1)

A11y

Respects prefers-reduced-motion — image renders statically. Always provide alt text. Image is wrapped in a container with overflow:hidden to prevent layout shift.

Source

src/components/ParallaxImage.tsx

Live playground