Siri Glass Orb
Interactive WebGL recreation of Apple's Siri animation
June 2026 · Vibe Coding

Try it live → — click to ask, hold to speak, drag it anywhere.
A from-scratch WebGL recreation of Apple's Siri orb — not an embed, not a video, but the animation itself rebuilt as a living instrument: a glass sphere you can talk to, question, and throw around the screen.
What it does
The orb idles as a quiet white waveform inside glass. Hold it and the wave goes live on your microphone — low, mid, and high bands ripple through it in color for as long as you keep the press. Click it and a glass pill unfolds for typed questions: the orb collapses into thinking dots, then the answer condenses out of a blur, paced token by token, the way breath fogs and clears on cold glass.
It is also a body, not a fixture. Drag the orb anywhere and it stays where you drop it, on spring physics all the way down.
How it is built
- Rendering — a WebGL2 pipeline of three passes (effect FBO → scene FBO → screen), each drawing a single fullscreen triangle. The wave and the thinking dots are additive premultiplied layers composed inside the glass.
- Audio — the microphone feeds a hand-rolled radix-2 FFT in an AudioWorklet, off the main thread, reduced to three bands with auto-gain and spring smoothing. No speech recognition; the voice is purely visual.
- Motion — a single state machine (idle / listening / thinking / reply) owns every timing decision; the renderer only paints what it is told. All easing is springs, no keyframes.
- The answer surface — streamed text resolves through a blur-dissolve, with the reply panel growing to a capped square and scroll-fading beyond it.
The same core drives two hosts: this standalone page, and the Siri orb floating over the Golden Gate on the home deck — one source of truth, two stages.
Why
Apple's Siri animation is one of the best pieces of motion design ever shipped, and it only exists inside a press event. I wanted to hold it: to feel which decisions are doing the work — the premultiplied glow, the spring constants, the way thinking is allowed to take time. Rebuilding it was the reading; making it answer questions was the writing.
— Built with vibe coding, June 2026. Visual language after Apple's Siri; every line of the implementation is original.