177 lines · 7 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.
| 5 | same points, so a field and a toolbar feel like one material. Held and dragged, |
| 6 | it leans after the pointer like taffy, as iOS 27's glass controls do. */ |
| 7 |
| 8 | // Small glass, like a lone round button, swells by at most this share of its size; |
| 9 | // the swell in points would grow it by a quarter. iOS 27's glass buttons and macOS |
| 10 | // 27's clicked glass grow by about a tenth. |
| 11 | const MAX_SWELL = 0.1; |
| 12 | // Held and dragged, the glass moves toward the pointer by up to LEAN of its size |
| 13 | // (and LEAN_MAX px), stretching along the pull by STRETCH times its share of the |
| 14 | // lean while it thins across it by THIN times that. It has weight: it takes RESIST |
| 15 | // px of pointer travel for each px it gives at first, giving less the farther it |
| 16 | // is pulled, and trails the pointer on a heavy spring. Let go, it springs back past |
| 17 | // rest and wobbles once. |
| 18 | const LEAN = 0.09; |
| 19 | const LEAN_MAX = 7; |
| 20 | const RESIST = 5; |
| 21 | const STRETCH = 1.3; |
| 22 | const THIN = 0.5; |
| 23 | const LEAN_SPRING: SpringConfig = { omega: 20, zeta: 0.45 }; |
| 24 | const HELD_SPRING: SpringConfig = { omega: 18, zeta: 0.9 }; |
| 25 |
| 26 | /** The event that makes a swelling surface give or bulge (kickGlass). */ |
| 27 | const KICK = "liquid-glass-kick"; |
| 28 | /** On a surface that swells, so kicks can find it. */ |
| 29 | export const SWELL_ATTRIBUTE = "data-liquid-glass-swell"; |
| 30 |
| 31 | /** |
| 32 | * Kicks the swell of the glass surface around `element`: positive bulges it, |
| 33 | * negative makes it give, by that many swells per second on the swell's spring, so |
| 34 | * it rings back to rest. A menu's glass drawing back into its button does this to |
| 35 | * the glass the button sits in. |
| 36 | */ |
| 37 | export function kickGlass(element: Element | null, velocity: number) { |
| 38 | element?.closest(`[${SWELL_ATTRIBUTE}]`)?.dispatchEvent(new CustomEvent(KICK, { detail: velocity })); |
| 39 | } |
| 40 |
| 41 | /** Swells `surface` while pressed and leans it after a drag. Returns a cleanup function. */ |
| 42 | export function swellOnPress(surface: HTMLElement) { |
| 43 | const reduced = matchMedia("(prefers-reduced-motion: reduce)"); |
| 44 | const swell = spring(); |
| 45 | const leanX = spring(); |
| 46 | const leanY = spring(); |
| 47 | let target = 0; |
| 48 | let targetX = 0; |
| 49 | let targetY = 0; |
| 50 | let origin: { x: number; y: number } | null = null; |
| 51 | let width = 0; |
| 52 | let height = 0; |
| 53 | let frame = 0; |
| 54 | let last = 0; |
| 55 | let carry = 0; |
| 56 |
| 57 | const measure = () => { |
| 58 | width = surface.offsetWidth; |
| 59 | height = surface.offsetHeight; |
| 60 | }; |
| 61 |
| 62 | const write = () => { |
| 63 | const pt = Math.min(width, height) / LENS_PT || 1; |
| 64 | const length = Math.max(width, height); |
| 65 | const grow = Math.min((SWELL_PT * pt) / length, MAX_SWELL); |
| 66 | const base = 1 + swell.value * grow; |
| 67 | const shareX = width ? Math.abs(leanX.value) / width : 0; |
| 68 | const shareY = height ? Math.abs(leanY.value) / height : 0; |
| 69 | const scaleX = base * (1 + STRETCH * shareX - THIN * shareY); |
| 70 | const scaleY = base * (1 + STRETCH * shareY - THIN * shareX); |
| 71 | const still = Math.abs(swell.value) < 1e-4 && Math.abs(leanX.value) < 0.01 && Math.abs(leanY.value) < 0.01; |
| 72 | surface.style.scale = still ? "" : `${scaleX.toFixed(5)} ${scaleY.toFixed(5)}`; |
| 73 | surface.style.translate = still ? "" : `${leanX.value.toFixed(3)}px ${leanY.value.toFixed(3)}px`; |
| 74 | }; |
| 75 |
| 76 | const tick = (now: number) => { |
| 77 | // Fixed steps, as the tabs take them, so the bounce is the same at any frame |
| 78 | // rate. What's left of a frame carries over to the next one. |
| 79 | carry += Math.min(Math.max(now - last, 0) / 1000, 0.05); |
| 80 | last = now; |
| 81 | const lean = origin ? HELD_SPRING : LEAN_SPRING; |
| 82 | for (; carry >= STEP; carry -= STEP) { |
| 83 | stepSpring(swell, target, SWELL, STEP); |
| 84 | stepSpring(leanX, targetX, lean, STEP); |
| 85 | stepSpring(leanY, targetY, lean, STEP); |
| 86 | } |
| 87 | write(); |
| 88 | const resting = |
| 89 | target === 0 && |
| 90 | targetX === 0 && |
| 91 | targetY === 0 && |
| 92 | Math.abs(swell.value) < 0.0005 && |
| 93 | Math.abs(swell.velocity) < 0.01 && |
| 94 | Math.abs(leanX.value) < 0.02 && |
| 95 | Math.abs(leanY.value) < 0.02 && |
| 96 | Math.abs(leanX.velocity) < 0.5 && |
| 97 | Math.abs(leanY.velocity) < 0.5; |
| 98 | if (resting) { |
| 99 | swell.value = swell.velocity = 0; |
| 100 | leanX.value = leanX.velocity = 0; |
| 101 | leanY.value = leanY.velocity = 0; |
| 102 | surface.style.scale = ""; |
| 103 | surface.style.translate = ""; |
| 104 | frame = 0; |
| 105 | return; |
| 106 | } |
| 107 | frame = requestAnimationFrame(tick); |
| 108 | }; |
| 109 |
| 110 | const run = () => { |
| 111 | if (frame) return; |
| 112 | last = performance.now(); |
| 113 | carry = 0; |
| 114 | frame = requestAnimationFrame(tick); |
| 115 | }; |
| 116 |
| 117 | // Eases off toward `limit` the farther the pointer goes, like a rubber band. |
| 118 | const rubber = (distance: number, limit: number) => (limit > 0 ? limit * Math.tanh(distance / (RESIST * limit)) : 0); |
| 119 |
| 120 | const onMove = (event: PointerEvent) => { |
| 121 | if (!origin) return; |
| 122 | targetX = rubber(event.clientX - origin.x, Math.min(width * LEAN, LEAN_MAX)); |
| 123 | targetY = rubber(event.clientY - origin.y, Math.min(height * LEAN, LEAN_MAX)); |
| 124 | run(); |
| 125 | }; |
| 126 |
| 127 | const onRelease = () => { |
| 128 | window.removeEventListener("pointermove", onMove); |
| 129 | window.removeEventListener("pointerup", onRelease); |
| 130 | window.removeEventListener("pointercancel", onRelease); |
| 131 | origin = null; |
| 132 | target = 0; |
| 133 | targetX = 0; |
| 134 | targetY = 0; |
| 135 | run(); |
| 136 | }; |
| 137 |
| 138 | const onDown = (event: PointerEvent) => { |
| 139 | if (event.button !== 0 || reduced.matches) return; |
| 140 | // A press on a button that opens a menu or popover becomes that surface, which |
| 141 | // is placed by the button: swelling, the glass moved the button, and the |
| 142 | // surface followed it. The glass takes the drop back with a bulge instead |
| 143 | // (pourFrom and drawBack). |
| 144 | if (event.target instanceof Element && event.target.closest('[aria-haspopup="menu"], [aria-haspopup="dialog"], [aria-haspopup="listbox"]')) return; |
| 145 | measure(); |
| 146 | origin = { x: event.clientX, y: event.clientY }; |
| 147 | target = 1; |
| 148 | window.addEventListener("pointermove", onMove); |
| 149 | window.addEventListener("pointerup", onRelease); |
| 150 | window.addEventListener("pointercancel", onRelease); |
| 151 | run(); |
| 152 | }; |
| 153 |
| 154 | const onKick = (event: Event) => { |
| 155 | const velocity = (event as CustomEvent<unknown>).detail; |
| 156 | if (typeof velocity !== "number" || reduced.matches) return; |
| 157 | if (!frame) measure(); |
| 158 | swell.velocity += velocity; |
| 159 | run(); |
| 160 | }; |
| 161 |
| 162 | surface.setAttribute(SWELL_ATTRIBUTE, ""); |
| 163 | surface.addEventListener("pointerdown", onDown); |
| 164 | surface.addEventListener(KICK, onKick); |
| 165 | return () => { |
| 166 | surface.removeAttribute(SWELL_ATTRIBUTE); |
| 167 | surface.removeEventListener("pointerdown", onDown); |
| 168 | surface.removeEventListener(KICK, onKick); |
| 169 | window.removeEventListener("pointermove", onMove); |
| 170 | window.removeEventListener("pointerup", onRelease); |
| 171 | window.removeEventListener("pointercancel", onRelease); |
| 172 | if (frame) cancelAnimationFrame(frame); |
| 173 | surface.style.scale = ""; |
| 174 | surface.style.translate = ""; |
| 175 | }; |
| 176 | } |
| 177 |