Logo Marquee

A highly polished, infinitely looping marquee component built with Framer Motion. It seamlessly supports horizontal and vertical scrolling, adjustable speeds, pausing on hover, and custom gradient masks. Perfect for showcasing trusted partners, tech stacks, or features.

Live Preview

Installation

Props

Usage Guide

1. Import the Component

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

import { LogoMarquee } from "@/components/creative/logo-marquee";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { LogoMarquee } from "@/components/creative/logo-marquee";

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