Add personality system with emote variations and animations

- Rotating optimal faces with paired animations (breathing, floating, bouncing, swaying) - Occasional idle expressions (winks/blinks) with 15% chance - Recovery celebration emote with bounce animation - Connection lost state with searching animation - Face rotation every 5 minutes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-02 21:31:27 -06:00
parent 11896919e4
commit af4ccb9a35
2 changed files with 160 additions and 4 deletions
--- a/index.html
+++ b/index.html
@@ -76,6 +76,102 @@
                transform: scale(1.08);
            }
        }
+
+        /* Celebrating animation - bounce and wiggle */
+        .celebrating {
+            animation: celebrate 0.5s ease-in-out infinite;
+        }
+
+        @keyframes celebrate {
+            0%, 100% {
+                transform: translateY(0) rotate(0deg);
+            }
+            25% {
+                transform: translateY(-10px) rotate(-5deg);
+            }
+            75% {
+                transform: translateY(-10px) rotate(5deg);
+            }
+        }
+
+        /* Floating animation - gentle drift */
+        .floating {
+            animation: float 4s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-8px);
+            }
+        }
+
+        /* Bouncing animation - playful hop */
+        .bouncing {
+            animation: bounce 1s ease-in-out infinite;
+        }
+
+        @keyframes bounce {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-12px);
+            }
+        }
+
+        /* Swaying animation - curious side-to-side */
+        .swaying {
+            animation: sway 3s ease-in-out infinite;
+        }
+
+        @keyframes sway {
+            0%, 100% {
+                transform: rotate(0deg);
+            }
+            25% {
+                transform: rotate(-3deg);
+            }
+            75% {
+                transform: rotate(3deg);
+            }
+        }
+
+        /* Blink animation - quick fade for winks */
+        .blink {
+            animation: blink 0.3s ease-in-out 1;
+        }
+
+        @keyframes blink {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.3;
+            }
+        }
+
+        /* Searching animation - looking around for connection */
+        .searching {
+            animation: search 2s ease-in-out infinite;
+        }
+
+        @keyframes search {
+            0%, 100% {
+                transform: translateX(0);
+                opacity: 0.6;
+            }
+            25% {
+                transform: translateX(-10px);
+                opacity: 0.8;
+            }
+            75% {
+                transform: translateX(10px);
+                opacity: 0.8;
+            }
+        }
    </style>
 </head>
 <body>
@@ -94,7 +190,12 @@
                const data = await response.json();
                updateDisplay(data);
            } catch (err) {
-                messageEl.textContent = 'Connection lost...';
+                // Connection lost state
+                emoteEl.textContent = '( ?.?)';
+                emoteEl.style.color = '#888888';
+                emoteEl.className = 'searching';
+                messageEl.style.color = '#888888';
+                messageEl.textContent = '';
            }
        }