Marquee Demo

1import { Marquee } from "@/registry/loomui/marquee"
2 
3const QUOTES = [
4  "Shipped it in an afternoon.",
5  "Finally, motion I can hand to a designer.",
6  "The off switch is why I kept it.",
7  "Reads like code I would have written.",
8]
9 
10export default function MarqueeDemo() {
11  return (
12    <div className="w-full max-w-2xl">
13      <Marquee fade pauseOnHover duration={28} gap="1rem">
14        {QUOTES.map((quote) => (
15          <figure
16            key={quote}
17            className="bg-card w-64 shrink-0 rounded-xl border p-4"
18          >
19            <blockquote className="text-sm">{quote}</blockquote>
20          </figure>
21        ))}
22      </Marquee>
23    </div>
24  )
25}