Hero made by @ybouane.

@crazygl/hero-lens-flare

A cinematic light source moves across the frame, throwing anamorphic streaks, hex aperture ghosts, glowing rings, and chromatic glares.

Demo

Lens Flare Machine

Install

npm install @crazygl/hero-lens-flare

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.