https://github.com/bitttttten/mechanical-counter

A mechanical counter as seen on Robinhood. Recreated with framer-motion for react.
https://github.com/bitttttten/mechanical-counter

counter framer framer-motion mechanical react robinhood

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/bitttttten/mechanical-counter
• Owner: bitttttten
• Created: 2021-10-22T13:03:58.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-07-09T21:11:49.000Z (over 2 years ago)
• Last Synced: 2025-03-29T17:35:52.990Z (7 months ago)
• Topics: counter, framer, framer-motion, mechanical, react, robinhood
• Language: TypeScript
• Homepage: https://main--617315b23667c2003a0d878b.chromatic.com
• Size: 2.61 MB
• Stars: 23
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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](./docs/preview.webp)

## Install

```sh

npm i framer-motion mechanical-counter

```

## Usage

```js

import { MechanicalCounter } from "mechanical-counter";

export function App() {

  return ;

}

```

### 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.

```js



  EU€

  



```


The code above will result in the following:

![preview](./docs/preview-2.webp)