UI/Components/Text elements/Glitch Text

Glitch Text

A Remotion video component that animates text with a glitch effect.

Glitch!
Glitch!
Glitch!
0:00 / 0:04

Installation

CLI

npx shadcn@latest add "https://clippkit.com/r/glitch-text"

Manual

Create a new file, for example, at src/components/clippkit/glitch-text.tsx (or your preferred location) and paste the following code into it.

/**
 * Free Remotion Template Component
 * ---------------------------------
 * This template is free to use in your projects!
 * Credit appreciated but not required.
 *
 * Created by the team at https://www.reactvideoeditor.com
 *
 * Happy coding and building amazing videos! 🎉
 */
 
"use client";
 
import { useCurrentFrame } from "remotion";
 
interface GlitchTextProps {
  text?: string;
  textColor?: string;
  glitchTextColor1?: string;
  glitchTextColor2?: string;
  glitchTextColor3?: string;
  fontSize?: string;
  fontFamily?: string;
  fontWeight?: string;
  glitchStrength?: number;
  glitchSpeed?: number;
  sporadicGlitchChance?: number;
}
 
export function GlitchText({
  text = "GLITCH",
  textColor = "white", // Using new CSS variable
  glitchTextColor1 = "var(--glitch-color-1)", // Using new CSS variable
  glitchTextColor2 = "var(--glitch-color-2)", // Using new CSS variable
  fontSize = "5rem",
  fontFamily = "monospace",
  fontWeight = "bold",
  glitchStrength = 10,
  glitchSpeed = 5,
  sporadicGlitchChance,
}: GlitchTextProps) {
  const frame = useCurrentFrame();
 
  let currentGlitchIntensity = 0;
  let currentRgbOffset = 0;
 
  if (sporadicGlitchChance !== undefined && sporadicGlitchChance > 0) {
    // Sporadic glitch logic
    if (Math.random() < sporadicGlitchChance) {
      // Glitch happens based on chance
      // Use glitchSpeed to determine how often a *new* random glitch can occur,
      // rather than how fast a continuous sine wave moves.
      // For example, a higher glitchSpeed could mean we only pick new random values less often.
      // This interpretation might need refinement based on desired effect.
      // For now, let's make it so that a glitch, when it occurs, has a random intensity.
      if (
        frame % Math.max(1, Math.floor(glitchSpeed)) === 0 ||
        glitchSpeed < 1
      ) {
        currentGlitchIntensity = (Math.random() - 0.5) * 2 * glitchStrength; // Random value between -glitchStrength and +glitchStrength
        currentRgbOffset = (Math.random() - 0.5) * 2 * (glitchStrength / 1.5); // Slightly less offset for RGB
      }
    }
    // Else, no glitch on this frame for sporadic mode
  } else {
    // Original continuous glitch logic
    currentGlitchIntensity = Math.sin(frame / glitchSpeed) * glitchStrength;
    currentRgbOffset =
      Math.sin(frame / (glitchSpeed / 2)) * (glitchStrength / 2);
  }
 
  return (
    <div
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        fontSize,
        fontWeight,
        fontFamily,
      }}
    >
      <div
        style={{
          position: "absolute",
          color: glitchTextColor1,
          transform: `translate(${currentRgbOffset}px, ${currentGlitchIntensity}px)`,
          mixBlendMode: "screen", // Consider if 'screen' is desired for B&W
          opacity: 0.6, // Added opacity for better layering
        }}
      >
        {text}
      </div>
      <div
        style={{
          position: "absolute",
          color: glitchTextColor2,
          transform: `translate(${-currentRgbOffset}px, ${-currentGlitchIntensity}px)`,
          mixBlendMode: "screen", // Consider if 'screen' is desired for B&W
          opacity: 0.6, // Added opacity for better layering
        }}
      >
        {text}
      </div>
      <div style={{ color: textColor, opacity: 0.8 }}>{text}</div>
    </div>
  );
}
Update the import paths in your Remotion compositions if you placed the file in a different location than shown in the usage examples.

Usage

Once the GlitchText component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and defining a Composition.

Prerequisite

Ensure you have a Remotion project set up. If not, please refer to the Remotion documentation to get started.

Project Structure Example

Here’s an example folder layout showing where to place the component and how it fits into a typical Remotion project

app/main.tsx
import { Player } from "@remotion/player";
 
import GlitchText from "../components/glitch-text";
 
export function GlitchTextDemo() {
  const glitchTextProps = {
    text: "Glitch!",
    textColor: "white", // Default is now var(--glitch-effect-white)
    glitchTextColor1: "var(--glitch-color-2)", // Default is now var(--glitch-cyan)
    glitchTextColor2: "var(--glitch-color-1)", // Default is now var(--glitch-magenta)
    fontSize: "3rem",
    glitchStrength: 15, // Adjusted for sporadic effect
    glitchSpeed: 2, // Affects frequency of new random values during a glitch
    sporadicGlitchChance: 0.5, // e.g., 10% chance of glitching per frame
  };
 
  return (
    <Player
      component={GlitchText}
      inputProps={glitchTextProps}
      durationInFrames={120} // Total duration of the player timeline (e.g., 4 seconds at 30fps)
      compositionWidth={480}
      compositionHeight={270} // 16:9 aspect ratio
      fps={30}
      style={{
        width: "100%",
        height: "100%", // Player will scale to fit its container
      }}
      autoPlay
      controls // Show player controls
      loop // Loop the animation
    />
  );
}

Define a Composition

In your Remotion project's entry file (commonly src/Root.tsx, src/index.tsx, app/main.tsx), import GlitchText and define a Composition.

app/main.tsx (or equivalent)
import { Player } from "@remotion/player";

import GlitchText from "@/components/clippkit/glitch-text"; // Assuming you placed it in src/components/clippkit

export default function GlitchTextDemoPage() {
  return (
    <Player
      component={GlitchText}
      durationInFrames={120} // Total duration of the player timeline (e.g., 4 seconds at 30fps)
      compositionWidth={480}
      compositionHeight={270} // 16:9 aspect ratio
      fps={30}
      style={{
        width: "100%",
        height: "100%", // Player will scale to fit its container
      }}
      autoPlay
      controls // Show player controls
      loop // Loop the animation
    />
  );
}

API Reference

The component exported as GlitchText (e.g., from apps/docs/registry/default/ui/glitch-text.tsx or your project's component path) accepts the following props to customize its animation and appearance:

PropTypeDefault ValueDescription
textstring"GLITCH"The text content to display.
textColorstring"var(--glitch-effect-white)"The color of the main, stable text. Accepts any valid CSS color value, ideally a CSS variable.
glitchTextColor1string"var(--glitch-cyan)"The color of the first glitching text layer. Accepts any valid CSS color value, ideally a CSS variable.
glitchTextColor2string"var(--glitch-magenta)"The color of the second glitching text layer. Accepts any valid CSS color value, ideally a CSS variable.
fontSizestring"5rem"The font size of the text. Accepts any valid CSS font-size value.
fontFamilystring"monospace"The font family of the text.
fontWeightstring"bold"The font weight of the text.
glitchStrengthnumber10The intensity of the glitch effect (how far the text elements move).
glitchSpeednumber5The speed of the glitch animation (higher numbers mean slower, more spaced out glitches).

On this page