Mouse-Driven Marquee

Mouse-Driven Marquee

Playground

PreviewUsageInstallation

Move your cursor left & right

Installation

Usage

import { MouseMarquee } from "@/components/creative/mouse-marquee";

export default function Page() {
  return (
    <MouseMarquee maxSpeed={5}>
      <div className="flex gap-4">
        {/* Your items here */}
        <div className="w-64 h-80 bg-zinc-900 rounded-xl" />
        <div className="w-64 h-80 bg-zinc-900 rounded-xl" />
      </div>
    </MouseMarquee>
  );
}

How it works

This component is incredibly fun to interact with. It tracks the global mouse position using window.addEventListener('mousemove') and normalizes the X coordinate between -1 and 1 relative to the center of the screen.

• If your cursor is exactly in the middle of the screen (0), the marquee stops.
• If your cursor moves to the far right (1), the marquee scrolls quickly to the left.
• If your cursor moves to the far left (-1), the marquee scrolls quickly to the right.

The raw normalized value is passed through a Framer Motion useSpring so that jerky mouse movements don't cause the marquee to stutter, resulting in a buttery smooth scrub effect. When the mouse leaves the browser window, the spring gently settles back to 0.

Usage Guide

1. Import the Component

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

import { MouseMarquee } from "@/components/creative/mouse-marquee";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MouseMarquee } from "@/components/creative/mouse-marquee";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MouseMarquee
        maxSpeed{10}
        itemClassName="example"
        repeatCount{10}
      >
        <div>Content goes here</div>
      </MouseMarquee>
    </div>
  );
}