Hero made by @ybouane.

@crazygl/hero-reflectivetext

Heading with a soft, gradient-faded reflection below it. The reflection extends out across a tilted floor, and lightly tracks the pointer — the bottom skews under the cursor, the top stays anchored to the heading.

Demo

Reflective Text

Install

npm install @crazygl/hero-reflectivetext

Usage

import ReflectiveText from '@crazygl/hero-reflectivetext';

export default function Page() {
  return (
    <ReflectiveText
      heading="REFLECT"
      perspectiveTilt={0.58}
      reflectionOpacity={0.26}
    />
  );
}

Customise

• Content — heading, subheading.
• Reflection — reflectionOpacity, gapPct (gap as % of font size), blurAmount, perspectiveTilt (floor tilt).
• Interaction — pointerReactivity (skew/tilt response to the cursor).
• Typography — textColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Bold typographic landing pages and posters.
• Music, film, and event hero headers.
• Fashion and luxury brand statements.
• Any page wanting a confident single-word wordmark.

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.