Viora LogoViora UI
Login

Glitch Text

Why not?

demo-matrix-text.tsx
Loading source code...

Installation

pnpm dlx viora-ui add glitch-text
npx viora-ui add glitch-text
yarn viora-ui add glitch-text
bunx --bun viora-ui add glitch-text

Usage

import { GlitchText } from "viora-ui";
import { GlitchText } from "viora-ui";

export default function GlitchTextDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <GlitchText />
    </div>
  );
}

API Reference

GlitchText

PropTypeDefaultDescription
textstring-Configuration for text.
className?string""Additional CSS classes for custom styling.
glitchIntensity?"light" | "medium" | "heavy" | "extreme"-Configuration for glitchIntensity.
color?--Configuration for color.
backgroundColor?string-Configuration for backgroundColor.
isStatic?booleanfalseConfiguration for isStatic.
size?"sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | number-Size option for the component.
fontWeight?number-Configuration for fontWeight.
letterSpacing?number-Configuration for letterSpacing.

Built by Otis

Last updated: 9/13/2026