@mumulinya167/ccm-pet-assets 2.0.0

package/assets/cloudling/cloudling/cloudling-idle.svg

@@ -0,0 +1,255 @@
+<svg id="cloudling" xmlns="http://www.w3.org/2000/svg" width="880" height="720" viewBox="-32 -24 88 72" preserveAspectRatio="xMidYMid meet">
+<style><![CDATA[
+.edge-rim-tight { stroke-opacity: .65; }
+.edge-rim-soft { stroke-opacity: .50; }
+.edge-contact { stroke-opacity: .65; }
+@media (prefers-color-scheme: light) {
+.edge-rim-tight { stroke-opacity: .75; }
+.edge-rim-soft { stroke-opacity: .60; }
+.edge-contact { stroke-opacity: .75; }
+.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="#f0f9ff"/>
+        <stop offset="0.5" stop-color="#e0f2fe"/>
+        <stop offset="1" stop-color="#bae6fd"/>
+      </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="#f0f9ff" stop-opacity="0.9"/>
+        <stop offset="1" stop-color="#f0f9ff" stop-opacity="0"/>
+      </radialGradient>
+      <filter id="drop" x="-40%" y="-40%" width="180%" height="180%">
+        <feDropShadow class="cloud-drop-shadow" id="drop-shadow" dx="0" dy="0.6" stdDeviation="0.8" flood-color="#3941FF" flood-opacity="0.18"/>
+      </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>
+
+    <!-- 云朵 layer (rotate + breath scale + distance scale, 都围绕 12,12) -->
+    <g id="cloud-group">
+      <g id="edge-system">
+        <use class="edge-contact" href="#cloud-shape" fill="none" stroke="#7d8aa7" stroke-width="1.05" stroke-linejoin="round" transform="translate(0 0.18)" filter="url(#edge-blur)"/>
+        <use class="edge-rim-soft" href="#cloud-shape" fill="none" stroke="#7A9DFF" stroke-width="0.90" stroke-linejoin="round" filter="url(#edge-blur)"/>
+        <use class="edge-rim-tight" href="#cloud-shape" fill="none" stroke="#aab3c6" stroke-width="0.42" 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>
+
+    <!-- 眼睛 layer (独立, 1:1 跟鼠标) -->
+    <g id="eye-group">
+      <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>
+
+<script type="application/ecmascript"><![CDATA[
+const FACE_CENTER = { x: 12, y: 12 };
+
+const svgEl = document.getElementById('cloudling');
+const cloudGroup = document.getElementById('cloud-group');
+const eyeGroup = document.getElementById('eye-group');
+const eyeL = document.getElementById('eye-l');
+const eyeR = document.getElementById('eye-r');
+const eyeGrad = document.getElementById('eye-grad');
+
+const EYE_BASE = {
+  l: { x: 7.7, y: 9.5, h: 5, rx: 1.3 },
+  r: { x: 13.7, y: 9.5, h: 5, rx: 1.3 }
+};
+
+const P = {
+  /* V1 锁定数值 */
+  SCALE_LOW: 0.96, BREATH_PERIOD: 5.0,
+  MAX_ROT_DEG: 20, CLOUD_LAG: 0.20,
+  EYE_MAX: 1.20, EYE_TRACK_TIME: 0.06, RECENTER_TIME: 0.45,
+  FLOW_PERIOD: 5.5, FLOW_AMP: 4,
+  BLINK_INTERVAL: 6.0, BLINK_DUR: 0.16,
+  /* V2 新增 */
+  DIST_NEAR: 6, DIST_FAR: 20, DIST_MAX_SCALE: 1.15, DIST_RECENTER: 0.5
+};
+
+let mouseInside = false;
+let mouseVB = { x: 12, y: 12 };
+let eyeOffset = { x: 0, y: 0 };
+let cloudRotate = 0;
+let curDistScale = 1.0;
+let lastT = performance.now();
+let lowPowerPaused = false;
+let lowPowerPausedAt = 0;
+let lowPowerPausedTotal = 0;
+let rafId = 0;
+
+let nextBlinkT = 3 + Math.random() * 2;
+let blinkActive = false;
+let blinkStartT = 0;
+
+function scheduleLoop() {
+  if (!lowPowerPaused && !rafId) rafId = requestAnimationFrame(loop);
+}
+
+window.__clawdSetLowPowerPaused = paused => {
+  const next = !!paused;
+  if (lowPowerPaused === next) return;
+  lowPowerPaused = next;
+  if (next) {
+    lowPowerPausedAt = performance.now();
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = 0;
+    return;
+  }
+  if (lowPowerPausedAt) lowPowerPausedTotal += performance.now() - lowPowerPausedAt;
+  lowPowerPausedAt = 0;
+  lastT = performance.now();
+  scheduleLoop();
+};
+
+svgEl.addEventListener('mousemove', e => {
+  const r = svgEl.getBoundingClientRect();
+  /* viewBox -12 -12 48 48 → 反算 mouseVB */
+  mouseVB.x = (e.clientX - r.left) * (48 / r.width) - 12;
+  mouseVB.y = (e.clientY - r.top) * (48 / r.height) - 12;
+  mouseInside = true;
+});
+svgEl.addEventListener('mouseleave', () => mouseInside = false);
+svgEl.addEventListener('mouseenter', () => mouseInside = true);
+
+window.__cloudlingSetPointer = payload => {
+  if (!payload || !Number.isFinite(payload.x) || !Number.isFinite(payload.y)) return;
+  mouseVB.x = payload.x;
+  mouseVB.y = payload.y;
+  mouseInside = !!payload.inside;
+};
+
+function computeEyeTarget() {
+  if (!mouseInside) return { x: 0, y: 0 };
+  const dx = mouseVB.x - FACE_CENTER.x;
+  const dy = mouseVB.y - FACE_CENTER.y;
+  const dist = Math.hypot(dx, dy);
+  if (dist < 0.01) return { x: 0, y: 0 };
+  const sat = Math.tanh(dist / 6);
+  return {
+    x: (dx / dist) * sat * P.EYE_MAX,
+    y: (dy / dist) * sat * P.EYE_MAX
+  };
+}
+
+function getBlinkScale(t) {
+  if (!blinkActive && t > nextBlinkT) {
+    blinkActive = true;
+    blinkStartT = t;
+  }
+  if (blinkActive) {
+    const dt = t - blinkStartT;
+    const half = P.BLINK_DUR / 2;
+    if (dt < half) {
+      return 1 - 0.94 * (dt / half);
+    } else if (dt < P.BLINK_DUR) {
+      return 0.06 + 0.94 * ((dt - half) / half);
+    } else {
+      blinkActive = false;
+      nextBlinkT = t + P.BLINK_INTERVAL * (0.8 + Math.random() * 0.4);
+    }
+  }
+  return 1;
+}
+
+function applyBlink(rect, base, scale) {
+  const newH = Math.max(base.h * scale, 0.15);
+  const newY = base.y + (base.h - newH) / 2;
+  const newRx = Math.min(base.rx, newH / 2);
+  rect.setAttribute('height', newH.toFixed(3));
+  rect.setAttribute('y', newY.toFixed(3));
+  rect.setAttribute('rx', newRx.toFixed(3));
+  rect.setAttribute('ry', newRx.toFixed(3));
+}
+
+const startT = performance.now();
+function loop(now) {
+  rafId = 0;
+  if (lowPowerPaused) return;
+  const dt = (now - lastT) / 1000;
+  lastT = now;
+  const t = (now - startT - lowPowerPausedTotal) / 1000;
+
+  /* 呼吸 scale */
+  const phase = (Math.cos(2 * Math.PI * t / P.BREATH_PERIOD) + 1) / 2;
+  const breathScale = P.SCALE_LOW + (1.0 - P.SCALE_LOW) * phase;
+
+  /* 眼睛位置 */
+  const target = computeEyeTarget();
+  const eyeTime = mouseInside ? P.EYE_TRACK_TIME : P.RECENTER_TIME;
+  const eyeRate = 1 - Math.exp(-dt / eyeTime);
+  eyeOffset.x += (target.x - eyeOffset.x) * eyeRate;
+  eyeOffset.y += (target.y - eyeOffset.y) * eyeRate;
+
+  /* 云朵 rotate (eye.x 驱动 + lag) */
+  const maxRot = P.MAX_ROT_DEG * Math.PI / 180;
+  const targetRot = (eyeOffset.x / Math.max(P.EYE_MAX, 0.01)) * maxRot;
+  cloudRotate += (targetRot - cloudRotate) * P.CLOUD_LAG;
+
+  /* V2: 距离驱动 scale */
+  let targetDistScale = 1.0;
+  if (mouseInside) {
+    const dx = mouseVB.x - FACE_CENTER.x;
+    const dy = mouseVB.y - FACE_CENTER.y;
+    const dist = Math.hypot(dx, dy);
+    if (dist > P.DIST_NEAR) {
+      const t01 = Math.min((dist - P.DIST_NEAR) / Math.max(P.DIST_FAR - P.DIST_NEAR, 0.01), 1);
+      targetDistScale = 1.0 + (P.DIST_MAX_SCALE - 1.0) * t01;
+    }
+  }
+  const distRate = 1 - Math.exp(-dt / P.DIST_RECENTER);
+  curDistScale += (targetDistScale - curDistScale) * distRate;
+
+  /* 应用 cloud transform — breath scale × distance scale 相乘 */
+  const finalScale = breathScale * curDistScale;
+  const angleDeg = cloudRotate * 180 / Math.PI;
+  cloudGroup.setAttribute(
+    'transform',
+    `translate(12 12) rotate(${angleDeg.toFixed(3)}) scale(${finalScale.toFixed(4)}) translate(-12 -12)`
+  );
+
+  /* 眼睛 group transform */
+  const eyeScale = curDistScale;
+  eyeGroup.setAttribute(
+    'transform',
+    `translate(${eyeOffset.x.toFixed(3)} ${eyeOffset.y.toFixed(3)}) translate(12 12) scale(${eyeScale.toFixed(4)}) translate(-12 -12)`
+  );
+
+  /* 眨眼 */
+  const blinkScale = getBlinkScale(t);
+  applyBlink(eyeL, EYE_BASE.l, blinkScale);
+  applyBlink(eyeR, EYE_BASE.r, blinkScale);
+
+  /* 流动渐变 */
+  const flowOffset = Math.sin(2 * Math.PI * t / P.FLOW_PERIOD) * P.FLOW_AMP;
+  eyeGrad.setAttribute('y1', (3 + flowOffset).toFixed(2));
+  eyeGrad.setAttribute('y2', (21 + flowOffset).toFixed(2));
+
+  scheduleLoop();
+}
+
+scheduleLoop();
+]]></script>
+</svg>