Ecentricarts Holiday Card

December 2015

Nothing says “happy holidays” like synchronized music and in-browser animation.

Hot off the animated interactions of Curbell Plastics (only in private beta release by this point), and the scratch-built JavaScript fun of #VoteNation, ecentricarts had a slick idea for a JS-heavy holiday card. I was tapped to help coordinate the recording session, record vocals and kazoo during the session, and build out the holiday card - no app-dev help on this one (but a little time-crunch front end help for styling cleanup and responsive reflow).

After building the card, I also contributed to the blog post detailing the project’s effort, which you can check out here. The blog post covers the nitty-gritty in better detail, so give it a look if you’d like to know how the timing of an object of variable arrays of animated performers was built to line up with beats of the song we recorded. The heaviest challenges are covered there, from figuring out how to control the sync’d timing to ensuring that music and animation kicked-off at the same time with some reliability.

Singing sprites - The holiday card’s grid of 15 singing sprites, each on it’s own variable-duration loop of 3 frames, controlled with a beat-by-beat object to match up with the song’s timing.
Testing, testing - While the blog post includes a lot of process, logic, and some Sublime Text screen shots, I never got to bundle in my Scott Pilgrim filled tests for array sequencing and timing CSS animation loops to music. You’re welcome.
Pop open ecentricarts’ 2015 holiday card