https://github.com/atsixian/gravity-beans

Interact with gravity on the web. Tilt to pour coffee beans. Volume controlled by gravity.
https://github.com/atsixian/gravity-beans

framer-motion gravity sound tailwindcss vite

Last synced: about 15 hours ago
JSON representation

Interact with gravity on the web. Tilt to pour coffee beans. Volume controlled by gravity.

• Host: GitHub
• URL: https://github.com/atsixian/gravity-beans
• Owner: atsixian
• License: mit
• Created: 2023-07-27T14:50:03.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-05T08:17:00.000Z (over 1 year ago)
• Last Synced: 2023-08-05T09:27:48.826Z (over 1 year ago)
• Topics: framer-motion, gravity, sound, tailwindcss, vite
• Language: TypeScript
• Homepage: https://gravity-beans.sixian.li
• Size: 5.02 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![gravity-beans](./public/og.png)

# Gravity Beans

Tilt to pour coffee beans. Volume controlled by gravity.

## Why

Inspired by [Physics Engine Volume Slider](https://www.reddit.com/r/ProgrammerHumor/comments/6fcbrb/physics_engine_volume_slider/). I thought integrating **real** gravity into it would be cool, so here you go.

## How it works

- Motion data: [ `devicemotion` ](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event)

- Sound: [Howler.js](https://howlerjs.com/)

- Gesture: [Framer Motion](https://www.framer.com/motion/)

Check out the [hooks](./src/hooks).

## License

This project is licensed under the MIT License.