marquee-demo

1"use client"
2 
3import { motion } from "motion/react"
4 
5import { Marquee } from "@/components/ui/marquee"
6 
7const albums = [
8  {
9    src: "https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/54/28/14/54281424-eece-0935-299d-fdd2ab403f92/24UM1IM28978.rgb.jpg/600x600bb.jpg",
10    alt: "GNX - Kendrick Lamar",
11  },
12  {
13    src: "https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/ed/d5/5e/edd55e84-e47f-b2c7-0a6a-18f5ca2c75a9/3432.jpg/600x600bb.jpg",
14    alt: "Flume - Flume",
15  },
16  {
17    src: "https://is1-ssl.mzstatic.com/image/thumb/Music211/v4/93/d5/3e/93d53e93-6873-58fb-4e86-7d9042a665b2/191404153574.png/600x600bb.jpg",
18    alt: "Romance (Deluxe Edition) - Fontaines D.C.",
19  },
20  {
21    src: "https://is1-ssl.mzstatic.com/image/thumb/Music211/v4/49/86/18/49861852-877b-0992-fa27-58b25fa032b5/196589805232.jpg/600x600bb.jpg",
22    alt: "The Dark Side of the Moon (50th Anniversary) - Pink Floyd",
23  },
24  {
25    src: "https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/19/c5/96/19c59650-a48d-6cf8-c925-0a77a3cc66c6/720841204596_Cover.jpg/600x600bb.jpg",
26    alt: "Shuffering & Shmiling - Fela Kuti",
27  },
28]
29 
30export function MarqueeDemo() {
31  return (
32    <div className="flex h-64 w-full items-center justify-center sm:h-80">
33      <Marquee
34        className="flex h-full items-center justify-center"
35        direction="left"
36        slowdownOnHover
37        showFade
38        slowDownFactor={0.2}
39      >
40        {albums.map((album, index) => (
41          <motion.img
42            key={index}
43            src={album.src || "/placeholder.svg"}
44            alt={album.alt}
45            className="mx-2 aspect-square w-[100px] cursor-pointer rounded-md sm:mx-3 sm:w-[100px] md:w-[120px]"
46            whileHover={{ scale: 1.2 }}
47            transition={{ type: "spring", stiffness: 300, damping: 15 }}
48          />
49        ))}
50      </Marquee>
51    </div>
52  )
53}