Parallax

A layer that moves at its own pace while the page scrolls, to suggest depth.

Dependenciesmotion

Scroll down

Depth

Installation#

pnpm dlx shadcn@latest add @balick/parallax

Or pass the full URL: https://ui.balick.me/r/parallax.json

Usage#

import { Parallax } from "@/components/ui/parallax"

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <Parallax distance={80} className="absolute -top-10 right-10 size-40 rounded-full bg-muted" />
      <h1 className="relative">Depth</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`distance` How far the layer drifts, in pixels, while it crosses the screen. A negative value reverses it.	`number`	60	How far the layer drifts, in pixels, while it crosses the screen. A negative value reverses it.
`scrollRef` The element that scrolls, which must be positioned (relative). It is the page by default.	`React.RefObject<HTMLElement \| null>`	—	The element that scrolls, which must be positioned (relative). It is the page by default.