CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/text-glow-hover

Text Glow Hover

A heading with a stack of layered, blurred shadow copies that fan out in the direction of the cursor — like a tracer of light pouring out of the wordmark. On hover-end the stack relaxes back to a resting diagonal trail.

ReactInteractiveFont#text-glow#hover#shadow-stack#typography#headline#interactive

Usage

import TextGlowHover from '@crazygl/hero-text-glow-hover';

export default function Hero() {
  return (
    <TextGlowHover
      heading="Light"
      copies={100}
      shadowColor="#ffffff"
      glowBlur={32}
    />
  );
}

Customise

  • Content — heading, subheading, optional ctaLabel / onCTAClick.
  • Glow trail — copies (10–200 ghost layers), shadowScaleFactor (trail spread), useGradientGlow with glowStartColor / glowEndColor, shadowColor, animateGlow (breathing pulse).
  • Halo — glowBlur, glowOpacity for the text-shadow on the heading itself.
  • Typography — textColor, fontSize, letterSpacing, headingFontFamily (defaults to the gothic blackletter UnifrakturMaguntia), headingFontWeight.
  • Backdrop — transparentBackground, bgColor, vignetteStrength.

Best for

  • Gothic-cathedral and dramatic luxury landing pages (ships with UnifrakturMaguntia for the "light through stained glass" feel).
  • Neon / nightclub / club-night branding where one word does all the work.
  • Agency hero-of-the-week reels and premium-dark product launches.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-glow-hover
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 TextGlowHover from '@crazygl/hero-text-glow-hover';

export default function Landing() {
  return (
    <TextGlowHover />
  );
}
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 TextGlowHover from '@crazygl/hero-text-glow-hover';

export default function Page() {
  return (
    <section>
      <TextGlowHover
        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

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.

Text Glitch Hover

Heading sits calm until you hover, then snaps into an RGB-split glitch. Stops cleanly on leave — restraint with a payoff.

Text Hover Icon

A sentence where designated keywords morph into a glyph on hover and bounce back to text on leave — the words become controls.

Hover Text Reveal

A row of phrases where hovering one expands a stagger-typed paragraph beside it — the kind of FAQ heading-list interaction premium SaaS sites use.

Hover Text Link

A list of inline links with an animated underline-fill on hover — the text gets a coloured wipe that grows from left.

Hover Text Highlight

A heading whose words light up on hover — a coloured backdrop wipes in from one side, and out the other when the cursor leaves. Pick Background (full bleed) or Underline (band only).Live customizer

Text Glow Hover

Shadow copies100How many layered ghosts make up the trail. 60–120 reads as a soft cone of light; <30 looks staircased; >150 starts to thicken into a slab.Trail spread0.01How much each successive ghost scales up. Tiny (0.005) keeps the trail pencil-thin; large (0.04+) opens it into a flame-like spray.Gradient trailTint the stack from the glow-start colour at the head to the glow-end colour at the tip. Off uses a single shadow colour throughout.Trail colourColour of every ghost when gradient mode is off. Hidden when the gradient toggle is on.Breathing pulseSubtle sin-driven scale modulation on the whole stack so the trail breathes even when the cursor isn't moving.Halo blur32pxBlur radius of the text-shadow halo that sits ON the heading itself. 24–48px reads as a confident neon glow; >80 turns the heading into a candle flame.Halo opacity1Opacity of the heading halo. Dial down to keep the heading crisp while the trail does all the work.Heading colourColour of the heading itself (in front of the stack).Font size160pxHeading font size. The trail's per-ghost offsets scale with this so the cone always reads proportional.Letter spacing0emNegative tightens; positive opens up.Heading fontFont for the heading. The source effect uses UnifrakturMaguntia (Blackletter) for the gothic-cathedral 'light through stained glass' feel; modern displays (Inter, Manrope, Bebas Neue) make the same effect read futurist.Heading weight400Heading weight. Heavier weights cast a denser trail (more pixels per ghost).Transparent backgroundSkip the deepest backdrop so the hero composes onto whatever section background sits behind it. The trail and heading still render normally.Background colourBase canvas behind the heading. Deep near-black is what makes the trail glow read.Vignette0.4Edge darkening to focus the eye.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.