mocode-pet-app 0.1.0 → 1.0.0

package/assets/mascot.svg

@@ -53,6 +53,4 @@
   <!-- Legs / feet -->
   <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#cyanGrad)" stroke-width="2.5"/>
   <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#cyanGrad)" stroke-width="2.5"/>
-  <rect x="66" y="222" width="40" height="10" rx="5" fill="#2afadf" fill-opacity="0.6"/>
-  <rect x="150" y="222" width="40" height="10" rx="5" fill="#2afadf" fill-opacity="0.6"/>
 </svg>

package/assets/pets/01-robo-cat.svg

@@ -0,0 +1,56 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Ears -->
+  <path d="M52 62 L34 24 L78 48 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M204 62 L222 24 L178 48 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="28" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Cat mouth -->
+  <path d="M118 148 L128 156 L138 148" stroke="#2afadf" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+
+  <!-- Whiskers -->
+  <line x1="46" y1="128" x2="76" y2="124" stroke="url(#accentGrad)" stroke-width="2" stroke-linecap="round"/>
+  <line x1="46" y1="140" x2="76" y2="140" stroke="url(#accentGrad)" stroke-width="2" stroke-linecap="round"/>
+  <line x1="210" y1="128" x2="180" y2="124" stroke="url(#accentGrad)" stroke-width="2" stroke-linecap="round"/>
+  <line x1="210" y1="140" x2="180" y2="140" stroke="url(#accentGrad)" stroke-width="2" stroke-linecap="round"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Tail -->
+  <path d="M216 180 Q246 190 240 150" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none"/>
+  </g>
+</svg>

package/assets/pets/02-robo-dog.svg

@@ -0,0 +1,53 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffb74d"/>
+      <stop offset="1" stop-color="#ff8a65"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Floppy ears -->
+  <path d="M50 68 Q16 88 26 142 Q42 152 58 122 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M206 68 Q240 88 230 142 Q214 152 198 122 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="28" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Nose + tongue -->
+  <ellipse cx="128" cy="145" rx="9" ry="6" fill="#ff8a65" filter="url(#glow)"/>
+  <rect x="120" y="153" width="16" height="14" rx="6" fill="#ff8fa3"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Wagging tail -->
+  <path d="M216 178 Q250 168 244 138" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none">
+    <animateTransform attributeName="transform" type="rotate" values="0 216 178;18 216 178;0 216 178" dur="0.8s" repeatCount="indefinite"/>
+  </path>
+  </g>
+</svg>

package/assets/pets/03-robo-fox.svg

@@ -0,0 +1,53 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff7043"/>
+      <stop offset="1" stop-color="#ffab91"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Pointed ears with white tips -->
+  <path d="M56 60 L30 18 L82 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M200 60 L226 18 L174 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="34" cy="24" r="4" fill="#fff" fill-opacity="0.85"/>
+  <circle cx="222" cy="24" r="4" fill="#fff" fill-opacity="0.85"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="28" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ff7043" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Sharp muzzle line -->
+  <path d="M112 150 L128 158 L144 150" stroke="#ff7043" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Bushy tail with white tip -->
+  <path d="M216 180 Q252 186 248 142 Q244 120 220 128" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="230" cy="132" r="10" fill="#fff" fill-opacity="0.85"/>
+  </g>
+</svg>

package/assets/pets/04-robo-panda.svg

@@ -0,0 +1,52 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#eef2f6"/>
+      <stop offset="1" stop-color="#cbd5e0"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Round black ears -->
+  <circle cx="58" cy="42" r="26" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="198" cy="42" r="26" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="28" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Black eye patches -->
+  <ellipse cx="93" cy="112" rx="22" ry="28" fill="#161a1e"/>
+  <ellipse cx="163" cy="112" rx="22" ry="28" fill="#161a1e"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Nose + mouth -->
+  <ellipse cx="128" cy="142" rx="8" ry="6" fill="#161a1e"/>
+  <rect x="112" y="150" width="32" height="5" rx="2.5" fill="#161a1e" fill-opacity="0.7"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="#161a1e" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/assets/pets/05-robo-owl.svg

