Wensity

Text Glitch

A chromatic clip-path glitch for headlines, CSS-only and entirely GPU-friendly.

textglitchheadlineanimationtypographychromatic
Text Glitch component preview

Overview

Text Glitch is a React and Tailwind CSS glitch text effect with an RGB split and sliced horizontal bands, in Next.js or any React app, done entirely in CSS with no dependencies. Two pseudo layers carry the cyan and rose channels and jump on desynced clip path loops, so the headline stays one element for search engines and screen readers. Run it always or only on hover, and it pauses off screen, in background tabs, and for reduced motion. The slices are masked with an opaque surface color, so match surfaceColor to your background.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add text-glitch

Usage

Import TextGlitch from @/components/wensity/text-glitch and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { TextGlitch } from "@/components/wensity/text-glitch";


export default function Example() {
  return (
    <TextGlitch
      as="h1"
      text="wensity"
      duration={2.4}
      offset={5}
      enableShadows
      className="font-display text-6xl font-black tracking-tight"
    />
  );
}

Props

PropTypeDefaultDescription
textstring-The string to render.
askeyof React.JSX.IntrinsicElements"span"Tag rendered as the outer element.
durationnumber2.4Base glitch cycle in seconds. Channel layers desync automatically.
offsetnumber5Horizontal slice offset in CSS pixels.
enableShadowsbooleantrueChromatic aberration text-shadows on the slice layers.
leftColorstringthemeLeft-channel shadow color. Omit for theme cyan.
rightColorstringthemeRight-channel shadow color. Omit for theme rose.
surfaceColorstringthemeOpaque mask behind each slice. Omit for theme surface (#fafafa / #0a0a0b).
trigger"always" | "hover""always"When to run the loop.
pausedboolean-Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden.

Related components

  • Text Shimmer component preview

    Text Shimmer

    A CSS shimmer sweep for headlines, one single element and entirely GPU-friendly.

  • Text Flip component preview

    Text Flip

    A 3D character flip on hover, staggered and springy across every single letter.

  • Text Morphing component preview

    Text Morphing

    Blur-morphing headlines that cycle phrases with a gooey, seamless crossfade.

  • Text Char Slide component preview

    Text Char Slide

    A per-character slide-left cascade with a cleanly staggered entrance timing.

Featured in React text animations.