Hero made by @ybouane.

@crazygl/hero-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.

Demo

Image Masked Text

Install

npm install @crazygl/hero-image-masked-text

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"

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.