Velocity Marquee

Installation

Usage

import { VelocityMarquee } from "@/components/creative/velocity-marquee";

export default function Page() {
  return (
    <VelocityMarquee baseVelocity={5}>
      <span className="text-4xl font-bold px-4">
        Scroll fast to see me accelerate!
      </span>
    </VelocityMarquee>
  );
}

How it works

This component leverages Framer Motion's useScroll and useVelocity hooks to calculate how fast the user is scrolling the page.

1. Velocity Tracking: As you scroll, useVelocity outputs the scroll speed in pixels per second.
2. Spring Dampening: We pass the raw velocity into a useSpring to smooth out sudden stops (so the marquee doesn't jerk violently when you stop scrolling).
3. Animation Loop: A useAnimationFrame loop continuously updates the x position of the items. It calculates the offset by combining the baseVelocity with the dampened scroll velocity factor.
4. Wrapping: Finally, wrap() ensures that when the items scroll out of view on one side, they seamlessly snap back to the other side to create the infinite illusion.

Usage Guide

1. Import the Component

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

import { VelocityMarquee } from "@/components/creative/velocity-marquee";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { VelocityMarquee } from "@/components/creative/velocity-marquee";

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