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>

Files changed (2) hide show
  1. static/index.html +23 -17
  2. 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 2.2s ease-in-out infinite;
196
  }
197
- .vs-bot-eye-r { animation-delay:0.06s; }
198
  @keyframes cbBotBlink {
199
- 0%,55%,63%,70%,78%,100% { transform:scaleY(1); }
200
- 58% { transform:scaleY(0.05); } /* 1st blink */
201
- 66% { transform:scaleY(0.05); } /* 2nd blink */
202
- 74% { transform:scaleY(0.05); } /* 3rd blink */
 
 
 
203
  }
204
  .vs-bot-ant {
205
  transform-box:fill-box; transform-origin:50% 50%;
206
- animation:cbAntGlow 0.9s ease-in-out infinite;
207
  }
208
  @keyframes cbAntGlow {
209
- 0%,100% { opacity:1; transform:scale(1); }
210
- 30% { opacity:0.08; transform:scale(0.4); }
211
- 60% { opacity:1; transform:scale(1.3); }
212
  }
213
- #cb-toggle-btn { animation:cbBotFloat 2.5s ease-in-out infinite; }
214
  #cb-toggle-btn:hover { animation:none; transform:scale(1.12); }
215
  @keyframes cbBotFloat {
216
  0%,100% { transform:translateY(0); }
217
- 50% { transform:translateY(-7px); }
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.5);
223
- animation:cbRingPulse 2.5s ease-in-out infinite;
 
 
 
 
 
224
  }
225
  @keyframes cbRingPulse {
226
- 0%,100% { transform:scale(1); opacity:0.6; }
227
- 50% { transform:scale(1.18); opacity:0; }
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 2.2s ease-in-out infinite;
245
  }
246
- .vs-bot-eye-r{animation-delay:0.06s;}
247
  @keyframes vsBotBlink{
248
- 0%,55%,63%,70%,78%,100%{transform:scaleY(1);}
249
- 58%{transform:scaleY(0.05);} /* 1st blink */
250
- 66%{transform:scaleY(0.05);} /* 2nd blink */
251
- 74%{transform:scaleY(0.05);} /* 3rd blink */
 
 
 
252
  }
253
  .vs-bot-ant{
254
  transform-box:fill-box;transform-origin:50% 50%;
255
- animation:vsAntGlow 0.9s ease-in-out infinite;
256
  }
257
  @keyframes vsAntGlow{
258
- 0%,100%{opacity:1;transform:scale(1);}
259
- 30%{opacity:0.08;transform:scale(0.4);}
260
- 60%{opacity:1;transform:scale(1.3);}
261
  }
262
- #vs-cb-toggle{animation:vsBotFloat 2.5s ease-in-out infinite;}
263
  #vs-cb-toggle:hover{animation:none;transform:scale(1.12);}
264
  @keyframes vsBotFloat{
265
  0%,100%{transform:translateY(0);}
266
- 50%{transform:translateY(-7px);}
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.5);
272
- animation:vsRingPulse 2.5s ease-in-out infinite;
 
 
 
 
 
273
  }
274
  @keyframes vsRingPulse{
275
- 0%,100%{transform:scale(1);opacity:0.6;}
276
- 50%{transform:scale(1.18);opacity:0;}
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{