28 lines · 1 KBtext/plain; charset=utf-8
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.
| 6 | export type SpringConfig = { omega: number; zeta: number }; |
| 7 | export type Spring = { value: number; velocity: number }; |
| 8 |
| 9 | /** The substep, in seconds. */ |
| 10 | export const STEP = 1 / 240; |
| 11 |
| 12 | // iOS's measurements are in points of a 54 pt lens; glass converts them by its |
| 13 | // own thickness. |
| 14 | export const LENS_PT = 54; |
| 15 | // Pressed, glass swells on a bouncy spring, and springs back on release... |
| 16 | export const SWELL: SpringConfig = { omega: 17.6, zeta: 0.59 }; |
| 17 | // ...to this much longer, and as much wider in proportion. |
| 18 | export const SWELL_PT = 14.6; |
| 19 |
| 20 | export function spring(value = 0): Spring { |
| 21 | return { value, velocity: 0 }; |
| 22 | } |
| 23 |
| 24 | export function stepSpring(spring: Spring, target: number, { omega, zeta }: SpringConfig, dt: number) { |
| 25 | spring.velocity += (omega * omega * (target - spring.value) - 2 * zeta * omega * spring.velocity) * dt; |
| 26 | spring.value += spring.velocity * dt; |
| 27 | } |
| 28 |