Switch between the supplied multicolor wave and six luminous fluid dots. Adjust speed, size, exposure and timeline offset. Motion is procedural, not microphone-reactive. The responsive canvas respects reduced motion and uses the same renderer for preview and export.
How this shader works
Siri Wave draws a glowing multicolour wave like a voice assistant, and has a second variant with six glowing fluid dots that merge, gather and burst. Variant switches between the two. The motion is generated in code and does not react to a microphone. The panel is short: Size, Exposure, Speed and Timeline offset.
Tips
- Variant switches between the wave and the fluid dots.
- Lower Speed for a calm idle state, raise it for an active, speaking state.
- Size scales the wave or dots inside the canvas.
- Exposure sets the overall brightness of the glow.
Questions
How do I add a Siri-style voice wave animation to my app?
Open Siri Wave, choose the wave or fluid-dots Variant and set Speed and Size. Export it as a React or Svelte component or an HTML file and place it where your voice interface shows.
Does the wave react to sound?
No. The motion is procedural and does not listen to a microphone. You can change Speed to show different states.
Preview and customize in the browser. Exports require membership.