proNew132 lines · framer-motion

Text Glitch

Reality has a frame rate. A full-width section where the headline briefly glitches apart into chromatic, clipped copies — on hover, and on its own timer every few seconds — then snaps back together.

Use it for: An edgier, technical or gaming-adjacent brand moment that wants a deliberate visual malfunction instead of a smooth entrance.
Themes: Light + dark
License: Commercial use

Live

Signal, briefly lost

Reality has a frame rate

Hover the headline, or let it find its own glitch on a loop.

tsx

"use client";

import * as React from "react";
import { useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: a headline built from three stacked,
 * chromatically-split copies that glitch apart in short bursts on a slow
 * interval (or on hover), then snap back together.
 */

export interface TextGlitchProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Two extra copies of the headline, tinted with the signal and info colours, sit on mix-blend-screen and only become visible during a burst.
→A burst runs a short, deterministic CSS keyframe animation on each copy's offset and clip-path — no randomness per frame, so it's identical every time.
→Bursts fire automatically every few seconds while autoGlitch is on, and also on hover/focus of the section.
→intensity scales the maximum pixel offset of the channel split via a CSS custom property.
→prefers-reduced-motion removes the extra copies entirely and shows a single static headline.

Accessibility

✓The two colour-split copies are aria-hidden; only the base heading carries real text content.
✓Scanline overlay is decorative and aria-hidden.
✓Honours prefers-reduced-motion by disabling the burst animation and hover trigger.
✓Honours prefers-reduced-motion.