Component•Premium

Reel Gallery

An endless multi-row gallery that follows wheel, trackpad, drag, and keyboard direction with momentum and smooth infinite wrapping.

Scroll or drag left / right

Live controls

Customize

Rows5Row height100pxGap12pxSpeed0.75×Tilt-4°Alternate rows

Overview

About the Reel Gallery

An endless multi-row gallery that follows wheel, trackpad, drag, and keyboard direction with momentum and smooth infinite wrapping. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Architecture, fashion, photography, and agency portfolios that need a cinematic wall of work.
Visual discovery surfaces where users should browse naturally with wheel, trackpad, drag, or arrow keys.

What’s included

Files in the product ZIP

Reel Gallery source

components/reel-gallery.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { ReelGallery, type ReelGalleryItem } from "@/components/reel-gallery";

Minimum example

const items: ReelGalleryItem[] = [
  { id: "one", content: <span>One</span>, background: "#1d4ed8" },
  { id: "two", content: <span>Two</span>, background: "#7c3aed" },
];

export default function Gallery() {
  return <ReelGallery items={items} rows={2} />;
}

Props

Component API

Prop	Type	Default	Description
items	readonly ReelGalleryItem[]	Required	Items repeated across gallery rows.
rows	number	5	Number of gallery rows, clamped from one to eight.
rowHeight	number	100	Row height in pixels.
itemGap	number	12	Horizontal item gap in pixels.
rowGap	number	14	Vertical row gap in pixels.
speed	number	0.72	Motion response speed.
autoSpeed	number	0.72	Automatic motion speed.
wheelSensitivity	number	1	Wheel and trackpad multiplier.
dragSensitivity	number	1	Pointer drag multiplier.
inertia	number	0.92	Velocity retention after input.
tilt	number	-4	Tilt of the scrolling rows in degrees, -10 to 10.
cornerRadius	number	14	Item corner radius in pixels.
alternate	boolean	false	Reverses direction on alternating rows.
autoPlay	boolean	true	Keeps rows moving without input.
dim	number	0.16	Inactive item dimming amount.
ariaLabel	string	"Scrollable reel gallery"	Accessible group label.
className	string	""	Additional root class names.
style	CSSProperties	undefined	Inline styles for the root element.

ReelGalleryItem contains id plus optional src, alt, content, aspectRatio, and background fields.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.

Images: No image files are included. ReelGalleryItem accepts your own image URL or React content; the minimum example uses custom content and colors.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Reel Gallery ZIP, place the source file at src/components/reel-gallery.tsx, and copy the example into your own page or feature folder.

Target path

src/components/reel-gallery.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is not required by this component.
All component styles are embedded in components/reel-gallery.tsx.