clawd-desktop 1.0.0

package/assets/svg/clawd-working-conducting.svg

@@ -0,0 +1,220 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* === Standard cycles === */
+      .breathe { transform-origin: 7.5px 13px; animation: breathe 3.2s infinite ease-in-out; }
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+      .shadow-pulse { transform-origin: 7.5px 15.5px; animation: shadow-pulse 3.2s infinite ease-in-out; }
+      @keyframes shadow-pulse {
+        0%, 100% { transform: scale(1); opacity: 0.5; }
+        50% { transform: scale(1.05); opacity: 0.4; }
+      }
+      .eyes-blink { transform-origin: 7.5px 9px; animation: blink 4s infinite; }
+      @keyframes blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+
+      /* === Arc flow: 8s, 4 traversals, speed unchanged === */
+      @keyframes flow-normal {
+        0%     { transform: translate(-2px, 6px); opacity: 0; }
+        6.25%  { transform: translate(0px, 1px); opacity: 1; }
+        12.5%  { transform: translate(7.5px, -3px); opacity: 1; }
+        18.75% { transform: translate(15px, 1px); opacity: 1; }
+        24.5%  { transform: translate(17px, 6px); opacity: 0; }
+        25%    { transform: translate(-2px, 6px); opacity: 0; }
+        31.25% { transform: translate(0px, 1px); opacity: 1; }
+        37.5%  { transform: translate(7.5px, -3px); opacity: 1; }
+        43.75% { transform: translate(15px, 1px); opacity: 1; }
+        49.5%  { transform: translate(17px, 6px); opacity: 0; }
+        50%    { transform: translate(-2px, 6px); opacity: 0; }
+        56.25% { transform: translate(0px, 1px); opacity: 1; }
+        62.5%  { transform: translate(7.5px, -3px); opacity: 1; }
+        68.75% { transform: translate(15px, 1px); opacity: 1; }
+        74.5%  { transform: translate(17px, 6px); opacity: 0; }
+        75%    { transform: translate(-2px, 6px); opacity: 0; }
+        81.25% { transform: translate(0px, 1px); opacity: 1; }
+        87.5%  { transform: translate(7.5px, -3px); opacity: 1; }
+        93.75% { transform: translate(15px, 1px); opacity: 1; }
+        99.5%  { transform: translate(17px, 6px); opacity: 0; }
+        100%   { transform: translate(-2px, 6px); opacity: 0; }
+      }
+      .f1, .f2, .f3, .f4, .f5 {
+        animation-name: flow-normal;
+        animation-duration: 8s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+      .f1 { animation-delay: 0s; }
+      .f2 { animation-delay: -0.4s; }
+      .f3 { animation-delay: -0.8s; }
+      .f4 { animation-delay: -1.2s; }
+      .f5 { animation-delay: -1.6s; }
+
+      /*
+       * Catch cycle: 4s (half of flow 8s, fires 2x per flow cycle)
+       *   12.5% = Block 1 at LEFT
+       *   45%   = Block 3 at PEAK
+       *   67.5% = Block 4 at RIGHT
+       */
+
+      /* === Catch scale (4s cycle) === */
+      .cs1 { transform-origin: 1px 1px; animation: cs1 4s infinite; }
+      @keyframes cs1 {
+        0%, 10%     { transform: scale(1); }
+        12.5%       { transform: scale(2.2); }
+        18%         { transform: scale(2.2); }
+        20%, 100%   { transform: scale(1); }
+      }
+      .cs3 { transform-origin: 1px 1px; animation: cs3 4s infinite; }
+      @keyframes cs3 {
+        0%, 43%     { transform: scale(1); }
+        45%         { transform: scale(2.2); }
+        51%         { transform: scale(2.2); }
+        53%, 100%   { transform: scale(1); }
+      }
+      .cs4 { transform-origin: 1px 1px; animation: cs4 4s infinite; }
+      @keyframes cs4 {
+        0%, 65.5%   { transform: scale(1); }
+        67.5%       { transform: scale(2.2); }
+        73.5%       { transform: scale(2.2); }
+        75.5%, 100% { transform: scale(1); }
+      }
+
+      /* === Dim layers (4s cycle) === */
+      .dim-all { animation: dim-all 4s infinite; }
+      @keyframes dim-all {
+        0%, 8%       { opacity: 1; }
+        10%, 20%     { opacity: 0.12; }
+        22%, 41%     { opacity: 1; }
+        43%, 53%     { opacity: 0.12; }
+        55%, 63.5%   { opacity: 1; }
+        65.5%, 75.5% { opacity: 0.12; }
+        77.5%, 100%  { opacity: 1; }
+      }
+      .dim-23 { animation: dim-23 4s infinite; }
+      @keyframes dim-23 {
+        0%, 41%      { opacity: 1; }
+        43%, 53%     { opacity: 0.12; }
+        55%, 63.5%   { opacity: 1; }
+        65.5%, 75.5% { opacity: 0.12; }
+        77.5%, 100%  { opacity: 1; }
+      }
+      .dim-13 { animation: dim-13 4s infinite; }
+      @keyframes dim-13 {
+        0%, 8%       { opacity: 1; }
+        10%, 20%     { opacity: 0.12; }
+        22%, 63.5%   { opacity: 1; }
+        65.5%, 75.5% { opacity: 0.12; }
+        77.5%, 100%  { opacity: 1; }
+      }
+      .dim-12 { animation: dim-12 4s infinite; }
+      @keyframes dim-12 {
+        0%, 8%       { opacity: 1; }
+        10%, 20%     { opacity: 0.12; }
+        22%, 41%     { opacity: 1; }
+        43%, 53%     { opacity: 0.12; }
+        55%, 100%    { opacity: 1; }
+      }
+
+      /* === Dispatch: eyes + arms (4s cycle) === */
+      .eyes-dispatch { animation: eyes-dispatch 4s infinite; }
+      @keyframes eyes-dispatch {
+        0%, 8%       { transform: translate(0, 0); }
+        10%, 20%     { transform: translate(-1.5px, 0); }
+        23%, 41%     { transform: translate(0, 0); }
+        43%, 53%     { transform: translate(0, -1.5px); }
+        56%, 63%     { transform: translate(0, 0); }
+        65.5%, 75.5% { transform: translate(1.5px, 0); }
+        78%, 100%    { transform: translate(0, 0); }
+      }
+      .arm-l-dispatch { transform-origin: 2px 10px; animation: arm-l-dispatch 4s infinite; }
+      @keyframes arm-l-dispatch {
+        0%, 10%     { transform: rotate(10deg); }
+        12.5%       { transform: rotate(24deg); }
+        18%, 100%   { transform: rotate(10deg); }
+      }
+      .arm-r-dispatch { transform-origin: 13px 10px; animation: arm-r-dispatch 4s infinite; }
+      @keyframes arm-r-dispatch {
+        0%, 43%     { transform: rotate(-10deg); }
+        45%         { transform: rotate(-18deg); }
+        51%, 65.5%  { transform: rotate(-10deg); }
+        67.5%       { transform: rotate(-24deg); }
+        73.5%, 100% { transform: rotate(-10deg); }
+      }
+
+      /* Catch sparks (4s cycle) */
+      .spark-l { animation: spark-l 4s infinite; }
+      @keyframes spark-l {
+        0%, 10%, 21%, 100% { opacity: 0; }
+        12.5%, 18% { opacity: 1; }
+      }
+      .spark-p { animation: spark-p 4s infinite; }
+      @keyframes spark-p {
+        0%, 43%, 54%, 100% { opacity: 0; }
+        45%, 51% { opacity: 1; }
+      }
+      .spark-r { animation: spark-r 4s infinite; }
+      @keyframes spark-r {
+        0%, 65%, 76%, 100% { opacity: 0; }
+        67.5%, 73.5% { opacity: 1; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-pulse" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+  <!-- 5 data blocks: dim(outer) > flow(middle) > scale(inner) > rect -->
+
+  <g class="dim-23"><g class="f1"><g class="cs1">
+    <rect x="0" y="0" width="2" height="2" fill="#FF5252"/>
+  </g></g></g>
+
+  <g class="dim-all"><g class="f2">
+    <rect x="0" y="0" width="2" height="2" fill="#FFC107"/>
+  </g></g>
+
+  <g class="dim-13"><g class="f3"><g class="cs3">
+    <rect x="0" y="0" width="2" height="2" fill="#0082FC"/>
+  </g></g></g>
+
+  <g class="dim-12"><g class="f4"><g class="cs4">
+    <rect x="0" y="0" width="2" height="2" fill="#4CAF50"/>
+  </g></g></g>
+
+  <g class="dim-all"><g class="f5">
+    <rect x="0" y="0" width="2" height="2" fill="#9C27B0"/>
+  </g></g>
+
+  <!-- Catch sparks -->
+  <rect class="spark-l" x="-1.5" y="-0.5" width="1" height="1" fill="#FFF" opacity="0"/>
+  <rect class="spark-p" x="9.5" y="-5" width="1" height="1" fill="#FFF" opacity="0"/>
+  <rect class="spark-r" x="17" y="-0.5" width="1" height="1" fill="#FFF" opacity="0"/>
+
+  <!-- Character Body -->
+  <g class="breathe">
+    <g fill="#DE886D">
+      <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>
+    <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    <g class="eyes-dispatch">
+      <g class="eyes-blink">
+        <rect x="4" y="8" width="1" height="2" fill="#000000"/>
+        <rect x="10" y="8" width="1" height="2" fill="#000000"/>
+      </g>
+    </g>
+    <g class="arm-l-dispatch">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+    <g class="arm-r-dispatch">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+  </g>
+</svg>

package/assets/svg/clawd-working-debugger.svg

@@ -0,0 +1,245 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ═══ Independent animations (always running) ═══ */
+
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 4s infinite linear;
+      }
+
+      .leg-a {
+        animation: sneak-a 0.5s infinite linear;
+        transform-origin: top center;
+        transform-box: fill-box;
+      }
+      .leg-b {
+        animation: sneak-b 0.5s infinite linear;
+        transform-origin: top center;
+        transform-box: fill-box;
+      }
+
+      .glass-wobble {
+        transform-origin: 14px 10px;
+        animation: glass-wobble 3s infinite ease-in-out;
+      }
+
+      /* ═══ Main 14s timeline ═══ */
+
+      .body-main {
+        transform-origin: 7.5px 15px;
+        animation: body-main 14s infinite ease-in-out;
+      }
+
+      .shadow-main {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-main 14s infinite ease-in-out;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l 14s infinite ease-in-out;
+      }
+
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r 14s infinite ease-in-out;
+      }
+
+      .glass-vis {
+        animation: glass-vis 14s infinite linear;
+      }
+
+      .eye-squint {
+        transform-origin: 4.5px 9px;
+        animation: eye-squint 14s infinite ease-in-out;
+      }
+
+      .legs-idle {
+        animation: legs-idle 14s infinite linear;
+      }
+
+      .legs-sneak {
+        animation: legs-sneak 14s infinite linear;
+      }
+
+      /* ═══ Independent keyframes ═══ */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+
+      @keyframes sneak-a {
+        0%, 100% { transform: rotate(0deg) scaleY(1); }
+        50% { transform: rotate(-25deg) scaleY(0.7); }
+      }
+      @keyframes sneak-b {
+        0%, 100% { transform: rotate(-25deg) scaleY(0.7); }
+        50% { transform: rotate(0deg) scaleY(1); }
+      }
+
+      @keyframes glass-wobble {
+        0%, 100% { transform: rotate(0deg) scale(1); }
+        50% { transform: rotate(-3deg) scale(1.05); }
+      }
+
+      /* ═══ Main timeline keyframes (14s) ═══ */
+
+      /* Body: idle → hunch + patrol → idle (both idle phases trimmed) */
+      @keyframes body-main {
+        0%, 3%    { transform: translate(0, 0) rotate(0deg); }
+        15%       { transform: translate(0, 1px) rotate(2deg); }
+        22%       { transform: translate(-2px, 1px) rotate(2deg); }
+        35%       { transform: translate(3px, 1px) rotate(2deg); }
+        48%       { transform: translate(-2px, 1px) rotate(2deg); }
+        61%       { transform: translate(2px, 1px) rotate(2deg); }
+        78%       { transform: translate(0, 1px) rotate(2deg); }
+        90%       { transform: translate(0, 0) rotate(0deg); }
+        96%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      /* Shadow: follows body X, shrinks during detective */
+      @keyframes shadow-main {
+        0%, 3%    { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        15%       { transform: scale(0.9) translate(0, 0); opacity: 0.4; }
+        22%       { transform: scale(0.9) translate(-2px, 0); opacity: 0.4; }
+        35%       { transform: scale(0.9) translate(3px, 0); opacity: 0.4; }
+        48%       { transform: scale(0.9) translate(-2px, 0); opacity: 0.4; }
+        61%       { transform: scale(0.9) translate(2px, 0); opacity: 0.4; }
+        78%       { transform: scale(0.9) translate(0, 0); opacity: 0.4; }
+        90%       { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        96%, 100% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+      }
+
+      /* Left arm: normal → tucked behind → normal */
+      @keyframes arm-l {
+        0%, 5%    { transform: translate(0, 0) rotate(0deg); }
+        15%, 78%  { transform: translate(1px, -1px) rotate(15deg); }
+        90%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      /* Right arm: lifts briefly when glass appears/disappears */
+      @keyframes arm-r {
+        0%, 4%    { transform: translate(0, 0); }
+        7%, 10%   { transform: translate(0, -2px); }
+        13%, 80%  { transform: translate(0, 0); }
+        83%, 86%  { transform: translate(0, -2px); }
+        90%, 100% { transform: translate(0, 0); }
+      }
+
+      /* Magnifying glass: appears while arm is up, vanishes while arm is up */
+      @keyframes glass-vis {
+        0%, 8.9%  { opacity: 0; }
+        9%        { opacity: 1; }
+        83.9%     { opacity: 1; }
+        84%       { opacity: 0; }
+        100%      { opacity: 0; }
+      }
+
+      /* Left eye: normal → squint → normal */
+      @keyframes eye-squint {
+        0%, 10%   { transform: scaleY(1); }
+        15%, 78%  { transform: scaleY(0.5); }
+        86%, 100% { transform: scaleY(1); }
+      }
+
+      /* Idle legs: visible in idle, hidden in detective */
+      @keyframes legs-idle {
+        0%, 13.9% { opacity: 1; }
+        14%       { opacity: 0; }
+        85.9%     { opacity: 0; }
+        86%       { opacity: 1; }
+        100%      { opacity: 1; }
+      }
+
+      /* Sneak legs: hidden in idle, visible in detective */
+      @keyframes legs-sneak {
+        0%, 13.9% { opacity: 0; }
+        14%       { opacity: 1; }
+        85.9%     { opacity: 1; }
+        86%       { opacity: 0; }
+        100%      { opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <g class="shadow-main">
+    <rect x="3" y="15" width="9" height="1" fill="#000000"/>
+  </g>
+
+  <!-- Static Legs (idle phases) -->
+  <g class="legs-idle" 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 Group (main timeline: hunch + walk) -->
+  <g class="body-main">
+
+    <!-- Sneaking Legs (detective phase, inside body so they walk with it) -->
+    <g class="legs-sneak" fill="#DE886D" opacity="0">
+      <rect class="leg-a" x="3" y="13" width="1" height="2"/>
+      <rect class="leg-b" x="5" y="13" width="1" height="2"/>
+      <rect class="leg-a" x="9" y="13" width="1" height="2"/>
+      <rect class="leg-b" x="11" y="13" width="1" height="2"/>
+    </g>
+
+    <!-- Upper Body (breathing) -->
+    <g class="breathe">
+      <!-- Torso -->
+      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+      <!-- Left Arm -->
+      <g class="arm-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Eyes -->
+      <g class="blink" fill="#000000">
+        <!-- Left Eye (squints during detective phase) -->
+        <g class="eye-squint">
+          <rect x="4" y="8" width="1" height="2"/>
+        </g>
+        <!-- Right Eye -->
+        <rect x="10" y="8" width="1" height="2"/>
+      </g>
+
+      <!-- Right Arm + Magnifying Glass (on top of eyes in z-order) -->
+      <g class="arm-r">
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+
+        <!-- Magnifying Glass -->
+        <g class="glass-vis" opacity="0">
+          <g class="glass-wobble">
+            <g transform="translate(13.5, 9.5)">
+              <!-- Handle -->
+              <polygon points="0.5,1.5 1.5,0.5 -1,-2 -2,-1" fill="#795548"/>
+              <!-- Rim -->
+              <rect x="-6" y="-5" width="6" height="6" fill="#546E7A" rx="2"/>
+              <!-- Magnified Eye -->
+              <rect x="-4" y="-3.5" width="2" height="3" fill="#000000"/>
+              <!-- Lens -->
+              <rect x="-5.5" y="-4.5" width="5" height="5" fill="#E0F7FA" rx="1.5" opacity="0.6"/>
+              <!-- Glare -->
+              <rect x="-4.5" y="-3.5" width="1.5" height="1.5" fill="#FFFFFF" opacity="0.8"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/assets/svg/clawd-working-juggling.svg

@@ -0,0 +1,183 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ===== Independent sub-animations ===== */
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 4s infinite;
+      }
+
+      /* ===== Body rock: left-right sway + micro-dip ===== */
+      .body-rock {
+        transform-origin: 7.5px 15px;
+        animation: rock 1.2s infinite ease-in-out;
+      }
+
+      /* ===== Shadow ===== */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-rock 1.2s infinite ease-in-out;
+      }
+
+      /* ===== Arms: alternate catch/throw, synced with rock ===== */
+      .arm-juggle-l {
+        transform-origin: 1px 10px;
+        animation: arm-jl 1.2s infinite ease-in-out;
+      }
+      .arm-juggle-r {
+        transform-origin: 14px 10px;
+        animation: arm-jr 1.2s infinite ease-in-out;
+      }
+
+      /* ===== Eyes: track balls ===== */
+      .eye-track {
+        animation: eye-track 2.4s infinite ease-in-out;
+      }
+
+      /* ===== Juggling packets: parabolic arc ===== */
+      .packet {
+        animation: juggle 1.2s infinite;
+      }
+      .p1 { animation-delay: 0s; fill: #FF5252; }
+      .p2 { animation-delay: -0.4s; fill: #FFC107; }
+      .p3 { animation-delay: -0.8s; fill: #4CAF50; }
+
+      /* (no sweat — juggling is a steady state, not emergency) */
+
+      /* ===== Keyframes ===== */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+
+      /* Body: center → left-dip → center → right-dip → center */
+      @keyframes rock {
+        0%, 50%, 100% { transform: rotate(0deg) translateY(0); }
+        25% { transform: rotate(-3deg) translateY(0.3px); }
+        75% { transform: rotate(3deg) translateY(0.3px); }
+      }
+
+      /* Shadow: sway with body */
+      @keyframes shadow-rock {
+        0%, 50%, 100% { transform: scaleX(1); opacity: 0.5; }
+        25% { transform: scaleX(1.03) translateX(-0.3px); opacity: 0.52; }
+        75% { transform: scaleX(1.03) translateX(0.3px); opacity: 0.52; }
+      }
+
+      /* Left arm: up at 25% (catch left), down at 75% */
+      @keyframes arm-jl {
+        0%, 50%, 100% { transform: rotate(20deg); }
+        25% { transform: rotate(35deg); }
+        75% { transform: rotate(5deg); }
+      }
+
+      /* Right arm: down at 25%, up at 75% (catch right) */
+      @keyframes arm-jr {
+        0%, 50%, 100% { transform: rotate(-20deg); }
+        25% { transform: rotate(-5deg); }
+        75% { transform: rotate(-35deg); }
+      }
+
+      /* Eyes: track ball arc left-right */
+      @keyframes eye-track {
+        0%, 100% { transform: translate(-1px, -1px); }
+        15% { transform: translate(0, -1.5px); }
+        30% { transform: translate(1px, -1px); }
+        45% { transform: translate(1px, 0.5px); }
+        50% { transform: translate(1px, -1px); }
+        65% { transform: translate(0, -1.5px); }
+        80% { transform: translate(-1px, -1px); }
+        90% { transform: translate(-1px, 0.5px); }
+      }
+
+      /* Juggle: parabolic arc between hands, hang at top
+         Packet origin is x=-1 y=-1 (2x2 rect center ~0,0)
+         Left hand: x~1, y~10  → translate(2, 10)
+         Right hand: x~14, y~10 → translate(14, 10)
+         Arc peak: y ~ -1 (well above head) */
+      @keyframes juggle {
+        0%   { transform: translate(2px, 10px); }
+        8%   { transform: translate(4px, 4px); }
+        18%  { transform: translate(6px, 0px); }
+        30%  { transform: translate(8px, -1px); }
+        42%  { transform: translate(10px, 0px); }
+        50%  { transform: translate(14px, 10px); }
+        58%  { transform: translate(12px, 4px); }
+        68%  { transform: translate(10px, 0px); }
+        80%  { transform: translate(8px, -1px); }
+        92%  { transform: translate(4px, 4px); }
+        100% { transform: translate(2px, 10px); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
+
+  <!-- Juggling Packets -->
+  <g>
+    <!-- Red ball -->
+    <g class="packet p1">
+      <circle cx="0" cy="0" r="1.2" fill="#FF5252"/>
+      <circle cx="-0.35" cy="-0.35" r="0.45" fill="#FF8A80" opacity="0.7"/>
+      <circle cx="0.3" cy="0.4" r="0.6" fill="#D32F2F" opacity="0.3"/>
+    </g>
+    <!-- Yellow ball -->
+    <g class="packet p2">
+      <circle cx="0" cy="0" r="1.2" fill="#FFC107"/>
+      <circle cx="-0.35" cy="-0.35" r="0.45" fill="#FFE082" opacity="0.7"/>
+      <circle cx="0.3" cy="0.4" r="0.6" fill="#FFA000" opacity="0.3"/>
+    </g>
+    <!-- Green ball -->
+    <g class="packet p3">
+      <circle cx="0" cy="0" r="1.2" fill="#4CAF50"/>
+      <circle cx="-0.35" cy="-0.35" r="0.45" fill="#81C784" opacity="0.7"/>
+      <circle cx="0.3" cy="0.4" r="0.6" fill="#388E3C" opacity="0.3"/>
+    </g>
+  </g>
+
+  <!-- Static Legs -->
+  <g fill="#DE886D">
+    <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>
+
+  <!-- Upper Body -->
+  <g class="body-rock">
+    <g class="breathe">
+      <!-- Torso -->
+      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+      <!-- Left Arm -->
+      <g class="arm-juggle-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Right Arm -->
+      <g class="arm-juggle-r">
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Eyes -->
+      <g class="eye-track" fill="#000">
+        <g class="blink">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+
+    </g>
+  </g>
+</svg>