We are live on DevHunt: tool of the week contest

check it out

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

PropTypeDefault
itemsarray-
direction
"left""right"
left
speednumber40