PixelParallaxLayer

Scroll-driven parallax wrapper that GPU-translates its children proportionally to scroll position.

GPU-composited via translate3d for smooth 60fps motion
Configurable speed multiplier (negative values reverse direction)
Supports x, y, or both axes
Ref-forwarding to underlying div

Status: stable
Category: parallax
Since: v1.6.0

API

import { PixelParallaxLayer } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`	—	Content of the layer.
`speed`	`number`	`0.5`	Parallax multiplier. 0 = no movement, 1 = full scroll speed, negative = reverse.
`axis`	`'x' \| 'y' \| 'both'`	`'y'`	Axis to translate on. Default `"y"`.
`className`	`string`	—	Extra classes on the wrapper.
`style`	`React.CSSProperties`	—	Inline styles of the wrapper.

ref points to <div>.

WCAG target: 2.1 AA

respects prefers-reduced-motion
decorative layer

Parallax is decorative; consumers should gate motion or apply aria-hidden on purely decorative layers.

Usage

import { PixelParallaxLayer } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelParallaxLayer speed={0.5} axis="y">
      <div style={{ padding: 24, background: '#111', color: '#fff' }}>
        Scroll to see this layer move at half speed.
      </div>
    </PixelParallaxLayer>
  );
}

Examples

Default (background)

import { PixelParallaxLayer } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelParallaxLayer speed={0.5} axis="y">
      <div style={{ padding: 24, background: '#111', color: '#fff' }}>
        Scroll to see this layer move at half speed.
      </div>
    </PixelParallaxLayer>
  );
}

Foreground (reverse)

import { PixelParallaxLayer } from '@pxlkit/ui-kit';

export function Foreground() {
  return (
    <PixelParallaxLayer speed={-0.3} axis="y">
      <div style={{ padding: 24, background: '#222', color: '#fff' }}>
        Foreground float-up (negative speed).
      </div>
    </PixelParallaxLayer>
  );
}

Horizontal axis

import { PixelParallaxLayer } from '@pxlkit/ui-kit';

export function Horizontal() {
  return (
    <div className="relative w-full overflow-hidden">
      <PixelParallaxLayer speed={0.4} axis="x">
        <div style={{ padding: 24, background: '#0EA5E9', color: '#fff' }}>
          Horizontal parallax drift.
        </div>
      </PixelParallaxLayer>
    </div>
  );
}