Spaces:
Sleeping
Sleeping
Sanjay kumar K Claude Sonnet 4.6 commited on
Commit Β·
0c3a9df
1
Parent(s): d036f40
Max blinking: 6x rapid eye blinks, fast antenna flash, dual ring pulse
Browse files- Eyes blink 6 times rapidly every 1.4s (was 3x every 2.2s)
- Antenna flashes on/off every 0.5s with glow filter
- Dual expanding ring pulses from toggle button (staggered 0.4s)
- Toggle floats 8px every 2s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- static/index.html +23 -17
- static/widget.js +23 -17
static/index.html
CHANGED
|
@@ -192,39 +192,45 @@
|
|
| 192 |
/* Bot Animations */
|
| 193 |
.vs-bot-eye {
|
| 194 |
transform-box:fill-box; transform-origin:50% 50%;
|
| 195 |
-
animation:cbBotBlink
|
| 196 |
}
|
| 197 |
-
.vs-bot-eye-r { animation-delay:0.
|
| 198 |
@keyframes cbBotBlink {
|
| 199 |
-
0%,
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
|
|
|
|
|
|
|
|
|
| 203 |
}
|
| 204 |
.vs-bot-ant {
|
| 205 |
transform-box:fill-box; transform-origin:50% 50%;
|
| 206 |
-
animation:cbAntGlow 0.
|
| 207 |
}
|
| 208 |
@keyframes cbAntGlow {
|
| 209 |
-
0%,100% { opacity:1; transform:scale(1); }
|
| 210 |
-
|
| 211 |
-
60% { opacity:1; transform:scale(1.3); }
|
| 212 |
}
|
| 213 |
-
#cb-toggle-btn { animation:cbBotFloat
|
| 214 |
#cb-toggle-btn:hover { animation:none; transform:scale(1.12); }
|
| 215 |
@keyframes cbBotFloat {
|
| 216 |
0%,100% { transform:translateY(0); }
|
| 217 |
-
50% { transform:translateY(-
|
| 218 |
}
|
| 219 |
-
/* Toggle button ring pulse */
|
| 220 |
#cb-toggle-btn::after {
|
| 221 |
content:''; position:absolute; inset:-4px; border-radius:50%;
|
| 222 |
-
border:2px solid rgba(107,166,255,0.
|
| 223 |
-
animation:cbRingPulse
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 224 |
}
|
| 225 |
@keyframes cbRingPulse {
|
| 226 |
-
0%
|
| 227 |
-
|
| 228 |
}
|
| 229 |
|
| 230 |
.cb-msg {
|
|
|
|
| 192 |
/* Bot Animations */
|
| 193 |
.vs-bot-eye {
|
| 194 |
transform-box:fill-box; transform-origin:50% 50%;
|
| 195 |
+
animation:cbBotBlink 1.4s linear infinite;
|
| 196 |
}
|
| 197 |
+
.vs-bot-eye-r { animation-delay:0.05s; }
|
| 198 |
@keyframes cbBotBlink {
|
| 199 |
+
0%,10%,18%,26%,34%,42%,50%,100% { transform:scaleY(1); }
|
| 200 |
+
5% { transform:scaleY(0.04); }
|
| 201 |
+
13% { transform:scaleY(0.04); }
|
| 202 |
+
21% { transform:scaleY(0.04); }
|
| 203 |
+
29% { transform:scaleY(0.04); }
|
| 204 |
+
37% { transform:scaleY(0.04); }
|
| 205 |
+
45% { transform:scaleY(0.04); }
|
| 206 |
}
|
| 207 |
.vs-bot-ant {
|
| 208 |
transform-box:fill-box; transform-origin:50% 50%;
|
| 209 |
+
animation:cbAntGlow 0.5s ease-in-out infinite;
|
| 210 |
}
|
| 211 |
@keyframes cbAntGlow {
|
| 212 |
+
0%,100% { opacity:1; transform:scale(1.4); filter:drop-shadow(0 0 4px white); }
|
| 213 |
+
50% { opacity:0; transform:scale(0.3); }
|
|
|
|
| 214 |
}
|
| 215 |
+
#cb-toggle-btn { animation:cbBotFloat 2s ease-in-out infinite; }
|
| 216 |
#cb-toggle-btn:hover { animation:none; transform:scale(1.12); }
|
| 217 |
@keyframes cbBotFloat {
|
| 218 |
0%,100% { transform:translateY(0); }
|
| 219 |
+
50% { transform:translateY(-8px); }
|
| 220 |
}
|
|
|
|
| 221 |
#cb-toggle-btn::after {
|
| 222 |
content:''; position:absolute; inset:-4px; border-radius:50%;
|
| 223 |
+
border:2px solid rgba(107,166,255,0.6);
|
| 224 |
+
animation:cbRingPulse 1.2s ease-out infinite;
|
| 225 |
+
}
|
| 226 |
+
#cb-toggle-btn::before {
|
| 227 |
+
content:''; position:absolute; inset:-10px; border-radius:50%;
|
| 228 |
+
border:1.5px solid rgba(107,166,255,0.25);
|
| 229 |
+
animation:cbRingPulse 1.2s ease-out infinite 0.4s;
|
| 230 |
}
|
| 231 |
@keyframes cbRingPulse {
|
| 232 |
+
0% { transform:scale(1); opacity:0.8; }
|
| 233 |
+
100% { transform:scale(1.35); opacity:0; }
|
| 234 |
}
|
| 235 |
|
| 236 |
.cb-msg {
|
static/widget.js
CHANGED
|
@@ -241,39 +241,45 @@
|
|
| 241 |
/* ββ Bot Animations βββββββββββββββββββββββββββββββββββββββββββββββ */
|
| 242 |
.vs-bot-eye{
|
| 243 |
transform-box:fill-box;transform-origin:50% 50%;
|
| 244 |
-
animation:vsBotBlink
|
| 245 |
}
|
| 246 |
-
.vs-bot-eye-r{animation-delay:0.
|
| 247 |
@keyframes vsBotBlink{
|
| 248 |
-
0%,
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
|
|
|
|
|
|
|
|
|
|
| 252 |
}
|
| 253 |
.vs-bot-ant{
|
| 254 |
transform-box:fill-box;transform-origin:50% 50%;
|
| 255 |
-
animation:vsAntGlow 0.
|
| 256 |
}
|
| 257 |
@keyframes vsAntGlow{
|
| 258 |
-
0%,100%{opacity:1;transform:scale(1);}
|
| 259 |
-
|
| 260 |
-
60%{opacity:1;transform:scale(1.3);}
|
| 261 |
}
|
| 262 |
-
#vs-cb-toggle{animation:vsBotFloat
|
| 263 |
#vs-cb-toggle:hover{animation:none;transform:scale(1.12);}
|
| 264 |
@keyframes vsBotFloat{
|
| 265 |
0%,100%{transform:translateY(0);}
|
| 266 |
-
50%{transform:translateY(-
|
| 267 |
}
|
| 268 |
-
/* Extra: toggle button ring pulse */
|
| 269 |
#vs-cb-toggle::after{
|
| 270 |
content:'';position:absolute;inset:-4px;border-radius:50%;
|
| 271 |
-
border:2px solid rgba(107,166,255,0.
|
| 272 |
-
animation:vsRingPulse
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 273 |
}
|
| 274 |
@keyframes vsRingPulse{
|
| 275 |
-
0%
|
| 276 |
-
|
| 277 |
}
|
| 278 |
@media(max-width:480px){
|
| 279 |
#vs-cb-widget{
|
|
|
|
| 241 |
/* ββ Bot Animations βββββββββββββββββββββββββββββββββββββββββββββββ */
|
| 242 |
.vs-bot-eye{
|
| 243 |
transform-box:fill-box;transform-origin:50% 50%;
|
| 244 |
+
animation:vsBotBlink 1.4s linear infinite;
|
| 245 |
}
|
| 246 |
+
.vs-bot-eye-r{animation-delay:0.05s;}
|
| 247 |
@keyframes vsBotBlink{
|
| 248 |
+
0%,10%,18%,26%,34%,42%,50%,100%{transform:scaleY(1);}
|
| 249 |
+
5% {transform:scaleY(0.04);}
|
| 250 |
+
13%{transform:scaleY(0.04);}
|
| 251 |
+
21%{transform:scaleY(0.04);}
|
| 252 |
+
29%{transform:scaleY(0.04);}
|
| 253 |
+
37%{transform:scaleY(0.04);}
|
| 254 |
+
45%{transform:scaleY(0.04);}
|
| 255 |
}
|
| 256 |
.vs-bot-ant{
|
| 257 |
transform-box:fill-box;transform-origin:50% 50%;
|
| 258 |
+
animation:vsAntGlow 0.5s ease-in-out infinite;
|
| 259 |
}
|
| 260 |
@keyframes vsAntGlow{
|
| 261 |
+
0%,100%{opacity:1;transform:scale(1.4);filter:drop-shadow(0 0 4px white);}
|
| 262 |
+
50%{opacity:0;transform:scale(0.3);}
|
|
|
|
| 263 |
}
|
| 264 |
+
#vs-cb-toggle{animation:vsBotFloat 2s ease-in-out infinite;}
|
| 265 |
#vs-cb-toggle:hover{animation:none;transform:scale(1.12);}
|
| 266 |
@keyframes vsBotFloat{
|
| 267 |
0%,100%{transform:translateY(0);}
|
| 268 |
+
50%{transform:translateY(-8px);}
|
| 269 |
}
|
|
|
|
| 270 |
#vs-cb-toggle::after{
|
| 271 |
content:'';position:absolute;inset:-4px;border-radius:50%;
|
| 272 |
+
border:2px solid rgba(107,166,255,0.6);
|
| 273 |
+
animation:vsRingPulse 1.2s ease-out infinite;
|
| 274 |
+
}
|
| 275 |
+
#vs-cb-toggle::before{
|
| 276 |
+
content:'';position:absolute;inset:-10px;border-radius:50%;
|
| 277 |
+
border:1.5px solid rgba(107,166,255,0.25);
|
| 278 |
+
animation:vsRingPulse 1.2s ease-out infinite 0.4s;
|
| 279 |
}
|
| 280 |
@keyframes vsRingPulse{
|
| 281 |
+
0%{transform:scale(1);opacity:0.8;}
|
| 282 |
+
100%{transform:scale(1.35);opacity:0;}
|
| 283 |
}
|
| 284 |
@media(max-width:480px){
|
| 285 |
#vs-cb-widget{
|