Don't animate height

Browser rendering & height animation costs

• Commenters highlight that animating height is expensive because it repeatedly triggers layout recalculation and repaints, especially when the element participates in normal document flow.
• Some stress this is not new: the core issue is layout invalidation, not “height” per se, and the same risk applies to animating margins, padding, etc.
• Others argue the article over-generalizes; with absolute positioning or proper containment, height animations can be fine and are commonly used (e.g., dropdowns).

Alternative implementations & micro-optimizations

• Many propose replacing DOM/CSS-based height animation with:
  • A simple animated GIF or small sprite sheet, especially if the animation is decorative or effectively boolean (“sound vs no sound”).
  • SVG or <canvas> animations, which can be isolated from layout and scaled crisply.
  • Using fixed-height wrappers with overflow: hidden or contain: strict / contain: content to prevent layout propagation.
  • Relying on transform-based animations (translate/scale) instead of height.
• There is debate whether GIFs are actually cheaper; some test results show even large GIFs using modest CPU, but others recall high usage for animated emoji.

Perception of remaining 6% CPU usage

• Many find the “optimized” 6% CPU (plus some GPU) for a tiny visualizer in a note-taking app still unacceptable, invoking comparisons with 1990s games and even 1980s supercomputers.
• Some note that OS activity monitors report per-core percentages and may reflect throttled cores, slightly softening but not eliminating the concern.

Electron and web-bloat criticism

• The fact this is an Electron app drives a recurring “Electron is wasteful” thread: duplicate Chromium bundles, higher baseline resource usage, and little offline benefit.
• Several broaden the critique to modern frontend practice: heavy frameworks, decorative animations, and complex CSS/JS for simple UIs are seen as disrespectful of users’ CPU, battery, and bandwidth.

Usefulness of the visualizer itself

• Mixed views on whether such an audio visualizer is valuable:
  • Some say it’s a useful VU-like indicator (“is the mic working?”).
  • Others say with only a few bars it conveys almost no real data beyond on/off, so a static or minimally changing icon or color would suffice.

User controls, tooling, and learning

• Suggestions include browser-level resource caps, throttling tabs, and better devtools warnings when animations cause reflows.
• Users share tactics to disable or strip animations (custom CSS, uBlock Origin filters, extensions).
• Several argue that understanding layout/paint/compositing and reflows should be standard frontend knowledge, not “esoteric,” though others say the platform’s accumulated complexity makes true “first principles” learning impractical.