Motionboard
Original · Apple iOS 26 Liquid Glass · 1:48–1:52YouTube ↗
Motionboard recreation

Glass Lens

A transparent glass disc, loupe, or control moves over content, magnifying and refracting what lies beneath, with dispersion at the edge.

Seen in

YouTube ↗
YouTube ↗
YouTube ↗
Full recipe

Why it works

Barrel distortion at the edge says "this is glass" more than the magnification inside the lens does. The transition tool is the material being introduced: on the frame where the camera pushes in until the glass fills the screen, the background flips from black to light gray-white, and the flip hides in the fully covered frame.

Spec

Timing
Film 10.8s. Phone rises 0-0.9s. Tab-bar lens: pop 1.45s, slide Home to Library 1.6-2.3s, release 2.25s. Plus tap 3.0s, sheet up 3.1-3.75s. Caret loupe: pop 4.05s, hops 4.45-4.85s and 4.85-5.25s, drop 5.3s. Toggle: lens pop 5.45s, drag 5.55-5.95s, drop 6.0s. Create tap 6.05s, Now Playing up 6.2-6.95s. Scrubber knob: pop 7.2s, drag 7.35-8.45s. Camera push 8.1-8.8s, crossfade to the wordmark 8.6-8.95s, final lens slides 8.7-10.8s
Easing
Pop-in expo.out 0.28s, magnification ramp expo.out 0.3-0.35s, lens moves expo.out (0.7s tab bar, 0.4s per caret hop, 0.4s toggle, 1.1s scrubber), release power2.out 0.26s, camera moves expo.out 0.7-0.95s with two none holds; the final lens drifts none over 2.1s. The glass and the content copy under it move in the same tween, same ease, same duration
Camera
A scaled stage, not a moving lens: scale 1.06 to 1.09, then pushes to 1.75 on the tab bar (0.95s), 1.8 hold, 1.15 on the sheet (2.45s), 2.3 on the caret line (3.6s), 2.9 on the toggle (5.1s), 1.1 pull-back (6.0s), 2.2 on the scrubber (6.95s), and 6.0 into the knob (8.1s), each 0.7-0.95s expo.out, centered on the control about to get glass
Subject
Glass is a scaled copy of the same content clipped to a pill with saturate(1.2) contrast(1.03): tab bar 72x56 at 1.55x, caret loupe 132x58 at 1.7x, toggle 64x40 at 1.5x, scrubber knob 64x38 at 1.6x, final wordmark lens 440x262 at 1.28x. Each pops from scale 0.7-0.85 to 1.0-1.12; controls are solid at rest and turn to glass only while dragged
Sync
The glass and its content copy are offset in the same tween. On arrival (2.25s) the tab color, selection pill, screen swap and lens release happen on one frame. The toggle thumb, track color (green #34c759 at 5.65s) and lens move together; the scrubber knob, fill and the elapsed and remaining time (0:41 to 2:41, -3:02 to -1:02, 7 steps) follow the lens
Style
Light gray radial background (#f6f7f9 to #dddfe5) with a 12% edge vignette; dark phone body. Glass has a white top highlight, 1.2px conic-gradient rim (pink, amber, green, blue, violet), 3px pink left and blue right inner edge shadow, and a soft drop shadow. Final wordmark Inter 600, 250px, letter-spacing -0.05em, #101114

Prompt

Build a product tour film called Glass Lens, 10.8s on a light gray radial background (#f6f7f9 to #dddfe5, 12% edge vignette) with a phone UI that stays solid at rest and shows glass only on the control being dragged. Glass is a scaled copy of the same content clipped to a pill, with saturate(1.2) contrast(1.03), a white top highlight, a 1.2px conic-gradient rim (pink, amber, green, blue, violet) and 3px pink and blue inner edge shadows; the glass and the content copy beneath it move in one tween with the same ease and duration. Pop each lens in over 0.28s with expo.out (scale 0.7-0.85 to 1.0-1.12) while magnification ramps over 0.3s: tab bar lens 1.55x slides from Home to Library over 0.7s at 1.6s and releases at 2.25s on the same frame the tab, screen and selection change; a 132x58 caret loupe at 1.7x pops at 4.05s and hops line to line, 0.4s expo.out each, at 4.45s and 4.85s; a 64x40 toggle lens at 1.5x drags the thumb 20px over 0.4s at 5.55s while the track turns #34c759; a 64x38 knob lens at 1.6x drags the scrubber for 1.1s at 7.35s with the elapsed and remaining times stepping 7 times. Animate the camera as a scaled stage that centers on each control before its lens appears (1.09, 1.75, 1.15, 2.3, 2.9, 1.1, 2.2, each 0.7-0.95s expo.out), push to 6.0x at 8.1s, crossfade over 0.35s at 8.6s to a 250px Inter 600 wordmark (#101114, letter-spacing -0.05em), and slide a 440x262 lens at 1.28x across it by 150px over 2.1s with ease: "none".

People describe it as

  • A clear glass piece magnifying the text under it
  • A magnifier following the cursor across a line of text
  • As a glass button slides by, the content under it is magnified and warped

Often confused with

  • Glass Droplet SplitGlass Droplet Split shows glass deforming and breaking apart; Glass Lens shows glass refracting and magnifying the content below it.
  • Match CutMatch Cut swaps in another object at the same anchor; Glass Lens flips the scene on the one frame where the lens fills the screen.
Recipe file (.md)

More Features