Hero made by @ybouane.

@crazygl/hero-text-reveal-lens

A cursor-driven lens that reveals the bright real colour of a heading from underneath a dim default. Five lens shapes — circle, rectangle, diamond, wave, star — with an optional gradient fill on the revealed text.

Demo

Text Reveal Lens

Install

npm install @crazygl/hero-text-reveal-lens

Usage

import TextRevealLens from '@crazygl/hero-text-reveal-lens';

export default function Page() {
  return (
    <TextRevealLens
      heading="REVEAL"
      maskShape="circle"
      maskSize={220}
      useGradient
      gradientStart="#ff6b6b"
      gradientEnd="#4ecdc4"
    />
  );
}

Customise

• Content — heading (the wordmark).
• Lens — maskShape (circle / rectangle / diamond / wave / star), maskSize (80–600px), edgeSoftness.
• Colours — showHiddenText + hiddenColor (outside the lens), useGradient with gradientStart/gradientEnd, or flat revealedColor.
• Typography — fontSize, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Brand wordmark splashes and interactive case-study covers
• Art-collective, gallery, and poster product pages
• Any landing page where the headline asks to be poked at

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.