CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/image-masked-text

Image Masked Text

A heading whose letterforms are filled with a photograph. Uses native CSS background-clip:text so the wordmark stays selectable and crisp at any zoom, with cover, contain, or custom-percent fit modes.

ReactImageFont#image-mask#typography#background-clip#headline#css

Usage

import ImageMaskedText from '@crazygl/hero-image-masked-text';

export default function Page() {
  return (
    <ImageMaskedText
      heading="Editorial"
      image="/photos/cover-shoot.jpg"
      imageFit="cover"
      bgColor="#f4ede0"
    />
  );
}

Plug in any photograph (JPG / PNG / WebP / AVIF). High-contrast subjects centred in the frame read best, so the letters land on the interesting parts. (The companion hero text-video-mask does the same effect for video sources.)

Customise

  • Content — heading, subheading, optional ctaLabel / onCTAClick.
  • Image — image, imageFit (cover / contain / percent), imagePercent, imageOffsetX / imageOffsetY.
  • Typography — fontSize, headingFontFamily / headingFontWeight (800–900 maximises visible image), letterSpacing, lineHeight, textAlign, fallbackTextColor.
  • Backdrop — transparentBackground, bgColor, vignetteStrength.

Best for

  • Editorial magazine headlines and fashion / lifestyle launches
  • Agency portfolio splashes and brand stories
  • Art-direction reels
  • Any landing page where the hero should read as "the photograph is the typeface"
01 · Install the package

One command, zero config.

npm install @crazygl/hero-image-masked-text
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 ImageMaskedText from '@crazygl/hero-image-masked-text';

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

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

Animated Text Gradient

A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed.

Typewriter Effect

A cycling wordmark that types itself out character by character, pauses, deletes, and rolls to the next word — with a blinking block cursor that glows softly against a layered atmospheric backdrop.

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.

Text Video Mask

A wordmark rendered as a window into a looping video (or a still photograph), with the rest of the canvas filled by a solid backdrop colour. The text IS the visible footage.

Highlight Text

A heading with marker-highlighter strokes drawn behind specific words — like a printed page someone marked up. Words wrapped in *asterisks* get highlighted with the accent colour.

Text Cycler

A wordmark that cycles between several words or phrases, each one entering with a character-, word-, or line-staggered fade — pick the stagger order from first / last / center / random.Live customizer

Image Masked Text

ImagePhotograph that fills the letterforms. PNG / JPG / WebP / AVIF supported. Use high-contrast imagery with subjects centred so the letters land on the interesting parts.Image fitHow the image fits inside the wordmark bounding box.Image offset X50%Horizontal anchor of the image inside the wordmark. 50% centres; 0/100 pin to the edges.Image offset Y50%Vertical anchor of the image inside the wordmark.Fallback text colourColour the heading uses if no image is supplied (the wordmark renders as solid text).AlignmentHorizontal alignment of the wordmark.Font size260pxWordmark font size. Bigger reveals more photo per character.Letter spacing-0.02emTracking.Line height0.95Line height for multi-line headings.Heading fontFamily. Ultra-heavy display sans serifs (Inter 900, Anton, Bebas Neue) maximise the visible image area.Heading weight900Weight. 800–900 gives the most surface area for the image.Transparent backgroundDrops the deepest backdrop so the hero composes onto whatever section background sits behind it.Background colourBackdrop behind the wordmark when transparent mode is off. Editorial creams / off-whites read magazine; deep blacks read poster.Vignette0.2Edge darkening to focus the eye.CrazyGL · crazygl.comProgrammable hero sections for real websites.