Checkout Push
A phone paying for something, pushed through the camera.
How it moves
The device stands still while the last digit lands on the amount — in one frame, the way a keypad press does — and then the camera walks into it, accelerating the whole way and laying the device back as it arrives so you end up looking up the screen. Fitted on the device's four silhouette edges in every frame of a reference, which is what separates the dolly (×1.35, accelerating) from the tilt (a pure rotateX from frame 18, no yaw or roll). The device is built from the design system and the screen is snapcn's own checkout.
Installation
$ pnpm dlx shadcn@latest add @snapcn/checkout-pushNeeds 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 Checkout Push to a Remotion project?
Checkout Push is part of snapcn Pro, and installs with the same shadcn CLI as every free component: npx shadcn@latest add @snapcn/checkout-push. The source is copied into your project and is yours to edit — there is no runtime package to keep installed.
What is Checkout Push?
Checkout Push is a Remotion product demo animation for React. A phone paying for something, pushed through the camera.
Is Checkout Push 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.