글자판의 위아래 반쪽이 경첩을 따라 넘어가며 새 글자가 만들어지는 기계식 문자판The top and bottom halves of each character card flip along a hinge to form a new glyph.
"서울"이 "부산"으로 바뀔 때 글자마다 0.2초씩 위 반쪽이 아래로 접히고 글자 사이 시작 차 0.04초로 왼쪽부터 정착한다
플랩 수를 늘려 글자당 1초 넘게 넘기거나 perspective를 100px로 줘 형태가 찌그러진다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 글자당 시간 | 0.2s | 0.15~0.3s | 한 번 넘김 |
| 시작 차 | 0.04s | 0.02~0.06s | 왼쪽부터 |
| perspective | 400px | 300~600px | 깊이감 |
| 중간 글자 수 | 2 | 0~4 | 넘기는 동안 거치는 임의 글자 |
chars.forEach((c, i) => {
const t = 0.3 + i * 0.04;
tl.to(top(i), {rotationX:-90, duration:0.1, ease:'power1.in', transformOrigin:'50% 100%'}, t)
.set(topBack(i), {opacity:1}, t + 0.1)
.fromTo(bottomNew(i), {rotationX:90}, {rotationX:0, duration:0.1, ease:'power1.out', transformOrigin:'50% 0%'}, t + 0.1);
});
// 부모: perspective:400px; 반쪽은 clip-path로 상/하 절반만 표시그대로 붙여 넣는다Paste as is
<대상> 라벨을 분할 플랩 문자판으로 바꿔줘. 글자마다 위 반쪽이 0.1초 동안 -90도로 접히고 아래 반쪽이 새 글자로 0.1초에 펼쳐지게, 글자 시작 차 0.04초, perspective 400px, 경첩은 글자 중앙선. clip-path로 반쪽을 나누고 rotateX만 써.
Turn the label in <target> into a split-flap display. Per character, the top half folds to -90deg in 0.1s and the bottom half unfolds to the new glyph in 0.1s, starting 0.04s apart, perspective 400px, hinge at the glyph midline. Split halves with clip-path and use rotateX only.
<파일>에 split flap을 적용해. 글자별 상/하 반쪽을 clip-path로 분리, 상반 rotationX 0에서 -90(0.1초), 하반 90에서 0(0.1초), 시작 차 0.04, perspective 400px. 0.35초·0.42초·1.0초를 캡처해 접히는 중, 펼쳐지는 중, 완료 상태에서 뒷면이 비치지 않는지 확인해.
Apply split flap in <file>. Split each glyph into top and bottom halves via clip-path; top rotationX 0 to -90 (0.1s), bottom 90 to 0 (0.1s), stagger 0.04, perspective 400px. Capture at 0.35s, 0.42s and 1.0s and verify no back face bleeds through during fold, unfold or at rest.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
gongnyang/reelforge:skills/reelforge/references/grammar/05-text-animator.md#flipboard-3d-rotateX)Apache-2.0