PixelParallaxGroup

Perspective/viewport container that clips parallax children within a shared overflow-hidden, relative-positioned area.

Establishes a shared viewport for parallax layers
Applies position: relative and overflow: hidden automatically
Polymorphic tag: div, section, header, or main (in Angular, the element you put pxlParallaxGroup on)
SSR-safe — no measurement or window APIs

Status: stable
Category: parallax
Since: v1.6.0

API

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

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`	—	The layers (`PixelParallaxLayer`, `PixelMouseParallax`).
`className`	`string`	—	Extra classes on the root element.
`style`	`React.CSSProperties`	—	Inline styles of the root element.
`as`	`'div' \| 'section' \| 'header' \| 'main'`	`'div'`	HTML tag to render. Default `"div"`.

ref points to its element (HTMLElement).

WCAG target: 2.1 AA

decorative container

Purely a layout/clipping container; children handle motion and respect prefers-reduced-motion individually.

Usage

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

export function Default() {
  return (
    <PixelParallaxGroup
      style={{ height: 240, background: '#0b0b0f', color: '#e5e7eb' }}
    >
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
        Parallax viewport
      </div>
    </PixelParallaxGroup>
  );
}

Examples

Default

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

export function Default() {
  return (
    <PixelParallaxGroup
      style={{ height: 240, background: '#0b0b0f', color: '#e5e7eb' }}
    >
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
        Parallax viewport
      </div>
    </PixelParallaxGroup>
  );
}

As Section

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

export function AsSection() {
  return (
    <PixelParallaxGroup
      as="section"
      style={{ height: 200, background: '#111827', color: '#e5e7eb' }}
    >
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
        Section variant
      </div>
    </PixelParallaxGroup>
  );
}

Related