@mumulinya167/ccm-pet-assets 2.0.0

package/assets/clawd/clawd-headphones-groove.svg

@@ -0,0 +1,194 @@
+<!--
+  clawd-experiment-headphones-groove-v6.svg
+  v5 基础上鹿鹿两个微调:
+  1. 眼睛 V 字 y +0.5 (顶 8->8.5 底 9->9.5) — v5 位置偏高
+  2. 耳罩压缩 0.78 -> 0.85 (缩量 22%->15%), 过冲 1.04 -> 1.02 一起收 — v5 压太多
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .shadow-sway {
+        transform-box: fill-box;
+        transform-origin: 50% 50%;
+        animation: shadow-sway 1.6s infinite ease-in-out;
+      }
+
+      .body-sway {
+        transform-origin: 7.5px 13px;
+        animation: body-sway 1.6s infinite ease-in-out;
+      }
+
+      .leg-left-inner,
+      .leg-left-outer,
+      .leg-right-inner,
+      .leg-right-outer {
+        transform-box: fill-box;
+        transform-origin: 50% 0%;
+      }
+      .leg-left-inner  { animation: leg-left-inner  1.6s infinite ease-in-out; }
+      .leg-left-outer  { animation: leg-left-outer  1.6s infinite ease-in-out; }
+      .leg-right-inner { animation: leg-right-inner 1.6s infinite ease-in-out; }
+      .leg-right-outer { animation: leg-right-outer 1.6s infinite ease-in-out; }
+
+      .arm-left-dance  {
+        transform-box: fill-box;
+        transform-origin: 100% 0%;
+        animation: arm-left-dance 1.6s infinite ease-in-out;
+      }
+      .arm-right-dance {
+        transform-box: fill-box;
+        transform-origin: 0% 0%;
+        animation: arm-right-dance 1.6s infinite ease-in-out;
+      }
+
+      /* 耳罩 squeeze: 拍点挤压, 中性回弹过冲 */
+      .earcup-left {
+        transform-box: fill-box;
+        transform-origin: 100% 50%; /* 右边缘 = 内侧, 朝身体方向收 */
+        animation: earcup-squeeze 1.6s infinite ease-in-out;
+      }
+      .earcup-right {
+        transform-box: fill-box;
+        transform-origin: 0% 50%;   /* 左边缘 = 内侧 */
+        animation: earcup-squeeze 1.6s infinite ease-in-out;
+      }
+
+      .note-left  { animation: note-left  1.6s infinite ease-out; }
+      .note-right { animation: note-right 1.6s infinite ease-out; }
+
+      @keyframes shadow-sway {
+        0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.5; }
+        22%, 30% { transform: translateX(-0.5px) scaleX(0.85); opacity: 0.45; }
+        50%      { transform: translateX(0) scaleX(1); opacity: 0.5; }
+        70%, 78% { transform: translateX(0.5px) scaleX(0.85); opacity: 0.45; }
+      }
+
+      @keyframes body-sway {
+        0%, 100% { transform: rotate(0deg) translateY(0); }
+        22%, 30% { transform: rotate(-6deg) translateY(0.3px); }
+        50%      { transform: rotate(0deg) translateY(-0.2px); }
+        70%, 78% { transform: rotate(6deg) translateY(0.3px); }
+      }
+
+      @keyframes leg-right-inner {
+        0%, 100% { transform: rotate(0deg) translateY(0); }
+        22%, 30% { transform: rotate(-12deg) translateY(-0.2px); }
+        50%, 70%, 78% { transform: rotate(0deg) translateY(0); }
+      }
+      @keyframes leg-right-outer {
+        0%, 100% { transform: rotate(0deg) translateY(0); }
+        22%, 30% { transform: rotate(-22deg) translateY(-0.3px); }
+        50%, 70%, 78% { transform: rotate(0deg) translateY(0); }
+      }
+      @keyframes leg-left-inner {
+        0%, 22%, 30%, 50%, 100% { transform: rotate(0deg) translateY(0); }
+        70%, 78% { transform: rotate(12deg) translateY(-0.2px); }
+      }
+      @keyframes leg-left-outer {
+        0%, 22%, 30%, 50%, 100% { transform: rotate(0deg) translateY(0); }
+        70%, 78% { transform: rotate(22deg) translateY(-0.3px); }
+      }
+
+      @keyframes arm-left-dance {
+        0%, 100% { transform: rotate(0deg); }
+        22%, 30% { transform: rotate(-30deg); }
+        50%      { transform: rotate(0deg); }
+        70%, 78% { transform: rotate(20deg); }
+      }
+      @keyframes arm-right-dance {
+        0%, 100% { transform: rotate(0deg); }
+        22%, 30% { transform: rotate(-20deg); }
+        50%      { transform: rotate(0deg); }
+        70%, 78% { transform: rotate(30deg); }
+      }
+
+      /* 耳罩: 拍点 (左压/右压) 都 squeeze 0.78, 中性 50% 回弹过冲 1.04 */
+      @keyframes earcup-squeeze {
+        0%, 100% { transform: scaleX(1); }
+        22%, 30% { transform: scaleX(0.85); }
+        50%      { transform: scaleX(1.02); }
+        70%, 78% { transform: scaleX(0.85); }
+      }
+
+      @keyframes note-left {
+        0%, 14%, 42%, 100% { opacity: 0; transform: translate(0, 0); }
+        22%                { opacity: 1; transform: translate(-0.4px, -1.2px); }
+        38%                { opacity: 0; transform: translate(-1.6px, -3.5px); }
+      }
+      @keyframes note-right {
+        0%, 62%, 82%, 100% { opacity: 0; transform: translate(0, 0); }
+        70%                { opacity: 1; transform: translate(0.4px, -1.2px); }
+        78%                { opacity: 0; transform: translate(1.6px, -3.5px); }
+      }
+    </style>
+
+    <g id="music-note" fill="#FFE066">
+      <rect x="0" y="2" width="1" height="1"/>
+      <rect x="1" y="0" width="1" height="3"/>
+      <rect x="2" y="0" width="1" height="1"/>
+    </g>
+  </defs>
+
+  <rect class="shadow-sway" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+  <g fill="#DE886D">
+    <rect class="leg-left-outer"  x="3"  y="13" width="1" height="2"/>
+    <rect class="leg-left-inner"  x="5"  y="13" width="1" height="2"/>
+    <rect class="leg-right-inner" x="9"  y="13" width="1" height="2"/>
+    <rect class="leg-right-outer" x="11" y="13" width="1" height="2"/>
+  </g>
+
+  <g class="body-sway">
+    <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+    <!-- 头带 (不参与 squeeze, 只跟随 body-sway) -->
+    <g fill="#1D5C83">
+      <rect x="4.9"   y="2.85" width="5.05" height="0.75"/>
+      <rect x="4.46"  y="2.93" width="0.75" height="0.75"/>
+      <rect x="9.66"  y="2.93" width="0.75" height="0.75"/>
+      <rect x="4.03"  y="3.1"  width="0.75" height="0.75"/>
+      <rect x="10.11" y="3.09" width="0.75" height="0.75"/>
+      <rect x="3.59"  y="3.34" width="0.75" height="0.75"/>
+      <rect x="10.57" y="3.33" width="0.75" height="0.75"/>
+      <rect x="3.15"  y="3.63" width="0.75" height="0.75"/>
+      <rect x="11.02" y="3.61" width="0.75" height="0.75"/>
+      <rect x="2.71"  y="3.98" width="0.75" height="0.75"/>
+      <rect x="11.48" y="3.96" width="0.75" height="0.75"/>
+      <rect x="2.28"  y="4.37" width="0.75" height="0.75"/>
+      <rect x="11.94" y="4.34" width="0.75" height="0.75"/>
+      <rect x="1.84"  y="4.82" width="0.75" height="0.75"/>
+      <rect x="12.39" y="4.78" width="0.75" height="0.75"/>
+      <rect x="1.4"   y="5.3"  width="0.75" height="0.75"/>
+      <rect x="12.85" y="5.25" width="0.75" height="0.75"/>
+    </g>
+
+    <!-- 左耳罩 (三层) -->
+    <g class="earcup-left">
+      <rect x="0.2" y="7"   width="0.6" height="2.4"  fill="#1D5C83"/>
+      <rect x="0.8" y="6.5" width="0.6" height="3.25" fill="#256891"/>
+      <rect x="1.4" y="6"   width="0.6" height="4.05" fill="#2E7AA8"/>
+    </g>
+
+    <!-- 右耳罩 (三层) -->
+    <g class="earcup-right">
+      <rect x="14.2" y="7"   width="0.6" height="2.4"  fill="#1D5C83"/>
+      <rect x="13.6" y="6.5" width="0.6" height="3.25" fill="#256891"/>
+      <rect x="13"   y="6"   width="0.6" height="4.05" fill="#2E7AA8"/>
+    </g>
+
+    <g class="arm-left-dance">
+      <rect x="-1" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <g class="arm-right-dance">
+      <rect x="14" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <g fill="none" stroke="#000000" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="3.5,8.5 4.5,9.5 5.5,8.5"/>
+      <polyline points="9.5,8.5 10.5,9.5 11.5,8.5"/>
+    </g>
+  </g>
+
+  <g transform="translate(-5 4)"><g class="note-left"><use href="#music-note"/></g></g>
+  <g transform="translate(15 4)"><g class="note-right"><use href="#music-note"/></g></g>
+</svg>

