Software Engineering Projects
Kerwin Frost's Coca-Cola Dreamworld
Coca-Cola x Complex customizable 3D microverse world creative directed by Kerwin Frost, with 3D objects created by Alfie Dwyer. This is a Next.js webgl application built on React Three Fiber (a React skin on Three.js), and the camera tool was my custom design using SVG manipulation and some fancy math.
Buzzfeed Overlay Animation Stunt
I pioneered the first series of Buzzfeed takeover stunts. We had done this on Complex.com a ton of times (I actually streamlined and templatized the process), but this was the first proof of concept for Buzzfeed. We would serve a custom ad unit to a typical ad slot, and that ad unit would inject code into the parent site to add animation overlay to all the content. In this example, I used SVGs with self-contained CSS styling to create the animations. The added unit would add a CSS script to the parent site that used this animated SVG (all inline using data URI) simply as the background image of pseudelements targeted over the page’s images.
Hot Ones Jr: World’s Friendliest Hot Sauce
Official Website for Hot Ones Jr.! Built on Next.js in collaboration with my colleagues at Complex. Background animation was created using just Sass (including some nifty Sass for loops). Also showcases a lot of styled components.
Complex X Jack Daniel’s Classic Remix
A PHP-based site featuring interactive product models via three.js combined with web elements. In order to avoid performance issues I implemented an intersection observer on the dom, and then a mutation observer from the three.js scripts to conditionally render the webgl canvases.
Pigeons & Planes x Big. Ass. Kids ‘See You Next Year’ Album
Complex’s official launch site for See You Next Year. Intro animation was created using a custom sprite sheet built in Photoshop from a single static image provided by the design team. Animated with GSAP. See You Next Year is a compilation album featuring original songs from a hand-picked roster of the most exciting rising talent across genres by Pigeons & Planes and Big.Ass.Kids.
Macy’s All For Building It
This was a five-part sponsored site for Complex. Created using PHP and a lot of custom Javascript. It was built to be modular to accommodate the iterative installments of each section that were released incrementally over time.
Note: during each installment we had an ad flight that would serve custom Macy’s ads to compliment the sponsored page, but now those flights are over these ad slots look kind of silly serving other brands’ ads 😢, and you may also notice there are some empty ad slots as well.
Alienware X Bodega Gaming Chair Giveaway
This giveaway page features some sophisticated logic for conditionally positioning the banner, as well as incorporating intersection observers to trigger slide transitions in the swiper.js library. Built on PHP with vanilla Javascript.
Kaleidescope Maker
A React app for creating kaleidoscopic art. The visuals were created using p5.js, and the variables are controlled through Redux.
The Expanding Universe
Click inside window to interact
Press 0 for composite, 1 for red shift, 2 for blue shift
Right arrow advances to the next image
Or can you simply wait for the transitions...
By manipulating pixel data of images from the COSMOS deep field, you can see proof of the expanding universe. Red shift is a phenomenon, similar to the doppler effect, where galaxies moving away from us appear red, and those moving toward us appear blue. As you can see through this JavaScript application using p5.js, the universe is indeed expanding. All images are from the Sloan Digital Sky Survey.
Fetal Kick Sensor
Click to simulate a baby kick (not currently supported on iOS devices)
JavaScript visualization for a baby kick sensor I made when my wife was pregnant. By using a 40-point piezo-resistive pressure sensing matrix powered by Arduino, and connecting it in serial to this visualization, my son became the first in utero VJ in history. The sensor also logs all of the data to be used for medical data, potentially spotting developmental trends that could be medical indicators of illness or distress.
Space Zoom
Click and drag to zoom, double-click to change colors.
Press Spacebar for fullscreen.
Press "C" to reset colors to default.
One of my very first JavaScript projects. I still think it’s cool after all this time.