<div class="voice-widget">
<div class="voice-header">
<div class="pulsing-dot"></div>
<span>Listening...</span>
</div>
<div class="wave-container" id="wave-box">
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
</div>
<p class="transcription">How can I help you today?</p>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #0f172a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.voice-widget {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 24px;
width: 100%;
max-width: 350px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.voice-header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #3b82f6;
font-weight: 600;
margin-bottom: 30px;
}
.pulsing-dot {
width: 12px;
height: 12px;
background: #3b82f6;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.wave-container {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
height: 60px;
margin-bottom: 30px;
}
.wave-bar {
width: 8px;
height: 10px;
background: linear-gradient(to top, #3b82f6, #8b5cf6);
border-radius: 10px;
transition: height 0.1s ease;
will-change: height;
}
.transcription {
color: #cbd5e1;
font-size: 1.125rem;
margin: 0;
}
const bars = document.querySelectorAll(".wave-bar");
function animateWaves() {
bars.forEach(function(bar) {
// Generate a random height between 10px and 60px
const randomHeight = Math.floor(Math.random() * 50) + 10;
bar.style.height = randomHeight + "px";
});
}
// Update the wave bars frequently to simulate someone speaking
setInterval(animateWaves, 150);
