Wensity

Infinite Image Collage

Pro

Grab and throw a photo collage. Frames wrap with no seam, then glide to a stop.

gallerycollagedragimagesinertiainfinite
Infinite Image Collage component preview

Overview

Infinite Image Collage is a React and Tailwind CSS draggable photo canvas you can grab and throw in any direction, in Next.js or any React app, with no dependencies. Mixed aspect ratio frames pack one repeating cell with a continuous gutter, so the wrap never shows a seam, and a throw glides before easing to a stop. Frames near the middle come forward while outer ones tilt and soften, and a drag rocks them slightly. Arrow keys pan it, and reduced motion removes the speed driven rock. Image positions are design pixels inside cellWidth and cellHeight.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add infinite-image-collage

Usage

Import InfiniteImageCollage from @/components/wensity/infinite-image-collage and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { InfiniteImageCollage } from "@/components/wensity/infinite-image-collage";


export default function Example() {
  return (
    <InfiniteImageCollage className="h-[720px]" />
  );
}

Props

PropTypeDefaultDescription
imagesInfiniteCollageImage[]Sixteen Wensity photographsFrames packed inside one repeating cell. Positions are design pixels.
cellWidthnumber1944Design width of the repeating cell, in pixels.
cellHeightnumber1895Design height of the repeating cell, in pixels.
frictionnumber0.986How much speed a throw keeps while it is still moving quickly. Lower settles sooner.
depthnumber1How far the middle comes forward. 0 is flat, 1 is the reference.
tiltnumber1How far outer frames turn toward the middle. 0 is flat, 1 is the reference.
shakenumber1How hard a drag rocks and slips the frames. 0 is still, 1 is the reference.
softnessnumber1Softness on frames away from the middle. 0 stays sharp.
perspectivenumber820Stage perspective, in pixels. Lower makes the tilt read stronger.
labelstringInfinite photo collage. Drag to move in any direction.Accessible name for the canvas.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.