Glitch Text

Stable

A stylized kinetic typography component with restrained character-noise scrambling and periodic HUD chromatic-split slice bursts.

Installation

$pnpm add @siberui/react

Import

tsx

import { GlitchText } from '@siberui/react';

Basic Usage & Telemetry Header

GlitchText scrambles non-space characters with random cyber glyphs while maintaining overall sentence readability and semantic DOM output.

SYSTEM_BREACH_DETECTED

SECTOR 07 // NODE ENCRYPTION COMPROMISED

tsx

<div className="flex flex-col items-center gap-3 text-center">
  <GlitchText as="h1" color="cyan" className="text-3xl md:text-4xl font-bold tracking-widest">
    SYSTEM_BREACH_DETECTED
  </GlitchText>
  <span className="font-mono text-xs text-slate-400">SECTOR 07 // NODE ENCRYPTION COMPROMISED</span>
</div>

HUD Variants (Scramble, RGB Slice, Both)

Choose between character scrambling (variant="scramble"), chromatic aberration RGB slices (variant="rgb"), or combined dual-mode (variant="both").

SCRAMBLE

NEURAL_INTERFACE_INITIALIZED

RGB SLICE

CHROMATIC_ABERRATION_ACTIVE

DUAL MODE

CRITICAL_CORE_OVERLOAD

tsx

<div className="flex flex-col gap-6 items-center">
  <div className="flex items-center gap-3">
    <Badge variant="primary-subtle" size="sm">SCRAMBLE</Badge>
    <GlitchText variant="scramble" color="white" className="text-lg md:text-xl">
      NEURAL_INTERFACE_INITIALIZED
    </GlitchText>
  </div>

  <div className="flex items-center gap-3">
    <Badge variant="neon" size="sm">RGB SLICE</Badge>
    <GlitchText variant="rgb" color="cyan" className="text-lg md:text-xl">
      CHROMATIC_ABERRATION_ACTIVE
    </GlitchText>
  </div>

  <div className="flex items-center gap-3">
    <Badge variant="danger" size="sm">DUAL MODE</Badge>
    <GlitchText variant="both" color="rose" className="text-lg md:text-xl">
      CRITICAL_CORE_OVERLOAD
    </GlitchText>
  </div>
</div>

Signal & Semantic Color Presets

GlitchText matches the design system's signal tokens: cyan, violet, emerald, amber, rose, and white.

SIGNAL_CYANprimary / interactive

SIGNAL_VIOLETsystem / core

SIGNAL_EMERALDverified / operational

SIGNAL_AMBERwarning / telemetry

SIGNAL_ROSEbreach / critical

SIGNAL_WHITEneutral / standard

tsx

<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
  <div className="p-5 rounded-xl bg-[#060913] border border-white/[0.06] flex flex-col items-center gap-1.5">
    <GlitchText color="cyan" className="text-sm md:text-base">SIGNAL_CYAN</GlitchText>
    <span className="text-[10px] font-mono text-slate-500">primary / interactive</span>
  </div>
  <div className="p-5 rounded-xl bg-[#060913] border border-white/[0.06] flex flex-col items-center gap-1.5">
    <GlitchText color="violet" className="text-sm md:text-base">SIGNAL_VIOLET</GlitchText>
    <span className="text-[10px] font-mono text-slate-500">system / core</span>
  </div>
  <div className="p-5 rounded-xl bg-[#060913] border border-white/[0.06] flex flex-col items-center gap-1.5">
    <GlitchText color="emerald" className="text-sm md:text-base">SIGNAL_EMERALD</GlitchText>
    <span className="text-[10px] font-mono text-slate-500">verified / operational</span>
  </div>
  <div className="p-5 rounded-xl bg-[#060913] border border-white/[0.06] flex flex-col items-center gap-1.5">
    <GlitchText color="amber" className="text-sm md:text-base">SIGNAL_AMBER</GlitchText>
    <span className="text-[10px] font-mono text-slate-500">warning / telemetry</span>
  </div>
  <div className="p-5 rounded-xl bg-[#060913] border border-white/[0.06] flex flex-col items-center gap-1.5">
    <GlitchText color="rose" className="text-sm md:text-base">SIGNAL_ROSE</GlitchText>
    <span className="text-[10px] font-mono text-slate-500">breach / critical</span>
  </div>
  <div className="p-5 rounded-xl bg-[#060913] border border-white/[0.06] flex flex-col items-center gap-1.5">
    <GlitchText color="white" className="text-sm md:text-base">SIGNAL_WHITE</GlitchText>
    <span className="text-[10px] font-mono text-slate-500">neutral / standard</span>
  </div>
