CrazyGLText Illuminate
A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow.
Usage
import TextIlluminate from '@crazygl/hero-text-illuminate';
export default function Page() {
return (
<TextIlluminate
heading="light it up"
radius={260}
lightColor="#ffffff"
/>
);
}Customise
- Content —
heading. - Spotlight —
lightSource(follow pointer / auto-orbit),orbitSpeed,radius,shadowColor,lightColor. - Typography —
fontSize,headingFontFamily,headingFontWeight. - Backdrop —
transparentBackground,bgColor.
Best for
- Bold, single-word or short-phrase hero headlines.
- Dark, premium landing pages wanting an interactive typographic focal point.
- Portfolios and product pages where a kinetic, GPU-free flourish suits the brand.
One command, zero config.
npm install @crazygl/hero-text-illuminateImport 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 TextIlluminate from '@crazygl/hero-text-illuminate';
export default function Landing() {
return (
<TextIlluminate />
);
}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 TextIlluminate from '@crazygl/hero-text-illuminate';
export default function Page() {
return (
<section>
<TextIlluminate
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
