Scroll Motion
Scroll-linked effects should reward exploration without making normal reading unpredictable. Use reveal for section rhythm, parallax for restrained depth, sticky stories for a clear narrative, and horizontal mapping only for a deliberate sequence.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Scroll Motion · motion explains one relationship
Purpose
Scroll-linked effects should reward exploration without making normal reading unpredictable. Use reveal for section rhythm, parallax for restrained depth, sticky stories for a clear narrative, and horizontal mapping only for a deliberate sequence.
Never require the reader to complete an animation to see content, trap wheel/keyboard scrolling, or attach a heavy listener to every child. Share scroll sources, update motion values rather than React state per frame, and pause or simplify offscreen work.
On mobile, prefer normal stacked or native overflow layouts. Reduced motion keeps the content and order while removing linked movement.
Source: packages/skills/patterns/scroll-motion.md