Elastic Carousel

Elastic Carousel

Pro

Installation

ProRequires a Planes Pro license.

pnpm dlx shadcn add @useplanes/elastic-carousel

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 164 Pro components · lifetime updates.

I have a license Get Pro

import { ElasticCarousel } from "@/components/ui/ElasticCarousel";

<ElasticCarousel
  items={[
    { src: "/work/1.webp", alt: "Atrium", title: "Project One" },
    { src: "/work/2.webp", alt: "Stairwell", title: "Project Two" },
    { src: "/work/3.webp", alt: "Courtyard", title: "Project Three" },
  ]}
  height={560}
  stretch={1}
  blur={1}
/>

Use cases

Studio portfolio
A row of project covers that opens into a browsable reel without leaving the page.
Architecture gallery
Tall interior shots read well at full height, and the curl at the edges frames the centre.
Campaign lookbook
Thumbnails on load keep the hero calm; one click turns it into the show.
Case study index
Snap-to-slide with a title and counter doubles as navigation between projects.