Skip to content

Relaxing tunes and visuals to help you focus, meditate, or sleep. Project inspired by Hyperplexed's video on their YouTube channel.

License

Notifications You must be signed in to change notification settings

Biki-das/polyrhythmic-rings

Repository files navigation

Polyrhythmic Rings

My GIF

Relaxing tunes and visuals to help you focus, meditate, or sleep. Project inspired by Hyperplexed's video on their YouTube channel.

Built Using

Installation

Note: You need to have Node.js and npm installed on your machine before following these steps.

git clone https://github.com/Biki-das/polyrhythmic-rings.git
cd polyrhythmic-rings
npm install
npm run dev

Now, open your browser and navigate to http://localhost:3000 to see the application running.

Cross-Browser Caveats & Performance Issues

One of the most performance intensive parts of the application is the horizontal strings that trigger when the white circles hit them. I faced severe performance issues in Safari and Firefox. I tried two methods to solve this.

works best with non-webkit based browser(browser excluding safari and webkit based)

First by using SVG filters on an SVG <line /> element, and the second, using the same filters on an HTML <div />. The first method performs well for Safari, but is very sluggish for Firefox, however the second method is very sluggish for Safari, and just marginally better for Firefox. We're currently using the SVG <line /> in production, but both versions are available in the project files.

I'll continue to work on this, I have a few new ideas to try out.

About

Relaxing tunes and visuals to help you focus, meditate, or sleep. Project inspired by Hyperplexed's video on their YouTube channel.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published