ObsidianUIObsidianUI
DocumentationGlitch Text

Glitch Text

Text with a cyberpunk-style glitch animation effect. Features RGB color separation, blur effects, and jittery movement that creates an authentic digital distortion look.

GLITCH

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/glitch-text.json"

Install Manually

1

Install dependencies

npm install framer-motion
2

Copy the source code

Copy into components/ui/glitch-text.tsx

"use client";
 
import React from 'react';
import { motion } from 'framer-motion';
 
interface GlitchTextProps {
    children: React.ReactNode;
    className?: string;
}
 
export function GlitchText({ children, className }: GlitchTextProps) {
    return (
        <motion.span
            animate={{
                x: [0, 0, 0, 2, 0, 2, 2],
                y: [2, -2, -2, 0, 0, 2, 0],
                filter: [
                    'blur(0px)',
                    'blur(0px)',
                    'blur(0px)',
                    'blur(2px)',
                    'blur(4px)',
                    'blur(0px)',
                    'blur(0px)',
                    'blur(0px)',
                    'blur(0px)',
                    'blur(0px)',
                    'blur(4px)',
                    'blur(0px)'
                ],
                textShadow: [
                    '3px 3px 0 #ff0d00, -3px -3px 0 #00ffff',
                    '-3px -3px 0 #ff00ff, 3px 3px 0 #00ffff',
                    '0px -0px 0 #0400ff, -0px 0px 0 #00ffff',
                    '-0px 0px 0 #00ff00, 0px -0px 0 #00ffff',
                    '0px -0px 0 #0400ff, -0px 0px 0 #00ffff',
                    '-0px 0px 0 #00ff00, 0px -0px 0 #00ffff',
                    '0px -0px 0 #0400ff, -0px 0px 0 #00ffff',
                    '-0px 0px 0 #00ff00, 0px -0px 0 #00ffff',
                    '0px 0px 0 #ff0d00, -3px -3px 0 #00ffff'
                ],
                transition: {
                    repeat: Infinity,
                    duration: 2
                }
            }}
            className={className}
        >
            {children}
        </motion.span>
    );
}
 
export default GlitchText;

Props

Prop NameTypeDefaultDescription
childrenReact.ReactNode-Text content to display
classNamestring-Additional CSS classes for styling

Usage Tips

Best Practice: Use this component on dark backgrounds for maximum visual impact. The glitch effect uses bright RGB colors that stand out best against black or dark surfaces.

Multiple Sizes

<GlitchText className="text-2xl">Small Glitch</GlitchText>
<GlitchText className="text-6xl">Large Glitch</GlitchText>
<GlitchText className="text-9xl">Hero Glitch</GlitchText>
DockGlow Border Card