✨ mechanical counter ✨

robinhood inspired mechanical counter
built with react and framer-motion

styled with prettier
Github release version
Commits since release
npm release version



npm i framer-motion mechanical-counter


import { MechanicalCounter } from "mechanical-counter";

export function App() {
  return <MechanicalCounter text="1337.12" />;


The component will only animate numbers and common number separators: ,, ., and -. If you want to include text before the number, then you must include that along side the component. It’s totally fine to include non-supported characters in the text you send in to the component through the “text” prop, however, they must be added as a suffix to the text.

Here is an example of adding text before the number, as a prefix, and also including some plain text—that is “unsupported characters”—after the number, as a suffix.

<div style={{ display: "flex", alignItems: "center" }}>
  <MechanicalCounter text="5,407 total cost" />

The code above will result in the following:



View Github