List Carousel

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

Installation

npm install @reactbytes/list-carousel

Usage

import { ListCarousel } from "@reactbytes/list-carousel";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | defaultBg | string | https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1200&q=80 | The background image displayed when no item is hovered. | | scrollLerpFactor | number | 0.09 | Interpolation speed factor for vertical smooth scrolling (0.01 - 1). Lower means more lag/damping. | | cursorLerpFactor | number | 0.12 | Interpolation speed factor for the custom cursor image lag preview (0.01 - 1). | | maxCursorRotation | number | 10 | The maximum angle variation (in degrees) for the image preview frame tilt when items are hovered. | | enableNoise | boolean | true | Toggles the animated cinematic SVG grain noise overlay framework. | | noiseOpacity | number | 0.18 | The blending opacity of the SVG grain element. | | idleOpacity | number | 0.2 | Opacity of background atmosphere when no item is hovered. | | idleBlur | number | 4 | Blur radius of background atmosphere when no item is hovered (pixels). | | idleScale | number | 1 | Scale of background atmosphere when no item is hovered. | | idleGrayscale | boolean | false | Enable grayscale effect on background atmosphere when no item is hovered. | | hoverOpacity | number | 0.5 | Opacity of background atmosphere when an item is hovered. | | hoverBlur | number | 0 | Blur radius of background atmosphere when an item is hovered (pixels). | | hoverScale | number | 1 | Scale of background atmosphere when an item is hovered. | | hoverGrayscale | boolean | false | Enable grayscale effect on background atmosphere when an item is hovered. | | titleSize | select | md | Responsive text size of list items titles. | | titleWeight | select | bold | Font weight of list items titles. | | titleTracking | select | tight | Tracking/letter spacing of list items titles. | | titleTransform | select | none | Text casing casing for list items titles. | | titleStyle | select | normal | Text style (normal or italic) of list items titles. | | titleColor | color | #eaeaea | Base text color of list items titles. | | titleHoverColor | color | #eaeaea | Hover text color of list items titles. | | indexSize | select | sm | Size of list item index prefixes. | | indexFont | select | mono | Font family of list item index prefixes. | | indexTracking | select | wider | Letter spacing of list item index prefixes. | | enableIndexBg | boolean | false | Show background box for list item index prefixes. | | indexOpacity | number | 0.4 | Base opacity of list item index prefixes. | | paddingY | number | 15 | Top and bottom vertical padding room in vh units. |

Presets

This component includes the following design presets:

• Minimalist Architecture (default)
• Brutalist Monolith (brutalist-raw)
• Deep Midnight (deep-midnight)

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 - List Carousel.