An expanding accordion image carousel: one wide hero panel, the rest squeezed into thin clickable strips. Smooth width animation, click-to-open, hover grow, autoplay, keyboard control, responsive, light and dark mode. Perfect for product features.
"use client";
import { SqueezeCarousel, type SqueezeSlide } from "@/components/ui/carousel-squeeze";
export const settings = {
height: 320,
gap: 16,
slatGap: 8,
slatWidth: 8,
radius: 6,
duration: 1000,
hoverGrow: true,
autoplay: false,
interval: 6000,
controls: true,
};
type DemoProps = Partial<typeof settings>;
/** A wordmark for the corner of the open panel. */
const mark = (text: string) => (
<span className="text-sm font-medium tracking-tight text-white">{text}</span>
);
const slides: SqueezeSlide[] = [
{
id: "grid",
title: "A layout engine that finally respects the fold.",
description:
"Grid 2.0 measures the viewport before it paints, so the first screen lands in one frame on any device.",
action: "Read the notes",
overlay: mark("Grid 2.0"),
image: "https://cdn.21st.dev/assets/mirror/a8/a8421ae3451a9f48be46f70047eb709e72d98bf9bde7369c197f6a254b82b562.webp",
imageAlt: "A glass office facade at dusk, its windows in a strict grid",
},
{
id: "studio",
title: "Design tokens now sync both ways.",
description:
"Change a colour in the editor and the repo follows; change it in the repo and the editor catches up on the next pull.",
action: "See how it works",
overlay: mark("Studio"),
image: "https://cdn.21st.dev/assets/mirror/e7/e7a8c45ed78fd2bde1dc0d421a06f0b7fb1b9b4e20cd7aa4619f2529667737ea.webp",
imageAlt: "A desk from above with paper colour chips fanned out in morning light",
},
{
id: "edge",
title: "Cold starts are down to 11 milliseconds.",
description:
"A rewritten scheduler keeps a warm pool near every region, so the first request costs about what the tenth does.",
action: "Read the benchmark",
overlay: mark("Edge runtime"),
image: "https://cdn.21st.dev/assets/mirror/89/89bc9699cff61aae0e9f6ef16587ad3d1a52f8e6870483d05696d354f1d08ffe.webp",
imageAlt: "A motorway interchange at night, traffic drawn out into ribbons of light",
},
{
id: "release",
title: "Ninety-four changes in one release.",
description:
"Charts, forms, and the whole command palette were rebuilt this quarter. Here is everything that moved.",
action: "Browse the changelog",
overlay: mark("Summer release"),
image: "https://cdn.21st.dev/assets/mirror/a6/a6a75d4d0ff750d29a0b7031b8c900bfd02e92ef50329ecec760e988d25e0325.webp",
imageAlt: "Layered mountain ridges fading into haze at golden hour",
},
{
id: "insights",
title: "Every query, traced end to end.",
description:
"Follow one request from the browser through the queue and into the database, with the slow step marked for you.",
action: "Open a demo trace",
overlay: mark("Insights"),
image: "https://cdn.21st.dev/assets/mirror/b7/b7c4a295d9702b01f3dd00327f50b770e93446e84b4cf9dee5840fcb216a5af0.webp",
imageAlt: "Fibre optic strands fanning out in the dark, each tip glowing",
},
{
id: "handbook",
title: "How we run a team of forty without standups.",
description:
"Written decisions, one weekly review, and a shared calendar. Our handbook is open, so take what works.",
action: "Read the handbook",
overlay: mark("Handbook"),
image: "https://cdn.21st.dev/assets/mirror/35/35b0d4180af97a8e61675a54eaf1d6bf1420aca8f0c80c1837d5517036dc30a4.webp",
imageAlt: "Three colleagues talking around a table by a window in a bright office",
},
{
id: "craft",
title: "The tools we make are the ones we use.",
description:
"Every part of the platform is built by the people who run on it, and shipped only once they trust it themselves.",
action: "Meet the team",
overlay: mark("Workshop"),
image: "https://cdn.21st.dev/assets/mirror/bf/bf148e218ce4fbc05d0f32648209459a9ef5a35fa86394a97c4c8176ed31231b.webp",
imageAlt: "Hands raising wet clay on a potter's wheel in a sunlit workshop",
},
];
export default function SqueezeCarouselDemo(props: DemoProps) {
const options = { ...settings, ...props };
return (
<div className="bg-background w-full px-6 py-10">
<SqueezeCarousel slides={slides} label="What we shipped" {...options} />
</div>
);
}