Void Carousel

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

Installation

npm install @reactbytes/void-carousel

Usage

import { VoidCarousel } from "@reactbytes/void-carousel";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | zGap | number | 600 | Distance between items in Z space. | | speedFactor | number | 2.5 | Scroll speed multiplier. | | warpFactor | number | 2 | Warp effect intensity. | | basePerspective | number | 800 | Base 3D perspective. | | lerpFactor | number | 0.08 | Lerp momentum factor. | | activeZ | number | 0 | Z position where items focus and snap. | | opacityFade | number | 400 | Distance over which items fade out past activeZ. | | enableSnap | boolean | false | Enable magnetic snapping. |

Presets

This component includes the following design presets:

• Default Style (default)
• Snappy (snappy)
• Warp Speed (warp)
• Smooth Float (smooth)
• Tight Tunnel (tight)

Credits & Inspiration

Project Author

• ChandruMIT-o - Creator & Lead Designer

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