Element Along Svg Path

"use client";

import ElementAlongPath, { ElementAlongPathItem } from "@/components/vritti/element-along-svg-path";

export function ElementAlongSvgPathExample() {
  const path = "M 10,80 C 40,10 65,10 95,80 S 150,150 180,80";

  return (
    <div className="w-full h-[400px] flex items-center justify-center">
      <ElementAlongPath
        path={path}
        viewBox="0 0 200 160"
        showPath
        duration={4}
        className="w-full max-w-md h-64"
        transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
      >
        <ElementAlongPathItem startOffset={0}>
          <div className="w-6 h-6 rounded-full bg-blue-500" />
        </ElementAlongPathItem>
        <ElementAlongPathItem startOffset={33}>
          <div className="w-6 h-6 rounded-full bg-green-500" />
        </ElementAlongPathItem>
        <ElementAlongPathItem startOffset={66}>
          <div className="w-6 h-6 rounded-full bg-red-500" />
        </ElementAlongPathItem>
      </ElementAlongPath>
    </div>
  );
}

"use client";

import ElementAlongPath, { ElementAlongPathItem } from "@/components/vritti/element-along-svg-path";

export function ElementAlongSvgPathWave() {
  const wavePath =
    "M 10,50 Q 30,10 50,50 Q 70,90 90,50 Q 110,10 130,50 Q 150,90 170,50 Q 190,10 210,50";

  return (
    <div className="w-full h-[400px] flex items-center justify-center">
      <ElementAlongPath
        path={wavePath}
        viewBox="0 0 220 100"
        showPath
        duration={6}
        className="w-full max-w-lg h-48"
        transition={{ duration: 6, repeat: Infinity, ease: "linear" }}
      >
        <ElementAlongPathItem startOffset={0}>
          <div className="w-5 h-5 rounded-full bg-violet-500 shadow-lg" />
        </ElementAlongPathItem>
        <ElementAlongPathItem startOffset={20}>
          <div className="w-4 h-4 rounded-full bg-indigo-500 shadow-lg" />
        </ElementAlongPathItem>
        <ElementAlongPathItem startOffset={40}>
          <div className="w-5 h-5 rounded-full bg-cyan-500 shadow-lg" />
        </ElementAlongPathItem>
        <ElementAlongPathItem startOffset={60}>
          <div className="w-4 h-4 rounded-full bg-emerald-500 shadow-lg" />
        </ElementAlongPathItem>
        <ElementAlongPathItem startOffset={80}>
          <div className="w-5 h-5 rounded-full bg-amber-500 shadow-lg" />
        </ElementAlongPathItem>
      </ElementAlongPath>
    </div>
  );
}