Tap Through
Somebody's feed, the button they press, and the line that press was for.
How it moves
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.
Installation
$ pnpm dlx shadcn@latest add @snapcn/tap-throughNeeds an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.
Frequently asked questions
How do I add Tap Through to a Remotion project?
Tap Through is part of snapcn Pro, and installs with the same shadcn CLI as every free component: npx shadcn@latest add @snapcn/tap-through. The source is copied into your project and is yours to edit — there is no runtime package to keep installed.
What is Tap Through?
Tap Through is a Remotion product demo animation for React. Somebody's feed, the button they press, and the line that press was for.
Is Tap Through free?
No. It is one of 48 Pro components, sold together: $129 a year for the whole catalogue and everything that ships while your year runs, or $249 once to own it outright. The other 41 snapcn components are free and MIT.