feat(overlay): improve recording visualization with symmetric bars #552
Conversation
- Add symmetric mirror effect for Apple-like audio visualization - Adjust FFT frequency range (150-2500Hz) to better capture voice - Fix intermittent GPU compositing issues with transparent backgrounds - Fix unused import and mut warnings
src/overlay/RecordingOverlay.tsx
Outdated
| height: `${Math.min(50, 4 + Math.pow(v, 0.7) * 32)}px`, | ||
| opacity: Math.max(0.3, Math.min(1, v * 1.5)), |
There was a problem hiding this comment.
Why did you remove the transitions? This otherwise causes some flickering.
There was a problem hiding this comment.
you are right, i forgot to put it back in the CSS because keeping it in the TSX made some ghosting artefacts on top of the bars and moving it to CSS fixed the issue.
|
this is already part of #551 |
|
Yeah I saw yours, with the symmetric bars and all, it’s pretty close to what I did too. I also saw cjpais feedback about not changing the global design/colors, If it’s easier to just close mine and keep yours, no problem at all! Let me know. |
- Remove GPU compositing hacks (transform, backface-visibility, isolation) that were causing transparency issues on some systems - Simplify bars-container styles - Adjust bar height/opacity formula for better responsiveness - Update array size to match 25 buckets from backend
|
This smaller tweak is much more likely to make it in. Smaller scoped PRs are almost always easier to review and merge |
|
Okay, so I'd like to pull this in, but I do have some issues on my machine generally. The overlay for me has actually been fairly consistently broken where the height of the bars doesn't show up properly. I'm just curious if that's also happening on your system. I really haven't had a chance to address this and I don't know if it's just my system also pinging @jacksongoode if you get the bar height displaying properly on your system |
|
Yes, I'm experiencing similar issues on Linux (Ubuntu 24.04 + NVIDIA GPU). The transparency and bar rendering is very inconsistent: I'm going to test on Windows (dual-boot) to see if all three platforms are affected. |
|
I just built and tested it on Windows and everything is working correctly. The overall overlay transparency is functioning properly and the bar rendering works as well. |
|
Hmm, I just tested and it looks alright, but I would be a little weary of making 150Hz the lowend? I just worry with most microphones you get quite noisy in the lowend so the original range seemed a little more reasonable (plus most computer mics are tuned for that range as well). |
4 participants
Add symmetric mirror effect for Apple-like audio visualization
Adjust FFT frequency range (150-2500Hz) to better capture voice
Fix intermittent GPU compositing issues with transparent backgrounds
Fix unused import and mut warnings
Description
I thought the recording overlay could look nicer, kind of like Siri or other Apple-style
visualizations - cleaner and more polished. So I started experimenting with different
configurations to find what looked best.
I noticed that only the first few bars on the left were moving when I spoke, which felt
off. I dug into the code to understand how it worked and discovered the FFT frequency
distribution. That's when I got the idea to make the bars emanate from the center
outward - it just looks way better and more natural.
I also ran into a weird bug where sometimes a visible rectangle appeared around the bars
(GPU compositing issue), so I fixed that too but it seems to be still here on screenshot but not in prod.
sorry if things like coms, commit etc... seems ai-made, i'm french and not so good in English so i used ai to rewite my thoughts for it to be more clear and understandable. also this is my first PR so please go easy on me.
Testing