Fix SVG keyframe collisions with dynamic precision

[jackspirou]

Summary

This PR fixes jerky/incorrect SVG animations for large recordings by implementing dynamic percentage precision based on keyframe count.

Problem

When generating SVG animations with many keyframes (e.g., 4000+ for complex demos), the fixed 1-decimal precision for percentages caused collisions:

• 4161 keyframes would collapse into only ~1000 unique percentages
• Multiple keyframes had identical percentage values (e.g., five keyframes all at "20.6%")
• Browsers couldn't determine which transform to apply, resulting in jerky or incorrect animations

Example from a real recording:

0.1% { transform: translateX(-8120px); }
0.1% { transform: translateX(-9280px); }  // Same percentage\!
0.1% { transform: translateX(-10440px); } // Browser confused\!

Solution

Implemented a new formatPercentage() function with dynamic precision that adapts to the number of keyframes:

Keyframe Count	Precision	Use Case
< 100	1 decimal	Small demos, quick recordings
< 1,000	2 decimals	Medium animations
< 10,000	3 decimals	Large recordings
< 100,000	4 decimals	Very large recordings
≥ 100,000	5 decimals	Extreme cases

Results

• ✅ No more collisions: Each keyframe gets a unique percentage
• ✅ Optimal file size: Uses minimal precision needed (small demos stay small)
• ✅ Automatic: No configuration required - adapts based on animation complexity
• ✅ Smooth animations: Browsers can correctly interpolate between all states

Testing

• Added comprehensive unit tests for formatPercentage()
• Added tests verifying no collisions for various animation sizes
• Tested with real-world recordings of different complexities
• All existing tests continue to pass

Example Impact

For the problematic tokenizer demo (4161 keyframes):

• Before: 1001 unique percentages → jerky animation
• After: 4161 unique percentages → smooth animation
• File size: Minimal increase (~1-2%) from extra decimal places

Related

This addresses rendering issues mentioned in the upstream discussion: charmbracelet#644

🤖 Generated with Claude Code