@@ -0,0 +1,46 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b388ff"/>
+      <stop offset="1" stop-color="#7c4dff"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Ear tufts -->
+  <path d="M60 58 L50 26 L76 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M196 58 L206 26 L180 46 Z" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="40" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Big round eyes -->
+  <circle cx="93" cy="118" r="30" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="163" cy="118" r="30" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="93" cy="118" r="13" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="13;3;13" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="163" cy="118" r="13" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="13;3;13" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Beak -->
+  <path d="M120 156 L128 172 L136 156 Z" fill="#ffb74d"/>
+
+  <!-- Folded wing arms -->
+  <path d="M40 130 Q14 150 26 186" stroke="url(#accentGrad)" stroke-width="10" stroke-linecap="round" fill="none"/>
+  <path d="M216 130 Q242 150 230 186" stroke="url(#accentGrad)" stroke-width="10" stroke-linecap="round" fill="none"/>
+
+  <!-- Feet / talons -->
+  <rect x="76" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="24" rx="6" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/assets/pets/06-robo-bunny.svg

@@ -0,0 +1,52 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff6ec7"/>
+      <stop offset="1" stop-color="#f48fb1"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Long ears (top kept at y=12 to leave clearance for the idle float animation's -6px translateY, so ear tips don't get clipped by the viewBox edge) -->
+  <rect x="66" y="12" width="22" height="54" rx="11" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="168" y="12" width="22" height="54" rx="11" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <rect x="72" y="20" width="10" height="30" rx="5" fill="#ff6ec7" fill-opacity="0.5"/>
+  <rect x="174" y="20" width="10" height="30" rx="5" fill="#ff6ec7" fill-opacity="0.5"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="30" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ff6ec7" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Nose -->
+  <path d="M122 148 L128 156 L134 148 Z" fill="#ff6ec7" filter="url(#glow)"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Fluffy tail -->
+  <circle cx="224" cy="184" r="16" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  </g>
+</svg>

package/assets/pets/07-robo-frog.svg

@@ -0,0 +1,39 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#69f0ae"/>
+      <stop offset="1" stop-color="#00e676"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Body / head (wide, squat) -->
+  <rect x="34" y="66" width="188" height="134" rx="36" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Bulging top eyes -->
+  <circle cx="88" cy="60" r="26" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="168" cy="60" r="26" fill="#0a1420" stroke="url(#accentGrad)" stroke-width="2"/>
+  <circle cx="88" cy="60" r="11" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="11;2;11" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="168" cy="60" r="11" fill="url(#accentGrad)" filter="url(#glow)">
+    <animate attributeName="r" values="11;2;11" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Screen mouth panel -->
+  <rect x="60" y="110" width="136" height="72" rx="14" fill="#0a1420" stroke="#69f0ae" stroke-opacity="0.4" stroke-width="1.5"/>
+  <path d="M76 150 Q128 176 180 150" stroke="url(#accentGrad)" stroke-width="5" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+
+  <!-- Bent frog legs -->
+  <path d="M50 176 Q20 190 30 224 Q46 236 56 214" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <path d="M206 176 Q236 190 226 224 Q210 236 200 214" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  </g>
+</svg>

package/assets/pets/08-robo-bear.svg

@@ -0,0 +1,48 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffb74d"/>
+      <stop offset="1" stop-color="#ffa726"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Round ears -->
+  <circle cx="56" cy="46" r="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <circle cx="200" cy="46" r="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="30" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="72" width="136" height="90" rx="14" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="104" width="14" height="26" rx="6" fill="url(#accentGrad)">
+      <animate attributeName="height" values="26;2;26" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="104;117;104" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Round snout patch -->
+  <ellipse cx="128" cy="148" rx="26" ry="18" fill="#0a1420" stroke="#ffb74d" stroke-opacity="0.5" stroke-width="1.5"/>
+  <ellipse cx="128" cy="142" rx="6" ry="5" fill="#ffb74d"/>
+
+  <!-- Legs / feet -->
+  <rect x="72" y="200" width="24" height="26" rx="9" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="24" height="26" rx="9" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  </g>
+</svg>

