@mumulinya167/ccm-pet-assets 2.0.0

package/assets/cloudling/cloudling-mini-crabwalk.svg

@@ -0,0 +1,335 @@
+<svg id="cloudling" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 36 36" preserveAspectRatio="xMidYMid meet">
+<style><![CDATA[
+.runtime {
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px;
+  background: #0f0f14;
+  box-shadow: 0 18px 60px rgba(0,0,0,.4);
+}
+.runtime svg { display: block; }
+.runtime {
+  height: 640px;
+}
+.edge-line {
+  position: absolute;
+  top: 0;
+  right: 26px;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(to bottom, transparent, rgba(122,157,255,.50), transparent);
+}
+.runtime-shell {
+  position: absolute;
+  left: 10px;
+  top: 135px;
+  width: 170px;
+  height: 170px;
+  animation: runtime-walk var(--runtime-duration, 4.6s) linear infinite;
+}
+.runtime-shell svg {
+  width: 170px;
+  height: 170px;
+}
+@keyframes runtime-walk {
+  0% { transform: translateX(-6px); }
+  100% { transform: translateX(120px); }
+}
+.runtime.paused .runtime-shell { animation-play-state: paused; }
+.edge-rim-tight { stroke-opacity: .9; }
+.edge-rim-soft { stroke-opacity: .75; }
+.edge-contact { stroke-opacity: .9; }
+@media (prefers-color-scheme: light) {
+.runtime {
+  background: #fff;
+  box-shadow: 0 18px 60px -20px rgba(57,65,255,.18), 0 4px 12px rgba(0,0,0,.04);
+}
+.edge-rim-tight { stroke-opacity: .95; }
+.edge-rim-soft { stroke-opacity: .85; }
+.edge-contact { stroke-opacity: .95; }
+.cloud-drop-shadow { flood-opacity: .13; }
+#puff-a *, #puff-b *, #puff-c *, #rt-puff-a *, #rt-puff-b *, #rt-puff-c * {
+  stroke: #6f8dff;
+  stroke-width: .14px;
+  stroke-opacity: .44;
+  vector-effect: non-scaling-stroke;
+}
+#puff-a ellipse, #puff-b ellipse, #puff-c ellipse, #rt-puff-a ellipse, #rt-puff-b ellipse, #rt-puff-c ellipse {
+  fill: #e8eeff;
+}
+#puff-a circle, #puff-b circle, #puff-c circle, #rt-puff-a circle, #rt-puff-b circle, #rt-puff-c circle {
+  fill: #f6f8ff;
+}
+#puff-a, #puff-b, #puff-c, #rt-puff-a, #rt-puff-b, #rt-puff-c {
+  filter: drop-shadow(0 0 .22px rgba(57,65,255,.46));
+}
+.food-cloud-shadow { flood-opacity: .28; flood-color: #5060FF; }
+.food-cloud > path {
+  stroke: #5870E8 !important;
+  stroke-width: 1.2 !important;
+  stroke-opacity: .9 !important;
+  vector-effect: non-scaling-stroke !important;
+}
+}
+]]></style>
+      <defs>
+        <linearGradient id="body-grad" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#93c5fd"/>
+          <stop offset="0.5" stop-color="#60a5fa"/>
+          <stop offset="1" stop-color="#3b82f6"/>
+        </linearGradient>
+        <linearGradient id="eye-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#B1A7FF"/>
+          <stop offset="0.5" stop-color="#7A9DFF"/>
+          <stop offset="1" stop-color="#3941FF"/>
+        </linearGradient>
+        <radialGradient id="hi-grad" cx="0.45" cy="0.25" r="0.55">
+          <stop offset="0" stop-color="#93c5fd" stop-opacity="0.9"/>
+          <stop offset="1" stop-color="#93c5fd" stop-opacity="0"/>
+        </radialGradient>
+        <filter id="drop" x="-40%" y="-40%" width="180%" height="180%">
+          <feDropShadow class="cloud-drop-shadow" dx="0" dy="0.6" stdDeviation="0.8" flood-color="#3941FF" flood-opacity="0.35"/>
+        </filter>
+        <filter id="edge-blur" x="-40%" y="-40%" width="180%" height="180%">
+          <feGaussianBlur stdDeviation="0.16"/>
+        </filter>
+        <filter id="shadow-blur" x="-80%" y="-120%" width="260%" height="320%">
+          <feGaussianBlur stdDeviation="0.55"/>
+        </filter>
+        <filter id="puff-blur" x="-80%" y="-100%" width="260%" height="280%">
+          <feGaussianBlur stdDeviation="0.08"/>
+        </filter>
+        <clipPath id="cloud-clip">
+          <path id="clip-shape"/>
+        </clipPath>
+      </defs>
+
+      <g id="asset-layer">
+        <ellipse id="ground-shadow" cx="12" cy="20.45" rx="7.6" ry="1.05" fill="#3941FF" opacity=".085" filter="url(#shadow-blur)"/>
+        <g id="puff-layer" filter="url(#puff-blur)">
+          <g id="puff-a" opacity="0">
+            <ellipse cx="5.55" cy="18.84" rx="1.22" ry=".56" fill="url(#body-grad)" opacity=".92"/>
+            <circle cx="4.68" cy="18.60" r=".46" fill="#ffffff" opacity=".86"/>
+            <circle cx="6.30" cy="18.54" r=".52" fill="#eef2ff" opacity=".84"/>
+            <ellipse cx="5.48" cy="18.28" rx=".62" ry=".35" fill="#ffffff" opacity=".88"/>
+          </g>
+          <g id="puff-b" opacity="0">
+            <ellipse cx="3.85" cy="19.28" rx=".86" ry=".39" fill="url(#body-grad)" opacity=".78"/>
+            <circle cx="3.22" cy="19.08" r=".31" fill="#ffffff" opacity=".74"/>
+            <circle cx="4.43" cy="19.06" r=".34" fill="#eef2ff" opacity=".72"/>
+          </g>
+          <g id="puff-c" opacity="0">
+            <ellipse cx="2.45" cy="19.58" rx=".58" ry=".26" fill="url(#body-grad)" opacity=".62"/>
+            <circle cx="2.05" cy="19.44" r=".20" fill="#ffffff" opacity=".62"/>
+            <circle cx="2.83" cy="19.42" r=".22" fill="#eef2ff" opacity=".58"/>
+          </g>
+        </g>
+
+        <g id="body-layer">
+          <g id="edge-system">
+            <path id="edge-contact" class="edge-contact" fill="none" stroke="#7d8aa7" stroke-width="1.4" stroke-linejoin="round" filter="url(#edge-blur)"/>
+            <path id="edge-soft" class="edge-rim-soft" fill="none" stroke="#7A9DFF" stroke-width="1.2" stroke-linejoin="round" filter="url(#edge-blur)"/>
+            <path id="edge-tight" class="edge-rim-tight" fill="none" stroke="#aab3c6" stroke-width="0.8" stroke-linejoin="round"/>
+          </g>
+          <g filter="url(#drop)">
+            <path id="cloud-shape" fill="url(#body-grad)"/>
+            <rect x="1" y="2" width="22" height="11" fill="url(#hi-grad)" clip-path="url(#cloud-clip)"/>
+          </g>
+        </g>
+
+        <g id="eye-layer">
+          <rect id="eye-l" x="7.7" y="9.5" width="2.6" height="5" rx="1.3" ry="1.3" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
+          <rect id="eye-r" x="13.7" y="9.5" width="2.6" height="5" rx="1.3" ry="1.3" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
+        </g>
+      </g>
+
+<script type="application/ecmascript"><![CDATA[
+const CLOUD_D = "M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388z";
+const CENTER = { x: 12, y: 12 };
+const EYE_BASE = {
+  l: { x: 7.7, y: 9.5, w: 2.6, h: 5, rx: 1.3 },
+  r: { x: 13.7, y: 9.5, w: 2.6, h: 5, rx: 1.3 }
+};
+const P = {
+  period: 1.16,
+  scoot: 2.1,
+  hop: 0.85,
+  squash: 0.105,
+  roll: 17,
+  round: 0.28,
+  breath: 0.018,
+  eyeStable: 0.86,
+  gaze: 0.58,
+  eyeWiden: 0.19,
+  puffStrength: 0.90,
+  puffs: true
+};
+
+const els = {
+  cloud: document.getElementById('cloud-shape'),
+  clip: document.getElementById('clip-shape'),
+  edgeContact: document.getElementById('edge-contact'),
+  edgeSoft: document.getElementById('edge-soft'),
+  edgeTight: document.getElementById('edge-tight'),
+  body: document.getElementById('body-layer'),
+  eyes: document.getElementById('eye-layer'),
+  eyeL: document.getElementById('eye-l'),
+  eyeR: document.getElementById('eye-r'),
+  shadow: document.getElementById('ground-shadow'),
+  puffA: document.getElementById('puff-a'),
+  puffB: document.getElementById('puff-b'),
+  puffC: document.getElementById('puff-c')
+};
+
+function samplePath(d, n) {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', d);
+  const len = path.getTotalLength();
+  return Array.from({ length: n }, (_, i) => {
+    const p = path.getPointAtLength(i / n * len);
+    return { x: p.x, y: p.y };
+  });
+}
+
+function pointsToSmoothPath(pts) {
+  const n = pts.length;
+  let d = `M ${pts[0].x.toFixed(3)} ${pts[0].y.toFixed(3)}`;
+  for (let i = 0; i < n; i++) {
+    const p0 = pts[(i - 1 + n) % n];
+    const p1 = pts[i];
+    const p2 = pts[(i + 1) % n];
+    const p3 = pts[(i + 2) % n];
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${c1x.toFixed(3)} ${c1y.toFixed(3)}, ${c2x.toFixed(3)} ${c2y.toFixed(3)}, ${p2.x.toFixed(3)} ${p2.y.toFixed(3)}`;
+  }
+  return d + ' Z';
+}
+
+function morphCloud(t) {
+  const r = 7.1;
+  const pts = basePoints.map(p => {
+    const dx = p.x - CENTER.x;
+    const dy = p.y - CENTER.y;
+    const a = Math.atan2(dy, dx);
+    const tx = CENTER.x + Math.cos(a) * r;
+    const ty = CENTER.y + Math.sin(a) * r;
+    return { x: p.x + (tx - p.x) * t, y: p.y + (ty - p.y) * t };
+  });
+  return pointsToSmoothPath(pts);
+}
+
+function clamp01(v) { return Math.max(0, Math.min(1, v)); }
+function smoothstep(a, b, x) {
+  const t = clamp01((x - a) / (b - a));
+  return t * t * (3 - 2 * t);
+}
+function pulse(q, center, width) {
+  const d = Math.abs((((q - center + 0.5) % 1) + 1) % 1 - 0.5);
+  return Math.max(0, 1 - d / width) ** 2;
+}
+
+const basePoints = samplePath(CLOUD_D, 72);
+const startT = performance.now();
+
+function frameFor(now) {
+  const t = (now - startT) / 1000;
+  const q = (t / P.period) % 1;
+  const wave = Math.sin(Math.PI * 2 * q);
+  const wave2 = Math.sin(Math.PI * 2 * (q - .17));
+  const contact = Math.max(pulse(q, .12, .18), pulse(q, .72, .16));
+  const launch = smoothstep(.14, .34, q) * (1 - smoothstep(.54, .78, q));
+  const breath = Math.sin(Math.PI * 2 * t / 4.4) * P.breath;
+  const tx = P.scoot * wave2;
+  const ty = -P.hop * Math.max(0, Math.sin(Math.PI * q)) + contact * .46;
+  const sx = 1 + contact * P.squash - launch * .025 + breath;
+  const sy = 1 - contact * P.squash * 1.12 + launch * .035 - breath * .55;
+  const roll = (wave * .72 + pulse(q, .31, .22) * .35 - pulse(q, .70, .18) * .25) * P.roll;
+  const round = P.round * (launch * .75 + contact * .25);
+  const eyeRot = roll * (1 - P.eyeStable);
+  const gaze = P.gaze + launch * .16 - contact * .10;
+  const blink = Math.max(pulse(q, .47, .055), pulse(q, .93, .035) * .25);
+  const shadowScale = 1 + contact * .20 - launch * .16;
+  const eyeWide = 1 + P.eyeWiden * clamp01(contact * .86 + launch * .20);
+  const puffSeed = P.puffs ? P.puffStrength : 0;
+  const puffA = puffSeed * pulse(q, .15, .20);
+  const puffB = puffSeed * pulse(q, .28, .22);
+  const puffC = puffSeed * pulse(q, .43, .24);
+  return { q, tx, ty, sx, sy, roll, round, eyeRot, gaze, blink, shadowScale, puffA, puffB, puffC, eyeWide };
+}
+
+function applyFrame(target, f) {
+  const d = morphCloud(f.round);
+  target.cloud.setAttribute('d', d);
+  target.clip.setAttribute('d', d);
+  target.edgeContact.setAttribute('d', d);
+  target.edgeSoft.setAttribute('d', d);
+  target.edgeTight.setAttribute('d', d);
+  target.edgeContact.setAttribute('transform', 'translate(0 0.18)');
+
+  target.body.setAttribute(
+    'transform',
+    `translate(${(12 + f.tx).toFixed(3)} ${(12 + f.ty).toFixed(3)}) rotate(${f.roll.toFixed(3)}) scale(${f.sx.toFixed(4)} ${f.sy.toFixed(4)}) translate(-12 -12)`
+  );
+
+  const eyeSx = 1 + (f.sx - 1) * .24;
+  const eyeSy = 1 + (f.sy - 1) * .20;
+  target.eyes.setAttribute(
+    'transform',
+    `translate(${(12 + f.tx).toFixed(3)} ${(12 + f.ty).toFixed(3)}) rotate(${f.eyeRot.toFixed(3)}) scale(${eyeSx.toFixed(4)} ${eyeSy.toFixed(4)}) translate(-12 -12) translate(${f.gaze.toFixed(3)} 0)`
+  );
+
+  applyBlink(target.eyeL, EYE_BASE.l, f.blink, f.eyeWide);
+  applyBlink(target.eyeR, EYE_BASE.r, f.blink, f.eyeWide);
+
+  target.shadow.setAttribute('transform', `translate(${(f.tx * .28).toFixed(3)} 0) scale(${f.shadowScale.toFixed(3)} 1)`);
+  target.shadow.setAttribute('opacity', (.07 + f.puffA * .045).toFixed(3));
+
+  setTrailPuff(target.puffA, f.puffA, -0.95, -0.16, 1.00);
+  setTrailPuff(target.puffB, f.puffB, -1.55, 0.06, 0.82);
+  setTrailPuff(target.puffC, f.puffC, -2.05, 0.16, 0.66);
+}
+
+function applyBlink(rect, base, amount, widen = 1) {
+  const scale = 1 - amount * .88;
+  const cx = base.x + base.w / 2;
+  const w = base.w * widen * (1 + amount * .06);
+  const h = Math.max(base.h * scale, .24);
+  const y = base.y + (base.h - h) / 2;
+  const rx = Math.min(w / 2, h / 2, 1.35);
+  rect.setAttribute('width', w.toFixed(3));
+  rect.setAttribute('x', (cx - w / 2).toFixed(3));
+  rect.setAttribute('height', h.toFixed(3));
+  rect.setAttribute('y', y.toFixed(3));
+  rect.setAttribute('rx', rx.toFixed(3));
+  rect.setAttribute('ry', rx.toFixed(3));
+}
+
+function setPuff(el, opacity, dx, dy, scale) {
+  el.setAttribute('opacity', opacity.toFixed(3));
+  el.setAttribute('transform', `translate(${dx.toFixed(3)} ${dy.toFixed(3)}) scale(${scale.toFixed(3)})`);
+}
+
+function setTrailPuff(el, amount, driftX, driftY, baseScale) {
+  const a = clamp01(amount);
+  const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+  const fade = isLight ? a : Math.sin(a * Math.PI);
+  const dx = driftX * a;
+  const dy = driftY * a;
+  const scale = baseScale * (0.82 + a * 0.32);
+  const opacityBase = isLight ? 0.86 : 0.62;
+  el.setAttribute('opacity', Math.min(fade * opacityBase, 0.90).toFixed(3));
+  el.setAttribute('transform', `translate(${dx.toFixed(3)} ${dy.toFixed(3)}) scale(${scale.toFixed(3)})`);
+}
+
+function tick(now) {
+  const f = frameFor(now);
+  applyFrame(els, f);
+  requestAnimationFrame(tick);
+}
+
+requestAnimationFrame(tick);
+]]></script>
+</svg>

package/assets/cloudling/cloudling-mini-enter-roll-in.svg

@@ -0,0 +1,226 @@
+<svg id="cloudling" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 36 36" preserveAspectRatio="xMidYMid meet">
+<style><![CDATA[
+.v {
+  text-align: right;
+  font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #7A9DFF;
+}
+.edge-rim-tight { stroke-opacity: .9; }
+.edge-rim-soft { stroke-opacity: .75; }
+.edge-contact { stroke-opacity: .9; }
+.duration-probe {
+  opacity: 0;
+  animation: mini-enter-duration-probe 1.25s linear 1 both;
+}
+@keyframes mini-enter-duration-probe {
+  from { transform: translateX(0); }
+  to { transform: translateX(0); }
+}
+@media (prefers-color-scheme: light) {
+.v { color: #3941FF; }
+.edge-rim-tight { stroke-opacity: .95; }
+.edge-rim-soft { stroke-opacity: .85; }
+.edge-contact { stroke-opacity: .95; }
+.cloud-drop-shadow { flood-opacity: .13; }
+.food-cloud-shadow { flood-opacity: .28; flood-color: #5060FF; }
+.food-cloud > path {
+  stroke: #5870E8 !important;
+  stroke-width: 1.2 !important;
+  stroke-opacity: .9 !important;
+  vector-effect: non-scaling-stroke !important;
+}
+}
+]]></style>
+      <defs>
+        <linearGradient id="body-grad" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#93c5fd"/>
+          <stop offset="0.5" stop-color="#60a5fa"/>
+          <stop offset="1" stop-color="#3b82f6"/>
+        </linearGradient>
+        <linearGradient id="eye-grad" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#B1A7FF"/>
+          <stop offset="0.5" stop-color="#7A9DFF"/>
+          <stop offset="1" stop-color="#3941FF"/>
+        </linearGradient>
+        <radialGradient id="hi-grad" cx="0.45" cy="0.25" r="0.55">
+          <stop offset="0" stop-color="#93c5fd" stop-opacity="0.9"/>
+          <stop offset="1" stop-color="#93c5fd" stop-opacity="0"/>
+        </radialGradient>
+        <filter id="drop" x="-40%" y="-40%" width="180%" height="180%">
+          <feDropShadow class="cloud-drop-shadow" dx="0" dy="0.55" stdDeviation="0.72" flood-color="#3941FF" flood-opacity="0.17"/>
+        </filter>
+        <filter id="edge-blur" x="-40%" y="-40%" width="180%" height="180%">
+          <feGaussianBlur stdDeviation="0.16"/>
+        </filter>
+        <path id="cloud-shape" d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388z"/>
+        <clipPath id="cloud-clip">
+          <use href="#cloud-shape"/>
+        </clipPath>
+      </defs>
+
+      <rect x="-12" y="-12" width="48" height="48" fill="transparent"/>
+      <rect class="duration-probe" x="-12" y="-12" width="0.01" height="0.01" fill="transparent"/>
+
+      <g id="enter-js">
+        <g id="body-js">
+          <g id="breath-js">
+            <g id="edge-system">
+              <use class="edge-contact" href="#cloud-shape" fill="none" stroke="#7d8aa7" stroke-width="1.00" stroke-linejoin="round" transform="translate(0 .18)" filter="url(#edge-blur)"/>
+              <use class="edge-rim-soft" href="#cloud-shape" fill="none" stroke="#7A9DFF" stroke-width=".84" stroke-linejoin="round" filter="url(#edge-blur)"/>
+              <use class="edge-rim-tight" href="#cloud-shape" fill="none" stroke="#aab3c6" stroke-width=".38" stroke-linejoin="round"/>
+            </g>
+            <g filter="url(#drop)">
+              <use href="#cloud-shape" fill="url(#body-grad)"/>
+              <rect x="1" y="2" width="22" height="11" fill="url(#hi-grad)" clip-path="url(#cloud-clip)"/>
+            </g>
+          </g>
+        </g>
+        <g id="eyes-js">
+          <g id="blink-js">
+            <rect id="eye-l" class="eye" x="6.65" y="9.65" width="2.2" height="4.65" rx="1.1" ry="1.1" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
+            <rect id="eye-r" class="eye" x="11.05" y="9.65" width="2.2" height="4.65" rx="1.1" ry="1.1" fill="url(#eye-grad)" stroke="#ffffff" stroke-width="0.08" stroke-opacity="0.7"/>
+          </g>
+        </g>
+      </g>
+    <g id="__cloudling-export-shims" opacity="0" pointer-events="none" style="display:none">
+<g id="pose-readout"></g>
+<g id="progress-readout"></g>
+</g>
+
+<script type="application/ecmascript"><![CDATA[
+const svg = document.getElementById("cloudling");
+const enter = document.getElementById("enter-js");
+const eyeGrad = document.getElementById("eye-grad");
+const eyeL = document.getElementById("eye-l");
+const eyeR = document.getElementById("eye-r");
+const progressReadout = document.getElementById("progress-readout");
+const poseReadout = document.getElementById("pose-readout");
+
+const EYE_BASE = {
+  l: { x: 6.65, y: 9.65, h: 4.65, rx: 1.1 },
+  r: { x: 11.05, y: 9.65, h: 4.65, rx: 1.1 },
+};
+const params = {
+  duration: 1.25,
+  startX: 15.8,
+  rollDeg: 28,
+  overshoot: 1.2,
+  squash: 0.07,
+  eyeOpen: 0.64,
+};
+let startT = performance.now();
+let playing = true;
+let heldProgress = 0;
+let lastState = null;
+
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
+function smoothstep(edge0, edge1, x) {
+  const t = clamp((x - edge0) / Math.max(edge1 - edge0, 0.0001), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+function sampleKeyframes(p, frames) {
+  if (p <= frames[0].p) return frames[0].v;
+  for (let i = 1; i < frames.length; i++) {
+    const prev = frames[i - 1];
+    const next = frames[i];
+    if (p <= next.p) {
+      const t = smoothstep(prev.p, next.p, p);
+      return lerp(prev.v, next.v, t);
+    }
+  }
+  return frames[frames.length - 1].v;
+}
+
+function stateAt(p) {
+  const bodyP = smoothstep(0.08, 1.0, p);
+  const tx = sampleKeyframes(p, [
+    { p: 0.00, v: params.startX },
+    { p: 0.08, v: params.startX },
+    { p: 0.47, v: -params.overshoot },
+    { p: 0.62, v: params.overshoot * 0.42 },
+    { p: 0.78, v: -params.overshoot * 0.14 },
+    { p: 1.00, v: 0 },
+  ]);
+  const rot = sampleKeyframes(p, [
+    { p: 0.00, v: params.rollDeg },
+    { p: 0.08, v: params.rollDeg },
+    { p: 0.47, v: -params.rollDeg * 0.32 },
+    { p: 0.62, v: params.rollDeg * 0.13 },
+    { p: 0.78, v: -params.rollDeg * 0.05 },
+    { p: 1.00, v: 0 },
+  ]);
+  const ty = sampleKeyframes(p, [
+    { p: 0.00, v: 0 },
+    { p: 0.40, v: 0.18 },
+    { p: 0.60, v: -0.12 },
+    { p: 0.82, v: 0.04 },
+    { p: 1.00, v: 0 },
+  ]);
+  const impact = Math.sin(Math.PI * smoothstep(0.34, 0.62, p));
+  const settle = Math.sin(Math.PI * smoothstep(0.58, 0.86, p)) * 0.45;
+  const squash = params.squash * (impact - settle);
+  const sx = 1 - squash;
+  const sy = 1 + squash * 0.85;
+  const eyeOpenBase = smoothstep(params.eyeOpen, params.eyeOpen + 0.20, p);
+  const eyePop = Math.sin(Math.PI * smoothstep(params.eyeOpen + 0.12, params.eyeOpen + 0.26, p)) * 0.08;
+  const eyeScale = p < params.eyeOpen ? 0.07 : clamp(eyeOpenBase + eyePop, 0.07, 1.08);
+  const flowOffset = Math.sin(2 * Math.PI * easeOutCubic(bodyP)) * 2.2;
+  return { p, tx, ty, rot, sx, sy, eyeScale, flowOffset };
+}
+
+function setEyeRect(rect, base, scale) {
+  const h = Math.max(base.h * scale, 0.16);
+  const y = base.y + (base.h - h) / 2;
+  const rx = Math.min(base.rx, h / 2);
+  rect.setAttribute("height", h.toFixed(3));
+  rect.setAttribute("y", y.toFixed(3));
+  rect.setAttribute("rx", rx.toFixed(3));
+  rect.setAttribute("ry", rx.toFixed(3));
+}
+
+function renderProgress(p) {
+  const s = stateAt(clamp(p, 0, 1));
+  enter.setAttribute(
+    "transform",
+    `translate(${s.tx.toFixed(3)} ${s.ty.toFixed(3)}) translate(12 12) rotate(${s.rot.toFixed(3)}) scale(${s.sx.toFixed(4)} ${s.sy.toFixed(4)}) translate(-12 -12)`
+  );
+  setEyeRect(eyeL, EYE_BASE.l, s.eyeScale);
+  setEyeRect(eyeR, EYE_BASE.r, s.eyeScale);
+  eyeGrad.setAttribute("y1", (3 + s.flowOffset).toFixed(2));
+  eyeGrad.setAttribute("y2", (21 + s.flowOffset).toFixed(2));
+  progressReadout.textContent = `progress: ${s.p.toFixed(2)}`;
+  poseReadout.textContent = `tx: ${s.tx.toFixed(2)}, rot: ${s.rot.toFixed(1)}deg, scale: ${s.sx.toFixed(2)} ${s.sy.toFixed(2)}`;
+  lastState = s;
+}
+
+function tick(now) {
+  if (playing) {
+    const p = (now - startT) / (params.duration * 1000);
+    heldProgress = clamp(p, 0, 1);
+    renderProgress(heldProgress);
+    if (p >= 1) playing = false;
+  }
+  requestAnimationFrame(tick);
+}
+
+function replay() {
+  startT = performance.now();
+  heldProgress = 0;
+  playing = true;
+  renderProgress(0);
+}
+requestAnimationFrame(tick);
+]]></script>
+</svg>