AI Orb For Voice To Voice

This tailwind example is contributed by Hamza Atig, on 11-Mar-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Hamza Atig

Tailwind v3.4 824

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Siri Glass Orb</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

body {
            font-family: 'Inter', sans-serif;
            background-color: #000000;
            margin: 0;
            overflow: hidden;
        }

/* 
          Custom animations for the swirling plasma.
          We scale the layers up so their edges hide outside the orb container.
        */
        @keyframes spin-clockwise {
            0% { transform: translate(-50%, -50%) rotate(0deg) scale(1.5); }
            100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); }
        }

@keyframes spin-counter {
            0% { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); }
            100% { transform: translate(-50%, -50%) rotate(0deg) scale(1.5); }
        }

@keyframes breathe {
            0%, 100% { transform: scale(1); box-shadow: 0 0 60px -20px rgba(56, 189, 248, 0.4); }
            50% { transform: scale(1.05); box-shadow: 0 0 100px -10px rgba(232, 121, 249, 0.6); }
        }

/* 
          The Orb Container
          This is the hard edge of the "glass marble". 
        */
        .siri-orb {
            position: relative;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            /* The mask that clips the fluid to a perfect circle */
            overflow: hidden; 
            /* 3D Glass edge effect */
            box-shadow: 
                inset 0 0 30px rgba(0,0,0,0.8), 
                inset 0 20px 30px rgba(255,255,255,0.3),
                inset 0 -20px 30px rgba(0,0,0,0.5);
            animation: breathe 6s ease-in-out infinite;
            transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            background: #111;
            /* Creates a local stacking context */
            z-index: 10;
        }

/* Ambient glow behind the orb */
        .orb-glow {
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(232,121,249,0.4) 0%, rgba(56,189,248,0.2) 40%, rgba(0,0,0,0) 70%);
            filter: blur(30px);
            z-index: 1;
            transition: all 0.6s ease;
        }

/* 
          Plasma Layers
          Using conic gradients creates that iconic sweeping Siri light ray effect.
        */
        .plasma-layer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            filter: blur(15px);
            mix-blend-mode: screen;
        }

/* Blue/Cyan sweep */
        .layer-1 {
            background: conic-gradient(from 0deg, transparent 0%, #00f2fe 25%, #4facfe 50%, transparent 70%);
            animation: spin-clockwise 4s linear infinite;
        }

/* Magenta/Pink sweep */
        .layer-2 {
            background: conic-gradient(from 180deg, transparent 0%, #ff0844 30%, #ffb199 60%, transparent 80%);
            animation: spin-counter 5s linear infinite;
            opacity: 0.8;
        }

/* Bright white/purple core highlight */
        .layer-3 {
            background: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(200,80,255,0.5) 30%, transparent 60%);
            animation: spin-clockwise 7s linear infinite;
            width: 150%;
            height: 150%;
        }

/* 3D Glass Specular Highlight (The white reflection on top of the orb) */
        .glass-highlight {
            position: absolute;
            top: 5%;
            left: 15%;
            width: 70%;
            height: 30%;
            border-radius: 50%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
            transform: rotate(-15deg);
            pointer-events: none;
            z-index: 20;
        }

/* --- ACTIVE / LISTENING STATE --- */
        .is-listening .siri-orb {
            transform: scale(1.15);
            animation: none;
            box-shadow: 
                inset 0 0 30px rgba(0,0,0,0.8), 
                inset 0 20px 30px rgba(255,255,255,0.5),
                inset 0 -20px 30px rgba(0,0,0,0.2),
                0 0 100px -10px rgba(255,255,255,0.3);
        }

.is-listening .orb-glow {
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(232,121,249,0.3) 40%, rgba(0,0,0,0) 70%);
        }

.is-listening .layer-1 { animation-duration: 1.5s; filter: blur(20px); background: conic-gradient(from 0deg, transparent 0%, #00f2fe 25%, #ffffff 50%, transparent 70%); }
        .is-listening .layer-2 { animation-duration: 2s; filter: blur(20px); background: conic-gradient(from 180deg, transparent 0%, #ff0844 30%, #ffffff 60%, transparent 80%); }
        .is-listening .layer-3 { width: 180%; height: 180%; animation-duration: 2.5s; }

/* Smooth text fade */
        .text-fade-enter { opacity: 0; transform: translateY(10px); }
        .text-fade-active { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center text-white selection:bg-white/20">

<div class="relative flex flex-col items-center group cursor-pointer" id="orb-wrapper">
        
        
        <div class="orb-glow"></div>

<div class="siri-orb" id="orb">
            
            <div class="plasma-layer layer-1"></div>
            <div class="plasma-layer layer-2"></div>
            <div class="plasma-layer layer-3"></div>
            
            
            <div class="glass-highlight" id="highlight"></div>
        </div>

<div class="absolute -bottom-24 w-80 text-center h-16 flex items-center justify-center">
            <h1 class="text-2xl font-light tracking-wide text-white/90 drop-shadow-lg text-fade-active" id="status-text">
                How can I help?
            </h1>
        </div>
        
    </div>

// 3D Refraction Effect on mousemove
            // Moves the glass highlight slightly to fake 3D volume
            document.addEventListener('mousemove', (e) => {
                const x = (e.clientX / window.innerWidth - 0.5) * 20; // -10 to 10
                const y = (e.clientY / window.innerHeight - 0.5) * 20; 
                
                // Move the highlight in the opposite direction of the mouse to simulate light bouncing
                highlight.style.transform = `translate(${-x}px, ${-y}px) rotate(-15deg)`;
            });

// Click Interaction to toggle Listening state
            wrapper.addEventListener('click', () => {
                isListening = !isListening;
                
                // Animate Text Change
                statusText.classList.remove('text-fade-active');
                statusText.classList.add('text-fade-enter');
                
                setTimeout(() => {
                    if (isListening) {
                        wrapper.classList.add('is-listening');
                        statusText.innerText = "Listening...";
                        statusText.classList.replace('text-white/90', 'text-white');
                    } else {
                        wrapper.classList.remove('is-listening');
                        statusText.innerText = "How can I help?";
                        statusText.classList.replace('text-white', 'text-white/90');
                    }
                    
                    statusText.classList.remove('text-fade-enter');
                    statusText.classList.add('text-fade-active');
                }, 300); // Wait for fade out before changing text
            });
        });
    </script>
</body>
</html>

Related Examples

Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

wavy kits

11 months ago

1.4k
Flex and Flex-Col
วิธีการใช้ Flex และ Flex-Col

rawitsara.tr

1 year ago

1.2k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

2.9k
Homepage event

Anonymous

1 year ago

1.2k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Abdul Jabbar Al Nahid

1 year ago

906
Chatbox template

Lucas Martinez

3 years ago

13.2k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

1 month ago

67
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

5 months ago

361
htmlcss0

Anonymous

1 year ago

1.1k
products, show, items
display images, card, products

Rushikesh Latpate

8 months ago

752
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Car booking form
Rental carr booking form to rent a car online

ehmasuk

10 months ago

869