tokentracker-cli 0.5.10 → 0.5.13

package/dashboard/dist/clawd/idle/look.svg

@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 10-Second Idle Loop — Looking Around + Scratching (no yawn) */
+      .action-body {
+        transform-origin: 7.5px 13px;
+        animation: action-body 10s infinite ease-in-out;
+      }
+
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-action 10s infinite ease-in-out;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-idle 10s infinite ease-in-out;
+      }
+
+      .eyes-look {
+        animation: eye-track 10s infinite ease-in-out;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 10s infinite linear;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes action-body {
+        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scale(1,1) translate(0,0); }
+        /* Look Right */
+        12%, 22% { transform: scale(1,1) translate(1px, 0); }
+        /* Look Left */
+        48%, 57% { transform: scale(1,1) translate(-1px, 0); }
+        /* Scratch Lean */
+        33%, 38% { transform: scale(1,1) translate(0.5px, 0); }
+      }
+
+      @keyframes shadow-action {
+        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scaleX(1) translate(0,0); opacity: 0.5; }
+        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
+        48%, 57% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
+        33%, 38% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%, 10%, 25%, 43%, 60%, 100% { transform: translate(0, 0); }
+        12%, 22% { transform: translate(3px, 0); }  /* Look Right */
+        48%, 57% { transform: translate(-3px, 0); }  /* Look Left */
+      }
+
+      @keyframes eye-blink {
+        0%, 3%, 7%, 18%, 22%, 47%, 51%, 78%, 82%, 100% { transform: scaleY(1); }
+        5%, 20%, 49%, 80% { transform: scaleY(0.1); }
+      }
+
+      @keyframes arm-l-idle {
+        0%, 30% { transform: translate(0,0) rotate(0deg); }
+        /* Scratching Sequence */
+        33% { transform: translate(1px, -3px) rotate(15deg); }
+        34% { transform: translate(1.5px, -4px) rotate(35deg); }
+        35% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        36% { transform: translate(1.5px, -4px) rotate(35deg); }
+        37% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        38% { transform: translate(1.5px, -4px) rotate(35deg); }
+        39% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        42%, 100% { transform: translate(0,0) rotate(0deg); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- 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>
+
+  <!-- Animated Upper Body -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      <!-- Left Arm (scratches) -->
+      <g class="arm-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <!-- Right Arm (static) -->
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Eyes -->
+      <g class="eyes-look" 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>

package/dashboard/dist/clawd/idle/yawn.svg

@@ -0,0 +1,158 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 5-Second Yawn — One-shot, ends in squashed/eyes-closed pose */
+      .action-body {
+        transform-origin: 7.5px 13px;
+        animation: action-body-yawn 3.8s ease-in-out forwards;
+      }
+
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-yawn 3.8s ease-in-out forwards;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-yawn 3.8s ease-in-out forwards;
+      }
+
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r-yawn 3.8s ease-in-out forwards;
+      }
+
+      .eyes-look {
+        animation: eye-track-yawn 3.8s ease-in-out forwards;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink-yawn 3.8s linear forwards;
+      }
+
+      .yawn-mouth {
+        transform-origin: 7.5px 11px;
+        animation: yawn-mouth-anim 3.8s ease-in-out forwards;
+        opacity: 0;
+      }
+
+      .yawn-tear {
+        animation: tear-fall 3.8s ease-in-out forwards;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      /* Body: neutral → stretch up → peak → squash down (hold from 78%) */
+      @keyframes action-body-yawn {
+        0%, 12% { transform: scale(1, 1) translate(0, 0); }
+        32% { transform: scale(0.95, 1.05) translate(0, -1px); }
+        50% { transform: scale(0.9, 1.1) translate(0, -2px); }
+        78%, 100% { transform: scale(1.05, 0.95) translate(0, 1px); }
+      }
+
+      @keyframes shadow-yawn {
+        0%, 12% { transform: scaleX(1); opacity: 0.5; }
+        32% { transform: scaleX(0.95); opacity: 0.45; }
+        50% { transform: scaleX(0.9); opacity: 0.4; }
+        78%, 100% { transform: scaleX(1.05); opacity: 0.55; }
+      }
+
+      /* Eyes look slightly up during stretch, then neutral */
+      @keyframes eye-track-yawn {
+        0%, 18% { transform: translate(0, 0); }
+        32%, 68% { transform: translate(0, -1px); }
+        82%, 100% { transform: translate(0, 0); }
+      }
+
+      /* Blink once, then eyes shut for the yawn and stay shut */
+      @keyframes eye-blink-yawn {
+        0%, 18% { transform: scaleY(1); }
+        24% { transform: scaleY(0.1); }
+        30% { transform: scaleY(1); }
+        42%, 100% { transform: scaleY(0.1); }
+      }
+
+      /* Both arms stretch outward during yawn, then relax down */
+      @keyframes arm-l-yawn {
+        0%, 12% { transform: translate(0, 0) rotate(0deg); }
+        38% { transform: translate(-1px, -2px) rotate(45deg); }
+        50% { transform: translate(-2px, -3px) rotate(80deg); }
+        78%, 100% { transform: translate(0, 1px) rotate(-15deg); }
+      }
+
+      @keyframes arm-r-yawn {
+        0%, 12% { transform: translate(0, 0) rotate(0deg); }
+        38% { transform: translate(1px, -2px) rotate(-45deg); }
+        50% { transform: translate(2px, -3px) rotate(-80deg); }
+        78%, 100% { transform: translate(0, 1px) rotate(15deg); }
+      }
+
+      /* Mouth opens wide then closes */
+      @keyframes yawn-mouth-anim {
+        0%, 18% { opacity: 0; transform: scale(0.1); }
+        32% { opacity: 1; transform: scale(0.5, 0.2); }
+        50% { opacity: 1; transform: scale(1.1, 1.4); }
+        68% { opacity: 1; transform: scale(0.6, 0.4); }
+        80%, 100% { opacity: 0; transform: scale(0.1); }
+      }
+
+      /* Tiny tear slides down during peak yawn */
+      @keyframes tear-fall {
+        0%, 45% { opacity: 0; transform: translateY(0); }
+        50% { opacity: 1; transform: translateY(0); }
+        68% { opacity: 1; transform: translateY(2.5px); }
+        80%, 100% { opacity: 0; transform: translateY(3px); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- 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>
+
+  <!-- Animated Upper Body -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" 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>
+      <!-- Right Arm -->
+      <g class="arm-r">
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <!-- Yawning Mouth (hidden initially) -->
+      <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
+      <!-- Eyes -->
+      <g class="eyes-look" 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>
+      <!-- Tear -->
+      <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/mini/alert.svg

@@ -0,0 +1,129 @@
+<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;
+      }
+
+      .arm-alert {
+        transform-origin: 2px 9px;
+        animation: alert-arm 4s infinite ease-in-out;
+      }
+
+      /* Normal rect eyes: visible first, hidden after blink */
+      .eyes-rect {
+        transform-origin: 7.5px 9px; /* eye vertical center for blink */
+        animation: rect-vis 4s infinite step-end, rect-move 4s infinite ease-in-out;
+      }
+
+      /* xmark squint eyes: hidden first, visible after switch */
+      .eyes-xmark {
+        visibility: hidden;
+        animation: xmark-vis 4s infinite step-end;
+      }
+
+      .alert-pop {
+        animation: alert-flash 4s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes alert-arm {
+        0%, 49% { transform: rotate(0deg); }
+        51% { transform: rotate(20deg); }
+        60% { transform: rotate(-8deg); }
+        64% { transform: rotate(20deg); }
+        68% { transform: rotate(-8deg); }
+        72% { transform: rotate(20deg); }
+        76% { transform: rotate(-8deg); }
+        80% { transform: rotate(20deg); }
+        84% { transform: rotate(-8deg); }
+        88% { transform: rotate(20deg); }
+        92%, 100% { transform: rotate(0deg); }
+      }
+
+      /* Rect eyes: center, wait for exclamation, slowly look left, back, pause, blink, switch */
+      @keyframes rect-move {
+        0%, 16% { transform: translate(0, 0) scaleY(1); }
+        22%, 28% { transform: translate(-2px, 0) scaleY(1); }
+        34% { transform: translate(0, 0) scaleY(1); }
+        36% { transform: translate(0, 0) scaleY(0.1); }
+        37%, 39% { transform: translate(0, 0) scaleY(1); }
+        41% { transform: translate(0, 0) scaleY(0.1); }
+        42%, 100% { transform: translate(0, 0) scaleY(1); }
+      }
+
+      /* Rect eyes visibility: visible → hidden at 22%, back at 91% */
+      @keyframes rect-vis {
+        0% { visibility: visible; }
+        42% { visibility: hidden; }
+        91% { visibility: visible; }
+      }
+
+      /* xmark eyes visibility: hidden at start, visible at 42%, hidden at 89% */
+      @keyframes xmark-vis {
+        0% { visibility: hidden; }
+        42% { visibility: visible; }
+        89% { visibility: hidden; }
+      }
+
+      @keyframes alert-flash {
+        0%, 8% { opacity: 0; transform: scale(0.5); }
+        12% { opacity: 1; transform: translate(0, -4px) scale(1.2); }
+        20%, 70% { opacity: 1; transform: translate(0, -4px) scale(1); }
+        85%, 100% { opacity: 0; transform: translate(0, -6px) scale(0.8); }
+      }
+    </style>
+  </defs>
+
+  <!-- Entire character leaning -->
+  <g transform="rotate(-12, 7.5, 15)">
+
+    <!-- Legs -->
+    <g 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>
+
+    <g id="body-js">
+      <g class="breathe-anim">
+        <!-- Torso -->
+        <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+        <!-- Left Arm — still then shake -->
+        <g class="arm-alert">
+          <rect x="-1.5" y="9" width="4.5" height="2" fill="#DE886D"/>
+        </g>
+
+        <!-- Right Arm -->
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+
+        <!-- Phase 1: Normal rect eyes (look left at exclamation, then blink away) -->
+        <g class="eyes-rect" fill="#000000">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+
+        <!-- Phase 2: >< squint eyes (appear after blink) -->
+        <g class="eyes-xmark" fill="none" stroke="#000000" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="4,8 5.5,9 4,10"/>
+          <polyline points="11,8 9.5,9 11,10"/>
+        </g>
+      </g>
+    </g>
+
+  </g>
+
+  <!-- Exclamation mark (outside rotation = stays vertical) -->
+  <g class="alert-pop" fill="#FF3D00">
+    <rect x="-8" y="5" width="2" height="4"/>
+    <rect x="-8" y="10" width="2" height="2"/>
+  </g>
+</svg>

package/dashboard/dist/clawd/mini/crabwalk.svg

@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .body-hunch {
+        transform-origin: 7.5px 15px;
+        animation: hunch-walk 2s infinite alternate ease-in-out;
+      }
+      .leg-1 { animation: sneak-1 0.5s infinite linear; transform-origin: top center; transform-box: fill-box; }
+      .leg-2 { animation: sneak-2 0.5s infinite linear; transform-origin: top center; transform-box: fill-box; }
+      .shadow-sneak {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-shift 2s infinite alternate ease-in-out;
+      }
+
+      /* Sneaking forward and backward */
+      @keyframes hunch-walk {
+        0% { transform: translate(-2px, 1px) rotate(2deg); }
+        100% { transform: translate(3px, 1px) rotate(2deg); }
+      }
+      @keyframes shadow-shift {
+        0% { transform: translateX(-2px) scale(0.9); opacity: 0.4; }
+        100% { transform: translateX(3px) scale(0.9); opacity: 0.4; }
+      }
+
+      /* Fast tiptoe / sneak leg movement */
+      @keyframes sneak-1 {
+        0%, 100% { transform: rotate(0deg) scaleY(1); }
+        50% { transform: rotate(-25deg) scaleY(0.7); }
+      }
+      @keyframes sneak-2 {
+        0%, 100% { transform: rotate(-25deg) scaleY(0.7); }
+        50% { transform: rotate(0deg) scaleY(1); }
+      }
+
+      /* Eyes: look right (toward destination), occasionally glance back and blink */
+      .eyes-crabwalk {
+        transform-origin: 7.5px 9px;
+        animation: crab-eyes 5s infinite ease-in-out;
+      }
+      @keyframes crab-eyes {
+        0%, 55%  { transform: translateX(2px) scaleY(1); }
+        62%      { transform: translateX(0) scaleY(1); }
+        66%      { transform: translateX(0) scaleY(0.1); }
+        70%      { transform: translateX(0) scaleY(1); }
+        75%      { transform: translateX(0) scaleY(0.1); }
+        80%, 85% { transform: translateX(0) scaleY(1); }
+        92%, 100% { transform: translateX(2px) scaleY(1); }
+      }
+    </style>
+  </defs>
+
+  <rect id="ground-shadow" class="shadow-sneak" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <g class="body-hunch">
+    <g id="legs" fill="#DE886D">
+      <rect id="outer-left-leg" class="leg-1" x="3" y="13" width="1" height="2"/>
+      <rect id="inner-left-leg" class="leg-2" x="5" y="13" width="1" height="2"/>
+      <rect id="inner-right-leg" class="leg-1" x="9" y="13" width="1" height="2"/>
+      <rect id="outer-right-leg" class="leg-2" x="11" y="13" width="1" height="2"/>
+    </g>
+
+    <g id="body-color-group" fill="#DE886D">
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      <!-- Left arm (normal pose) -->
+      <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      <!-- Right arm (normal pose, no magnifying glass) -->
+      <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+    </g>
+
+    <!-- Eyes: look right, occasionally glance back + blink -->
+    <g class="eyes-crabwalk" fill="#000000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/mini/enter-sleep.svg

@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="-15 -25 45 45"
+  shape-rendering="crispEdges">
+    <style>
+      #body-js {
+        animation: bodyEnter 3.2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
+      }
+
+      #left-arm {
+        transform-origin: 2px 9px;
+        animation: armEnterSleep 3.2s ease-in-out 1 forwards;
+      }
+
+      /* Eyes stay closed — wide dashes like sleeping pose */
+
+      @keyframes bodyEnter {
+        0% {
+          transform: translate(25px, 0px);
+        }
+        18% {
+          transform: translate(-3px, -0.8px);
+        }
+        24% {
+          transform: translate(1.4px, 0.4px);
+        }
+        30%,
+        100% {
+          transform: translate(0px, 0px);
+        }
+      }
+
+      /* Arm extends out gently, no waving */
+      @keyframes armEnterSleep {
+        0%,
+        30% {
+          transform: scaleX(0.05) rotate(0deg);
+        }
+        50% {
+          transform: scaleX(1) rotate(0deg);
+        }
+        100% {
+          transform: scaleX(1) rotate(0deg);
+        }
+      }
+    </style>
+    <g id="body-js">
+      <g transform="rotate(-12, 7.5, 15)">
+        <rect id="left-arm" x="-1.5" y="9" width="4.5" height="2" fill="#DE886D"/>
+
+        <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+
+        <g id="eyes-js" fill="#000000">
+          <rect x="3.5" y="8.8" width="2" height="0.4"/>
+          <rect x="9.5" y="8.8" width="2" height="0.4"/>
+        </g>
+
+        <g 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>
+      </g>
+    </g>
+  </svg>

package/dashboard/dist/clawd/mini/enter.svg

@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="-15 -25 45 45"
+  shape-rendering="crispEdges">
+    <style>
+      #body-js {
+        animation: bodyEnter 3.2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
+      }
+
+      #left-arm {
+        transform-origin: 2px 9px;
+        animation: armEnterWave 3.2s ease-in-out 1 forwards;
+      }
+
+      #eyes-js {
+        transform-origin: 7.5px 9px;
+        animation: eyesEnter 3.2s ease-in-out 1 forwards;
+      }
+
+      @keyframes bodyEnter {
+        0% {
+          transform: translate(25px, 0px);
+        }
+        18% {
+          transform: translate(-3px, -0.8px);
+        }
+        24% {
+          transform: translate(1.4px, 0.4px);
+        }
+        30% {
+          transform: translate(0px, 0px);
+        }
+        65% {
+          transform: translate(0px, 0px);
+        }
+        76% {
+          transform: translate(0.5px, 0.2px);
+        }
+        88%,
+        100% {
+          transform: translate(0px, 0px);
+        }
+      }
+
+      @keyframes armEnterWave {
+        0%,
+        30% {
+          transform: scaleX(0.05) rotate(0deg);
+        }
+        38% {
+          transform: scaleX(1.18) rotate(-8deg);
+        }
+        43% {
+          transform: scaleX(0.96) rotate(6deg);
+        }
+        48% {
+          transform: scaleX(1) rotate(-14deg);
+        }
+        53% {
+          transform: scaleX(1) rotate(16deg);
+        }
+        58% {
+          transform: scaleX(1) rotate(-12deg);
+        }
+        63% {
+          transform: scaleX(1) rotate(9deg);
+        }
+        70%,
+        100% {
+          transform: scaleX(1) rotate(0deg);
+        }
+      }
+
+      @keyframes eyesEnter {
+        0%,
+        65% {
+          transform: translateX(-1px) scaleY(1);
+        }
+        74% {
+          transform: translateX(-0.6px) scaleY(1);
+        }
+        80% {
+          transform: translateX(-0.1px) scaleY(1);
+        }
+        84% {
+          transform: translateX(0px) scaleY(0.1);
+        }
+        88% {
+          transform: translateX(0px) scaleY(1.08);
+        }
+        92%,
+        100% {
+          transform: translateX(0px) scaleY(1);
+        }
+      }
+    </style>
+    <g id="body-js">
+      <g transform="rotate(-12, 7.5, 15)">
+        <rect id="left-arm" x="-1.5" y="9" width="4.5" height="2" fill="#DE886D"/>
+
+        <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+
+        <g id="eyes-js" fill="#000000">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+
+        <g 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>
+      </g>
+    </g>
+  </svg>