package/assets/clawd/clawd-idle-bubble.svg

@@ -0,0 +1,180 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500" shape-rendering="crispEdges">
+  <!-- 吹泡泡 v8
+       v7 反馈: 整体 ok, 但眼睛回到正中后再眨一次眼更好
+       v8 修正: eyes-anim 加一个 96% 眨眼帧 (在 (0, 0) 正中位置) -->
+
+  <style>
+    @keyframes body-squash {
+      0%, 30%   { transform: scaleY(1); }
+      36%       { transform: scaleY(0.93); }
+      42%       { transform: scaleY(1.05); }
+      50%, 100% { transform: scaleY(1); }
+    }
+    .body-squash {
+      transform-origin: 7.5px 15px;
+      animation: body-squash 4.5s linear infinite;
+    }
+
+    /* === 眼睛: 复合 translate + scaleY, 含双眨眼 (88% pop 后 + 96% 回正后) === */
+    @keyframes eyes-anim {
+      0%, 6%    { transform: translate(0px, 0px) scaleY(1); }
+      18%, 30%  { transform: translate(1px, 0px) scaleY(1); }
+      34%       { transform: translate(1px, 0px) scaleY(0.5); }    /* 鼓气眯眼 */
+      42%, 46%  { transform: translate(1px, 0px) scaleY(1); }
+      66%, 86%  { transform: translate(1.5px, -0.5px) scaleY(1); }/* 追随主泡 + 看副泡 pop */
+      88%       { transform: translate(1.5px, -0.5px) scaleY(0.1); }/* 第一次眨眼 (响应 pop) */
+      90%       { transform: translate(1.5px, -0.5px) scaleY(1); } /* 睁开 */
+      94%       { transform: translate(0px, 0px) scaleY(1); }       /* 回到正中 */
+      96%       { transform: translate(0px, 0px) scaleY(0.1); }     /* 第二次眨眼 (回正后) */
+      98%, 100% { transform: translate(0px, 0px) scaleY(1); }       /* 睁开 + hold to loop */
+    }
+    .eyes-anim {
+      transform-origin: 7.5px 9px;
+      animation: eyes-anim 4.5s linear infinite;
+    }
+
+    @keyframes arm-right-out {
+      0%, 6%    { transform: translate(0px, 0px); }
+      18%, 86%  { transform: translate(0.45px, 0.55px); }
+      94%, 100% { transform: translate(0px, 0px); }
+    }
+    .arm-right-out { animation: arm-right-out 4.5s linear infinite; }
+
+    @keyframes arm-left-down {
+      0%, 6%    { transform: translate(0px, 0px); }
+      18%, 86%  { transform: translate(0px, 1px); }
+      94%, 100% { transform: translate(0px, 0px); }
+    }
+    .arm-left-down { animation: arm-left-down 4.5s linear infinite; }
+
+    @keyframes wand-appear {
+      0%, 16%   { opacity: 0; transform: scale(0.5); }
+      26%, 86%  { opacity: 1; transform: scale(1); }
+      92%, 100% { opacity: 0; transform: scale(0.5); }
+    }
+    .wand-appear { animation: wand-appear 4.5s linear infinite; }
+
+    @keyframes frame-puff {
+      0%, 30%   { transform: scale(1); }
+      36%       { transform: scale(1.08); }
+      42%       { transform: scale(0.95); }
+      50%, 100% { transform: scale(1); }
+    }
+    .frame-puff { animation: frame-puff 4.5s linear infinite; }
+
+    @keyframes bubble1-life {
+      0%, 42%   { opacity: 0; transform: translate(0px, 0px) scale(0); }
+      46%       { opacity: 1; transform: translate(0px, -0.3px) scale(0.3); }
+      52%       { opacity: 1; transform: translate(0.5px, -1.5px) scale(0.5); }
+      58%       { opacity: 1; transform: translate(1.5px, -3.5px) scale(0.7); }
+      64%       { opacity: 1; transform: translate(3px, -6px) scale(0.92); }
+      68%       { opacity: 1; transform: translate(4.1px, -8.45px) scale(1); }
+      70%       { opacity: 0.6; transform: translate(4.1px, -8.45px) scale(1.2); }
+      72%, 99%  { opacity: 0; transform: translate(4.1px, -8.45px) scale(1.4); }
+      100%      { opacity: 0; transform: translate(0px, 0px) scale(0); }
+    }
+    .bubble1-life { animation: bubble1-life 4.5s linear infinite; }
+
+    @keyframes bubble2-life {
+      0%, 58%   { opacity: 0; transform: translate(0px, 0px) scale(0); }
+      62%       { opacity: 1; transform: translate(0px, -0.3px) scale(0.3); }
+      68%       { opacity: 1; transform: translate(0.8px, -1.3px) scale(0.5); }
+      74%       { opacity: 1; transform: translate(2.5px, -3px) scale(0.65); }
+      80%       { opacity: 1; transform: translate(5px, -4.8px) scale(0.85); }
+      84%       { opacity: 1; transform: translate(7.1px, -6.3px) scale(1); }
+      86%       { opacity: 0.5; transform: translate(7.1px, -6.3px) scale(1.2); }
+      88%, 99%  { opacity: 0; transform: translate(7.1px, -6.3px) scale(1.4); }
+      100%      { opacity: 0; transform: translate(0px, 0px) scale(0); }
+    }
+    .bubble2-life { animation: bubble2-life 4.5s linear infinite; }
+
+    @keyframes pop-flash1 {
+      0%, 68%   { opacity: 0; transform: scale(0); }
+      70%       { opacity: 1; transform: scale(1); }
+      73%, 100% { opacity: 0; transform: scale(0); }
+    }
+    .pop-flash1 { animation: pop-flash1 4.5s linear infinite; }
+
+    @keyframes pop-flash2 {
+      0%, 84%   { opacity: 0; transform: scale(0); }
+      86%       { opacity: 1; transform: scale(1); }
+      89%, 100% { opacity: 0; transform: scale(0); }
+    }
+    .pop-flash2 { animation: pop-flash2 4.5s linear infinite; }
+  </style>
+
+  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <g id="master-group">
+    <g class="body-squash">
+      <g fill="#DE886D">
+        <rect x="2" y="6" width="11" height="7"/>
+        <rect class="arm-left-down" x="0" y="9" width="2" height="2"/>
+        <rect x="3" y="13" width="1" height="2"/>
+        <rect x="5" y="13" width="1" height="2"/>
+        <rect x="9" y="13" width="1" height="2"/>
+        <rect x="11" y="13" width="1" height="2"/>
+      </g>
+      <g class="eyes-anim" fill="#000000">
+        <rect x="4" y="8" width="1" height="2"/>
+        <rect x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+
+    <g class="arm-right-out">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <g transform="translate(14.45 10.55)">
+      <g class="wand-appear">
+        <rect x="0.06" y="-2.075" width="0.8" height="2.6" rx="0.4" fill="#3A2926"/>
+        <g transform="translate(0.45 -3.3)" shape-rendering="auto">
+          <g class="frame-puff">
+            <rect x="-1.275" y="-1.275" width="2.55" height="2.55" rx="0.42"
+                  fill="none" stroke="#3A2926" stroke-width="0.68" stroke-linejoin="round"/>
+            <rect x="-0.235" y="-0.645" width="0.82" height="0.82" rx="0.22"
+                  fill="none" stroke="#E8D8CF" stroke-width="0.24" opacity="0.9"/>
+          </g>
+        </g>
+      </g>
+    </g>
+
+    <g transform="translate(14.9 7.25)" shape-rendering="auto">
+      <g class="bubble1-life">
+        <circle r="3.05" fill="#F7FFFF" fill-opacity="0.12" stroke="#C7E6E8" stroke-width="0.24"/>
+        <circle r="2.72" fill="none" stroke="#FFFDF6" stroke-width="0.16" opacity="0.58"/>
+        <rect x="-1.75" y="-1.75" width="0.85" height="0.85" fill="#FFFDF6" opacity="0.9" shape-rendering="crispEdges"/>
+      </g>
+    </g>
+
+    <g transform="translate(14.9 7.25)" shape-rendering="auto">
+      <g class="bubble2-life">
+        <circle r="1.55" fill="#FFF9F4" fill-opacity="0.13" stroke="#E4D2C8" stroke-width="0.2"/>
+        <circle r="1.32" fill="none" stroke="#FFFDF6" stroke-width="0.12" opacity="0.5"/>
+        <rect x="0.7" y="0.7" width="0.38" height="0.38" fill="#FFF7EF" opacity="0.7" shape-rendering="crispEdges"/>
+      </g>
+    </g>
+
+    <g transform="translate(19 -1.2)">
+      <g class="pop-flash1" fill="#FFFFFF" shape-rendering="crispEdges">
+        <rect x="-3.25" y="-0.25" width="0.5" height="0.5"/>
+        <rect x="2.75" y="-0.25" width="0.5" height="0.5"/>
+        <rect x="-0.25" y="-3.25" width="0.5" height="0.5"/>
+        <rect x="-0.25" y="2.75" width="0.5" height="0.5"/>
+        <rect x="-2.2" y="-2.2" width="0.4" height="0.4" opacity="0.7"/>
+        <rect x="1.8" y="-2.2" width="0.4" height="0.4" opacity="0.7"/>
+        <rect x="-2.2" y="1.8" width="0.4" height="0.4" opacity="0.7"/>
+        <rect x="1.8" y="1.8" width="0.4" height="0.4" opacity="0.7"/>
+      </g>
+    </g>
+
+    <g transform="translate(22 0.95)">
+      <g class="pop-flash2" fill="#FFFFFF" shape-rendering="crispEdges">
+        <rect x="-1.75" y="-0.2" width="0.4" height="0.4"/>
+        <rect x="1.35" y="-0.2" width="0.4" height="0.4"/>
+        <rect x="-0.2" y="-1.75" width="0.4" height="0.4"/>
+        <rect x="-0.2" y="1.35" width="0.4" height="0.4"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-idle-collapse.svg

