tap-through
Phone feed tap animation: scroll a social feed and tap a button. Somebody's feed, the button they press, and the line that press was for. A phone hangs in the dark with a wall of posts on it; the camera falls down the glass until the two actions at the bottom are the only thing left; one of them is tapped; the fall keeps going until the frame is the phone's own milled edge — and then the picture is gone and only the sentence is left. Four beats, three hard cuts. The whole thing lives on one plane, so the camera is a projective map and the useful fact about a plane under perspective is that screen y is affine in the magnification: fitting that to the buttons' own trapezoid (they are rectangles on the device, so their taper is the perspective) gives a magnification, a framing and a camera distance per frame, and leaves the device's geometry falling out as constants — the button is 71.3 units tall on all 29 frames it can be measured on, ±0.5, and the phone's bottom edge sits 150.5 under the button's top, ±0.6. It is handed to the browser as one matrix3d rather than a perspective and a rotateX, because the tilt angle and the perspective distance trade off exactly and solving for both is solving for a number that is not there. The cut moves the camera, it does not cut it: the distance runs 36700 → 3800 through the first beat and 4030 → 175 through the second, one fall all the way in. The tap is a scale and a colour together — 0.87 over two frames and back inside four, a white that peaks at 0.36 and is gone eight frames later — and the closing lines do not scale at all: both hold their width to a twentieth of a pixel while their centres climb.
tap-through
Phone feed tap animation: scroll a social feed and tap a button. Somebody's feed, the button they press, and the line that press was for. A phone hangs in the dark with a wall of posts on it; the camera falls down the glass until the two actions at the bottom are the only thing left; one of them is tapped; the fall keeps going until the frame is the phone's own milled edge — and then the picture is gone and only the sentence is left. Four beats, three hard cuts. The whole thing lives on one plane, so the camera is a projective map and the useful fact about a plane under perspective is that screen y is affine in the magnification: fitting that to the buttons' own trapezoid (they are rectangles on the device, so their taper is the perspective) gives a magnification, a framing and a camera distance per frame, and leaves the device's geometry falling out as constants — the button is 71.3 units tall on all 29 frames it can be measured on, ±0.5, and the phone's bottom edge sits 150.5 under the button's top, ±0.6. It is handed to the browser as one matrix3d rather than a perspective and a rotateX, because the tilt angle and the perspective distance trade off exactly and solving for both is solving for a number that is not there. The cut moves the camera, it does not cut it: the distance runs 36700 → 3800 through the first beat and 4030 → 175 through the second, one fall all the way in. The tap is a scale and a colour together — 0.87 over two frames and back inside four, a white that peaks at 0.36 and is gone eight frames later — and the closing lines do not scale at all: both hold their width to a twentieth of a pixel while their centres climb.