docsCyber Glitch Text

Cyber Glitch Text

A highly stylized text block that appears to be hacked or decoded into existence with chromatic aberration effects.

Loading Preview...

Install using CLI

npx shadcn@latest add "https://www.vengenceui.com/r/cyber-glitch-text.json"

Install Manually

1

Install dependencies

npm install framer-motion clsx tailwind-merge
2

Add util file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";


export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3

Copy the source code

Copy the code below and paste it into components/ui/cyber-glitch-text.tsx

"use client";


import React, { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { motion } from "framer-motion";


const CHARS = "!<>-_\\/[]{}—=+*^?#_";


interface CyberGlitchTextProps {
text: string;
className?: string;
scrambleOnMount?: boolean;
scrambleDuration?: number;
}


export function CyberGlitchText({
text,
className,
scrambleOnMount = true,
scrambleDuration = 40,
}: CyberGlitchTextProps) {
/* Implementation from above */
return <div>{text}</div>;
}

Usage

1import { CyberGlitchText } from "@/components/ui/cyber-glitch-text"
2

3export function CyberGlitchDemo() {
4return (
5  <CyberGlitchText text="DECRYPTING..." className="text-2xl font-bold" />
6)
7}

Props

Prop NameTypeDefaultDescription
textstring-The base text to display and scramble.
classNamestring-Additional CSS classes.
scrambleOnMountbooleantrueWhether to run the scramble effect when the component first mounts.
scrambleDurationnumber40The time (in ms) between each scramble interval iteration.
OverviewAnimated Button