A hairline grid that lights up in a spectrum wherever the pointer passes, then fades a moment later.
import { useState } from "react";
import { GridPulse } from "@/components/ui/grid-pulse";
/** A halo in the page colour, so lit cells never crowd the letters. */
const guard =
"[text-shadow:0_0_6px_var(--color-background),0_0_14px_var(--color-background),0_0_30px_var(--color-background),0_0_52px_var(--color-background)]";
export default function GridPulseDemo() {
const [text, setText] = useState(true);
return (
<section className="relative flex min-h-[560px] w-full items-center overflow-hidden bg-background">
<GridPulse />
<button
id="grid-pulse-text"
type="button"
role="switch"
aria-checked={text}
onClick={() => setText(!text)}
className="absolute right-4 top-4 z-20 inline-flex items-center gap-2 rounded-full border border-border bg-background/80 py-1.5 pl-1.5 pr-3 text-sm text-foreground backdrop-blur"
>
<span
aria-hidden
className={`relative h-5 w-9 rounded-full transition-colors ${text ? "bg-foreground" : "bg-foreground/20"}`}
>
<span
className={`absolute top-0.5 size-4 rounded-full bg-background transition-[left] ${text ? "left-[18px]" : "left-0.5"}`}
/>
</span>
Text
</button>
{text ? (
<div className="relative z-10 mx-auto w-full max-w-5xl px-6">
<h1
className={`text-[clamp(56px,11vw,144px)] font-semibold leading-[0.9] tracking-[-0.045em] text-foreground ${guard}`}
>
grid pulse
</h1>
<p
data-grid-avoid
className={`mt-7 max-w-[42ch] text-[clamp(16px,1.5vw,20px)] leading-normal text-foreground ${guard}`}
>
A fine grid that lights up where the pointer passes and lets go a
moment later. Move across it.
</p>
</div>
) : null}
</section>
);
}