Feature Carousel

An animated carousel component for showcasing features with smooth transitions and interactive elements.

Feature 1

Feature 1 description

"use client"

import { cn } from "@/lib/utils"

import { FeatureCarousel } from "../ui/feature-carousel"

export function FeatureCarouselDemo() {
  return (
    <div className="w-full max-w-5xl mx-auto">
      <div className="rounded-[34px] bg-neutral-700 p-2">
        <div className="relative z-10 grid w-full gap-8 rounded-[28px] bg-neutral-950 p-2">
          <FeatureCarousel
            title="Interactive Feature Demo"
            description="Showcase your features with smooth animations and transitions"
            // Example classes for responsive layout
            step1img1Class={cn(
              "pointer-events-none w-[50%] border border-stone-100/10 transition-all duration-500 dark:border-stone-700/50",
              "max-md:scale-[160%] max-md:rounded-[24px] rounded-[24px] left-[25%] top-[57%] md:left-[35px] md:top-[29%]",
              "md:group-hover:translate-y-2"
            )}
            step1img2Class={cn(
              "pointer-events-none w-[60%] border border-stone-100/10 dark:border-stone-700/50 transition-all duration-500 overflow-hidden",
              "max-md:scale-[160%] rounded-2xl max-md:rounded-[24px] left-[69%] top-[53%] md:top-[21%] md:left-[calc(50%+35px+1rem)]",
              "md:group-hover:-translate-y-6"
            )}
            step2img1Class={cn(
              "pointer-events-none w-[50%] rounded-t-[24px] overflow-hidden border border-stone-100/10 transition-all duration-500 dark:border-stone-700",
              "max-md:scale-[160%] left-[25%] top-[69%] md:left-[35px] md:top-[30%]",
              "md:group-hover:translate-y-2"
            )}
            step2img2Class={cn(
              "pointer-events-none w-[40%] rounded-t-[24px] border border-stone-100/10 dark:border-stone-700 transition-all duration-500 rounded-2xl overflow-hidden",
              "max-md:scale-[140%] left-[70%] top-[53%] md:top-[25%] md:left-[calc(50%+27px+1rem)]",
              "md:group-hover:-translate-y-6"
            )}
            step3imgClass={cn(
              "pointer-events-none w-[90%] border border-stone-100/10 dark:border-stone-700 rounded-t-[24px] transition-all duration-500 overflow-hidden",
              "left-[5%] top-[50%] md:top-[30%] md:left-[68px]"
            )}
            step4imgClass={cn(
              "pointer-events-none w-[90%] border border-stone-100/10 dark:border-stone-700 rounded-t-[24px] transition-all duration-500 overflow-hidden",
              "left-[5%] top-[50%] md:top-[30%] md:left-[68px]"
            )}
            // Example images
            image={{
              step1light1: "/feature-1.png",
              step1light2: "/feature-2.png",
              step2light1: "/feature-3.png",
              step2light2: "/feature-4.png",
              step3light: "/feature-2.png",
              step4light: "/feature-5.png",
              alt: "Feature demonstration",
            }}
            // Card styling
            bgClass="bg-gradient-to-tr from-neutral-900/90 to-neutral-800/90"
          />
        </div>
      </div>
    </div>
  )
}

// Add metadata for the registry
// export const metadata = {
//   title: "Feature Carousel",
//   description:
//     "An animated carousel component that showcases features with smooth transitions and interactive elements.",
//   component: FeatureCarouselDemo,
//   source: "https://github.com/your-repo/components/animate/feature-card.tsx",
// }

Installation


pnpm dlx shadcn@latest add https://cult-ui.com/r/feature-carousel.json

Usage


export default function Example() {
  return (
    <FeatureCarousel
      title="Your Feature Title"
      description="Your feature description"
      image={{
        step1light1: Image1,
        step1light2: Image2,
        step2light1: Image3,
        step2light2: Image4,
        step3light: Image5,
        step4light: Image6,
        alt: "Feature showcase",
      }}
    />
  )
}

Features

Smooth transitions between steps with spring animations
Interactive hover effects with gradient overlay
Responsive design with mobile-first approach
Customizable image positions and styles
Auto-play with manual control
Progress indicators with step tracking

Examples

Basic Usage


export default function BasicExample() {
  return (
    <FeatureCarousel
      title="Feature Showcase"
      description="Explore our amazing features"
      image={{
        step1light1: "/images/feature1.png",
        step1light2: "/images/feature2.png",
        step2light1: "/images/feature3.png",
        step2light2: "/images/feature4.png",
        step3light: "/images/feature5.png",
        step4light: "/images/feature6.png",
        alt: "Feature showcase",
      }}
    />
  )
}

Custom Styling


export default function StyledExample() {
  return (
    <FeatureCarousel
      title="Custom Styled Features"
      description="With custom positioning and effects"
      step1img1Class={cn(
        "pointer-events-none w-[50%] border border-stone-100/10",
        "rounded-2xl left-[25%] top-[50%]",
        "hover:scale-105 transition-transform"
      )}
      image={{
        step1light1: "/images/feature1.png",
        step1light2: "/images/feature2.png",
        step2light1: "/images/feature3.png",
        step2light2: "/images/feature4.png",
        step3light: "/images/feature5.png",
        step4light: "/images/feature6.png",
        alt: "Feature showcase",
      }}
      bgClass="bg-gradient-to-tr from-blue-900/90 to-purple-800/90"
    />
  )
}

Style Guide

The component uses Tailwind CSS for styling. Key style considerations:

Use pointer-events-none for images to prevent interaction issues
Include overflow-hidden when using rounded corners
Add transition-all for smooth hover effects
Use responsive classes (md:, lg:) for different layouts
Include dark mode variants for borders and backgrounds

Accessibility

The carousel includes:

ARIA labels for navigation
Keyboard navigation support
Focus management
Screen reader announcements for step changes
Proper contrast ratios for text

FamilyDrawer FloatingPanel