Cinematic Logo Cloud

Clients 145

About

A logo cloud that reveals brand logos with a staggered blur-fade entrance, with grid and marquee layout variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cinematic Logo Cloud to your project and fits it to your theme.

Code

How Cinematic Logo Cloud is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CinematicLogoCloud } from "@/components/ui/cinematic-logo-cloud";

const clients = [
  { name: "OpenAI", text: true, className: "text-xl font-semibold" },
  {
    name: "hello patient",
    text: true,
    className: "text-lg font-medium lowercase",
  },
  { name: "granola", text: true, className: "text-lg font-medium" },
  { name: "character.ai", text: true, className: "text-lg font-medium" },
  {
    name: "ORACLE",
    text: true,
    className: "text-lg font-bold tracking-wide text-red-600 dark:text-red-500",
  },
  {
    name: "PORTOLA",
    text: true,
    className: "text-lg font-semibold tracking-wide",
  },
  { name: "Accel", text: true, className: "text-xl font-semibold" },
  { name: "Bloomberg", text: true, className: "text-lg font-bold" },
  {
    name: "FORBES",
    text: true,
    className: "text-lg font-bold font-serif tracking-wide",
  },
  { name: "SoftBank", text: true, className: "text-lg font-semibold" },
  { name: "WIRED", text: true, className: "text-lg font-black tracking-tight" },
  { name: "hulu", text: true, className: "text-xl font-bold" },
  { name: "YouTube", text: true, className: "text-lg font-semibold" },
  {
    name: "NETFLIX",
    text: true,
    className: "text-lg font-bold tracking-widest",
  },
];

export default function Default() {
  return (
    <div className="flex min-h-[400px] w-full items-center bg-background text-foreground">
      <CinematicLogoCloud clients={clients} />
    </div>
  );
}