Skip to content

A mechanical counter as seen on Robinhood. Recreated with framer-motion for react.

Notifications You must be signed in to change notification settings

the-curve-consulting/mechanical-counter

 
 

Repository files navigation

✨ 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

About

A mechanical counter as seen on Robinhood. Recreated with framer-motion for react.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.2%
  • JavaScript 3.8%