Glitch Transition

Installation

Architecture

To achieve a true "digital tear" without destroying the browser's paint performance, this component relies on three overlapping text layers and a set of clip-path masks:

1. Chromatic Split: We render three identical text nodes precisely on top of each other. The base layer is white, the left layer is text-red-500, and the right layer is text-cyan-500.
2. Jitter & Blend: We apply mix-blend-screen to the text wrapper. Framer Motion rapidly shifts the red and cyan layers left and right at sub-second intervals.
3. Screen Tearing: We use absolute div elements with fixed horizontal clip-path rectangles (e.g., inset(20% 0 80% 0)) that flash across the screen to simulate horizontal scanning tears.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GlitchTransition } from "@/components/creative/glitch-transition";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GlitchTransition } from "@/components/creative/glitch-transition";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GlitchTransition
        isActive{true}
        onAnimationComplete{/* value */}
        text="example"
      />
    </div>
  );
}