feat: zoom — Apple lensing (whole-surface magnification), on by default (1.4.0) - #5
Open
amnn-in wants to merge 1 commit into
Open
feat: zoom — Apple lensing (whole-surface magnification), on by default (1.4.0)#5amnn-in wants to merge 1 commit into
amnn-in wants to merge 1 commit into
Conversation
…ault (1.4.0)
Apple's Liquid Glass doesn't just refract at the edges — the material
"lenses": the whole surface subtly magnifies the backdrop like thick
glass (WWDC25 "Meet Liquid Glass"). Our maps had an optically flat
interior, which is why backdrops never looked zoomed.
- New `zoom` option (default 0.15 — a touch of lensing out of the box;
0 restores the flat interior). Spherical-cap profile: sample point
pulled toward the centre by zoom·(1−√(1−r̂²))·r⃗ — zero at the centre,
strongest at the edges — summed with the bezel refraction. Rides the
refraction scale (needs refraction > 0); no-op in css mode.
- svg / svg-clone: lens term baked into the displacement map. zoom=0
keeps the ring-only fast path (verified byte-identical to main across
300 configs); zoom≠0 takes a full-surface loop. Cache keys include zoom.
- webgl: same term in the shader (0.5 factor matches the map's channel
scale). update({zoom}) re-renders live — restoring zoom:0 reproduces
the flat render byte-identically.
- fix: readRadius resolved "50%" as 50px — percentage border-radius now
resolves against the box, so 50% circles get true circular maps
instead of rounded-square ones.
- <glass-kit> `zoom` attr, React GLASS_KEYS, .d.ts docs, README.
- Generator: "Zoom / magnify (Apple lensing)" slider (default 0.15),
emitted in all code exports; Lens/Magnifier presets get 0.4/0.65.
- bench/verify-zoom.mjs: svg+webgl interior lensing via composited
screenshots, live-update round-trip, %-radius map assert, generator
export checks. verify-buildmap extended with zoom probes.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Apple's Liquid Glass "lenses" — the whole surface subtly magnifies the backdrop like thick glass, not just edge refraction (their word for it in WWDC25 · Meet Liquid Glass). Glasskit's maps had an optically flat interior, which is why backdrops never looked zoomed. This PR adds it, on by default.
The lens
Spherical-cap profile, matching teardowns of the iOS shader: each pixel's sample point is pulled toward the centre by
zoom · (1−√(1−r̂²)) · r⃗— zero at the exact centre, strongest at the edges — summed with the existing bezel refraction. Elliptical normalisation covers rounded rects/pills.zoomoption — default 0.15 (a believable "thick glass" touch at default refraction: ~2px pull at mid-edge);0restores the flat interior. Rides therefractionscale; documented no-op incssmode.readRadiusparsedborder-radius: 50%as50→ circles got rounded-square refraction maps. Percentages now resolve against the box.<glass-kit zoom>, React, types, README. Generator gets a "Zoom / magnify (Apple lensing)" slider; Lens/Magnifier presets use 0.4/0.65.Verification
verify-buildmap: 300 configs byte-identical to main with zoom 0 (ring-only fast path intact); zoomed maps probe-checked (interior R=126 vs 128 at the ¾ point — exactly the profile's prediction) and cache-key distinct.verify-zoom(new): svg and webgl interiors visibly lens via composited screenshots;update({zoom:0})reproduces the flat render byte-identically in both modes; 50%-circle map asserts a true circle; all three generator exports emitzoom; zero page errors.bench-smoke: all 4 engines 60fps, no errors.Version → 1.4.0 (default-visual change: existing users get subtle lensing unless they set
zoom: 0).Not merging — open for review. After merge:
git tag v1.4.0 && git push origin v1.4.0publishes to npm.🤖 Generated with Claude Code