Docs·Carousel 002

Carousel 002

Split editorial carousel with large arrow controls, timed progress pills, and blur-fade image transitions.

Installation

$pnpm dlx shadcn@latest add @spiderui/carousel-002

Usage

Fifty-fifty split carousel: title and subtitle stack on the left, square image on the right. Large arrow buttons and long progress pills sit on the bottom-left baseline. The active pill fills over 4 seconds, then resets and advances — images cross-fade with blur. Arrows and pills use spring scale feedback on interaction.

Split editorial layout inspired by agency case-study carousels. Images from Cosmos.

API Reference

PropTypeDefault
titleLarge serif heading in the left column.
string—
subtitleSupporting body copy below the title.
string—
slidesImage slides — id, src, and optional alt text.
Carousel002Slide[]DEFAULT_CAROUSEL_002_SLIDES
intervalMilliseconds for each pill to fill before auto-advancing.
number4000
classNameClasses on the root section.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

From concept to market: how we built a timeless brand identity.

A split editorial carousel with timed progress pills, spring arrow controls, and blur-fade image transitions — built for case studies, launches, and brand storytelling.

Neon signal in darkness
import { Carousel002 } from "@/components/ui/carousel-002"
import { Carousel002 } from "@/components/ui/carousel-002"

export default function Page() {
  return (
    <Carousel002
      title="From concept to market: how we built a timeless brand identity."
      subtitle="A split editorial carousel with timed progress pills and blur-fade transitions."
      slides={[
        {
          id: "one",
          imageSrc:
            "https://cdn.cosmos.so/ef24a640-42da-4133-96a0-4572d2b0ccbe?format=webp&w=1200",
          imageAlt: "Neon signal in darkness",
        },
        {
          id: "two",
          imageSrc:
            "https://cdn.cosmos.so/6d05ef91-722e-4fcc-83c5-765e348ec644?format=webp&w=1200",
          imageAlt: "Atmospheric horizon scene",
        },
      ]}
    />
  )
}