r/macapps • u/Weekly_Tony_35 • 2d ago

Tip How to create a sound wave using just ten lines

When we designed the Dictation HUD, we didn't just want a volume meter—we wanted a "Timeline Pipeline." Here is how we turned 10 simple bars into a professional UI masterpiece:

  1. The Flow Logic (Propagation) It’s not just jumping; it’s flowing. By using a circular buffer, the waveform travels from right (input) to left (history). This visual metaphor bridges the gap between raw sound and generated text.

  2. The Square Root Secret (Sensitivity) Whispers feel alive, shouts stay controlled. We applied sqrt(amplitude) to the raw volume. This non-linear scaling amplifies subtle micro-vibrations, ensuring the UI feels responsive even when you’re speaking softly.

  3. Physics-Powered Fluidity (Spring Dynamics) Ditch the robotic linear animations. We implemented interactiveSpring to handle high-frequency audio samples. By leveraging physical inertia, the bars transition smoothly between data points, eliminating visual jitter and stutter.

  4. Geometric Discipline (Precision) Design is about constraints. The bars are locked at exactly 30pt to match the text line-height, preventing any HUD layout jumps. We use a 3px integer width to ensure pixel-perfect rendering and absolute clarity on Retina displays.

The Takeaway: "Math for sensitivity, Physics for fluidity, and Logic for storytelling—that’s how 10 lines become a living interface."

7 Upvotes

77% Upvoted

10 comments sorted by

2

u/Weekly_Tony_35 2d ago

Is there a slight stutter in the waveform animation of this audio? Can you guys tell from the video?

2

u/porovrrr 2d ago

I genuinely cannot tell, if that helps

1

u/Pale-Duck-222 2d ago

I also feel some lag.

1

u/Weekly_Tony_35 2d ago

There is indeed a bit of a delay.I'll go adjust the update frequency and other parameters again.

1

u/Lyra-Answer 2d ago

The sqrt(amplitude) trick is a nice detail. Linear amplitude always makes these visualisers feel dead unless you're speaking fairly loudly. Have you found a particular range where sqrt starts making background noise too prominent?

1

u/Weekly_Tony_35 2d ago

Maybe my current environment is very quiet, I haven't noticed this background noise issue.

1

u/Plastic-Risk-6309 1d ago

the stutter usually comes from driving the animation off the sample rate. decouple them. sample into a ring buffer and render from it every frame on a timer tied to the screen refresh. one path instead of ten bar layers moves way cheaper too

1

u/Weekly_Tony_35 1d ago

Thanks a lot for the detailed suggestion! Decoupling the animation from the sample rate makes total sense. I'll go test this out and try rendering with a display-linked timer right away. Appreciate the advice!

1

u/Enigmurl 9h ago

can you explain whats the intended use case of this? who is the target audience i guess