Parallax Image

Make a photo drift inside a fixed-ratio frame as the page scrolls, with an optional caption.

Dependencies: gsap
Size: 118 lines
Controls: 8 controls

example.tsx

1import { ParallaxImage } from "@/components/onycx/parallax-image";23export default function Example() {4  return (5    <ParallaxImage6      amount={3}7      scale={1.08}8      scrub={0.8}9      radius={18}10      aspect={"4 / 5"}11      caption={"A PALETTE YOU CAN FEEL."}12      captionIndex={"01"}13      background={"#e5ded2"}14    />15  );16}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/parallax-image.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/parallax-image.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the parallax-image.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
src / alt	string	—	Image source and description (empty alt for decorative images).
aspect	string	"4 / 5"	CSS aspect-ratio of the frame; the frame never resizes while scrolling.
amount	number	3	yPercent drift each way, clamped to 0–20.
scale	number	1.08	Constant overscan of the moving layer; never lower than 1 + 2 × amount / 100.
scrub	number	0.8	ScrollTrigger scrub smoothing in seconds.
radius	number	18	Frame corner radius (px).
caption / captionIndex	string	"A PALETTE YOU CAN FEEL." / "01"	8px / .1em mocha caption row outside the moving layer. Empty caption hides it.
background	string	"#e5ded2"	Frame colour behind a loading or failed image.
priority	boolean	false	Load eagerly for above-the-fold heroes.