CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/reflectivetext

Reflective Text

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.

ReactInteractiveFont#reflection#mirror#pointer#typography

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-reflectivetext
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <ReflectiveText />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <ReflectiveText
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Text Illuminate

A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow.

Cursor Shadow Text

The heading casts a real drop shadow whose direction tracks the cursor — like a single fixed light moving across the room.

Scrambly Text

Heading scrambled into random glyphs that resolve in a non-left-to-right order — characters lock in scattered across the word.

Text Doodles

Heading marked up with hand-drawn doodle annotations — circle one word, scribble under another, arrow into a third. Reads like a designer's notebook.

Text Hover Reveal

Each item shows a default heading; on hover the heading scrolls up and a secondary line scrolls in from below — list-of-services interaction.Live customizer

Reflective Text

Opacity0.26Gap (% font size)-20%Gap between the heading and its reflection, expressed as a percentage of the heading font size. Negative values pull the reflection up into the heading; positive values push it further down the floor.Reflection blur5.2pxFloor tilt0.58Tilts the reflection onto a perspective floor. The hinge sits at the top so the BOTTOM extends toward the viewer; 0 keeps the reflection flat behind the heading.Pointer reactivity0.18How much the pointer skews the reflection's bottom and nudges the floor tilt. 0 disables pointer tracking entirely.Text colourFont size200pxFontWeight900Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.