Echo Orb: Designing an Audio-Reactive Interface
acream
Echo Orb: Designing an Audio-Reactive Interactive Interface
To use in Web and HTML design
The demo in the mobile:
Prompt(rough draft):
Create a user interface with a white background featuring a center-aligned gradient circle. After requesting microphone permission from the user, the circle dynamically responds to the input audio volume:
Audio-Driven Behaviors:
Scaling: Smooth, non-linear scaling driven by volume levels, kept subtle to avoid excessive amplitude.
Glow Intensity: Non-linear brightness adjustments based on volume.
Liquid Flow Speed: A constant, slow fluid flow rate during quiet audio, accelerating smoothly when louder audio is detected.
Visual Style & Details:
Color Scheme: Complex, randomized gradient color combinations (inspired by the reference image).
Textures & Effects: Add noise, grain, and scatter/dispersion to the gradient to enhance the liquid fluidity and organic look.
Sphere FX: Apply scatter/dispersion, subtle Gaussian blur, and fast box blur directly to the sphere itself.
Exclusions: Do not add superficial floating surface particles.
Like this project
Posted Jul 25, 2026
Echo Orb: Designing an Audio-Reactive Interactive Interface To use in Web and HTML design Keyword: Gradient,Bounce,Fast box blur,noise
