Parallax Section
`ParallaxSection` gives a background, content plane or foreground a small scroll-linked depth offset. It is useful for a hero or a feature section with clearly separated layers.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
ParallaxSection gives a background, content plane or foreground a small scroll-linked depth offset. It is useful for a hero or a feature section with clearly separated layers.
Use one or two layers and a distance around 16–40px. Do not parallax dense text, fixed controls or every section on a page. The effect should be felt as depth, not make the reader compensate for a moving target.
Reduced motion leaves all layers static; mobile should use the same reading order without requiring a scroll gesture. Keep the layers compositor-friendly and avoid large blur/filter combinations.
Source: packages/skills/scroll/parallax-section.md