Morph Carousel

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/morph-carousel

Usage

import { MorphCarousel } from "@reactbytes/morph-carousel";

export default function Example() {
  return (
    <MorphCarousel />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | distortion | number | 1 | Intensity of the morph distortion effect. | | transitionDuration | number | 1200 | Duration of the transition in ms. | | scale | number | 3.5 | Scale of the noise pattern. |

Presets

This component includes the following design presets:

• Default Style (default)
• Liquid High (liquid-high)
• Snappy (snappy)
• Subtle (subtle)
• Dreamy (dreamy)

Credits & Inspiration

Libraries

• Framer Motion - Animation Library
• Lucide React - Icon System

Project Author

• ChandruMIT-o - Creator & Lead Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Morph Carousel.