Hero made by @ybouane.

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

Demo

Text Masking

Install

npm install @crazygl/hero-text-masking

Usage

import TextMasking from '@crazygl/hero-text-masking';

export default function Hero() {
  return (
    <TextMasking
      heading="wild"
      image="https://crazygl.com/samples/nature1.avif"
      driftSpeed={0.4}
    />
  );
}

Customise

• Content — heading, subheading, image (the masked photo).
• Drift — driftSpeed, driftAmount (idle pan), parallaxStrength (pointer parallax).
• Typography — fontSize, headingFontFamily, headingFontWeight, letterSpacing, subColor.
• Backdrop — transparentBackground, bgColor.

Best for

• Bold editorial and brand hero statements.
• Travel, nature, fashion, and photography sites.
• Product or campaign launches where one word carries the imagery.

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.