Flowing Logos

Flowing logo showcase with smooth animations, hover effects, and modern UI.

Installation

npx shadcn@latest add @scrollxui/flowing-logos

Usage

import { FlowingLogos } from '@/components/ui/flowing-logo';

<FlowingLogos
  data={[
    { image: "/assets/logos/tesla.jpg", name: "Tesla" },
    { image: "/assets/logos/meta.jpg", name: "Meta" },
    { image: "/assets/logos/openai.jpg", name: "OpenAI" },
    { image: "/assets/logos/nvidia.jpg", name: "NVIDIA" },
    { image: "/assets/logos/intel.jpg", name: "Intel" },
    { image: "/assets/logos/sony.jpg", name: "Sony" },
    { image: "/assets/logos/paypal.jpg", name: "PayPal" },
    { image: "/assets/logos/uber.jpg", name: "Uber" },
    { image: "/assets/logos/stripe.jpg", name: "Stripe" },
  ]}
/>

API Reference

Flowing Logos

Flowing logo showcase with smooth animations, hover effects, and modern UI.

Props

Property	Type	Default	Description
`data`	Array<{ name: string; image: string }>	`required`	Array of logo objects to render in the marquee.
`variant`	'square' \| 'wide' \| 'auto'	`'square'`	Controls the logo card layout and sizing behavior.
`className`	string	`-`	Additional classes applied to the outer container.
`cardClassName`	string	`-`	Additional classes applied to each individual logo card.