About

Read Bio

Work

View Case Studies

Contact

Get in touch
Thanks to these good people who've helped me a long the way.
These Beats Are Dope logo

A Curated Playlist

celebrating Kanye West's contribution to music, fashion, and art.
These Beats Are Dope logo
Launch Website

Looking for an excuse to collaborate with long time friend and uber talented illustrator Anu Chouhan, These Beats are Dope is an interactive playlist celebrating Kanye West's contribution to music, fashion, and art. A combination of Spine and the web APIs from Spotify and Youtube, the project launched with a feature on One Page Love, an honorable mention from Awwwwards, and much love from the music community.

  • UI/UX Design
  • Art Direction
  • Javascript Development

A Glimpse into Implementation

With 7 variations of Kanye depicted throughout his discography, the layered illustrations were imported into Spine, where they were rigged and then keyframed. Animations were created from the assets, referenced later from a JSON playlist. The bopping was created with varying speeds to match music tempo, with breathing added for long pauses, and randomised blinking for a more life-like effect.

Spine animation
[1] Animation in Spine
Beat Tracker
[2] Tracking Beats with Firebase

Tracking beats was a combination of manual effort and automatic interpolation. Creating a beat tracker with the Youtube API and Firebase, each time the spacebar was clicked. a keyframe referencing a specific timestamp would be recorded in the database. With a start time and end time indicating specific intervals of music, we only needed the BPM to determine exactly when Kanye would bop his head.

Aziz Ansari Joke Kanye
Kanye West Joke
These Beats are Dope Joke

More Work

A showcase of design,
development and experiments
Online gambling

Keno

An Angular app based on Australia's
favorite lottery game.
View case study
Bond back cleaning Sydney

This is Neat

A cleaning platform keeping tenants happy all across Australia. View case study
Bond back cleaning Sydney

Web Directions South

A WebGl title sequence
pushing the boundaries of what's capable in the browser.
View case study