Add depth with parallax layers

At a glanceCopy Anchor Link

• Who: Developers adding scroll depth to a hero or section without a JavaScript animation library.
• What: Section-shared CSS view timeline; layers move with depth, axis, zoom, fade, and range. Static without scroll timelines.
• Use when: Background and deco layers that should drift as the section scrolls. Keep copy and controls outside a moving layer, or at depth={0}.
• Avoid when: Node-local scroll presets on a single element — data-animate-scroll="parallax" stays. Pinned scene crossfades — ScrollScenes. Sticky columns — StickyAside.
• See also: Reveal and react with motion on any element, Keep a side panel in view, Pin a stage and change scene as the page scrolls

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 1.8.0 (via changesets).

ExampleCopy Anchor Link

import { ParallaxLayer, ParallaxSection } from "@zedtech/zedkit-ui/motion";

<ParallaxSection range="page">
  <ParallaxLayer depth="far" className="absolute inset-0" />
  <div className="relative"><h1>Title</h1></div>
  <ParallaxLayer depth="near" className="absolute right-8 top-20" />
</ParallaxSection>

import { ParallaxLayer, ParallaxSection } from "@zedtech/zedkit-ui/motion";

<ParallaxSection axis="y" intensity={0.5} off="below-md">
  <ParallaxLayer depth={0.25} zoom={[1, 1.08]} />
</ParallaxSection>

Wraps: (none)

AccessibilityCopy Anchor Link

Moving, zooming, or fading layers are aria-hidden and inert. prefers-reduced-motion: reduce and data-motion="reduce" leave layers in place. Do not put buttons, links, toasts, or Surface variant="glass" in a moving layer. Surface depth wraps without aria-hidden so a non-interactive visual panel can still sit on a layer.