Marquee Along Svg Path Demo

1import MarqueeAlongSvgPath from "@/components/fancy/blocks/marquee-along-svg-path"
2 
3const path =
4  "M1 209.434C58.5872 255.935 387.926 325.938 482.583 209.434C600.905 63.8051 525.516 -43.2211 427.332 19.9613C329.149 83.1436 352.902 242.723 515.041 267.302C644.752 286.966 943.56 181.94 995 156.5"
5 
6export default function MarqueeAlongSvgPathDemo() {
7  return (
8    <div className="w-dvw h-dvh bg-zinc-50 flex items-center justify-center">
9      <MarqueeAlongSvgPath
10        path={path}
11        viewBox="0 0 996 330"
12        baseVelocity={8}
13        slowdownOnHover={true}
14        draggable={true}
15        repeat={2}
16        dragSensitivity={0.1}
17        className="w-full h-full scale-105"
18        responsive
19        grabCursor
20      >
21        {imgs.map((img, i) => (
22          <div
23            key={i}
24            className="w-14 h-full hover:scale-150 duration-300 ease-in-out"
25          >
26            <img
27              src={img.src}
28              alt={`Example ${i}`}
29              className="w-full h-full object-cover"
30              draggable={false}
31            />
32          </div>
33        ))}
34      </MarqueeAlongSvgPath>
35    </div>
36  )
37}
38 
39const imgs = [
40  {
41    src: "https://cdn.cosmos.so/b9909337-7a53-48bc-9672-33fbd0f040a1?format=jpeg",
42    link: "https://www.instagram.com/p/DCOl6YTS85e/?igsh=MXNvdHhyczl1djJ6ZA%3D%3D",
43  },
44  {
45    src: "https://cdn.cosmos.so/ecdc9dd7-2862-4c28-abb1-dcc0947390f3?format=jpeg",
46    link: "https://www.instagram.com/p/C4RTJvVpP4R/?igsh=MWZwOTNlYTVodGszMw%3D%3D",
47  },
48  {
49    src: "https://cdn.cosmos.so/79de41ec-baa4-4ac0-a9a4-c090005ca640?format=jpeg",
50    link: "https://pangrampangram.com/products/mori",
51  },
52  {
53    src: "https://cdn.cosmos.so/1a18b312-21cd-4484-bce5-9fb7ed1c5e01?format=jpeg",
54    link: "https://www.sergidelgado.com/selected-work/ampersand",
55  },
56  {
57    src: "https://cdn.cosmos.so/d765f64f-7a66-462f-8b2d-3d7bc8d7db55?format=jpeg",
58    link: "https://www.instagram.com/p/C40XmANsoe_/?igsh=MXFlZGx4cmw3ZW1qYw%3D%3D",
59  },
60  {
61    src: "https://cdn.cosmos.so/6b9f08ea-f0c5-471f-a620-71221ff1fb65?format=jpeg",
62    link: "https://abduzeedo.com/super-stylish-type-explorations",
63  },
64  {
65    src: "https://cdn.cosmos.so/40a09525-4b00-4666-86f0-3c45f5d77605?format=jpeg",
66    link: "https://www.instagram.com/p/CrhdrGjr9yK/?igshid=MTc4MmM1YmI2Ng%3D%3D",
67  },
68  {
69    src: "https://cdn.cosmos.so/14f05ab6-b4d0-4605-9007-8a2190a249d0?format=jpeg",
70    link: "https://www.instagram.com/julian.stiber/p/By5RBApiDzE/?img_index=1",
71  },
72// … truncated