Infinite Drift

Horizontal image strips with parabolic curvature and optional tilt, driven by wheel, page scroll, and drag inertia. Pure Canvas 2D - no Three.js. Bundled photos install under components/3d/infinite-drift/images.

Default

Drag vertically or scroll the page - five curved bands drift with inertia. Demo photos ship with the install.

Loading…

Installation

CLI

npx @sonojs/ui@latest add infinite-drift

Usage

page.tsx

"use client"

import { InfiniteDrift } from "@/components/3d/infinite-drift"

export default function Page() {
  return (
    <InfiniteDrift
      height={600}
      bands={[
        {
          speed: 1,
          rotation: 7,
          curveAmount: 40,
          images: ["/media/a.jpg", "/media/b.jpg", "/media/c.jpg"],
        },
        {
          speed: 1.3,
          offsetY: -100,
          images: ["/media/d.jpg", "/media/e.jpg"],
        },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
bands	InfiniteDriftBand[]	bundled demo	Per-band images, speed, offsetY, rotation, curveAmount, curveDirection, rotationType.
height	string · number	600	Stage height.
gap	number	20	Gap between images in a band (px).
imageHeight	number	100	Drawn image height in the strip.
bandHeight	number	120	Band strip canvas height.
maxImageWidth	number	300	Cap width when preserving ratios.
inertia	number	0.92	Velocity decay each frame.
preserveOriginalRatios	boolean	true	Keep source aspect ratios when sizing tiles.
className	string	-	Classes on the stage.
children	ReactNode	-	Optional overlay content above the canvas.