Infinite Marquee

Installation

npx kinetic-ui-cli@latest add infinite-marquee

How It Works

The InfiniteMarquee uses pure CSS keyframe animations instead of JavaScript intervals for maximum performance and buttery-smooth scrolling (no jitter). It duplicates your children internally so the loop appears completely seamless. You can pause the animation on hover, change the speed, and reverse the direction.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { InfiniteMarquee } from "@/components/creative/infinite-marquee";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { InfiniteMarquee } from "@/components/creative/infinite-marquee";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <InfiniteMarquee
        direction{/* value */}
        speed{/* value */}
        pauseOnHover{true}
      >
        <div>Content goes here</div>
      </InfiniteMarquee>
    </div>
  );
}