Awesome Morphing Carousel

A modern React carousel component with smooth morphing transitions between slides. Perfect for images, cards, and dynamic content with fluid animations and responsive layouts.

Watch the demo here

Install

npm install awesome-morphing-carousel

Usage

import { AwesomeMorphingCarousel } from "awesome-morphing-carousel";
import type { SlideData } from "awesome-morphing-carousel";
import "awesome-morphing-carousel/style.css";

const slides: SlideData[] = [
  {
    id: 1,
    title: "Neural Core",
    subtitle: "AI Infrastructure",
    tag: "Chapter I",
    body: "At the heart of every intelligent system lies a lattice of weights and connections.",
    accent: "#00e5ff",
    bgFrom: "#010d1f",
    bgTo: "#02183a",
    imageUrl: "https://images.unsplash.com/photo-1545239351-1141bd82e8a6",
  },
  {
    id: 2,
    title: "Void Protocol",
    subtitle: "Zero-Trust Security",
    tag: "Chapter II",
    body: "In an architecture of zero trust, every packet is a stranger.",
    accent: "#ff2d6f",
    bgFrom: "#1a0208",
    bgTo: "#2e0410",
  },
];

export default function App() {
  return (
    <AwesomeMorphingCarousel
      data={slides}
      autoInterval={4500}
      morphDuration={900}
      onSlideChange={(index, slide) => console.log(index, slide.title)}
      onSlideClick={(slide) => console.log(slide.title)}
    />
  );
}

JSX Example

import { AwesomeMorphingCarousel } from "awesome-morphing-carousel";
import "awesome-morphing-carousel/style.css";

const slides = [
  {
    id: 1,
    title: "Neural Core",
    subtitle: "AI Infrastructure",
    tag: "Chapter I",
    body: "At the heart of every intelligent system lies a lattice of weights and connections.",
    accent: "#00e5ff",
    bgFrom: "#010d1f",
    bgTo: "#02183a",
  },
  {
    id: 2,
    title: "Void Protocol",
    subtitle: "Zero-Trust Security",
    tag: "Chapter II",
    body: "In an architecture of zero trust, every packet is a stranger.",
    accent: "#ff2d6f",
    bgFrom: "#1a0208",
    bgTo: "#2e0410",
  },
];

export default function App() {
  return (
    <AwesomeMorphingCarousel
      data={slides}
      autoInterval={4500}
      morphDuration={900}
    />
  );
}

Data Sources

You can use one of the following approaches:

// 1) Static data
<AwesomeMorphingCarousel data={slides} />

// 2) Local JSON file
<AwesomeMorphingCarousel apiEndpoint="/data/slides.json" />

// 3) REST API
<AwesomeMorphingCarousel
  apiEndpoint="https://your-api.com/api/slides"
  apiTransform={(raw) => (raw as any).data}
  apiHeaders={{ Authorization: 'Bearer TOKEN' }}
/>

Props

AwesomeMorphingCarouselProps

| Prop | Type | Default | Description | | --------------- | ------------------------------------------- | ----------- | ------------------------------------------------------------------------------------ | | data | SlideData[] | undefined | Static slide array. | | apiEndpoint | string | undefined | URL to fetch slides from. Response must be SlideData[] or { data: SlideData[] }. | | apiHeaders | Record<string, string> | undefined | Optional headers for apiEndpoint. | | apiTransform | (raw: unknown) => SlideData[] | undefined | Transform API response into SlideData[]. | | autoInterval | number | 4000 | Auto-advance interval in milliseconds. | | morphDuration | number | 900 | Morph animation duration in milliseconds. | | onSlideClick | (slide: SlideData) => void | undefined | Global click fallback if a slide has no onClick. | | onSlideChange | (index: number, slide: SlideData) => void | undefined | Called after every slide change. |

SlideData

| Field | Type | Required | Description | | ---------- | ---------------------------- | -------- | --------------------------------- | | id | number | Yes | Slide id used for the UI counter. | | title | string | Yes | Main headline. | | subtitle | string | No | Uppercase subtitle. | | tag | string | No | Small tag label above the title. | | body | string | No | Body copy text. | | accent | string | Yes | Hex accent color for glow and UI. | | bgFrom | string | Yes | Gradient start color. | | bgTo | string | Yes | Gradient end color. | | imageUrl | string | No | Optional background image URL. | | onClick | (slide: SlideData) => void | No | Click handler for this slide. |

Styles

Import the stylesheet once in your app:

import "awesome-morphing-carousel/style.css";

style.css contents

:root {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-ui: "Rajdhani", sans-serif;
  --font-mono: "DM Mono", monospace;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@keyframes progressAnim {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

Font setup (optional)

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Rajdhani:wght@300;500;700&family=DM+Mono:wght@300;400;500&display=swap");