Interlocking Marquee

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

Installation

npm install @reactbytes/interlocking-marquee

Usage

import { InterlockingMarquee } from "@reactbytes/interlocking-marquee";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | variant | select | classic | The interlocking pattern to use for the jigsaw cards. | | duration | number | 30000 | Duration of the marquee scroll in milliseconds. | | reverse | boolean | false | Whether to scroll in the reverse direction. | | pauseOnHover | boolean | true | Whether to pause the animation when the user hovers over the marquee. |

Presets

This component includes the following design presets:

• Default Slow (default)
• Fast Reverse (fast-reverse)
• Steady No-Pause (steady)

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 - Interlocking Marquee.