Parallax Grid

Gallery columns drifting at different rates for depth.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/parallax-grid.json

Adds components/velora/parallax-grid.tsx, installs motion.

Prop	Type	Default
`children*` Each child becomes one tile; columns drift at different speeds	`React.ReactNode[]`	`—`
`depth` Maximum vertical drift in px	`number`	`90`
`className`	`string`	`—`

Reduced motion: A CSS override pins every tile in its grid cell, so the columns do not drift.
Keyboard: Decorative — nothing to operate.
Screen readers: Plain divs, one wrapper per child, with no list or grid semantics beyond what the children provide.

Gallery columns drifting at different rates for depth.

pnpm dlx shadcn@latest add https://paulkeys.org/r/parallax-grid.json

Adds components/velora/parallax-grid.tsx, installs motion.

Prop	Type	Default
`children*` Each child becomes one tile; columns drift at different speeds	`React.ReactNode[]`	`—`
`depth` Maximum vertical drift in px	`number`	`90`
`className`	`string`	`—`

Reduced motion: A CSS override pins every tile in its grid cell, so the columns do not drift.
Keyboard: Decorative — nothing to operate.
Screen readers: Plain divs, one wrapper per child, with no list or grid semantics beyond what the children provide.