An infinite image row refracted through a WebGL liquid-glass lens — chromatic rim, inertial drag, and a click-to-focus expand.
pnpm dlx shadcn@latest add @componentry/liquid-glass-carousel| Prop | Type | Default |
|---|---|---|
items | LiquidGlassCarouselItem[]Projects to show. Each item needs a title and src. Optional aspect avoids a layout jump while the image loads. | — |
panelHeight | numberTarget panel height in pixels. Scaled down when the container is shorter than about twice this value. | 450 |
gap | numberSpace between panels, in pixels. | 12 |
background | stringClear color for the WebGL canvas. Use a hex value so framebuffer gaps match the page. | "#ffffff" |
entry | booleanPlay the rise-and-grow intro. Disabled automatically when the user prefers reduced motion. | true |
className | stringAdditional classes for the root container. | — |
onActiveChange | (index: number) => voidFires when the centered project changes. | — |
onFocusChange | (focused: boolean) => voidFires when a project expands or returns to the row. | — |
Inspired by
The glass lens and snap-scrolling row are from Yousuf Soomro.
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.
import { LiquidGlassCarousel } from "@/components/ui/liquid-glass-carousel"
export default function Page() {
return (
<div className="h-svh w-full">
<LiquidGlassCarousel />
</div>
)
}