Skip to content

fix(fancy-audiovisualizer): prevent content clipping at widget border#272

Merged
ItsLemmy merged 1 commit intonoctalia-dev:mainfrom
odtgit:fix/audiovisualizer-content-clipping
Feb 17, 2026
Merged

fix(fancy-audiovisualizer): prevent content clipping at widget border#272
ItsLemmy merged 1 commit intonoctalia-dev:mainfrom
odtgit:fix/audiovisualizer-content-clipping

Conversation

@odtgit
Copy link

@odtgit odtgit commented Feb 17, 2026

Summary

  • Visualization content (bars, waves, bloom glow) was being hard-clipped at the widget's rounded corners, especially at high sensitivity and bloom intensity settings
  • Added dynamic UV scaling that computes the maximum possible content extent from the current sensitivity and bloomIntensity settings, shrinking the visualization to always fit within the widget
  • Added a smooth radial edge fade that catches bloom tails in the remaining space between content and border

How it works

The content scale is calculated per-frame from uniforms:

maxContentRadius = 0.35 + sensitivity * 0.5    // max bar/wave extent
maxBloomReach    = bloomIntensity * 1.0         // exp decay to <1/255
contentScale     = (maxContent + bloom) * 1.05  // 5% safety margin

The edge fade uses smoothstep from maxContentRadius/contentScale to 1.0 in widget space, so it only attenuates bloom glow and never affects the main visualization geometry.

At default settings (sensitivity=1.5, bloom=0.5) contentScale ≈ 1.68. At max settings (sensitivity=3.0, bloom=1.0) contentScale ≈ 2.99. It auto-adapts to whatever the user configures.

Test plan

  • Toggle widget on/off and verify it loads correctly
  • Set sensitivity to max (3.0) and bloom to max (1.0) — no clipping at borders
  • Set sensitivity to min (0.5) and bloom to 0 — visualization fills most of the widget
  • Test all visualization modes (bars, wave, rings, combined, all)
  • Verify bloom glow fades smoothly near edges rather than cutting off

…clipped at widget border

The visualizer content (bars, waves, bloom glow) could extend beyond the
widget boundary and get hard-clipped at the rounded corners, especially
at high sensitivity and bloom intensity settings.

Fix by dynamically scaling the UV coordinate space based on the maximum
possible content extent derived from the current sensitivity and bloom
intensity settings, and adding a smooth radial edge fade that catches
bloom tails before they reach the border.

The content scale is calculated as:
  maxContentRadius = 0.35 + sensitivity * 0.5
  maxBloomReach = bloomIntensity * 1.0 (from exp decay analysis)
  contentScale = (maxContentRadius + maxBloomReach) * 1.05

This guarantees no clipping at any combination of user-configurable
settings while keeping the visualization as large as possible.
@github-actions
Copy link
Contributor

@ItsLemmy - this PR modifies your plugin. Please review when you have a chance.

@odtgit odtgit force-pushed the fix/audiovisualizer-content-clipping branch from e5c6818 to 6a1b606 Compare February 17, 2026 16:06
@github-actions
Copy link
Contributor

@ItsLemmy - this PR modifies your plugin. Please review when you have a chance.

@ItsLemmy ItsLemmy merged commit 674b1fa into noctalia-dev:main Feb 17, 2026
2 checks passed
@ItsLemmy
Copy link
Contributor

Thanks!

@odtgit
Copy link
Author

odtgit commented Feb 17, 2026

Glad to help, was getting annoyed by the bloom clipping creating a moving border around my otherwise transparent visualization, looks flawless now :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments