JV

Art Direction / UX Design / UI Design

2017

Chasing Coral is an awe-inspiring, poignant Netflix Original documentary that tracks the decline of coral reefs, which are vanishing at an unprecedented rate all around the world. A team of divers, photographers and scientists set out on a thrilling ocean adventure to discover why and to reveal the underwater mystery to the world. The movie ends with a striking wake-up call to save a crucial creature in our earth's complex ecosystem. To support this call-to-action, the team behind Chasing Coral asked me to help design an action hub for the movie that would enable and encourage viewers to take action on climate issues

<style>

.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }

.embed-container-noshadow { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);}

.embed-container-noshadow iframe, .embed-container-noshadow object, .embed-container-noshadow embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

<div class='video-container'><div class='embed-container-noshadow'><iframe src='https://player.vimeo.com/video/329674327?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>

Frontpage Reveal & Subsections

<style>

.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }

.embed-container-noshadow { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);}

.embed-container-noshadow iframe, .embed-container-noshadow object, .embed-container-noshadow embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

<div class='video-container'><div class='embed-container-noshadow'><iframe src='https://player.vimeo.com/video/328308407?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>

Custom hover effects, immersing the viewer into the context

<style>

.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }

.embed-container { position: relative; padding-bottom: 53.75%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 10px 40px 0 rgba(0,0,0,0.15);}

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

<div class='video-container'><div class='embed-container'><iframe src='https://player.vimeo.com/video/329669217?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>

Scrollytelling Page