rise
아래에서 위로 + 페이드-인. 글자 순차. 제목이나 등장 효과에 적합.
animate 옵션이 켜질 때 런타임이 바탕 요소에 남기는 data-fy-animate 값으로 font-kku.css가 적용하는 훅들을 한 페이지에서 비교한다.
상단은 글자 단위 내장 훅, 가운데는 자모 움직임 확장(font-kku-motion.css, ADR-017)이고, 아래쪽은 같은 animate 속성으로 페이지가 직접 만드는 자소 단위 훅 예제다.
완성된 움직임과 상호작용을 고르려면 움직임 페이지를 본다.
prefers-reduced-motion: reduce 환경에서는 움직임이 자동으로 꺼진다.
아래에서 위로 + 페이드-인. 글자 순차. 제목이나 등장 효과에 적합.
단순 페이드-인. 모든 글자 동시. 침착한 등장이 필요할 때.
페이드-인 + 40ms 순차 지연. 타이핑 느낌.
상하 반복. 위치는 글자 단위. 주의를 끄는 CTA에.
좌우 회전 반복. 장난스러운 타이틀이나 토스트에.
4s 주기의 미세 이동 + 회전. 글자마다 위상이 어긋나 물결 효과.
font-kku-motion.css초성·중성·받침이 다른 쪽에서 날아와 맞물린다. 한 번 돈다.
받침만 위에서 떨어져 두 번 튀고 자리 잡는다. 한 번 돈다.
글자마다, 같은 글자 안에서도 역할마다 다른 박자로 출렁인다.
단어 둘째 글자의 받침 하나가 끊어질 듯 깜빡인다.
오방색이 초성 → 중성 → 받침으로 시차를 두고 돈다.
자모마다 빛줄기가 지나간다.
화면을 내릴수록 흩어진 자모가 모인다. 스크롤이 진행도다.
자소가 아래에서 올라오는 조립. 글자가 아니라 자소 단위 순차 등장.
자소별 페이드 + 짧은 흐림(blur). 획이 차례로 또렷해지는 효과.
자소 순번마다 위상이 다른 작은 파동. 반복되는 장식 텍스트에 적합.
자소 단위 밝기·그림자 점멸. 스티커형 표현에 적합.
초성·중성·종성이 서로 다른 방향에서 원래 자리로 모이는 조립.
초성→중성→종성 순서로 음절 완성 후 다음 음절로 진행. 타이핑 재현.
초성·중성·종성을 서로 다른 타이밍과 색으로 순환. 구조 시각화.
seed)과 applyJamoSeeds — 고정과 다시 섞기
바탕 요소의 씨앗값(seed) 옵션은 그리는 시점에 --fy-seed를 주입한다.
고정 숫자·문자열 씨앗값은 결정론적(매번 같음), auto/random은 비결정론적 경로다.
FontKku.applyJamoSeeds(host)는 각 자소 노드에 결정론적 해시(--fy-jamo-seed)를 씌우고,
salt를 주면 같은 자소도 다시 섞을 수 있다.
고정 씨앗값과 applyJamoSeeds(host)만 쓰면 같은 텍스트는 같은 표정으로 다시 그려진다.
다시 그릴 때마다 salt가 --fy-jamo-seed를 새로 섞어 다른 표정이 나온다.
seed="auto"는 바탕 요소의 --fy-seed를 매번 새로 뽑는 비결정론적 경로다.
const fixedHost = document.querySelector("[data-seed-fixed]");
const randomHost = document.querySelector("[data-seed-auto]");
// 결정론적: 고정 문자열 seed + 기본 applyJamoSeeds
FontKku.refresh(fixedHost, { seed: "poster-v1" });
FontKku.applyJamoSeeds(fixedHost);
// 비결정론적: seed "auto" + salt
FontKku.refresh(randomHost, { seed: "auto" });
FontKku.applyJamoSeeds(randomHost, { salt: Date.now() });