Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.
| 1 | /* Damped springs for values that retarget mid-flight, keeping their velocity, as a |
| 2 | dragged or redirected lens does. A spring is an angular frequency (rad/s) and a |
| 3 | damping ratio; the caller steps them in fixed substeps, which keeps stiff springs |
| 4 | stable when frames drop. */ |
| 5 | |
| 6 | export type SpringConfig = |
| 7 | export type Spring = { value: number; velocity: number }; |
| 8 |
| 9 | /** The substep, in seconds. */ |
| 10 | export const STEP = 1 / 240; |
| 11 |
| 12 | export function spring(value = 0): Spring { |
| 13 | return { value, velocity: 0 }; |
| 14 | } |
| 15 |
| 16 | export function stepSpring(spring: Spring, target: number, { omega, zeta }: SpringConfig, dt: number) { |
| 17 | spring.velocity += (omega * omega * (target - spring.value) - 2 * zeta * omega * spring.velocity) * dt; |
| 18 | spring.value += spring.velocity * dt; |
| 19 | } |
| 20 |