FreeSocial Proof

Logo Cloud Marquee

Use this component for social proof strips, partner sections, technology stacks, and landing page trust bands.

ReactTailwind CSSMotionLogos

API

Overview

An infinite moving logo cloud for partner, customer, or technology logos.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<LogoCloudMarquee />

Logo Cloud Marquee.tsx

tsx

"use client";

import { motion } from "framer-motion";

const logos = ["CA", "AI", "UX", "API", "DB", "QA"];

export function LogoCloudMarquee() {
  return (
    <div className="flex overflow-hidden rounded-xl border border-white/10 bg-zinc-950 py-8">
      <motion.div
        animate={{ x: ["0%", "-50%"] }}
        transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
        className="flex min-w-max gap-3 px-3"
      >
        {[...logos, ...logos].map((logo, index) => (
          <div
            key={logo + index}
            className="flex h-16 w-28 items-center justify-center rounded-lg border border-white/10 bg-white/[0.04] text-xl font-black text-white"
          >
            {logo}
          </div>
        ))}
      </motion.div>
    </div>
  );
}