Cursor Image Trail

"use client";

import * as React from "react";
import { CursorImageTrail } from "@/components/ui/cursor-image-trail";

const star = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 5 L61 39 L97 39 L68 61 L79 95 L50 73 L21 95 L32 61 L3 39 L39 39 Z" fill="#FFC93C"/></svg>`;
const heart = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 85 C10 55 10 25 35 25 C45 25 50 35 50 40 C50 35 55 25 65 25 C90 25 90 55 50 85 Z" fill="#FF5A79"/></svg>`;
const bolt = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M55 5 L25 55 L45 55 L40 95 L75 40 L52 40 Z" fill="#38BDF8"/></svg>`;
const smiley = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="#FFD43E"/><circle cx="35" cy="42" r="6" fill="#333"/><circle cx="65" cy="42" r="6" fill="#333"/><path d="M32 62 Q50 80 68 62" stroke="#333" stroke-width="5" fill="none" stroke-linecap="round"/></svg>`;
const gem = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M25 15 H75 L95 40 L50 92 L5 40 Z" fill="#7C6BFF"/><path d="M5 40 H95 M50 92 L25 15 M50 92 L75 15" stroke="#fff" stroke-width="2" opacity="0.5" fill="none"/></svg>`;

const svgs = [star, heart, bolt, smiley, gem];

function Svg({ markup }: { markup: string }) {
  return (
    <span
      className="block w-full [&>svg]:h-auto [&>svg]:w-full"
      dangerouslySetInnerHTML={{ __html: markup }}
    />
  );
}

export default function Demo() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <CursorImageTrail
        items={svgs.map((m, i) => (
          <Svg key={i} markup={m} />
        ))}
        itemSize={110}
        className="flex h-[440px] w-full max-w-4xl items-center justify-center rounded-xl border bg-background"
      >
        <p className="pointer-events-none select-none text-muted-foreground">
          Move your cursor across this area
        </p>
      </CursorImageTrail>
    </div>
  );
}