Infinite Marquee
A seamless looping marquee for logos or tech stacks.
Preview
Interactive Preview
React
Next.js
Vercel
Framer
Tailwind
TypeScript
Radix UI
React
Next.js
Vercel
Framer
Tailwind
TypeScript
Radix UI
React
Next.js
Vercel
Framer
Tailwind
TypeScript
Radix UI
React
Next.js
Vercel
Framer
Tailwind
TypeScript
Radix UI
Installation
Usage
tsx
import { InfiniteMarquee } from "@/components/block/infinite-marquee"
const items = [
{ name: "React", icon: "logos:react" },
{ name: "Next.js", icon: "logos:nextjs-icon" },
{ name: "Framer", icon: "logos:framer" },
{ name: "Tailwind", icon: "logos:tailwindcss-icon" }
]
export default function Demo() {
return <InfiniteMarquee items={items} />
}Dependencies
framer-motion@iconify/react
Props
| Prop | Type | Default |
|---|---|---|
| items | array | - |
| direction | "left""right" | left |
| speed | number | 40 |