Curved Gallery

Pro

A WebGL photo strip on a curved screen that bends with speed.

Gallery · ProInstall ↓Open preview ↗

Loading the demoNew tab ↗

Customize

Curvature0.50

Distortion0.60

Gap32 px

Speed1.0

RGB shift

Your code

<CurvedGallery />

Changes show live and stay in the address, so a link keeps them.

Code

This one is a Pro component

Pro components come with Pro Components, any Templates plan or All-Access. Sign in, or enter your licence key, to see the code here and copy it, or install it with the shadcn CLI below.

Install

With the shadcn CLI

Pro components install from a private registry that checks your licence key (Pro Components, a Templates plan or All-Access). Set it up once per project. The key stays in an environment variable and never goes into components.json.

1. Add the registry

Merge this into components.json.

components.json

{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. Add your key

Put it in .env.local (or your shell) and keep that file out of git. The CLI fills in ${DIMAAC_LICENSE_KEY} from it.

.env.local

DIMAAC_LICENSE_KEY=your-licence-key

3. Add the component

npx shadcn@latest add @dimaac-pro/curved-gallery

@dimaac-pro is the registry from step 1. More in Docs

By hand

npm install three

Install the packages it uses: three.
Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/curved-gallery.tsx.
It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
Import it with import { CurvedGallery } from "@/components/dimaac/curved-gallery" and give its parent a size: it fills it.

Props

Prop	Type	Default	Description
`images`	`CurvedGalleryImage[]`	`defaultImages`	The photos, in order. They loop, so 6 or more look best.
`curvature`	`number`	`0.5`	How much the strip bends around you. 0 is flat, 1 is a deep curve.
`distortion`	`number`	`0.6`	How much the planes bow and stretch while the strip moves. 0 keeps them flat.
`gap`	`number`	`32`	Space between the photos, in pixels.
`speed`	`number`	`1`	How far a wheel turn or a drag moves the strip. 1 follows the pointer.
`rgbShift`	`boolean`	`true`	Splits the colours a little while the strip moves fast.
`label`	`string`	`"Photo gallery"`	Names the gallery for screen readers.
`className`	`string`	`""`	Extra classes for the outer box. Give it a size (it fills it).

Use with AI

Agent prompt

Paste it into Claude Code, Cursor or any coding agent, or open it straight in a chat. It carries your Customize settings.

Prompt

Add the Curved Gallery component (<CurvedGallery />) from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access).

Docs: https://ui.dimaac.com/components/curved-gallery

1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file:
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key
   Ask them for it if it isn't set. Never print it or commit it.

3. Install it with:
npx shadcn@latest add @dimaac-pro/curved-gallery

The registry item is https://api.dimaac.com/v1/ui/r/curved-gallery.json and wants the header "Authorization: Bearer <licence key>".

Then use it like this:
import { CurvedGallery } from "@/components/dimaac/curved-gallery";
<CurvedGallery />

It imports three; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder.
Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback.
Full index for agents: https://ui.dimaac.com/llms.txt

Open in Claude ↗Open in ChatGPT ↗

Files agents read

llms.txt: Every component and how to install it
curved-gallery.md: This page as Markdown: install, props and the full source

About

A horizontal strip of photos drawn as WebGL planes on the inside of a gentle cylinder, like a curved screen. Wheel, drag, swipe or the arrow keys move it, with smooth easing, a little momentum and an endless loop. The faster it moves, the more the planes bow, stretch and split their colours, and they ease back to calm when it stops. Hovering a photo lifts it, every photo has a sharp DOM caption that tracks it (a real link when you pass href), and textures load only as photos come near the screen. With reduced motion, or without WebGL, it becomes a flat strip that scrolls natively. Built on three.js.

Installs to: components/dimaac/curved-gallery.tsx
Uses: three
Tags: webgl, three, shader, gallery, drag, carousel, velocity

Photo (Poised Portrait) by Lloyd Creates on Lummi (Lummi License). Photo (Fashion Portrait with Orange Visor) by West Kast on Lummi (Lummi License). Photo (Vivid Portrait on Pink) by Amino on Lummi (Lummi License). Photo (Monochrome Trio Style) by West Kast on Lummi (Lummi License). Photo (Vibrant Woman Portrait) by SHIHO on Lummi (Lummi License). Photo (Futuristic Gold Profile) by West Kast on Lummi (Lummi License). Photo (Stylish Portrait) by Amino on Lummi (Lummi License). Photo (Modern Fashion Pose) by Axel Photography on Lummi (Lummi License).