</div>

Frosted Cyber-Glass HUD Matrix

Layer GlitchText inside frosted acrylic glass cards and kinetic BorderBeam outlines for high-impact HUD security alerts and operator briefings.

TELEMETRY_LINK_09

ONLINE

Synaptic frequency: 4.89 GHz | Error rate: 0.002% | Memory matrix isolated.

tsx

<div className="relative w-full max-w-lg p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="space-y-3 relative z-10">
    <Row justify="between" align="center">
      <div className="flex items-center gap-2">
        <Zap className="h-4 w-4 text-cyan-400 animate-pulse" />
        <GlitchText as="h3" color="cyan" className="text-sm font-bold tracking-wider">
          TELEMETRY_LINK_09
        </GlitchText>
      </div>
      <Badge variant="glass" dot dotColor="cyan">ONLINE</Badge>
    </Row>
    <p className="text-xs text-slate-300 leading-relaxed font-mono">
      Synaptic frequency: 4.89 GHz | Error rate: 0.002% | Memory matrix isolated.
    </p>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical Breach Monitor Composition

Integrate GlitchText into defense monitoring surfaces, firewall alert dialogs, and active anomaly scanners.

ANOMALY_LEVEL_4

CRITICAL

Unauthorized neural injection attempt detected in quantum subsystem #12. Perimeter lockdown recommended.

THREAT ID: #TX-9042

tsx

<Card className="max-w-md mx-auto border-rose-500/30 bg-[#070b14] shadow-xl overflow-hidden">
  <CardContent className="p-6 space-y-4">
    <Row justify="between" align="center">
      <div className="flex items-center gap-2">
        <ShieldAlert className="h-5 w-5 text-rose-400 animate-pulse" />
        <GlitchText as="span" color="rose" className="text-sm font-bold">
          ANOMALY_LEVEL_4
        </GlitchText>
      </div>
      <Badge variant="danger" dot dotColor="rose">CRITICAL</Badge>
    </Row>
    <p className="text-xs text-slate-400 font-mono leading-relaxed">
      Unauthorized neural injection attempt detected in quantum subsystem #12. Perimeter lockdown recommended.
    </p>
    <Row justify="between" align="center">
      <span className="font-mono text-xs text-rose-300/80">THREAT ID: #TX-9042</span>
      <Button variant="destructive" size="sm">Initiate Purge</Button>
    </Row>
  </CardContent>
</Card>

Reduced Motion & Accessibility

Set active={false} or rely on OS-level prefers-reduced-motion to halt character cycling while keeping the stable text readable.

STATIC_ACCESSIBILITY_MODE_ONLINE

tsx

<GlitchText active={false} color="white" className="text-2xl font-bold">
  STATIC_ACCESSIBILITY_MODE_ONLINE
</GlitchText>

API Reference

PROPERTIES (7)← swipe to inspect →

Property	Description	Type	Default
text	The source text string to display (or pass as children).	string	-
as	HTML semantic tag to render as.	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "div"	"span"
variant	"scramble" for glyph noise only, "rgb" for chromatic aberration only, "both" to combine.	"scramble" \| "rgb" \| "both"	"both"
color	Semantic signal glow theme.	"cyan" \| "violet" \| "emerald" \| "amber" \| "rose" \| "white"	"white"
speed	Interval speed in milliseconds (values below 100ms clamped for readability).	number	140
active	Whether the glitch animation is actively running.	boolean	true
aria-label	Provides a stable accessible name for screen readers during visual scrambling.	string	-

Accessibility

Screen Readers: GlitchText automatically stamps the original unchanging text into the DOM and accessibility tree so assistive technologies read words cleanly without character noise.
Vestibular Safeguards: Fully respects prefers-reduced-motion: Chromatic slice animations and neon flickers are immediately suppressed.

Best Practices

Hierarchy: Use GlitchText sparingly for hero headers, threat warnings, or telemetry status headers rather than long body paragraphs.
Contrast: Always pair bright signal colors (cyan, rose) with deep surface backgrounds (bg-[#050811]) for maximum laser legibility.