This project is meant to mimic a toy xylophone, and uses a subtle “vibration” animation to indicate when each note is played. Notes can be played using either the cursor or the top row of letters on the user’s keyboard. All assets are SVGs made in Adobe Illustrator, which allows each key to be individually manipulated using CSS and Javascript. The exception to this is the mallet image; although it was still created in Adobe Illustrator, it had to be exported as a PNG image in order to work as a cursor.
Pressing the Enter key will change the colour palette of the Xylophone. This was accomplished by changing the colour of the body and border of each key, along with the text indicating the tone of the key. Additionally, the user is able to toggle between “light mode” and “dark mode” by clicking the icon at the top right. The final effect of note is the cursor, which turns into a mallet only when it hovers over the keys of the xylophone. I was able to do this by setting the cursor to “hidden” and having the PNG image of the mallet follow the user’s cursor.
