icon_home Created with Sketch.

Heart Beat Toy

The original idea had themes of finding each other. So the heart connects to the people in the photos, and will randomly beat when a person crosses it.

What makes a heart beat?


Is it surprise?
Laughter?
Or something…


like love?


Or is it waiting for someone like me to come along?


Well, it’s really electrochemical reactions
in your cellular structure.


¯\_(ツ)_/¯


But we can still hang if you wanna.

Basic Rendering

So there’s a number of different elements being animated. The bulk of the javascript is just coordinating what needs to be updated, and what’s being frozen. In essence, it’s a very crude engine that’s clearing out the frame, checking first, updating the math, and then drawing everything.

Scrolling & Grids

With CSS Grids, I get to make easier assumptions about the position of things. The layer that draws the graphics sits fixed on top of the photo layer. The photos are flexed into a row, and I just update that as I track the scrolling.

Canvas & SVG

SVG as an object offers CSS flexibility, but the canvas object is just much faster at rendering. So I took the hard path of faking an image, and shoving the SVG into there with my styling. The canvas then took a snapshot of that to draw, thus letting me pick the colors. The drawback is that the styling is now hard-coded in the javascript.

What's surprising is how little it took to make it mobile friendly. All the math is relative to a few things. So it's pretty stable.