package/assets/pets/09-robo-penguin.svg

@@ -0,0 +1,49 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2afadf"/>
+      <stop offset="1" stop-color="#42a5f5"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Body (oval) -->
+  <ellipse cx="128" cy="140" rx="88" ry="100" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+  <!-- Belly patch -->
+  <ellipse cx="128" cy="156" rx="52" ry="66" fill="#eef2f6"/>
+
+  <!-- Screen face -->
+  <rect x="76" y="86" width="104" height="62" rx="14" fill="#0a1420" stroke="#2afadf" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <rect x="98" y="108" width="12" height="20" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="20;2;20" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="108;117;108" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="146" y="108" width="12" height="20" rx="5" fill="url(#accentGrad)">
+      <animate attributeName="height" values="20;2;20" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="108;117;108" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Beak -->
+  <path d="M116 156 L128 172 L140 156 Z" fill="#ffb74d"/>
+
+  <!-- Flipper arms -->
+  <path d="M42 148 Q22 172 40 200" stroke="url(#bodyGrad)" stroke-width="20" stroke-linecap="round" fill="none"/>
+  <path d="M214 148 Q234 172 216 200" stroke="url(#bodyGrad)" stroke-width="20" stroke-linecap="round" fill="none"/>
+
+  <!-- Feet -->
+  <ellipse cx="104" cy="234" rx="16" ry="8" fill="#ffb74d"/>
+  <ellipse cx="152" cy="234" rx="16" ry="8" fill="#ffb74d"/>
+  </g>
+</svg>

package/assets/pets/10-robo-dino.svg

@@ -0,0 +1,56 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bodyGrad" x1="48" y1="48" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1b263b"/>
+      <stop offset="1" stop-color="#0d1b2a"/>
+    </linearGradient>
+    <linearGradient id="accentGrad" x1="60" y1="90" x2="196" y2="170" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#69f0ae"/>
+      <stop offset="1" stop-color="#00c853"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Back spikes -->
+  <path d="M64 52 L76 24 L90 52 Z" fill="url(#accentGrad)"/>
+  <path d="M110 46 L122 16 L136 46 Z" fill="url(#accentGrad)"/>
+  <path d="M156 52 L168 24 L182 52 Z" fill="url(#accentGrad)"/>
+
+  <!-- Body / head -->
+  <rect x="40" y="50" width="176" height="150" rx="24" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="3"/>
+
+  <!-- Screen face -->
+  <rect x="60" y="76" width="136" height="86" rx="14" fill="#0a1420" stroke="#69f0ae" stroke-opacity="0.4" stroke-width="1.5"/>
+
+  <!-- Red eyes -->
+  <g filter="url(#glow)">
+    <rect x="86" y="106" width="14" height="24" rx="6" fill="#ff5252">
+      <animate attributeName="height" values="24;2;24" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="106;118;106" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="156" y="106" width="14" height="24" rx="6" fill="#ff5252">
+      <animate attributeName="height" values="24;2;24" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+      <animate attributeName="y" values="106;118;106" keyTimes="0;0.5;1" dur="3.2s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- Jagged mouth -->
+  <path d="M108 148 L118 156 L128 148 L138 156 L148 148" stroke="#69f0ae" stroke-width="4" fill="none" stroke-linecap="round" filter="url(#glow)"/>
+
+  <!-- Small arms -->
+  <path d="M40 130 Q24 138 26 156" stroke="url(#accentGrad)" stroke-width="7" stroke-linecap="round" fill="none"/>
+  <path d="M216 130 Q232 138 230 156" stroke="url(#accentGrad)" stroke-width="7" stroke-linecap="round" fill="none"/>
+
+  <!-- Legs / feet -->
+  <rect x="76" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+  <rect x="160" y="200" width="20" height="26" rx="8" fill="url(#bodyGrad)" stroke="url(#accentGrad)" stroke-width="2.5"/>
+
+  <!-- Spiky tail -->
+  <path d="M216 176 Q248 178 244 150" stroke="url(#accentGrad)" stroke-width="8" stroke-linecap="round" fill="none"/>
+  <path d="M240 150 L248 138 L252 154 Z" fill="url(#accentGrad)"/>
+  </g>
+</svg>

