LeftiumLogo Scaling Comparison

This page compares the LeftiumLogo component at different sizes to validate the scaling algorithms for drop radius, wave propagation, and resolution.

Testing Instructions:

  • Click any logo to create a ripple effect
  • Shift+Click any logo to toggle animation on/off
  • Manual Drop All creates ripples on all logos simultaneously
  • Toggle All Animations starts/stops all logo animations
  • Observe how ripple size and wave speed scale proportionally across different logo sizes

Scaling Algorithm Details:

Drop Radius Scaling

Linear interpolation: 62px→2px to 800px→23.36px (capped at 20px)

Math.min(20, Math.max(2, 2 + ((size - 62) / (800 - 62)) * 21.36))

Wave Propagation Scaling

2.0 at 500px down to 0.2 at 125px (clamped at 0.2)

Math.max(0.2, Math.min(2.0, 2.0 - ((500 - size) / (500 - 125)) * 1.5))

Resolution Optimization

Higher density for small sizes, performance cap for large sizes

Math.min(512, Math.max(128, size * 0.8))
50px
Resolution: 128px
Drop Radius: 2.0px (4.0%)
Wave Propagation: 0.2x
100px
Resolution: 128px
Drop Radius: 3.1px (3.1%)
Wave Propagation: 0.4x
200px
Resolution: 160px
Drop Radius: 6.0px (3.0%)
Wave Propagation: 0.8x
400px
Resolution: 320px
Drop Radius: 11.8px (2.9%)
Wave Propagation: 1.6x
800px
Resolution: 512px
Drop Radius: 20.0px (2.5%)
Wave Propagation: 2.0x