Future UI

Flow Gallery

⟲ Carousels

Infinite-scrolling isometric card gallery with sine-wave curve positioning and drag physics.

gallerycarouselisometric3dinfinite-scrollsine-wavedragphysicsperspectiveflow

No preview available

Pure CSS + React ~ Drag to Scroll

Controls

2
600
4
40
110

Carousels / React Component

About Flow Gallery

Infinite-scrolling isometric card gallery with sine-wave curve positioning and drag physics.

Category Carousels
Framework React + TypeScript
Tags gallery, carousel, isometric, 3d, infinite-scroll, sine-wave, drag, physics, perspective, flow

Install Flow Gallery in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/flow-gallery.json?key=YOUR_LICENSE_KEY"

Usage example

import FlowGallery from './FlowGallery';

function Card({ color, label }: { color: string; label: string }) {
  return (
    <div
      className="w-full aspect-[2/3] rounded-3xl flex items-center justify-center text-white text-xl font-bold"
      style={{ background: color }}
    >
      {label}
    </div>
  );
}

export default function Example() {
  return (
    <div className="h-screen bg-black">
      <FlowGallery columns={4} speed={2} curveAmplitude={600}>
        <Card color="#2563eb" label="A" />
        <Card color="#9333ea" label="B" />
        <Card color="#db2777" label="C" />
        <Card color="#f97316" label="D" />
        <Card color="#22c55e" label="E" />
        <Card color="#eab308" label="F" />
        <Card color="#dc2626" label="G" />
        <Card color="#0d9488" label="H" />
      </FlowGallery>
    </div>
  );
}