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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-9c65vbno.webp?v=1787414517274",
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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-f64dfbe1.webp?v=1787414520249",
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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-on459c1h.webp?v=1787414523195",
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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-qkqt705w.webp?v=1787414526144",
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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-ebe6dfwt.webp?v=1787414528486",
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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-5rrznzwd.webp?v=1787414531796",
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://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_31Pgv80WZSJjQoDNZevOjQsEv2T/bento/img-skpl6vao.webp?v=1787414534448",
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>
);
}