Motion

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

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

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

견본만 새 창으로

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

쓰는 곳

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

구성(화면이 넘겨줄 것)

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

규칙

접근성

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Foundations" height=260 subtitle="렌즈 마크(8판 MARK)의 세 동작: 입구, 로딩, 마침" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.g{display:flex;gap:var(--space-6);flex-wrap:wrap}.c{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:150px;padding:var(--space-4);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg)}.l{font:600 13px/18px var(--font-sans);color:var(--ink-muted);text-align:center}.sl-lens{width:96px;height:96px}</style>
<div class="sl g">
<div class="c"><span class="sl-lens"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mka2-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mka2-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mka2-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mka2-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mka2-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mka2-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mka2-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mka2-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="-70" to="-24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-24;-25;-24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></clipPath><clipPath id="mka2-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></clipPath><clipPath id="mka2-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mka2-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mka2-gbe)"><animate attributeName="cx" from="-70" to="-24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-24;-25;-24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><g clip-path="url(#mka2-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mka2-gb)"><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mka2-gbs)"><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mka2-gbg)"><animate attributeName="cx" from="-67.5" to="-21.5" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-21.5;-22.5;-21.5" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mka2-gf)"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mka2-go)" clip-path="url(#mka2-cb)" opacity="0.93"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><g clip-path="url(#mka2-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mka2-ge)"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mka2-gf)"><animate attributeName="cx" from="75" to="29" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="29;30;29" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mka2-go)" clip-path="url(#mka2-cb)" opacity="0.93"><animate attributeName="cx" from="75" to="29" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="29;30;29" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"><animate attributeName="cx" from="-70" to="-24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="-24;-25;-24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"><animate attributeName="cx" from="70" to="24" dur="1.2s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1"/><animate attributeName="cx" begin="1.4s" values="24;25;24" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/></ellipse></g></svg></span><div class="l">입구, 1.2초 + 숨쉬기</div></div>
<div class="c"><span class="sl-lens"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mkb3-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mkb3-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mkb3-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mkb3-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mkb3-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mkb3-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mkb3-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mkb3-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ><animate attributeName="cx" values="-70;-24;-24;-70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></clipPath><clipPath id="mkb3-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></clipPath><clipPath id="mkb3-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mkb3-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mkb3-gbe)"><animate attributeName="cx" values="-70;-24;-24;-70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><g clip-path="url(#mkb3-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkb3-gb)"><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkb3-gbs)"><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkb3-gbg)"><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkb3-gf)"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkb3-go)" clip-path="url(#mkb3-cb)" opacity="0.93"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><g clip-path="url(#mkb3-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkb3-ge)"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mkb3-gf)"><animate attributeName="cx" values="75;29;29;75" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mkb3-go)" clip-path="url(#mkb3-cb)" opacity="0.93"><animate attributeName="cx" values="75;29;29;75" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"><animate attributeName="cx" values="-70;-24;-24;-70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></g></svg></span><div class="l">로딩, 2.4초 반복</div></div>
<div class="c"><span class="sl-lens"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mkc4-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mkc4-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mkc4-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mkc4-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mkc4-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mkc4-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mkc4-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mkc4-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="-64" to="-24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></clipPath><clipPath id="mkc4-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></clipPath><clipPath id="mkc4-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mkc4-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mkc4-gbe)"><animate attributeName="cx" from="-64" to="-24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><g clip-path="url(#mkc4-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkc4-gb)"><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkc4-gbs)"><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkc4-gbg)"><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkc4-gf)"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkc4-go)" clip-path="url(#mkc4-cb)" opacity="0.93"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><g clip-path="url(#mkc4-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkc4-ge)"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mkc4-gf)"><animate attributeName="cx" from="69" to="29" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mkc4-go)" clip-path="url(#mkc4-cb)" opacity="0.93"><animate attributeName="cx" from="69" to="29" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"><animate attributeName="cx" from="-64" to="-24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></g></svg></span><div class="l">마침, 0.9초</div></div>
<div class="c"><div class="sl-stagger" style="display:flex;flex-direction:column;gap:6px;width:100%"><i style="height:10px;border-radius:5px;background:var(--track)"></i><i style="height:10px;border-radius:5px;background:var(--track)"></i><i style="height:10px;border-radius:5px;background:var(--track)"></i><i style="height:10px;border-radius:5px;background:var(--skill-blue-tint)"></i></div><div class="l">reveal + stagger<br>행과 카드 등장, 60ms 시차</div></div>
</div>

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