CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/sdf-lens-blur

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.

ReactWebGLInteractiveFont#sdf#lens#blur#bokeh#typography#text#shader#pointer#premium#minimal

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-sdf-lens-blur
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import SDFLensBlur from '@crazygl/hero-sdf-lens-blur';

export default function Landing() {
  return (
    <SDFLensBlur />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <SDFLensBlur
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Artwork Lens

A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.

Progressive Blur Text

A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable.

ASCII Video Displacement

A looping video converted live into ASCII art — each cell's brightness picks a glyph from a long density ramp so the moving footage reads as live ASCII. The pointer is a clarity lens: under the cursor the cells resolve into the real, sharp footage, so the image reads genuinely clearer exactly where you point.

Word Blur

Heading that comes in word-by-word — each word lifts out of a deep blur and slides into focus on a small stagger.

ASCII Nebula

The whole background is a grid of ASCII glyphs that, from afar, reads as a soft drifting nebula — dense glyphs where the cloud is thick, sparse where it thins. The pointer locally reveals hidden structure: nearby glyphs grow larger, rotate slightly, and switch to denser symbols.

Iridescent Membrane

The whole background is a thin soap-bubble film — a translucent holographic membrane rendered with physically-based thin-film interference. Slow domain-warped flow drives the film thickness, so restrained pastel rainbows drift across the surface. The pointer presses on the membrane: the film stretches under the cursor and sends out concentric tension waves — single-wavefront ripples that perturb the thickness and shift the colour as they expand. Elegant, futuristic, premium.Live customizer

SDF Lens Blur

WordThe heading rendered into the coverage texture. A single short word in ALL CAPS reads best — every letter gets its own bokeh.Weight200Font weight. Heavier holds the bokeh better; thin strokes wash out under a large lens. (Best with the picked font's available weights.)Text size0.16Half-height of the letters in fragUV units (1.0 ≈ canvas short edge).Letter spacing0emHorizontal position0Vertical position0Global softness0Always-on blur applied across the whole word. Leave at 0 for razor-sharp letters away from the cursor; lift for a uniformly dreamy look.Lens strength0.05Peak blur radius added under the cursor.Lens radius0.24How wide the lens-of-influence is around the cursor (Gaussian σ). Keep it well below the word width so only a local patch melts.Chromatic aberration0.84Per-channel kernel-radius spread — sells the lens as physical glass instead of a digital blur.Text colourBackgroundGlow colourGlow intensity0.84Additive bloom — lets defocused letters glow under the lens instead of dimming to grey.Transparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.