스크램블Text Scramble

Text Scramble

스크램블

다른 이름Also known as · 텍스트 해독 · 문자 셔플 · Text scramble · 글자 해독 · Matrix decode · Binary decrypt · 문자 디코드 · hacker-flip-3d

092

도판Fig. 092. 스크램블 · Text Scramble · none

재생 속도Speed

자리마다 기호가 바뀌다가 왼쪽부터 정답 글자로 고정되는 효과Symbols cycle in each character position before resolving into the final text from left to right.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

불확실한 문자 배열이 읽을 수 있는 문장으로 수렴하는 과정Shows an uncertain sequence of characters converging into a readable sentence.

언제 쓰나Use whenUSE WHEN

짧은 제목에 해독되는 느낌을 줄 때
정답이나 결과가 점차 확정되는 과정을 연출할 때

Give a short title a decoding effect.
Reveal an answer or result as it becomes progressively resolved.

과용 주의AvoidAVOID

난수를 업데이트 함수 안에서 생성하지 않는다
기호 폭 차이로 문장의 자리 위치가 흔들리지 않게 한다

분류TagsTAGS

타이포Typography 주목 끌기Attention 분위기Mood 설명 영상Explainer video 숏폼Short-form 웹 UIWeb UI 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

고정 폭 자리의 기호가 0.05초마다 바뀌고 왼쪽 글자부터 원문으로 고정된다

과용 · 나쁜 사례OVERUSE

매 프레임 새 난수를 생성해 seek할 때 같은 시점의 기호가 달라진다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기호 갱신 간격	0.05s	0.04~0.10s	미리 생성한 표의 행을 선택한다
글자 고정 간격	0.085s	0.06~0.12s	공백 자리는 보존한다
첫 글자 고정	0.70s	0.50~0.90s	기호 순환을 먼저 보여준다
난수 시드	603	1~9999	동일 시점은 동일한 기호를 보여준다

GSAP

const random = Motion.rand(603);
const table = Array.from({length:61}, () => text.map(c => c === ' ' ? ' ' : symbols[Math.floor(random()*symbols.length)]));
const state = {time:0};
tl.to(state, {time:3, duration:3, ease:'none', onUpdate:paint}, 0);
// paint는 표를 선택하고 왼쪽부터 정답으로 치환한다.
const tick = Math.min(60, Math.max(0, Math.floor((state.time-.3)/.05)));
chars.forEach((c,i) => c.textContent = state.time >= .7+i*.085 ? text[i] : table[tick][i]);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 이 효과를 적용하라. AI는 다음 말을 고른다의 글자 자리를 원문 폭으로 고정하고 공백을 보존하라. Motion.rand(603)으로 기호 표를 미리 생성해 0.30초부터 0.05초 간격으로 바꾸고 0.70초부터 왼쪽 글자를 0.085초 간격으로 정답에 고정하라. 3초 타임라인 안에서 마지막 0.6초는 완성 상태로 정지하라.

Apply this effect to <target>. Fix each character slot in "AI picks the next word" to its original text width and preserve spaces. Precompute a symbol table with Motion.rand(603), cycle symbols at 0.05-second intervals starting at 0.30 seconds, and lock characters to the final text from left to right at 0.085-second intervals starting at 0.70 seconds. Within a 3-second timeline, hold the completed state for the final 0.6 seconds.

Codex

<파일>의 텍스트 장면에 적용하라. AI는 다음 말을 고른다의 글자 자리를 원문 폭으로 고정하고 공백을 보존하라. Motion.rand(603)으로 기호 표를 미리 생성해 0.30초부터 0.05초 간격으로 바꾸고 0.70초부터 왼쪽 글자를 0.085초 간격으로 정답에 고정하라. 0.43초에 기호가 보이는지, 1.23초에 왼쪽은 정답이고 오른쪽은 기호인지, 2.7초에 완성 문장인지 확인하라. 1.23초를 앞뒤로 반복 seek해 기호가 동일한지도 확인하라.

Apply this to the text scene in <file>. Fix each character slot in "AI picks the next word" to its original text width and preserve spaces. Precompute a symbol table with Motion.rand(603), cycle symbols at 0.05-second intervals starting at 0.30 seconds, and lock characters to the final text from left to right at 0.085-second intervals starting at 0.70 seconds. Verify symbols at 0.43 seconds, resolved text on the left and symbols on the right at 1.23 seconds, and the completed sentence at 2.7 seconds. Repeatedly seek forward and backward to 1.23 seconds to verify identical symbols.