ScrambleText

랜덤 글자가 빠르게 깜빡이다가 한 글자씩 자리를 찾아가는 해킹/디코딩 효과. 매트릭스/터미널 느낌의 등장 연출.

라이브 미리보기

ACCESS GRANTED

텍스트모드

글자 풀 (스크램블 소스)

Reveal 속도 (80ms/char)Scramble 주기 (35ms)글자 크기 (28px)굵기 (700)색상

기본 (1회 디코딩)

ACCESS GRANTED

매트릭스 (카타카나, 루프)

THE MATRIX

HEX 디코딩

0xDEADBEEF

바이너리 (느린 reveal)

01001000 01101001

사용

import { ScrambleText } from '@baneung-pack/effect';

<ScrambleText text="ACCESS GRANTED" color="#16A34A" fontSize={24} />

// 매트릭스 스타일 (카타카나)
<ScrambleText
  text="THE MATRIX"
  characters="ｱｲｳｴｵｶｷｸｹｺ..."
  loop
  color="#22C55E"
/>

API

ScrambleTextProps

Property	Type	기본값	설명
text	string	—	최종 표시할 텍스트 (필수).
characters	string	A-Z 0-9 !@#$%^&*<>?/\\	스크램블에 사용할 글자 풀.
revealSpeed	number	60	글자 자리잡힘 속도 (ms/char).
scrambleSpeed	number	35	스크램블 갱신 주기 (ms).
loop	boolean	false	true면 다 푼 뒤 잠시 멈췄다 다시.
pauseAfterRevealMs	number	2500	loop 모드의 reveal 후 대기 시간 (ms).
resetKey	number \| string	—	값 변경 시 처음부터 재시작.
fontSize	string \| number	—	폰트 크기.
fontWeight	CSSProperties['fontWeight']	—	폰트 굵기.
color	string	—	텍스트 색.
className	string	—	추가 클래스.
style	CSSProperties	—	인라인 style.