search

bitttttten / mechanical-counter

A mechanical counter as seen on Robinhood. Recreated with framer-motion for react.
https://main--617315b23667c2003a0d878b.chromatic.com
23 stars 3 forks source link
counter framer framer-motion mechanical react robinhood

readme

✨ mechanical counter ✨

robinhood inspired mechanical counter
built with react and framer-motion


👉 live preview 👈


[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Github release version](https://img.shields.io/github/tag/bitttttten/mechanical-counter.svg)](https://github.com/bitttttten/mechanical-counter/releases) [![Commits since release](https://img.shields.io/github/commits-since/bitttttten/mechanical-counter/v1.0.15.svg)](https://github.com/bitttttten/mechanical-counter/compare/v1.0.15...main) [![npm release version](https://img.shields.io/npm/v/mechanical-counter.svg)](https://www.npmjs.com/package/mechanical-counter)

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