Dotted Trail Cursor

"use client";

import DottedTrailCursor from "@/components/ui/dotted-trail-cursor";

const settings = {
  colorA: "#ff4fd8",
  colorB: "#8b5cf6",
  headRadius: 80,
  glowRadius: 300,
  followSpeed: 0.22,
  trailLength: 18,
  fadeOnIdle: true,
  idleDelay: 100,
  idleFade: 1100,
  backgroundColor: "#ffffff",
  dotColor: "#d1d1d1",
  activeDotColor: "#ffffff",
  dotSpacing: 34,
  dotRadius: 1.2,
  rimInner: 2.1,
  rimOuter: 1.5,
  edgeDesaturate: 0.3,
  edgeDesaturateSpan: 2.1,
  tailTilt: 0.18,
};

export default function DottedTrailCursorDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  // Hex keeps a color picker in the Controls panel; until a color is changed,
  // the component's own theme-aware default is used.
  const themed = (key: "backgroundColor" | "dotColor" | "activeDotColor") =>
    s[key] === settings[key] ? undefined : s[key];

  return (
    <DottedTrailCursor
      colorA={s.colorA}
      colorB={s.colorB}
      headRadius={s.headRadius}
      glowRadius={s.glowRadius}
      followSpeed={s.followSpeed}
      trailLength={s.trailLength}
      fadeOnIdle={s.fadeOnIdle}
      idleDelay={s.idleDelay}
      idleFade={s.idleFade}
      backgroundColor={themed("backgroundColor")}
      dotColor={themed("dotColor")}
      activeDotColor={themed("activeDotColor")}
      dotSpacing={s.dotSpacing}
      dotRadius={s.dotRadius}
      rimInner={s.rimInner}
      rimOuter={s.rimOuter}
      edgeDesaturate={s.edgeDesaturate}
      edgeDesaturateSpan={s.edgeDesaturateSpan}
      tailTilt={s.tailTilt}
    >
      <section className="flex h-full w-full flex-col items-center justify-center gap-6 px-6 text-center">
        <span className="rounded-full border border-border bg-background/70 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur-md">
          Interactive background
        </span>
        <h1 className="max-w-[14ch] text-4xl font-semibold leading-[1.05] tracking-tight text-foreground sm:text-6xl">
          Every move leaves a trail.
        </h1>
        <p className="max-w-md text-sm leading-relaxed text-muted-foreground sm:text-base">
          A dotted grid that lights up behind the cursor. Drop it behind any hero
          or section and keep your content on top.
        </p>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <button
            type="button"
            className="rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-95"
          >
            Get started
          </button>
          <button
            type="button"
            className="rounded-full border border-border bg-background/70 px-5 py-2.5 text-sm font-medium text-foreground backdrop-blur-md transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-95"
          >
            View docs
          </button>
        </div>
      </section>
      <p className="pointer-events-none absolute inset-x-0 bottom-8 text-center text-xs text-muted-foreground">
        <span className="pointer-coarse:hidden">Move your cursor across the grid</span>
        <span className="hidden pointer-coarse:inline">Best experienced with a mouse or trackpad</span>
      </p>
    </DottedTrailCursor>
  );
}