The all in one marquee component.
'use client'
import { Marquee } from '@/components/marquee'
import { IBMLogo, NasaLogo, SpaceXLogo, ValveLogo } from '@/components/logos'
const LOGOS = [IBMLogo, NasaLogo, SpaceXLogo, ValveLogo]
const ITEMS = [...LOGOS, ...LOGOS].map((Logo, i) => ({ Logo, id: i }))
export function MarqueeDemo() {
return (
<div className="py-14">
<Marquee speed={100} speedFactor={0.5} direction={1} play>
{ITEMS.map(({ Logo, id }) => (
<Logo key={id} className="h-8 w-auto" />
))}
</Marquee>
</div>
)
}
export default MarqueeDemo
pnpm dlx shadcn@latest add https://r.joyco.studio/marquee.json
import { Marquee } from '@/components/marquee'
<Marquee speed={100} speedFactor={1} direction={1}>
<div>Your content here</div>
</Marquee>