@@ -0,0 +1,101 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 0.8s Collapse — One-shot transition from yawn-end to sploot */
+      .body-collapse {
+        transform-origin: 7.5px 13px;
+        animation: body-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .shadow-collapse {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .legs-collapse {
+        transform-origin: 7.5px 12px;
+        animation: legs-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .arm-l-collapse {
+        transform-origin: 1px 10px;
+        animation: arm-l-collapse 1s ease-in -0.2s forwards;
+      }
+
+      .arm-r-collapse {
+        transform-origin: 14px 10px;
+        animation: arm-r-collapse 1s ease-in -0.2s forwards;
+      }
+
+      /* Eyes stay shut the entire time */
+      .eyes-shut {
+        transform-origin: 7.5px 9px;
+        transform: scaleY(0.1);
+      }
+
+      /* Body sinks and widens gently — closer to sleeping proportions */
+      @keyframes body-collapse {
+        0% { transform: scale(1.05, 0.95) translate(0, 1px); }
+        40% { transform: scale(1.08, 0.85) translate(0, 1.5px); }
+        70% { transform: scale(1.12, 0.75) translate(0, 2px); }
+        100% { transform: scale(1.15, 0.7) translate(0, 3px); }
+      }
+
+      /* Shadow widens to match sleeping shadow */
+      @keyframes shadow-collapse {
+        0% { transform: scaleX(1.05); opacity: 0.55; }
+        100% { transform: scaleX(1.3); opacity: 0.45; }
+      }
+
+      /* Legs hold still at first, then shrink into short stubs */
+      @keyframes legs-collapse {
+        0%, 40% { transform: translate(0, 0) scaleY(1); }
+        70% { transform: translate(0, -1px) scaleY(0.6); }
+        100% { transform: translate(0, -2px) scaleY(0.33); }
+      }
+
+      /* Arms slide straight down, hugging body sides */
+      @keyframes arm-l-collapse {
+        0% { transform: translate(0, 1px) rotate(-15deg); }
+        50% { transform: translate(0, 2px) rotate(-5deg); }
+        100% { transform: translate(0, 3px) rotate(0deg); }
+      }
+
+      @keyframes arm-r-collapse {
+        0% { transform: translate(0, 1px) rotate(15deg); }
+        50% { transform: translate(0, 2px) rotate(5deg); }
+        100% { transform: translate(0, 3px) rotate(0deg); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-collapse" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.55"/>
+
+  <!-- Legs (shrink upward into short stubs) -->
+  <g class="legs-collapse" fill="#DE886D">
+    <rect x="3" y="12" width="1" height="3"/>
+    <rect x="5" y="12" width="1" height="3"/>
+    <rect x="9" y="12" width="1" height="3"/>
+    <rect x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Body (collapses/melts down) -->
+  <g class="body-collapse">
+    <!-- Torso -->
+    <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    <!-- Left Arm -->
+    <g class="arm-l-collapse">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Right Arm -->
+    <g class="arm-r-collapse">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Eyes stay shut -->
+    <g class="eyes-shut" fill="#000000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-idle-doze.svg

@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Dozing — looping gentle breathing in yawn-end squashed pose, eyes shut */
+      .doze-body {
+        transform-origin: 7.5px 13px;
+        animation: doze-breathe 4s infinite ease-in-out;
+      }
+
+      .doze-shadow {
+        transform-origin: 7.5px 15.5px;
+        animation: doze-shadow 4s infinite ease-in-out;
+      }
+
+      .eyes-shut {
+        transform-origin: 7.5px 9px;
+        transform: scaleY(0.1);
+        transition: transform 0.3s ease-out;
+      }
+
+      .arm-l-doze {
+        transform-origin: 1px 10px;
+        transform: translate(0px, 1px) rotate(-15deg);
+      }
+
+      .arm-r-doze {
+        transform-origin: 14px 10px;
+        transform: translate(0px, 1px) rotate(15deg);
+      }
+
+      @keyframes doze-breathe {
+        0%, 100% { transform: scale(1.05, 0.95) translate(0, 1px); }
+        50% { transform: scale(1.08, 0.92) translate(0, 1.8px); }
+      }
+
+      @keyframes doze-shadow {
+        0%, 100% { transform: scaleX(1.05); opacity: 0.55; }
+        50% { transform: scaleX(1.08); opacity: 0.5; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="doze-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.55"/>
+
+  <!-- Static Legs -->
+  <g id="legs" fill="#DE886D">
+    <rect x="3" y="12" width="1" height="3"/>
+    <rect x="5" y="12" width="1" height="3"/>
+    <rect x="9" y="12" width="1" height="3"/>
+    <rect x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Dozing Body (squashed yawn-end pose + gentle breathing) -->
+  <g class="doze-body">
+    <!-- Torso -->
+    <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    <!-- Left Arm (relaxed down) -->
+    <g class="arm-l-doze">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Right Arm (relaxed down) -->
+    <g class="arm-r-doze">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <!-- Eyes shut (JS can open via style.transform override) -->
+    <g id="eyes-doze" class="eyes-shut" fill="#000000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-idle-follow.svg

@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 4s infinite ease-in-out;
+      }
+
+      #eyes-js, #body-js, #shadow-js {
+        transition: transform 0.2s ease-out;
+      }
+      #shadow-js {
+        transform-origin: 7.5px 15px;
+      }
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes eye-blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow (JS-controlled horizontal shift) -->
+  <g id="shadow-js">
+    <rect x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+  </g>
+
+  <!-- Static Legs (slightly taller for upward body shift) -->
+  <g id="legs" fill="#DE886D">
+    <rect x="3" y="11" width="1" height="4"/>
+    <rect x="5" y="11" width="1" height="4"/>
+    <rect x="9" y="11" width="1" height="4"/>
+    <rect x="11" y="11" width="1" height="4"/>
+  </g>
+
+  <!-- Upper Body (JS body-shift + CSS breathe) -->
+  <g id="body-js">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      <!-- Left Arm -->
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Right Arm -->
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Eyes: JS translate wrapper + CSS blink -->
+      <g id="eyes-js" fill="#000000">
+        <g class="eyes-blink">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>