mechanical-counter

mechanical counter for react built with framer-motion

Usage no npm install needed!

<script type="module">
  import mechanicalCounter from 'https://cdn.skypack.dev/mechanical-counter';
</script>

README

✨ mechanical counter ✨

robinhood inspired mechanical counter
built with react and framer-motion


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

preview

Install

npm i framer-motion mechanical-counter

Usage

import { MechanicalCounter } from "mechanical-counter";

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

Help

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" }}>
  EU€
  <MechanicalCounter text="5,407 total cost" />
</div>

The code above will result in the following:

preview