https://framer.com/m/AudioVisualizer-4yc3.js
Io / Enhancements / DottedAudioVisualizer
DottedAudioVisualizer
DottedAudioVisualizer draws a ring of dots that lengthen and fall with whatever audio is playing, giving a player a face without a waveform image.
Examples
Live specimens for every control the component exposes.
Default
The ring reads the audio playing on the page, so it only moves in a preview or on the published site. At rest it sits at initialRadius.
Ring
initialRadius is the resting size of the ring, maxBarLength how far a dot can travel outward, dotSpacing how densely they sit around it.
radius 60
long bars
dense dots
Colour and label
Two colours cover the whole thing: the ground and the dots. title sits in the middle of the ring.
default
dark ground
with title
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for DottedAudioVisualizer
An audio player needs a face that reacts to the sound.
A waveform image would be static and this should be live.
The ring should carry a short label at its centre.
The player needs a face that proves the audio is live.
Reach for something else
There is no audio on the page for it to read.
You need a scrubber or transport controls — this only visualises.
The visual must be identical every play; this follows the sound.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.