Cypher Text

Stable

Futuristic cryptographic text decryption and scramble reveal animation component with custom glyph matrices, directional resolution, and interactive triggers.

Installation

$pnpm add @siberui/react

Import

tsx

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

Basic Usage & Mount Decryption

By default, CypherText starts scrambling immediately on mount and decrypts into the target string.

CLASSIFIED_SYSTEM_ACCESS_GRANTED

tsx

<CypherText
  text="CLASSIFIED_SYSTEM_ACCESS_GRANTED"
  trigger="mount"
  speed={30}
  iterations={8}
  className="text-xl font-mono text-cyan-400 font-bold"
/>

Trigger Modes (Mount, Hover, InView, Manual)

Select an activation mechanism via trigger: "mount", "hover", "inView", or "manual".

TRIGGER: HOVER (Hover over text)HOVER_TO_DECRYPT_PAYLOAD_0x7F

TRIGGER: IN-VIEW (Viewport Scroll)AUTO_TRIGGERED_WHEN_SCROLLED_INTO_VIEW

tsx

<div className="flex flex-col gap-4">
  <div className="p-4 rounded-xl bg-[#060914] border border-white/[0.06]">
    <span className="text-xs text-slate-400 font-mono block mb-1">TRIGGER: HOVER (Hover over text)</span>
    <CypherText
      text="HOVER_TO_DECRYPT_PAYLOAD_0x7F"
      trigger="hover"
      color="cyan"
      className="text-base font-mono font-bold cursor-pointer"
    />
  </div>

  <div className="p-4 rounded-xl bg-[#060914] border border-white/[0.06]">
    <span className="text-xs text-slate-400 font-mono block mb-1">TRIGGER: IN-VIEW (Viewport Scroll)</span>
    <CypherText
      text="AUTO_TRIGGERED_WHEN_SCROLLED_INTO_VIEW"
      trigger="inView"
      color="violet"
      className="text-base font-mono font-bold"
    />
  </div>
</div>

Predefined Character Sets (Hex, Matrix, Binary)

Customize the scramble character matrix using characters: "hex", "binary", "matrix", "alphanumeric", or custom characters.

CHARACTERS: BINARY (01)QUANTUM_STREAM

CHARACTERS: MATRIX (KATAKANA)NEO_TOKYO_GRID

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
  <div className="p-4 rounded-xl bg-[#060914] border border-white/[0.06]">
    <span className="text-xs text-slate-400 font-mono block mb-1">CHARACTERS: BINARY (01)</span>
    <CypherText text="QUANTUM_STREAM" characters="binary" trigger="hover" color="emerald" className="font-mono font-bold" />
  </div>

  <div className="p-4 rounded-xl bg-[#060914] border border-white/[0.06]">
    <span className="text-xs text-slate-400 font-mono block mb-1">CHARACTERS: MATRIX (KATAKANA)</span>
    <CypherText text="NEO_TOKYO_GRID" characters="matrix" trigger="hover" color="emerald" className="font-mono font-bold" />
  </div>
</div>

Reveal Directions (Start, End, Center, Random)

The revealDirection prop sets the character reveal sequence: "start" (Left to Right), "end" (Right to Left), "center" (Inside Out), or "random".

DIRECTION: CENTER-OUTENCRYPTED_TELEMETRY

DIRECTION: RANDOMSTOCHASTIC_DECODER

tsx

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
  <div className="p-4 rounded-xl bg-[#060914] border border-white/[0.06]">
    <span className="text-xs text-slate-400 font-mono block mb-1">DIRECTION: CENTER-OUT</span>
    <CypherText text="ENCRYPTED_TELEMETRY" revealDirection="center" trigger="hover" color="violet" className="font-mono font-bold" />
  </div>

  <div className="p-4 rounded-xl bg-[#060914] border border-white/[0.06]">
    <span className="text-xs text-slate-400 font-mono block mb-1">DIRECTION: RANDOM</span>
    <CypherText text="STOCHASTIC_DECODER" revealDirection="random" trigger="hover" color="amber" className="font-mono font-bold" />
  </div>
</div>

Signal Colors & Neon Glow

Configure chromatic highlights via color and apply neon aura styling with glow.

CYAN_GLOWVIOLET_GLOWEMERALD_GLOWROSE_GLOW

tsx

<div className="flex flex-wrap gap-4 items-center justify-center">
  <CypherText text="CYAN_GLOW" color="cyan" glow trigger="mount" className="font-mono font-bold" />
  <CypherText text="VIOLET_GLOW" color="violet" glow trigger="mount" className="font-mono font-bold" />
  <CypherText text="EMERALD_GLOW" color="emerald" glow trigger="mount" className="font-mono font-bold" />
  <CypherText text="ROSE_GLOW" color="rose" glow trigger="mount" className="font-mono font-bold" />
</div>

Interactive Decryption Terminal

Test custom text input, character sets, and reveal directions in realtime.

AUTHENTICATION_TOKEN_VERIFIED

tsx

const [text, setText] = useState('AUTHENTICATION_TOKEN_VERIFIED');

<div className="space-y-4">
  <CypherText text={text} trigger="mount" color="cyan" glow className="text-lg font-mono font-bold" />
  <Input value={text} onChange={(e) => setText(e.target.value)} />
</div>

API Reference

PROPERTIES (9)← swipe to inspect →

Property	Description	Type	Default
text	Target text string to decrypt and reveal.	string	-
trigger	Activation trigger mode.	"mount" \| "hover" \| "inView" \| "manual"	"mount"
characters	Character set used for scramble glyphs.	"hex" \| "binary" \| "matrix" \| "alphanumeric" \| "symbols" \| "all" \| string	"hex"
revealDirection	Reveal order across text characters.	"start" \| "end" \| "center" \| "random"	"start"
iterations	Number of scrambles per character before resolution.	number	6
speed	Interval between character frame flips in milliseconds.	number	35
color	Neon color accent.	"cyan" \| "violet" \| "emerald" \| "amber" \| "rose" \| "white" \| "muted"	"cyan"
glow	Enables neon text-shadow drop aura.	boolean	false
onComplete	Callback fired when decryption finishes.	() => void	-

Accessibility

Screen Reader Support: The target text string is maintained statically in aria-label, so screen readers immediately read the correct text without waiting for animations.
Reduced Motion: Automatically skips scrambling and displays the final string immediately when prefers-reduced-motion: reduce is detected.