CrazyGLTouch Sparkle Grid
A dark perspective grid floor receding into the distance. Pointer movement emits glowing magenta-pink and cyan sparkle particles that drift, fade, and die — a soft halo glows where the cursor rests.
Usage
import TouchSparkleGrid from '@crazygl/hero-touch-sparkle-grid';
export default function Hero() {
return (
<TouchSparkleGrid
heading="Touch the grid."
sparkleRate={2}
colorA="#ff3eb5"
colorB="#3effff"
/>
);
}Notable controls
- Sparkle rate (
0.5–4, sweet spot~2) — sparks emitted per unit of pointer travel; higher makes denser, more lavish trails. - Sparkle lifetime (
0.4–2.5s, default1.2) — how long embers linger before fading; longer leaves a glowing wake. - Perspective depth (
0.4–1.6) — how far the floor recedes; larger pushes the vanishing point deeper for a more dramatic stage. - Horizon fade (
0–1, default0.85) — how quickly the grid dissolves into the dark; high values sell the depth. - Halo intensity (
0–3) — brightness of the glow under the cursor; set to0to remove it entirely.
One command, zero config.
npm install @crazygl/hero-touch-sparkle-gridImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import TouchSparkleGrid from '@crazygl/hero-touch-sparkle-grid';
export default function Landing() {
return (
<TouchSparkleGrid />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import TouchSparkleGrid from '@crazygl/hero-touch-sparkle-grid';
export default function Page() {
return (
<section>
<TouchSparkleGrid
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
