Prism carousel

An endless carousel circling through liquid glass lenses at both edges. Cards flare at their outer corners as they pass through the glass, which blurs, saturates and swells toward them.

Galleries, drag, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/prism-carousel.tsx https://motion-brew.com/r/prism-carousel.tsx

One self contained file for React and Tailwind CSS: prism-carousel.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PrismCarousel, type PrismCard } from "@/components/prism-carousel";

// Image cards; it loops endlessly, so even a few fill the row.
const cards: PrismCard[] = [
  { label: "Bloom", caption: "Flowers in every colour", image: "/art/bloom.jpg" },
  { label: "Night garden", caption: "Glowing mushroom dreams", image: "/art/night-garden.jpg" },
  { label: "Coffee run", caption: "With the cat, of course", image: "/art/coffee-run.jpg" },
];

export default function Overview() {
  return <PrismCarousel cards={cards} speed={80} saturation={2.9} />;
}

Props

Prop	Type	Default	Description
cards	PrismCard[]	six metric samples	{ label, caption?, image? }, or a metric card with value, suffix?, decimals?, hues?
defaultIndex	number	1	Card in the middle first
flip	boolean	false	Half turn leaving the right glass and entering the left
autoplay	boolean	true	Circle slowly on its own, resting after a touch
speed	number	80	Drift speed in px per second
blur	number	26	Blur of the edge glass in px
saturation	number	2.9	How much the glass saturates what passes under it
className	string		Placement and size

More galleries

Tilt carousel: A looping row of photo cards that glides on its own: the middle one faces you while the rest turn away in 3D.
Depth carousel: A stack of cards receding into depth with motion blur.
Ribbon gallery: An endless ribbon of cards curved like a wraparound screen and tilted across the frame.
Infinite gallery: An endless wall of work that loops seamlessly in every direction.

All animated react carousels and galleries