Open the visualizer
Open an audio file in the editor, then choose AudioVisualizer. Start with Graphite, Aurora, Halo or Studio, or choose Mirrored bars, Bars, Wave, Ring or Dots. The display responds to your actual audio during playback.
Visual changes do not change the sound.
Colors, size and movement
In Colors, enter a six-digit HEX color such as #77e6cb, with or without the hash. Choose a solid or gradient color and background, then adjust opacity and glow. Layout & motion controls width, height, vertical position, detail, bar spacing, roundness, visual sensitivity and smoothing.
These settings are separate from the app theme and are remembered on this device.
Show only what you want
Expand Text and labels to hide the track title, subtitle or tool and playback badges separately. You can replace the title, add a subtitle and choose the text color and size.
Turn off the title and subtitle for a visualizer with no text. Custom text is included when you share this look; the source filename is not.
Clean view for recording
Choose Clean view to fill the app preview with your design. Instructions, tool badges and playback status disappear. Move the mouse to reveal playback, repeat, seeking and exit controls; they hide again after a short pause away from the controls.
Tab reveals keyboard controls, Space plays or pauses, and Escape returns to editing. Use your screen recorder to capture the display. Save audio still exports MP3 sound only; it does not render the visualizer as a video.
Share and import a look
Expand Import & share. Copy look copies the independent Loaderly visualizer code. Export look saves Loaderly.visualizer.json. The recipient can paste the code and choose Apply look, or choose Import look and select the file.
The code contains only visual settings and custom text, without audio, source paths, API keys or app theme settings. Invalid files keep the current look. Reset visualizer restores Graphite.
Letters, words and your font
Type a letter, initials, a word or a short phrase in Letters or a word. Arabic, English and numbers work. Choose Modern, Classic or Mono, or use a local font file. Adjust weight, spacing, slant and letter width, then Create text shape.
Creating again replaces point edits, which Undo can restore. Your font stays on your device; the shared look saves the finished shapes so recipients do not need the font.
Edit directly in the preview
Choose Move & resize above the large preview. Drag to position the design or drag a corner to resize it. Edit points lets you reshape it in the large preview. Ctrl or Command + click selects more points; drag one selected point to move the group.
Alt + click cycles overlapping points. Previous point, Next point, Drawing zoom and Zoom into selected part help with tight details. Add points inserts a point on the selected part; Add a separate line adds an independent stroke.
Draw a new shape
Start with a preset, a straight line or a simple A–Z line letter. Use optional grid snapping or Shift alignment and rotate the shape. Choose Outline, Bars or Dots, then adjust thickness, color, glow and movement strength.
Smooth curve affects the selected part. Ctrl+Z, Ctrl+Shift+Z and Ctrl+Y work across keyboard languages for shape, color and size changes. Text fields retain their normal editing shortcuts.
Preview and take it into Loaderly
The website designer is another way to build a visualizer. Choose Try your audio to open a local file, then Play. Repeat audio keeps it playing while you design. Adjust colors, size, motion and text, then Copy look or Download look.
In Loaderly 2.1, open AudioVisualizerImport & share to apply it. You can also use the full designer directly inside Loaderly.
Use the full designer inside Loaderly
In the audio editor choose AudioVisualizerOpen visualizer designer. You can also start without a file from Community libraryCreate & shareNew visualizer. The designer runs locally.
Apply design returns the edited settings; Cancel keeps the previous design. Demo motion is simulated. Use Try your audio to listen to a local file; audio is not included in a shared design.
Words, curves and stroke style
Enter a letter, word or short phrase under Letters or a word. Choose Modern, Classic or Mono, adjust proportions and spacing, then Create text shape. You can use a local font while designing.
The shared design contains traced points rather than the font file. Creating text again replaces manual point edits; Undo restores them. For geometric letters such as Z, compare straight segments with Smooth curve.
Edit on the large preview
Use Move & resize to position the whole visualizer. Use Edit points for the shape itself, with the same edits available in the small grid. Ctrl-click or Command-click toggles points in a multiple selection; move the selection together.
Use keyboard selection and arrow nudges when points are close. Snap to grid helps alignment. Undo and Redo work with physical shortcut keys across keyboard layouts.
Balance detail and motion
More bars improve long words, but too many thick bars can merge together. Adjust count, gap and thickness together. Sensitivity changes how strongly the sound affects the shape; smoothing makes changes steadier.
Glow adds light around the strokes, while opacity changes their visibility. Start with a small movement strength for recognizable letters, then increase it while playing real audio.
Captions follow the visualizer
The title and subtitle move with the visualizer and stay below its drawing area. Near the bottom of the frame, the group stops together so the captions remain visible. Preview and MP4 export use the same proportional layout.
A shape of your own
Start with a look, draw a new shape, then take it into Loaderly. No coding needed.
Audio stays in your browser and is never included in a shared look.
Try a new shape or edit any of these starting points.
Enable Add points to insert points; drag existing points to reshape. Hold Shift to line up with a neighboring point. Use arrows for small moves, Enter to select the next point, or Delete to remove it.
Use Loaderly 2.1 to open and edit every design in the current library. Download update
Take your look with you
In Loaderly, open AudioVisualizerImport & share. Paste the code and choose Apply look, or import the downloaded file.
View or paste a code
{
"format": "loaderly-visualizer",
"version": 2,
"settings": {
"style": "mirror",
"color": "#c4cbd3",
"secondColor": "#ffffff",
"gradient": false,
"background": "#151515",
"backgroundEnd": "#242424",
"backgroundGradient": false,
"width": 78,
"height": 44,
"positionX": 50,
"positionY": 50,
"count": 80,
"gap": 4,
"roundness": 3,
"sensitivity": 1,
"smoothing": 0.8,
"glow": 0,
"opacity": 1,
"showTitle": true,
"showSubtitle": false,
"showBadges": false,
"title": "",
"subtitle": "",
"textColor": "#eef1f5",
"textSize": 16,
"shape": {
"points": [
[
0.5,
0.12
],
[
0.88,
0.5
],
[
0.5,
0.88
],
[
0.12,
0.5
]
],
"closed": true,
"smooth": false,
"mirror": false,
"aspect": 1,
"amplitude": 0.5
}
}
}Share the JSON file or code with a screenshot. The look contains your custom text, colors and shape, without the audio file.
Your next look is here.
Explore designs from other creators. Publish your own from Loaderly and it appears here too. Sign in with GitHub inside the app to share.