PixelMouseParallax

Cursor-tracking parallax layer that translates children based on mouse position with smooth lerp.

Smoothed translate3d follow with configurable strength
Invert mode to repel its content from the cursor
GPU-accelerated via will-change-transform

Status: stable
Category: parallax
Since: v1.6.0

API

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

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`	—	The content that moves with the pointer.
`strength`	`number`	`20`	Max travel distance in px.
`invert`	`boolean`	`false`	If true, moves away from cursor instead of towards.
`className`	`string`	—	Extra classes on the wrapper.
`style`	`React.CSSProperties`	—	Inline styles of the wrapper.

ref points to <div>.

WCAG target: 2.1 AA

decorative-motion

Pointer-only effect with no keyboard or assistive impact. The layer holds still when the user prefers reduced motion (prefers-reduced-motion: reduce), and stops where it is if the preference turns on while it moves.

Usage

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

export function Default() {
  return (
    <div className="relative h-64 w-full overflow-hidden rounded border border-retro-border bg-retro-bg">
      <PixelMouseParallax strength={20}>
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-retro-cyan/20 px-4 py-2 text-sm text-retro-cyan">
          Follows the cursor
        </div>
      </PixelMouseParallax>
    </div>
  );
}

Examples

Default

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

export function Default() {
  return (
    <div className="relative h-64 w-full overflow-hidden rounded border border-retro-border bg-retro-bg">
      <PixelMouseParallax strength={20}>
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-retro-cyan/20 px-4 py-2 text-sm text-retro-cyan">
          Follows the cursor
        </div>
      </PixelMouseParallax>
    </div>
  );
}

Inverted

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

export function Inverted() {
  return (
    <div className="relative h-64 w-full overflow-hidden rounded border border-retro-border bg-retro-bg">
      <PixelMouseParallax strength={30} invert>
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-retro-purple/20 px-4 py-2 text-sm text-retro-purple">
          Repels from the cursor
        </div>
      </PixelMouseParallax>
    </div>
  );
}

Related