STRANGER THINGS TITLES RECREATED IN D3.JS

A D3.JS EXPERIMENT BY TIM MARCO

ORIGINAL TITLE DESIGN BY IMAGINARY FORCES

WHAT IS THIS?

This is an attempt to re-create the main titles for the Netflix show Stranger Things entirely in the browser. The actual sequence was created by Imaginary Forces, and they of course deserve all credit for designing such a cool, iconic intro.

The actual title sequence was created using sophisticated rendering software like After Effects and Cinema4D. As an experiment, I wanted to see the extent to which I could capture the look and feel of the design using decidedly less advanced software.

In other words, I wanted to see the extent to which I could capture cinematic text effects entirely in code.

Everything that you see in the example is SVG; there's no ray tracing, image textures, or post-processing going on. And while the differences are significant and noteworthy, I was surprised by just how much is possible using just vector graphics and a few filters.

You can compare the two side-by-side here:

Aw Crap!

This is annoying, I know, but this experience doesn't really work well on mobile devices. You can try, but you're much better off trying this on a desktop or laptop.

You can try by clicking the button below, but don't say I didn't warn ya.