Glass Logo Reveal

import { GlassLogoReveal } from "@/components/glassyui/glass-logo-reveal";

export function Intro() {
  return (
    <GlassLogoReveal
      className="w-full max-w-3xl rounded-3xl"
      markSrc="/logo.svg"
      name="Acme"
    />
  );
}

const [run, setRun] = useState(0);

return (
  <>
    <GlassLogoReveal key={run} markSrc="/logo.svg" name="Acme" />
    <button type="button" onClick={() => setRun(run + 1)}>
      Replay
    </button>
  </>
);

const [moment, setMoment] = useState<number>();

return (
  <>
    <GlassLogoReveal markSrc="/logo.svg" name="Acme" progress={moment} />
    <input
      aria-label="Moment"
      max={100}
      min={0}
      type="range"
      onChange={(event) => setMoment(Number(event.target.value) / 100)}
    />
  </>
);

const [splash, setSplash] = useState(true);

return splash ? (
  <GlassLogoReveal
    className="fixed inset-0 aspect-auto"
    markSrc="/logo.svg"
    name="Acme"
    play="mount"
    onComplete={() => setTimeout(() => setSplash(false), 600)}
  />
) : (
  <App />
);

<GlassLogoReveal
  className="aspect-[3/1] bg-black font-semibold text-white"
  markSrc="/logo-white.svg"
  name="Acme"
/>