Infinite Drift 2

Fullscreen WebGL gallery: infinite tiled image atlas, radial dome distortion, multi-touch inertial drag, and optional auto drift. Bundled atlas photos install under components/3d/infinite-drift-2/images.

Default

Glass-rim tiles under a chromatic dome lens - drag or scroll to pan. Demo photos ship with the install.

Loading…

Installation

CLI

npx @sonojs/ui@latest add infinite-drift-2

Usage

page.tsx

"use client"

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

export default function Page() {
  return (
    <div className="h-[420px] w-full overflow-hidden rounded-[12px] bg-canvas sm:h-[520px]">
      {/* 16 atlas photos install under components/3d/infinite-drift-2/images */}
      <InfiniteDrift2 height="100%" />
    </div>
  )
}

Props

Prop	Type	Default	Description
images	string[]	bundled atlas (16)	Image URLs packed into a square atlas (up to 16 → 4×4 grid).
curve	number	0.35	Lens distortion (0 = flat, higher = deeper dome / fisheye).
curveRadius	number	1.5	Radial reach of the dome curve.
zoom	number	0.08	Zoom scale offset in the distortion formula.
tileWidth	number	220	Tile width in pixels.
tileHeight	number	220	Tile height in pixels.
gap	number	18	Gap between tiles in pixels.
borderRadius	number	12	Rounded corner radius for each tile.
tileRotation	number	0	Per-tile rotation in degrees.
grayscale	number	0	Grayscale mix (0 = color, 1 = monochrome).
vignette	number	0.38	Edge darkening intensity.
chromaticAberration	number	0.55	RGB fringe at the dome rim (0–1).
glass	number	0.85	Specular glass rim on tiles (0–1).
depthFade	number	0.75	How much edge tiles darken into the dome.
autoScrollX	number	0.35	Continuous drift speed on X.
autoScrollY	number	0.15	Continuous drift speed on Y.
enableDrag	boolean	true	Pointer drag panning.
enableWheel	boolean	true	Mouse wheel panning.
axis	"both" · "x" · "y"	"both"	Allowed pan axes.
dragSensitivity	number	1	Drag pan multiplier.
wheelSensitivity	number	0.6	Wheel pan multiplier.
friction	number	0.92	Inertia decay (0.80–0.98 typical).
height	string · number	420	Stage height (mobile-friendly default).
width	string · number	"100%"	Stage width.
backgroundColor	string	"transparent"	Container background behind the canvas.
dpr	number	2	Max device pixel ratio for rendering.
className	string	-	Classes on the stage.
children	ReactNode	-	Optional overlay content above the canvas.