package/assets/pets/11-slime-blob.svg

@@ -0,0 +1,43 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="blobGrad" x1="48" y1="60" x2="208" y2="220" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#26c6da" stop-opacity="0.9"/>
+      <stop offset="1" stop-color="#00acc1" stop-opacity="0.75"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Blob body -->
+  <path d="M128 40
+           C182 40 214 78 210 128
+           C232 150 224 190 198 202
+           C210 224 176 232 158 216
+           C132 236 96 234 78 214
+           C50 224 34 196 48 176
+           C24 158 30 118 62 96
+           C64 62 96 40 128 40 Z"
+        fill="url(#blobGrad)" stroke="#4dd0e1" stroke-width="2.5"/>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <circle cx="102" cy="132" r="9" fill="#0a1420"/>
+    <circle cx="154" cy="132" r="9" fill="#0a1420"/>
+    <circle cx="105" cy="129" r="2.5" fill="#e0fbff"/>
+    <circle cx="157" cy="129" r="2.5" fill="#e0fbff"/>
+  </g>
+
+  <!-- Smile -->
+  <path d="M110 156 Q128 170 146 156" stroke="#0a1420" stroke-width="3.5" fill="none" stroke-linecap="round"/>
+
+  <!-- Drips -->
+  <path d="M84 216 Q84 232 92 232 Q100 232 96 216 Z" fill="url(#blobGrad)"/>
+  <path d="M160 220 Q160 236 168 236 Q176 236 172 220 Z" fill="url(#blobGrad)"/>
+
+  <!-- Highlight -->
+  <ellipse cx="92" cy="86" rx="18" ry="10" fill="#ffffff" fill-opacity="0.25"/>
+  </g>
+</svg>

package/assets/pets/12-ghost-byte.svg

@@ -0,0 +1,41 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="ghostGrad" x1="48" y1="40" x2="208" y2="200" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e1f5fe" stop-opacity="0.92"/>
+      <stop offset="1" stop-color="#81d4fa" stop-opacity="0.7"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+  <g id="pet-body-group">
+
+  <!-- Floating shadow -->
+  <ellipse cx="128" cy="234" rx="50" ry="8" fill="#000" fill-opacity="0.15"/>
+
+  <!-- Ghost body -->
+  <path d="M128 34
+           C176 34 208 70 208 120
+           L208 190
+           C208 190 196 176 184 190
+           C172 204 160 176 148 190
+           C136 204 120 176 108 190
+           C96 204 84 176 72 190
+           C60 176 48 190 48 190
+           L48 120
+           C48 70 80 34 128 34 Z"
+        fill="url(#ghostGrad)" stroke="#4dd0e1" stroke-width="2">
+    <animateTransform attributeName="transform" type="translate" values="0 0;0 -8;0 0" dur="2.4s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- Eyes -->
+  <g filter="url(#glow)">
+    <ellipse cx="98" cy="112" rx="9" ry="12" fill="#0a1420"/>
+    <ellipse cx="158" cy="112" rx="9" ry="12" fill="#0a1420"/>
+  </g>
+
+  <!-- Mouth -->
+  <ellipse cx="128" cy="142" rx="10" ry="8" fill="#0a1420" fill-opacity="0.85"/>
+  </g>
+</svg>