CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/text-reveal-lens

Text Reveal Lens

A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the revealed text.

ReactInteractiveFont#lens#spotlight#reveal#typography#interactive#headline

Usage

import TextRevealLens from '@crazygl/hero-text-reveal-lens';

export default function Page() {
  return (
    <TextRevealLens
      heading="REVEAL"
      maskShape="circle"
      maskSize={220}
      useGradient
      gradientStart="#ff6b6b"
      gradientEnd="#4ecdc4"
    />
  );
}

Customise

  • Content — heading (the wordmark).
  • Lens — maskShape (circle / rectangle / diamond / wave / star), maskSize (80–600px), edgeSoftness.
  • Colours — showHiddenText + hiddenColor (outside the lens), useGradient with gradientStart/gradientEnd, or flat revealedColor.
  • Typography — fontSize, letterSpacing, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Brand wordmark splashes and interactive case-study covers
  • Art-collective, gallery, and poster product pages
  • Any landing page where the headline asks to be poked at
01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-reveal-lens
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 TextRevealLens from '@crazygl/hero-text-reveal-lens';

export default function Landing() {
  return (
    <TextRevealLens />
  );
}
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 TextRevealLens from '@crazygl/hero-text-reveal-lens';

export default function Page() {
  return (
    <section>
      <TextRevealLens
        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

Cursor Reveal Text

Two stacked paragraphs — a primary line shown in the surface colour, and a secret reveal line shown only inside a cursor-following spotlight that grows on hover.

Path Text Reveal

Multi-line heading where each line wipes in via a CSS clip-path from top, bottom, left, right, or centre — with a configurable stagger between lines.

Text Reveal

Heading wiped in from a single direction via a hard clip-path mask, with a small per-letter delay — the foundational reveal everyone needs.

Text Hover Reveal

Each item shows a default heading; on hover the heading scrolls up and a secondary line scrolls in from below — list-of-services interaction.

Mask Text Reveal

Text revealed as a moving circular mask sweeps across — the headline appears only where the image-shaped mask uncovers it.

Hover Text Reveal

A row of phrases where hovering one expands a stagger-typed paragraph beside it — the kind of FAQ heading-list interaction premium SaaS sites use.Live customizer

Text Reveal Lens

Lens shapeLens size220pxEdge softness18pxSoft transition band at the lens edge.Show hidden textShow the dim copy of the text outside the lens. Turn off to make text appear from nothing within the lens area.Hidden text colourWord colour outside the lens.Gradient revealed textFill the revealed text with a gradient instead of a flat colour.Revealed text colourFont size220pxLetter spacing-0.02emHeading fontHeading weight900Transparent backgroundBackground colourInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.