--- title: Curved Gallery description: A WebGL photo strip on a curved screen that bends with speed. category: Gallery tier: pro url: https://ui.dimaac.com/components/curved-gallery registry: https://api.dimaac.com/v1/ui/r/curved-gallery.json registry_auth: Authorization: Bearer --- # Curved Gallery 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. ## Install This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable. 1. Merge the registry into components.json (the key is never written into the file): ```json { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } ``` 2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set: ```bash DIMAAC_LICENSE_KEY=your-licence-key ``` 3. Add the component: ```bash npx shadcn@latest add @dimaac-pro/curved-gallery ``` The registry item is https://api.dimaac.com/v1/ui/r/curved-gallery.json and answers only with `Authorization: Bearer ` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing). Dependencies: ```bash pnpm add three npm install three ``` By hand: Unlock the code on https://ui.dimaac.com/components/curved-gallery with your licence key, then: 1. Install the packages it uses: three. 2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/curved-gallery.tsx. 3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS. 4. Import it with import { CurvedGallery } from "@/components/dimaac/curved-gallery" and give its parent a size: it fills it. ## Usage ```tsx import { CurvedGallery } from "@/components/dimaac/curved-gallery"; ``` ## 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). | ## Credits - Photo (Poised Portrait): Lloyd Creates, Lummi (https://www.lummi.ai/photo/poised-portrait-ooi9b), Lummi License - Photo (Fashion Portrait with Orange Visor): West Kast, Lummi (https://www.lummi.ai/photo/fashion-portrait-with-orange-visor-damql), Lummi License - Photo (Vivid Portrait on Pink): Amino, Lummi (https://www.lummi.ai/photo/vivid-portrait-on-pink-oxbow), Lummi License - Photo (Monochrome Trio Style): West Kast, Lummi (https://www.lummi.ai/photo/monochrome-trio-style-va9g1), Lummi License - Photo (Vibrant Woman Portrait): SHIHO, Lummi (https://www.lummi.ai/photo/vibrant-woman-portrait-htofy), Lummi License - Photo (Futuristic Gold Profile): West Kast, Lummi (https://www.lummi.ai/photo/futuristic-gold-profile-jnio5), Lummi License - Photo (Stylish Portrait): Amino, Lummi (https://www.lummi.ai/photo/stylish-portrait-8inth), Lummi License - Photo (Modern Fashion Pose): Axel Photography, Lummi (https://www.lummi.ai/photo/modern-fashion-pose-zsdav), Lummi License ## Source The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/curved-gallery. ## Agent prompt ```text Add the Curved Gallery component () 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 ". Then use it like this: import { CurvedGallery } from "@/components/dimaac/curved-gallery"; 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 ```