Flow Gallery

Horizontal and diagonal 3D cascading gallery stream with continuous auto-flow motion, drag inertia physics, and isometric perspective options.

Drag the stage or allow it to auto-flow continuously along the selected directional stream angle.

Top-Left to Bottom-Right Flow Stream

Top-Right to Bottom-Left Flow Stream

Straight Upward Vertical Stream (Bottom to Top)

Straight Downward Vertical Stream (Top to Bottom)

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Flow Gallery

npx shadcn@latest add @algorize-ui/flow-gallery

components/custom/flow-gallery.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Flow Gallery to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

next-themes is an npm package.

npm install next-themes

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

4 Directional Stream Angles

Supports top-left, top-right, vertical-up, and vertical-down directional angles via simple props.

Continuous Infinite Auto-Flow

Images cascade continuously with smooth velocity inertia and optional pause-on-hover.

Drag & Inertia Physics

Interactive mouse and touch drag gestures along the stream axis with grab cursor feedback.

Light & Dark Theme Adaptation

Supports Next Themes integration to transition stage background tones and radial depth vignette overlays.

Best Practices & Guidelines

Image Resolution & Aspect Ratios

Use square or near-square images (800x800) so that card items maintain crisp aspect ratios when rendered in the 3D plane.

Performance & GPU Acceleration

The stream plane uses hardware-accelerated transform: translate3d() properties to maintain 60fps performance across devices.

Props Reference

Component	Prop	Type	Default	Description
`FlowGallery`	`direction`	`"top-left" \| "top-right" \| "vertical-up" \| "vertical-down"`	`"top-left"`	Directional angle of the stream. Use `"vertical-down"` for straight downward flow from top to bottom.
`FlowGallery`	`items`	`FlowGalleryItem[]`	`DEFAULT_ITEMS`	Array of image objects containing `{ id, title, imageUrl }` to display in the stream.
`FlowGallery`	`speed`	`number`	`3.5`	Continuous auto-flow speed in pixels per frame.
`FlowGallery`	`pauseOnHover`	`boolean`	`true`	When set to true, automatically pauses the continuous auto-flow when hovering over the stage.
`FlowGallery`	`columns`	`number`	`9`	Number of parallel columns flowing along the stream plane.
`FlowGallery`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the stage container.