Animation flickering: Decollision and position transitions still conflict over DOM attributes

[fronx]

Problem

The music visualization still exhibits flickering despite the animation coordination system implementation. The fundamental issue is that multiple animation systems are simultaneously manipulating the same DOM attributes (cx/cy).

Root Cause

In DotVisualization.jsx:379, position transitions are conditionally disabled:
positionTransitionMs={positionsAreIntermediate || enableDecollisioning ? 0 : positionTransitionMs}

However, the decollision effect (lines 275-332) still runs and directly manipulates the same DOM elements:
dots0.attr('cx', d => d.x).attr('cy', d => d.y)

The coordination system attempts to sequence animations but doesn't actually prevent both systems from running simultaneously and fighting over the same cx/cy attributes.

Expected Behavior

Only one animation system should control dot positions at any given time, with true mutual exclusion.

Current Behavior

• Position transitions and decollision can run simultaneously
• Both systems manipulate cx/cy attributes on the same DOM elements
• Results in visual flickering as DOM updates conflict

Solution Requirements

1. True mutual exclusion: Only one system should have DOM control at a time
2. Proper handoff: Clear ownership transfer between animation phases
3. Consistent state: No conflicting DOM manipulations

Related Files

• src/renderer/components/MusicDotVisualization.tsx - Animation coordination
• react-dot-visualization/src/DotVisualization.jsx - Library coordination logic
• react-dot-visualization/src/ColoredDots.jsx - Position transitions