Motion

원본: projects/skill-lens/design/components/Motion/README.md

상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗

렌즈 마크(8판 MARK)의 세 동작: 입구, 로딩, 마침

움직임 규칙입니다. 주인공은 렌즈 하나이고, 하는 일은 "정렬돼서 포개지기" 하나입니다.

쓰는 곳

입구, 로딩, 마침, 단계 이동, 등장.

렌즈 자리에 MARK(mode)(scripts/sl-mark.js, 8판 원본 그대로)의 SVG를 넣습니다. .sl-lens는 크기만 정하는 틀입니다.

ent(입구): 두 렌즈가 날아와 포개지고(1.2초) 6초 주기로 아주 조금 숨 쉽니다. PC는 커서를 따라 12도까지 기울어집니다.
loop(로딩, 2.4초 반복), merge(마침, 0.9초). 체크는 없습니다.
등장(sl-in, sl-stagger): 아래에서 12px 떠오르며 밝아짐, 흐림 없음, 520ms(duration-reveal), ease-scene. 시차 60ms(duration-stagger), 8번째부터 같음.
단계 이동(Flow): 옆으로 24px, 흐림 없음, 360ms(폰 300, duration-step).
8판의 흐림(blur 6px, 4px)은 옮기지 않았습니다(PM 위임, 2026-11-09).
누르기 100(0.98로 줄어듦), 떼기와 호버 160~200, 시트 260.
호버: 큰 카드만 1px 떠오름, 행과 표는 배경색만, 주 버튼은 화살표만 3px.
하지 않는 것: 폭죽, 뜻 없는 무한 반복, 패럴랙스, 흐르는 글자 그라데이션.

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.