글자가 회전하며 임의 문자를 몇 번 거친 뒤 실제 글자로 착지하는 해독 효과Each character rotates through a few random symbols and lands on its true glyph.
"접근 승인"이 글자마다 0.6초 동안 rotateX 90도를 돌며 임의 문자 3개를 거치고 왼쪽부터 0.04초씩 늦게 착지한다
임의 문자가 매 프레임 바뀌고 Math.random이 쓰여 캡처할 때마다 다른 글자가 나온다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 글자당 시간 | 0.6s | 0.4~0.8s | 회전과 교체 포함 |
| 글자 간 시작 차 | 0.04s | 0.02~0.08s | 왼쪽부터 |
| 회전각 | 90deg | 90~180deg | rotateX |
| 중간 임의 문자 | 3개 | 2~5개 | 시드 고정 |
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);
});그대로 붙여 넣는다Paste as is
<대상> 문구를 해독 효과로 공개해줘. 글자마다 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.
<파일>에 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.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/rules/hacker-flip-3d.md)unknown