CrazyGLLens Flare Machine
A cinematic light source moves across the frame, throwing anamorphic streaks, hex aperture ghosts, glowing rings, and chromatic glares.
Usage
import LensFlare from '@crazygl/hero-lens-flare';
export default function Page() {
return (
<LensFlare
heading="Anamorphic."
intensity={1}
streakLength={1}
ghostCount={6}
/>
);
}Customise
- Content —
contentType,heading,subheading, or custom nodes. - Background —
transparent,bgTop/bgBottom. - Flare —
flareColor(core),streakColor,ghostColorA/ghostColorB,intensity,streakLength,ghostCount,spinSpeed(hex ghost rotation),trackSpeed(idle light path speed). - Typography —
headingFontFamily.
Best for
- Film studios, photography brands, and music labels.
- AI and creative-tooling landing pages wanting a cinematic, high-energy feel.
- Premium hardware / product launches with a single dramatic focal point.
- Dark-themed event and entertainment sites where glow carries the mood.
One command, zero config.
npm install @crazygl/hero-lens-flareImport 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 LensFlareMachine from '@crazygl/hero-lens-flare';
export default function Landing() {
return (
<LensFlareMachine />
);
}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 LensFlareMachine from '@crazygl/hero-lens-flare';
export default function Page() {
return (
<section>
<LensFlareMachine
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
