Metric Morph
The control becomes the number it produces.
How it moves
An export button settles from the press that opened the shot, its label dissolves, and the pill collapses inward into a square that runs from black through brown into the accent — the tallest cell of a chart that then fades up around it. The collapse is an ease-in that arrives at full speed, so it slams into the grid rather than settling into it, and the chart rises on one clock with no stagger, as one object. Every curve fitted frame by frame against a reference from sub-pixel edges.
Installation
$ pnpm dlx shadcn@latest add @snapcn/metric-morphNeeds 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 Metric Morph to a Remotion project?
Metric Morph is part of snapcn Pro, and installs with the same shadcn CLI as every free component: npx shadcn@latest add @snapcn/metric-morph. The source is copied into your project and is yours to edit — there is no runtime package to keep installed.
What is Metric Morph?
Metric Morph is a Remotion bar chart animation for React. The control becomes the number it produces.
Is Metric Morph 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.