Element Along Svg Path Demo

1import { useRef } from "react"
2import { exampleImages } from "@/utils/demo-images"
3 
4import ElementAlongPath, {
5  ElementAlongPathItem,
6} from "@/components/fancy/blocks/element-along-svg-path"
7 
8export default function ElementAlongPathDemo() {
9  const containerRef = useRef<HTMLDivElement>(null)
10 
11  return (
12    <div ref={containerRef} className="relative overflow-auto w-full h-full">
13      <p className="h-[200%] absolute top-12 left-12 w-64 text-6xl">
14        this week in the bag
15      </p>
16      <div className="sticky w-full h-full">
17        <ElementAlongPath
18          path={
19            "M3.5002 223.998C-15 50.9992 95.8557 -60.0575 190 37.4991C259 109 274 139.999 444 139.999"
20          }
21          pathId="path-1"
22          showPath={true}
23          viewBox="0 0 444 225"
24          scrollContainer={containerRef}
25          animationType="auto"
26          className="absolute w-full h-full top-0 left-0"
27        >
28          {[...Array(1)].map((_, i) => (
29            <ElementAlongPathItem
30              key={i}
31              transition={{
32                duration: 3,
33                ease: [0.757, -0.002, 0.123, 0.993],
34              }}
35              className="pointer-events-auto absolute top-0 left-0"
36            >
37              <img
38                src={exampleImages[i % exampleImages.length].url}
39                alt={`Example ${i}`}
40                className="w-20 h-20 object-cover shadow-2xl cursor-pointer hover:scale-105 duration-300 ease-in-out"
41              />
42            </ElementAlongPathItem>
43          ))}
44        </ElementAlongPath>
45      </div>
46    </div>
47  )
48}