Marquee Along Svg Path Mapping Demo

1import MarqueeAlongSvgPath from "@/components/fancy/blocks/marquee-along-svg-path"
2 
3function generateSpiralPath(turns = 5, centerX = 500, centerY = 137) {
4  const points = []
5  const numPoints = turns * 300 // number of points to create smooth spiral
6  const spacing = 18 // controls how far apart the spiral arms are
7 
8  for (let i = 0; i < numPoints; i++) {
9    const angle = (i / numPoints) * turns * 2 * Math.PI
10    const radius = spacing * angle // radius increases with angle
11    const x = centerX + radius * Math.cos(angle)
12    const y = centerY + radius * Math.sin(angle)
13    points.push(`${i === 0 ? "M" : "L"} ${x} ${y}`)
14  }
15 
16  return points.join(" ")
17}
18 
19const path = generateSpiralPath(4)
20 
21export default function MarqueeAlongSvgPathDemo() {
22  return (
23    <div className="w-dvw h-dvh bg-zinc-50 flex items-center justify-center">
24      <h2 className="text-black text-6xl sm:text-8xl z-10">fancy</h2>
25      <MarqueeAlongSvgPath
26        path={path}
27        viewBox="0 0 400 474"
28        baseVelocity={1}
29        showPath={false}
30        slowdownOnHover={true}
31        repeat={8}
32        enableRollingZIndex={false}
33        dragSensitivity={0.01}
34        className="absolute w-full h-full transform-3d will-change-transform"
35        responsive
36        cssVariableInterpolation={[
37          { property: "opacity", from: 0, to: 1.5 },
38          { property: "scale", from: 0.1, to: 1 },
39        ]}
40        grabCursor
41      >
42        {imgs.map((img, i) => (
43          <a
44            href={img.link}
45            target="_blank"
46            rel="noopener noreferrer"
47            className="pointer-events-auto"
48          >
49            <div
50              key={i}
51              className="w-14 h-full cursor-pointer hover:rotate-y-0 duration-300 ease-in-out hover:scale-200 will-change-transform"
52            >
53              <img
54                src={img.src}
55                alt={`Example ${i}`}
56                className="w-full h-full object-cover"
57                draggable={false}
58              />
59            </div>
60          </a>
61        ))}
62      </MarqueeAlongSvgPath>
63    </div>
64  )
65}
66 
67// EXAMPLE IMAGES
68const imgs = [
69  {
70    src: "https://cdn.cosmos.so/b9909337-7a53-48bc-9672-33fbd0f040a1?format=jpeg",
71    link: "https://www.instagram.com/p/DCOl6YTS85e/?igsh=MXNvdHhyczl1djJ6ZA%3D%3D",
72  },
73  {
74    src: "https://cdn.cosmos.so/ecdc9dd7-2862-4c28-abb1-dcc0947390f3?format=jpeg",
75    link: "https://www.instagram.com/p/C4RTJvVpP4R/?igsh=MWZwOTNlYTVodGszMw%3D%3D",
76  },
77  {
78// … truncated