Loading hero…

@crazygl/text-glitch-hover

Text Glitch Hover

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

React

Interactive

Font

#glitch

#hover

#typography

Usage

import TextGlitchHover from '@crazygl/hero-text-glitch-hover';

export default function Hero() {
  return (
    <TextGlitchHover
      heading="hover to glitch"
      amplitude={8}
      redColor="#ff3a55"
      cyanColor="#3affff"
    />
  );
}

Customise

Content — heading text.
Glitch — amplitude (px the colour layers jitter on hover).
Colours — textColor (base), redColor, cyanColor, plus fontSize, headingFontFamily, headingFontWeight.
Backdrop — transparentBackground toggle and bgColor.

Best for

SaaS and developer-tool landing pages that want a cyberpunk / terminal edge.
Portfolios and agency sites where a single bold wordmark carries the page.
Product launches wanting a subtle "hover me" interaction without heavy motion.

01 · Install the package

One command, zero config.

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

export default function Landing() {
  return (
    <TextGlitchHover />
  );
}

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 TextGlitchHover from '@crazygl/hero-text-glitch-hover';

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

Similar heroes

Live customizer