Infinite gallery

An endless wall of work that loops seamlessly in every direction. Drag and flick it, scroll to glide, or let it drift; hover a card and its image resolves out of pixels.

Galleries, drag, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/infinite-gallery.tsx https://motion-brew.com/r/infinite-gallery.tsx

One self contained file for React and Tailwind CSS: infinite-gallery.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { InfiniteGallery } from "@/components/infinite-gallery";

export default function Page() {
  return (
    <InfiniteGallery
      className="h-screen"
      items={[
        { src: "/work/northwind.jpg", title: "Northwind", alt: "Northwind brand book spread", href: "/work/northwind" },
        { src: "/work/tidal-poster.jpg", video: "/work/tidal.mp4", title: "Tidal", href: "/work/tidal" },
        { src: "/work/kiln.jpg", title: "Kiln", href: "/work/kiln" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
items	{ src; video?; title; alt?; href? }[]	sample photos	Cards to tile endlessly
cardWidth	number	220	Card width, px
cardHeight	number	280	Card height, px
gap	number	20	Space between cards, px
stagger	boolean	true	Offset every other column
drift	number	24	Idle drift speed, px/s; 0 stops it
momentum	number	0.6	How far a flick carries, 0 to 1
depth	number	0.35	Edge cards sit smaller than the center, 0 to 1
parallax	number	0.5	Image shift inside each frame, 0 to 1
wheel	boolean	true	Wheel and trackpad pan the gallery while hovered
stretch	number	0.6	Rubbery stretch along the direction of travel, 0 to 1
blur	number	6	Strongest directional motion blur while moving, px
intro	boolean	true	Bloom in from the center on first view
pixelate	boolean	true	Pixel resolve on hover
pixelSize	number	12	Starting pixel size for the resolve, px
showTitles	boolean	true	Title pill on hover
newTab	boolean	false	Open links in a new tab
label	string	"Project gallery"	Accessible name
className	string		Size of the gallery

More galleries

Project index: An editorial project index with large photography: hover a project and its image arrives through a pixel, grain, gradient or mirror transition, then open it with one press.
Prism carousel: An endless carousel circling through liquid glass lenses at both edges.
Tilt carousel: A looping row of photo cards that glides on its own: the middle one faces you while the rest turn away in 3D.
Depth carousel: A stack of cards receding into depth with motion blur.

All animated react carousels and galleries