Flowing Logos
Flowing logo showcase with smooth animations, hover effects, and modern UI.
Installation
npx shadcn@latest add https://scrollxui.dev/registry/flowing-logos.json Add these animations to your tailwind.config.ts:
tailwind.config.ts
// tailwind.config.ts
export default {
theme: {
extend: {
keyframes: {
"canopy-x": {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
},
"canopy-y": {
from: { transform: "translateY(0)" },
to: { transform: "translateY(calc(-100% - var(--gap)))" },
},
},
animation: {
"canopy-horizontal": "canopy-x var(--duration) infinite linear",
"canopy-vertical": "canopy-y var(--duration) linear infinite",
},
},
},
}Usage
import { FlowingLogos } from "@/components/ui/flowing-logo";<FlowingLogos
data={[
{ image: "https://logo.clearbit.com/microsoft.com", name: "Microsoft" },
{ image: "https://logo.clearbit.com/apple.com", name: "Apple" },
{ image: "https://logo.clearbit.com/amazon.com", name: "Amazon" },
{ image: "https://logo.clearbit.com/netflix.com", name: "Netflix" },
{ image: "https://logo.clearbit.com/samsung.com", name: "Samsung" },
{ image: "https://logo.clearbit.com/github.com", name: "GitHub" },
{ image: "https://logo.clearbit.com/tesla.com", name: "Tesla" },
]}
/>API Reference
Flowing Logos
Flowing logo showcase with smooth animations, hover effects, and modern UI.