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

Mask Text Reveal

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

ReactFont#mask#reveal#typography

Usage

import MaskTextReveal from '@crazygl/hero-mask-text-reveal';

export default function Hero() {
  return (
    <MaskTextReveal
      heading="look closer"
      maskRadius={22}
      softness={30}
      sweepSec={4}
    />
  );
}

Customise

  • Content — heading text.
  • Mask — maskRadius (spotlight size %), softness (feathered edge %), sweepSec (loop duration).
  • Typography — dimColor (hidden text), revealColor (lit text), fontSize, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Bold editorial / portfolio splash headlines.
  • Product teaser and "coming soon" heroes.
  • Agency landing pages that want a tactile, peek-through title.
01 · Install the package

One command, zero config.

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

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

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

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.

Scroll Reveal Pro

Multi-line heading where each line is masked and rises into view as the visitor scrolls — staggered, eased, with a small blur dropoff.

Text Masking

Headline acts as a window onto a slowly drifting photograph — large letterforms, the photograph showing through them, a clean colored hero around the cut-out.

Text Split Reveal

Heading splits into two halves that slide apart to reveal a secondary line between them — the curtain-pull pattern.

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.

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

Mask Text Reveal

Mask radius (%)22%Edge softness (%)30%Sweep (s)4sBackground colourRevealed colourFont size160pxFontWeight800Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.