# Lens Carousel

A looping carousel whose edges behave like thick glass. Slides are pulled out towards the rim, swell taller, smear sideways and split into colour, then fold back mirrored at the very edge. Drawn in WebGL, idle when still.

- Page and source: https://uibrik.com/components/lens-carousel
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/lens-carousel`
- Packages: none beyond React
- Import: `import { LensCarousel } from "@/components/uibrik/lens-carousel/lens-carousel"`

Where to use the Lens Carousel React component:

- **Product galleries**: Slides pulled toward the rim like thick glass make a carousel feel physical. Pairs with [Curved Gallery](https://uibrik.com/components/curved-gallery).
- **Glass hero carousels**: Colour splitting at the edges echoes Apple-style glass. Pairs with [Liquid Glass Lens](https://uibrik.com/components/liquid-glass-lens).
- **Campaign showcases**: Drawing pauses while the carousel is still, so the WebGL effect costs nothing while visitors read.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| slideWidth | `number` | `280` | Smallest slide width. Slides grow past it on wide screens so exactly three show at a time. |
| ratio | `number` | `1.25` | Slide height against its width. |
| gap | `number` | `14` | Space between slides. |
| rounding | `number` | `20` | Corner radius of a slide. |
| edge | `number` | `24` | Share of the width, per side, that acts as the lens. |
| pull | `number` | `70` | How hard the lens pulls slides towards the rim. Above 50 the outer part folds back mirrored. |
| magnify | `number` | `80` | How much taller a slide's picture swells at the rim. |
| flare | `number` | `22` | How far a slide's top and bottom edges sweep out at the rim, like the flanks of a hill. |
| blur | `number` | `14` | Sideways smear at the rim. |
| shift | `number` | `10` | How far red and blue split apart at the rim. |
| autoplay | `boolean` | `true` | Move on by itself. Holds on hover, focus and drag. |
| interval | `number` | `3.5` | Time between slides when autoplaying. |
| controls | `boolean` | `true` | Previous and next buttons under the carousel. |
| slides | `{ src: string; alt: string }[]` | `8 sample photos` | The slides, in order, up to 32. Photos on another origin need CORS headers to reach the GPU. |
| index / onIndexChange | `number / (index) => void` |  | Controlled current slide, from 0. |
| defaultIndex | `number` | `0` | Slide on mount when uncontrolled. |
| label | `string` | `"Gallery"` | Names the carousel for screen readers. |
| className | `string` |  | Classes for the wrapper. It fills its container's width. |