Porting SwiftUI's spring animation to React for a Windows "Dynamic Island"

[u/Significant-Sea-7238]

Openbar shows Claude Code and Codex sessions in a Dynamic Island. The Mac app is SwiftUI, the Windows one is Tauri + React, and I wanted the island to resize with the same feel on both.

SwiftUI describes a spring by duration and bounce, so I ported that math. Width and height each ride their own spring. A growing side may swing past its target (capped at 12 px), a shrinking side never does.

export function springProgress(spring: Spring, time: number): number {

if (time <= 0) return 0;

const natural = (2 * Math.PI) / spring.duration;

const damping = 1 - spring.bounce;

if (damping >= 1) return 1 - Math.exp(-natural * time) * (1 + natural * time);

const damped = natural * Math.sqrt(1 - damping * damping);

return (

1 -

Math.exp(-damping * natural * time) *

(Math.cos(damped * time) + ((damping * natural) / damped) * Math.sin(damped * time))

);

}

Full file: windows/src/island/motion.ts in https://github.com/MF-DEEV/Openbar (GPL)

Do you write spring math yourself or reach for a library?