Hero made by @ybouane.

@crazygl/hero-sdf-lens-blur

A single heading word, rasterised to a true signed distance field and rendered in WebGL. Where the cursor hovers, the letters dissolve into a soft luminous bokeh — a variable-radius radial blur kernel sampled in distance space, with optional chromatic aberration. Move the cursor across the word to smear it into a beam of light; move away and it snaps back to a razor-sharp typeface.

Demo

SDF Lens Blur

Install

npm install @crazygl/hero-sdf-lens-blur

Usage

import SdfLensBlur from '@crazygl/hero-sdf-lens-blur';

export default function Page() {
  return (
    <SdfLensBlur
      text="FOCUS"
      fontWeight={200}
      lensStrength={0.05}
      glowColor="#ffffff"
    />
  );
}

Customise

• Text — text (one short ALL-CAPS word reads best), fontWeight, fontSize, letterSpacing, textShiftX/Y. The word is drawn into the SDF on the GPU; there is no HTML copy.
• Blur — baseBlur (always-on softness), lensStrength (peak under cursor), lensRadius (Gaussian σ), chromatic (lens fringe).
• Color — textColor, backgroundColor, glowColor, glowIntensity (additive bloom).
• Backdrop — transparent to composite over your own page background.

Best for

• Minimalist landing pages and type-led brands.
• Design studios and photography portfolios.
• Any hero wanting one bold optical gesture on a headline instead of a busy scene.

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.