SpatialGenerated from the public API
ParallaxLayer
Layered depth driven by scroll, with the layer depth declared per child.
@luc/ui/motionLive preview
Three layers at three depths; negative depth moves against the pointer, which is the foreground read.
Move the pointer
Foreground
<ParallaxScene depth={16} perspective={900}>
<ParallaxLayer depth={0.2} z={-80} />
<ParallaxLayer depth={1}>Move the pointer</ParallaxLayer>
<ParallaxLayer depth={-0.4} z={60}>Foreground</ParallaxLayer>
</ParallaxScene>Usage
import { ParallaxLayer } from "@luc/ui/motion";<ParallaxScene depth={16} perspective={900}>
<ParallaxLayer depth={0.2} z={-80} />
<ParallaxLayer depth={1}>Move the pointer</ParallaxLayer>
<ParallaxLayer depth={-0.4} z={60}>Foreground</ParallaxLayer>
</ParallaxScene>API
| Export | Kind | Signature |
|---|---|---|
ParallaxLayer | 3 documented props | ({ className, children, depth, z, axis, style, ...props }: ParallaxLayerProps) => import("@types/react").JSX.Element |
ParallaxScene | 4 documented props | ({ className, children, depth, perspective, tilt, disabled, style, ...props }: ParallaxSceneProps) => import("@types/react").JSX.Element |
ParallaxLayer props
Type: ParallaxLayerProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
axis? | "both" | "x" | "y" | undefined | — | Which axis the layer answers. Useful for a strictly horizontal sweep. |
depth? | number | undefined | — | How much of the scene's travel this layer takes. `0` is fixed, `1` is the scene's nominal depth, negative values move *against* the pointer (the classic foreground read) and value… |
z? | number | undefined | — | Position along the z axis, in px. Negative pushes a layer behind the plane. |
ParallaxScene props
Type: ParallaxSceneProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
depth? | number | undefined | — | Travel, in px, of a layer at depth `1`. The whole vocabulary of the scene: `12` is a restrained product surface, `40` is a hero. |
disabled? | boolean | undefined | — | Freeze the scene at rest but keep the composition. |
perspective? | number | undefined | — | `perspective()` distance, in px. Smaller makes the depth more dramatic. |
tilt? | number | undefined | — | Lean of the whole scene, in degrees. `0` keeps it flat. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Spatial
Depth, layering and geometry — motion that reads as physical space.
Related