Glitch Text
A Remotion video component that animates text with a glitch effect.
Installation
CLI
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.
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
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
.
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:
Prop | Type | Default Value | Description |
---|---|---|---|
text | string | "GLITCH" | The text content to display. |
textColor | string | "var(--glitch-effect-white)" | The color of the main, stable text. Accepts any valid CSS color value, ideally a CSS variable. |
glitchTextColor1 | string | "var(--glitch-cyan)" | The color of the first glitching text layer. Accepts any valid CSS color value, ideally a CSS variable. |
glitchTextColor2 | string | "var(--glitch-magenta)" | The color of the second glitching text layer. Accepts any valid CSS color value, ideally a CSS variable. |
fontSize | string | "5rem" | The font size of the text. Accepts any valid CSS font-size value. |
fontFamily | string | "monospace" | The font family of the text. |
fontWeight | string | "bold" | The font weight of the text. |
glitchStrength | number | 10 | The intensity of the glitch effect (how far the text elements move). |
glitchSpeed | number | 5 | The speed of the glitch animation (higher numbers mean slower, more spaced out glitches). |