{"repo":"abjt14/polyrhythmic-rings","free":true,"listed":false,"github":"https://github.com/abjt14/polyrhythmic-rings","clone":"git clone https://github.com/abjt14/polyrhythmic-rings.git","description":"Relaxing tunes and visuals to help you focus, meditate, or sleep.","language":"JavaScript","stars":57,"topics":["framer-motion","nextjs","polyrhythm","radix-ui","svg","svg-animations","svg-filters"],"license":"CC-BY-4.0","category":"saas-starters-boilerplates","readme_excerpt":"Polyrhythmic Rings Relaxing tunes and visuals to help you focus, meditate, or sleep. Project inspired by Hyperplexed's video on their YouTube channel. You can read more about the project here on my website. Built Using - Next.js - SVGs - Framer Motion - Radix UI Installation Note: You need to have Node.js and npm installed on your machine before following these steps. 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. First by using SVG filters on an SVG element, and the second, using the same filters on an HTML . 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 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.","default_branch":null,"files":null,"tree":[],"storefront":"/r/abjt14","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/abjt14/polyrhythmic-rings/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}