Microinteractions

iOS inspired music player with a touch of microinteractions. Uses plain HTML5 audio under the hood for audio playback and Framer Motion for bouncy animations. Click around and enjoy the subtle details :)

Microinteractions
Floating Abstract

Floating Abstract

Coma Studio

0:00

-0:00

The hardest part of this project wasn't the small interactions themselves, but the audio playback and visualization. At first I quickly jumped into using React Howler for audio playback, but it didn't quite fit my needs so I decided to use the native HTML5 audio element instead.

There are a lot of moving parts to consider when working with audio in the browser. I'll write a post about it one day.

Music by Yurii Semchyshyn, Dmitrii Kolesnikov, and Alisia from Pixabay.