Voice

Visualize speech and audio levels with a glow, dots or wireframe. Try simulation before connecting a microphone.

Open in Studio

See it in action

Choose an example to try, then make it your own below.

All examples

Glow visualizer

Dots visualizer

Lines visualizer

Make it yours

Preparing preview…
0px
Desktop · 0pxPress Play, then use simulation or microphone input.

React code

import { VoiceBeam } from '@/components/livenui/voice'

<VoiceBeam
  type={"default"}
  look={"glow"}
  colorVariant={"ocean"}
  level={0.5}
  active={true}
  theme={"light"}
>
  <button type="button">Your content</button>
</VoiceBeam>

Gooey

Add liquid motion to menus, sliders and draggable items. Try morph, move, melt and bend interactions.

Image

Reveal an image through an animated pixel mosaic. Compare transition presets, then copy the component and its configuration.