Hysen Labs
Library / SDK
Okazari/Rythm.js avatar
Okazari

Rythm.js

GitHub describes it as A javascript library that makes your page dance.. The repository metadata lists JavaScript as its primary language. The metadata lists the GPL-3.0 license. This article stays within the project description and details documented in the GitHub repository README.

3,927 stars248 forksJavaScriptGPL-3.0
01
DEEP OPEN-SOURCE ANALYSIS

Okazari/Rythm.js: Contribute

GitHub describes it as A javascript library that makes your page dance.. The repository metadata lists JavaScript as its primary language. The metadata lists the GPL-3.0 license. This article stays within the project description and details documented in the GitHub repository README.

02
DEEP OPEN-SOURCE ANALYSIS

Repository scope

GitHub describes it as A javascript library that makes your page dance.. The repository metadata lists JavaScript as its primary language. The metadata lists the GPL-3.0 license. The README describes the project this way: You can use the addRythm function to make your own classes listen to specific frequencies. Here is how the basics classes are created: + addRythm('rythm-bass', 'pulse', 0, 10) + addRythm('rythm-medium', 'pulse', 150, 40) + addRythm('rythm-high', 'pulse', 500, 100)

03
DEEP OPEN-SOURCE ANALYSIS

Contribute

The README section "Contribute" states: For more control of theses dance types, you can give a configuration object as last argument to addRythm :

04
DEEP OPEN-SOURCE ANALYSIS

Contribute

The README section "Contribute" states: Here are the built-in dances and their options: + pulse + min: Minimum value given to transform: scale() . Default: 0.75 + max: Maximum value given to transform: scale() . Default: 1.25 + jump + min: Minimum value given to transform: translateY() . Default: 0 + max: Maximum value given to transform: translateY() . Default: 30 + shake + min: Minimum value given to transform: translateX() . Default: -15 + max: Maximum value given to transform: translateX() . Default: 15 + direction: left for a right to left move, right for a left to right move. Default: right + twist + min: Minimum value given to transform: rotate() . Default: -20 + max: Maximum value given to transform: rotate() . Default: 20 + direction: left for a right to left move, right for a left to right move. Default: right + vanish + min: Minimum value (between 0 and 1) given to opacity . Default: 0 + max: Maximum value (between 0 and 1) given to opacity . Default: 1 + reverse: Boolean to reverse the effect. Default: false (Higher the pulse is, the more visible it will be) + borderColor + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: [0,0,0] + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: [255,255,255] + color + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: [0,0,0] + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: [255,255,255] + radius + min: Minimum value given to border-radius . Default: 0 + max: Maximum value given to border-radius . Default: 25 + reverse: Boolean to make effect from max to min. Default: false + blur + min: Minimum value given to filter: blur() . Default: 0 + max: Maximum value given to filter: blur() . Default: 8 + reverse: Boolean to make effect from max to min. Default: false + swing + curve: Whether the element should curve up or down . Default: down + direction: Whether the element should swing right or left . Default: right + radius: How far the element will swing. Default: 20 + kern + min: Minimum value given to letter-spacing . Default: 0 + max: Maximum value given to letter-spacing . Default: 25 + reverse: Boolean to make effect from max to min. Default: false + neon + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: [0,0,0] + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: [255,255,255] + borderWidth + min: Minimum value given to border-width . Default: 0 + max: Maximum value given to border-width . Default: 5 + fontSize + min: Minimum value given to font-width . Default: 0.8 + max: Maximum value given to font-width . Default: 1.2 + tilt + min: Minimum value given to tilt . Default: 20 + max: Maximum value given to tilt . Default: 25 + reverse: Boolean to make effect from max to min. Default: false + fontColor + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: [0,0,0] + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: [255,255,255]

05
DEEP OPEN-SOURCE ANALYSIS

Contribute

The README section "Contribute" states: If you want to use your own dance type, you need to give an object as the 2nd argument of addRythm instead of a built in dance key.

06
DEEP OPEN-SOURCE ANALYSIS

Editorial conclusion

The repository README is the source for this review. It does not replace a local installation or an independent test.

07
DEEP OPEN-SOURCE ANALYSIS

Official sources

08
Community notes

Community notes