Dot Field

"use client";

import * as React from "react";
import { DotField, type DotFieldHandle } from "@/components/ui/dot-field";

/* Geist for the headline, loaded once for the demo */
function useGeist() {
  React.useEffect(() => {
    const id = "geist-font";
    if (document.getElementById(id)) return;
    const l = document.createElement("link");
    l.id = id;
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap";
    document.head.appendChild(l);
  }, []);
}

const pill =
  "inline-flex h-11 items-center rounded-full px-5 text-[15px] font-medium tracking-[-0.02em] outline-none transition-transform active:scale-[.97] focus-visible:ring-2 focus-visible:ring-ring";

export default function DotFieldDemo() {
  useGeist();
  const field = React.useRef<DotFieldHandle>(null);
  const [scattered, setScattered] = React.useState(false);

  return (
    <div className="w-full bg-background text-foreground">
      <DotField
        ref={field}
        headline="Design that moves."
        eyebrow="Product design studio"
        description="Interfaces with Apple-level detail, from the first sketch to shipped code."
        actions={
          <>
            <a href="#work" className={`${pill} bg-foreground text-background`}>
              View work
            </a>
            <a href="#contact" className={`${pill} border border-border bg-muted/60 text-foreground backdrop-blur-md`}>
              Book a call
            </a>
          </>
        }
      />

      <section id="work" className="grid min-h-[60vh] place-items-center px-5 text-center text-[15px] tracking-[-0.02em] text-muted-foreground">
        Scroll back up and the field gathers again.
      </section>

      {/* playground controls */}
      <div className="fixed bottom-4 right-4 z-10 flex gap-2" style={{ fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif" }}>
        {[
          {
            label: scattered ? "Gather" : "Scatter",
            onClick: () => {
              field.current?.setScattered(!scattered);
              setScattered(!scattered);
            },
          },
          {
            label: "Replay",
            onClick: () => {
              setScattered(false);
              field.current?.replay();
            },
          },
        ].map((b) => (
          <button
            key={b.label === "Replay" ? "replay" : "scatter"}
            type="button"
            onClick={b.onClick}
            className="h-8 rounded-full bg-muted px-3.5 text-[13px] font-medium tracking-[-0.01em] text-foreground outline-none backdrop-blur-md focus-visible:ring-2 focus-visible:ring-ring"
          >
            {b.label}
          </button>
        ))}
      </div>
    </div>
  );
}