AWESOME AI MOTION
효과Effects / 타이포Typography / Nº 098

3D 회전 해독3D Flip Decode

3D Flip Decode
3D 회전 해독
다른 이름Also known as · 3D flip decode
098
렌더 추가 예정CLIP COMING3D 회전 해독3D Flip Decode정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 098. 3D 회전 해독 · 3D Flip Decode · power2.out

글자가 회전하며 임의 문자를 몇 번 거친 뒤 실제 글자로 착지하는 해독 효과Each character rotates through a few random symbols and lands on its true glyph.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
암호가 풀리는 기계적 진행. 정보가 확정되는 순간이 뚜렷하다A mechanical decoding progression, with the moment of certainty clearly visible.
언제 쓰나Use whenUSE WHEN
  • 보안·해독·분석 결과를 밝히는 타이틀
  • AI가 추론 결과를 확정해 내놓는 장면
  • A title that reveals a security, decoding or analysis result
  • A scene where an AI locks in its reasoning result
과용 주의AvoidAVOID
  • 임의 문자열은 시드 난수로 미리 뽑아 둔다. Math.random은 쓰지 않는다
  • 착지 글자는 정확한 글자로 끝나야 한다. 마지막 0.1초는 흔들림 없이 정지한다
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

"접근 승인"이 글자마다 0.6초 동안 rotateX 90도를 돌며 임의 문자 3개를 거치고 왼쪽부터 0.04초씩 늦게 착지한다

과용 · 나쁜 사례OVERUSE

임의 문자가 매 프레임 바뀌고 Math.random이 쓰여 캡처할 때마다 다른 글자가 나온다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
글자당 시간0.6s0.4~0.8s회전과 교체 포함
글자 간 시작 차0.04s0.02~0.08s왼쪽부터
회전각90deg90~180degrotateX
중간 임의 문자3개2~5개시드 고정
GSAP
let seed = 7; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
const pool = 'ABCDEFGHJKLMNPQRSTUVWXYZ0123456789';
chars.forEach((c, i) => {
  const frames = [0,1,2].map(() => pool[Math.floor(rnd() * pool.length)]);
  const o = {p:0};
  tl.to(o, {p:1, duration:0.6, ease:'power2.out', onUpdate(){ const k = Math.min(3, Math.floor(o.p * 4)); node(i).textContent = k < 3 ? frames[k] : c; node(i).style.transform = `rotateX(${(1 - o.p) * 90}deg)`; }}, 0.2 + i * 0.04);
});
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문구를 해독 효과로 공개해줘. 글자마다 rotateX 90도에서 0도로 0.6초 도는 동안 임의 문자 3개(시드 7 고정)를 거쳐 정답 글자에 착지하고, 시작 차는 왼쪽부터 0.04초. 착지 전 마지막 0.1초는 정답 글자로 고정해.

Reveal the text in <target> as a decode. Each glyph rotates rotateX 90deg to 0 over 0.6s while cycling 3 random symbols (seed fixed at 7) before landing on the correct glyph, starting 0.04s apart left to right. Hold the correct glyph for the last 0.1s.

Codex

<파일>에 flip decode text를 적용해. 시드 7의 선형 합동 난수로 글자별 임의 문자 3개를 미리 뽑고, progress 0~1에서 인덱스를 선택, rotateX (1-p)*90deg, duration 0.6, stagger 0.04. 0.4초·0.9초·1.6초를 캡처해 임의 문자 상태와 완료 상태를 확인하고 두 번 렌더한 프레임이 동일한지 비교해.

Apply flip decode text in <file>. Pre-draw 3 random symbols per glyph with a seed-7 LCG; pick index from progress 0..1; rotateX (1-p)*90deg; duration 0.6; stagger 0.04. Capture at 0.4s, 0.9s and 1.6s, verify scramble and settled states, and render twice to confirm identical frames.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
시드 난수 결과를 배열로 굳히고 onUpdate에서 progress로 인덱스를 고른다. seek해도 같은 문자가 나오도록 상태를 저장하지 않는다
ReelForgeBRIEF TO VIDEO
브리프에 목표 문자열, 임의 문자 풀, 시드값 7, 글자당 0.6초, 시작 차 0.04초를 싣는다
Scrolline DeckSCROLL SCRUB
진행률을 글자별 구간으로 나눠 착지 글자가 확정된 뒤에는 되돌려도 유지되도록 한다. 임의 문자는 진행률 기반이라 뒤로 감아도 같다
06

잘 맞는 조합Pairs well with

07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo