Text Glitch

Text

About

A CSS only glitch text effect with RGB channel split and clip path slices. GPU friendly and reduced motion safe, ideal for gaming, tech and cyberpunk headlines.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Glitch to your project and fits it to your theme.

Code

How Text Glitch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { TextGlitch } from "@/components/ui/text-glitch";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

type GlitchTrigger = "always" | "hover";

const THEME_AUTO = "theme";

const settings = {
  text: "wensity",
  duration: 2.4,
  offset: 5,
  enableShadows: true,
  trigger: "always",
  leftColor: THEME_AUTO,
  rightColor: THEME_AUTO,
};

function PreviewShell({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex w-full items-center justify-center overflow-visible px-4 py-10 sm:px-8",
        className,
      )}
    >
      {children}
    </div>
  );
}

function Headline({
  text,
  duration,
  offset,
  enableShadows,
  trigger,
  leftColor,
  rightColor,
  compact,
}: {
  text: string;
  duration: number;
  offset: number;
  enableShadows: boolean;
  trigger: GlitchTrigger;
  leftColor: string;
  rightColor: string;
  compact?: boolean;
}) {
  return (
    <TextGlitch
      as="h1"
      text={text || "wensity"}
      duration={duration}
      offset={offset}
      enableShadows={enableShadows}
      trigger={trigger}
      leftColor={leftColor === THEME_AUTO ? undefined : leftColor}
      rightColor={rightColor === THEME_AUTO ? undefined : rightColor}
      className={cn(
        "font-display font-black tracking-tight text-neutral-900 dark:text-white",
        compact
          ? "text-5xl sm:text-6xl"
          : "text-[clamp(2.5rem,12vw,7rem)]",
      )}
    />
  );
}

export function TextGlitchPreview(props: Partial<typeof settings> = {}) {
  const state = { ...settings, ...props };

  return (
    <PreviewShell className="min-h-[360px]">
      <Headline
        text={state.text}
        duration={state.duration}
        offset={state.offset}
        enableShadows={state.enableShadows}
        trigger={state.trigger}
        leftColor={state.leftColor}
        rightColor={state.rightColor}
      />
    </PreviewShell>
  );
}

export default function Demo(props: Partial<typeof settings>) {
  return <TextGlitchPreview {...props} />;
}