Hero made by @ybouane.

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

Demo

Blend Text

Install

npm install @crazygl/hero-blend-text

Usage

import BlendText from '@crazygl/hero-blend-text';

export default function Hero() {
  return (
    <BlendText
      heading={"Inverse\nblend."}
      subheading="Pick a blend mode; pick a photo."
      blendMode="difference"
      backdropImage="/photos/cover.jpg"
      textColor="#ff3d7f"
    />
  );
}

Customise

• Content — heading, subheading.
• Blend — blendMode (difference, exclusion, overlay, multiply, screen, hard-light).
• Backdrop — backdropImage and a backdropColor tint multiplied into the image.
• Typography — textColor, fontSize, letterSpacing, headingFontFamily, headingFontWeight.

Best for

• Editorial / magazine-style landing pages over a full-bleed photo.
• Portfolios and art direction where the headline must read on any image.
• Product launches wanting a striking, poster-like cover.

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.