Dither Carousel

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

Installation

npm install @reactbytes/dither-carousel

Usage

import { DitherCarousel } from "@reactbytes/dither-carousel";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | autoPlay | boolean | false | Whether the slides should automatically rotate. | | autoPlayInterval | number | 5500 | Time delay (in milliseconds) between slide rotations in autoplay mode. | | ditherResolution | select | medium | Resolution of the dither canvas buffer. | | colorMode | select | champagne | The visual style and palette applied to the dither shader. | | transitionDuration | number | 800 | Duration of the radial sweep dither transition (in milliseconds). |

Presets

This component includes the following design presets:

• Noir & Champagne Gold (champagne)
• Nordic Ice Mist (nordic)
• Cyberpunk Hacker Console (cyberpunk)
• Classic retro Gameboy (gameboy)
• 16-Bit Retro Color (color-hd)

Credits & Inspiration

Libraries

• 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 - Dither Carousel.