uegworldwide.com

United Entertainment Group

uegworldwide.com

UEG was built with Hollywood powerhouse United Talent Agency and the world’s largest communications firm Edelman. Our insights, ideas, intel and access give brands the leading edge and inspire multi-channel activations.

http://www.linkedin.com/company/uegworldwide/
Background

Meet and Greet with UEG

I acquired this project after responding to a colleague’s post on Linkedin looking for a web developer to build their agency’s new site. I was hired immediately. The team at UEG is great to work with and supplied beautiful designs via Zepplin.

ueg_logo

WordPress Plugins

ACF FTW!

Using the Advanced Custom Fields plugin for WordPress makes it fun and efficient to make custom blocks. 22 custom blocks were created, allowing content publishers to simply add into the site, resulting in a styled up block ready to be published.

Sample

Office Location Block

An example of how I used ACF to create the office locations block.

<?php
/**
 * Office Location Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */
$name = 'office-locations';
// Create id attribute allowing for custom "anchor" value.
$id = $name . '-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = $name;
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}
?>
<div id="<?= $id ?>" class="<?= $name ?>">
    <?php 
        if( have_rows('regions') ):
            while ( have_rows('regions') ) : the_row();
                $region = get_sub_field('region_name');
                $locations = get_sub_field('locations');
            ?>
            <div class="<?= $className; ?>__region">
                <h5 class="<?= $className; ?>__region-name"><?= $region; ?></h5>
            <?php 
                foreach($locations as $location):
                $name = $location['name'];
                $email = $location['email'];
                $address_line_1 = $location['address_line_1'];
                $address_line_2 = $location['address_line_2'];
                $city_provice_state_zip = $location['city_province_state_zip'];
                $telephone_number = $location['telephone_number'];
            ?>
                <div class="<?= $className; ?>__location">
                    <h4 class="<?= $className; ?>__location-name"><?= $name ?></h4>                    
                    <a 
                        href="mailto:<?= $email ?>" 
                        class="<?= $className; ?>__location-email" 
                        target="_blank">
                    <?= $email ?>
                    </a>
                    <?php if($address_line_1): ?>
                        <span><?= $address_line_1; ?></span>
                    <?php endif; ?>
                    <?php if($address_line_2): ?>
                        <span><?= $address_line_2; ?></span>
                    <?php endif; ?>
                    <?php if($city_provice_state_zip): ?>
                        <span><?= $city_provice_state_zip; ?></span>
                    <?php endif; ?>
                    <?php if($telephone_number): ?>
                        <span><?= $telephone_number; ?></span>
                    <?php endif; ?>
                </div>
            <?php 
                endforeach;
            ?>
            </div>
            <?php
            endwhile;
        endif;
    ?>
</div>

services:       
    wordpress:
        image: wordpress
        container_name: ueg-local-wp
        hostname: wordpress
        restart: always
        ports:
            - 4000:80
        env_file: 
            - .env/wp.env  
        volumes:
            - wordpress:/var/www/html
            - ./dist/wp-content:/var/www/html/wp-content
            - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini 
# local
$ wp export --dir=/backup/ --with_attachments
$ tar -C uploads -czf uploads.tar.gz
# server 
$ tar -xvf uploads.tar.gz
$ wp import ueg.export.2020-07-20.xml
$ wp search-replace chadandrewdrobish.com/ uegworldwide.com --dry-run
$ wp search-replace chadandrewdrobish.com/ uegworldwide.com
Like peas and carrots

Docker, WordPress, & WP-CLI

Dockerizing wordpress and linking up the correct volumes made this environment a breeze to work through. Using WP-CLI made migrating between local, stage, and production effortless.

The Result

uegworldwide.com

Launch Project
The Tech

Loading up the toolbox

As mentioned above, there’s a bit of tech sprinkled into the development of this site. Docker allows the configuration of WordPress within seconds. The WP-CLI allows deployments using only a few lines of code. The ACF plugin made customizing the wordpress theme simple. Nothing better than using the right tools for the job.

Drew Brees breaking the NFL all-time career passing yardage record

EPSN

Unexpected Heights

The Saints QB is now the all-time passing yards leader in NFL history. ESPN tracked his path to 71,968 yards.

Background

ESPN

As Drew Brees approached the record, EPSN wanted to feature a timeline of this achievement, starting as far back in his career as November 4th, 2001 up to the 62-yard touchdown pass to rookie receiver Tre’Quan Smith on December 19th, 2019

Content

The Creative

The team at ESPN handed off a sketch file with mobile & desktop designs, fantastic illustrations and animations by Iveta Karpathyova, and an HTML wrapper file for me to use.

The Distance

Yardage Counter

As the user scrolls down the the site, the counter updates Drew’s total yards to date and how many quarterbacks are ahead of his current yardage.

_instance = {n : 0};

scrollUpdate = (scrollPos, skipAnimation) => {
    const els = [...document.querySelectorAll('['+attr+']')];
    let count = 0;
    els.forEach(el => {
        const top = el.getBoundingClientRect().top;
        if(top < scrollPos) {
            count = Number(el.getAttribute(attr));
        }
    });
    if(skipAnimation){
      el.innerHTML = getCounterString(count);
      n = count;
      return;
    }
    TweenLite.to(_instance, .6, {
      n: count,
      ease: Quad.easeOut,
      onUpdate: function() {
        el.innerHTML = getCounterString(_instance.n);
      },
      onUpdateScope:this
    });
  };
// plot data
    var plot = function(data, color) {
      var px,py;
      data.forEach(function(value, index){
        x = (index+1) * inc + origin.x;
        y = origin.y - value/80 * graph.height;
        _svg.paper.circle(x, y, 3).attr({
          fill: color
        });
        if(px && py) {
          _svg.paper.line(px,py,x,y).attr({
            'font-family':"BentonSans-Medium, BentonSans",
            'font-size':"13",
            'font-weight':"400",
            'letter-spacing':"0.6",
            fill:"#9B9B9B",
            stroke: color,
            'stroke-width': 2
          });
        }
        px = x;
        py = y;
      })
    };
Data Visualizations

Snap.svg

A challenge while in development was that the data was always changing as Drew played each game. Therefore, we couldn’t create static data visualizations, and after each game ESPN would supply me with new numbers. As a result, I used the javascript library, snap.svg, to dynamically create the graphs.

The Result

Unexpected Heights

Launch Project
The Tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. With the exception of using GSAP and Snap.svg the rest of the technologies used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As a freelancer, you wear many hats. As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

The Team

Associate Art Director –– Sarah Pezzullo
Reporting –– Mike Triplett
Sr. Designer –– Titus Smith
Developer –– Chad Drobish

The Defiant Ones

HBO

The Defiant Ones

The official website for HBO’s The Defiant Ones. A docu-series about Dr. Dre and Jimmy Iovine’s unlikely music partnership and their impact on contemporary culture.

Background

The Resistance

I was contracted by Deep Focus to generate a one page site promoting the HBO Documentary series– The Defiant Ones. The agency had presented four primary sections: a snapchat snapcode promoting the documentary, hidden bonus content, user generated gifs, and influencer experiences.

Bells & Whistles

The Features

Snapcode

Once landing on the site, the user is presented with snapping the Defiant Ones snapcode- which unlocks the official Defiant Ones lens.

Disruption

Unlock bonus content, by continuing to watch a few jarring animations.

User-generated content

Users could record their own 10 second video, fill in the black for the phrase “You will never _______.” and receive sharable animated gif that contains the same type of effect as the above.

Listen to some influencers.

HBO had 6 influencers record some of their defiant experiences to share.

The Tech

Loading up the toolbox

This one page site was packed with different technologies. React was used for the video capture process, nodejs was used to make the ugc content, and intense CSS3 animations for the glitchy-ness effects.

Considerations

The UGC content was the challenge that stood out the most. Making a video capture tool that will only be X amount of secs of recording, that will not only work cross-browser, but cross devices.

Related Work

Night of too many stars

HBO

Night of too many stars

Night of Too Many Stars is a fundraising telethon for autism. It has been held every two or three years since 2003. The event was founded by Robert Smigel after learning that his son was diagnosed with autism.

Background

Deep Focus

The folks at Deep Focus were tasked to put up a one page site promoting the upcoming event ‘The Night of Too Many Stars’ being held at Madison Square Garden. The site was to promote upcoming talent, stream live the night of, and highlight the event once it was over.

The Result

Night of too many stars

The Main Event

At Madison Square Garden

It was requested that I be present during the live production to help assist if something went awry. Everything went perfectly as planned. My task the for the night was to switch between three different versions of the site; a countdown to the show, integrating the YouTube Live stream, and reverting back to the original . Afterwards, HBO provided highlight videos which were added to complete the project.

The Year of BO

ESPN

The Year of BO

Thirty years ago a run of events happened that would turn Bo Jackson from a brilliant enigma into an international icon. Jackson was known before 1989, but in 12 months, everything changed.

BACKGROUND

Working with ESPN

I was contracted to develop a featured article that highlights 12 months of Bo Jackson’s achievements. ESPN provided me with well documented Sketch file, a wrapper HTML, and some base styles. The rest was history.

Assets

Great Content

ESPN provided me with animated gifs in the classic 8-bit NES style. These animations were not just crafted beautifully, but file size averaged around 100kb.

Illustrations by Jude Buffum

NES Shout-out

Tecmo Bowl

It is always a pleasure when working on a project where you enjoy developing the work as much as the content itself.

Parallax

Scrolling Extras

While exploring each month, there are two reveal animations. Using GSAP, I can queue up animations that can tween through its progress while the user scrolls.

...
const isInView = () => {
            const {
                y,
                top,
                height
            } = el.getBoundingClientRect()            
            const yPos = y || top;
            return (height + yPos > 0 && yPos < window.innerHeight);
        }
...
...
const onScroll = () => {
            container.style.visibility = isInView() ? 'visible' : 'hidden';
            const vh = window.innerHeight;
            const {
                y,
                top,
                height
            } = el.getBoundingClientRect();
            const yPos = y || top;
            const progress = ((yPos + height) / (vh + height));
            // tl : TimelineLite that has the animation of the image and text
            TweenLite.to(tl, 0.4, {
                progress
            });
        }
...
window.addEventListener('scroll', throttle(onScroll, 10), false);
The result

The Year of Bo

Launch Project
The Tech

Loading up the toolbox.

When getting a local development set up quickly, I like to use Viget Labs – Blendid:

Blendid is a delicious stand-alone blend of tasks and build tools that form a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure

http://github.com/vigetlabs/blendid/tree/blendid5

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Conclusion

This featured article took a little over a month to develop. The team was lean and efficient resulting in a quick production.

Dunk Dynasty: Zion’s astonishing slam index

ESPN

Dunk Dynasty: Zion’s astonishing slam index

Duke freshman Zion Williamson is among the most explosive dunkers the game of basketball has ever seen. We cataloged the best and most impactful of his 52 dunks during a scintillating season in Durham.

BACKGROUND

Working with ESPN

It’s always a real treat to get involved with anything ESPN hands me. This time, ESPN reached out to build a featured article that demonstrates the amazing talent of Zion Willamson. They delivered all the assets, and a very organized Sketch file, and I handed back the developed feature.

Fun Tech

SwiperJS

The article consisted of 5 sections, and each section had a range videos. SwiperJS was utilized to create the carousel resulting in a smooth cross platform transition from article to article.

For the lazy viewer

Video on demand

ESPN requested to have the videos autoplay as the user scrolls the video into view. The code below demonstrates how this was executed.

window.addEventListener('scroll', throttle(() => {
    // get current section
    const columnIndex = Navigation.swiper.realIndex;
    const column = columns[columnIndex]
    // get dunks from current section
    const columnDunks = [].slice.call(column.querySelectorAll('.dunk'));
    // check position of dunk 
    columnDunks.forEach((dunk, index) => {
        const {
            top,
            bottom,
            height
        } = dunk.getBoundingClientRect();
        const centerY = (bottom - top)/2 + top;
        // if its within range, play it
        if (centerY < 0.75 * window.innerHeight 
            && centerY > 0.25 * window.innerHeight) {
            const dunkIndex = columnIndex * 5 + index;
            activateDunk(dunks[dunkIndex]);
        }
    }); 
}, 200));
The Result

Dunk Dynasty: Zion’s astonishing slam index

Launch Project
The Tech

Loading up the toolbox

Considerations and Reccommendations

As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Experience MLS like a die-hard fan

ESPN

Experience MLS like a die-hard fan

Raucous fans make the MLS matchday atmosphere among the best in American pro sports.

Background

ESPN

This featured article was created to demonstrate the energized fans that fill up stadiums all over the county. ESPN chose to pick 5 teams and highlight their traditions that make going to a game a unique experience.

Content

The Chosen 5 Teams

ESPN went on the road to gather editorial from the Atlanta United FC, Minnesota United FC, Portland Timbers, Seattle Sounders FC, and the Sporting Kansas City. They came back with 360º videos, HD video, and imagery that captures the fans excitement

Capturing the excitement

Using 360º Video

My initial thought to display 360º video, was to create a custom player with three.js. From my discovery I found that videojs has a plugin for vr. After a prototype, I decided to go with the plugin which ultimately saved a few hours.

The Result

Experience MLS like a die-hard fan

Launch Project
The Tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. With the exception of GSAP and Videojs-vr the rest of the technologies I used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Kick Game Evolution

ESPN

Kick Game Evolution

Being an NBA sneakerhead has become more than having the biggest closet.
Meet three players who have embraced the sneaker culture evolution.

BACKGROUND

Working with ESPN

ESPN contacted me through a recommendation from a colleague– looking for help creating one-page featured articles. The handoff would consist of Sketch files with redlining notation, and an HTML wrapper.

My contribution is building out the markup, javascript, styles, and provide input on interactions as well as polish up animations.

THE HANDOFF

How things can run so smoothly

The design team at ESPN is exceptional! They provide me a lot of detailed information, and in this case a video on how they would like the flow of the site to animate. With all that work completed before I even touch the keyboard, they ask me to please take all liberties to go ’off-script‘ and experiment with animations that I think would improve the experience.

THE RESULT

ESPN – Kick Game Revolution

Launch Project
The tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. The rest of the technologies used are the standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Discovery & Pride

The intro animation presented itself as the largest challenge. Two separate images, a foreground and background, are matched up, a Ken Burns effect is applied, followed by masks to reveal and hide the previous and current slide.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. So in order to get the copy deck into markup, I have the content folks at ESPN edit a google sheet. I then export it to JSON, and use that to compile the markup (via Nunjucks). If and when updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Race Your Heart Out

Acura

Race Your Heart Out

An award-winning digital and social campaign for Acura’s winter sales event.

BACKGROUND

Razorfish meet Acura

Acura teamed up with Razorfish to reinvent a holiday tradition and launch the first ever, multi-broadcast social event, allowing a new audience to experience the exhilaration of driving an Acura TLX on Periscope.

Tapping into the holiday nostalgia of the Gen X and Millennial demographics, Acura drove awareness of its Winter Sales Event by complementing the “Oh What Fun it is to Drive” TV spot and drawing on the emotional connection to the classic slot cars holiday gift.

THE IDEA

Race Your Heart Out — The First-Ever Periscope Powered Race

A socially driven live slot car race powered by Twitter’s Periscope.

Participants of the live event controlled acceleration remotely with their smart phones by pressing the Periscope “heart” button to power the racing Acura TLXs around the track. Ryan Eversley, Acura factory racecar driver, served as part of the event’s commentary team and, in spirit of the holidays, Acura donated race winnings to the Pediatric Brain Tumor Foundation.

THE WORK

And how it was done…

With a bit of smoke and mirrors, I created a web app with socket.io and an express server that would communicate to the web overlays what should be viewed. For example, should the HUD be on or off for Car A? When a race is over show the leader board on both cars. Update all the HUD display properties: hearts per hour, number of laps made, elapsed time, etc. The web browser would capture the video of the car, and a device would capture the screen (in this case a MBP) and stream that composite to Periscope!

The Tech

Loading up the toolbox

Since there was no need to support multiple browsers, I recommended chrome. Socket.io was used to communicate to the apps. On the server-side, NodeJS and Express were used. SCSS was used for styling up the huds and HTML5 for grabbing the video from the computer.

Discovery & Pride

One thing the team and I knew we had to account for was the number of hearts being clicked for speed. Creating real-time averages of hearts per X time and then using that as the basis for speed. There were a few times the car went from zero to superspeed resulting in flying of the track! Even planning for this was a challenge when working with real-time data.

Conclusion

One of my all time favorite projects. Short timeline, a few smart folks, a one-off, arduino, helping a charity – A dream project.
This project was very well received.

RESULTS
Increase in engagement

190%

Hearts per hour

60k+

Raised

$10k

The purse for each race was worth a $500 donation to the Pediatric Brain Tumor Foundation. Two hours and twenty races later, we had generated over 120,000 hearts and raised $10,000. In total, users watched 75 hours worth of races and Acura branded content increasing Acura’s engagement on Periscope by 190%.

RECOGNITION

2016 Cannes Lions
Silver Lion – Mobile

2016 Smarties Awards
Gold – Gold > Marketing within a Mobile Gaming Environment

2016 National Addy Awards
Gold – Social Media

2016 National Addy Awards
Silver – Online/Interactive

2016 One Show Awards
Merit – Mobile > Branded Games
Merit – Mobile > Durable Goods
Merit – Social Media

2016 Webby Awards
Honoree – Experimental & Innovation
Honoree – Best Use of Mobile Media
Honoree – Best Use of Video

2016 Shorty Awards
Finalist – Emerging Platform

Oncology Pipeline Explorer

Amgen

Oncology Pipeline Explorer

An interactive kiosk for Amgen that demonstrates the relationships between different cells and their research on Oncology.

Background

The Brief from Broth

The Broth agency reached out to me from a recommendation through a friend. They had a few bids out for the job and asked me to send examples and an estimate. Within a week I had secured the job. Over a few meetings face to face I had my marching orders and was ready to get prototyping.

What’s on the hook

A relational map of circles.

The challenge was not only taking a rough abstract idea sold to the client into fruition, but to also complete this task in a very short timeline. The brief was provided to me the Monday after Thanksgiving 2018 and needed to be sent off for MAC review January 10th, 2019

A lot of work, in a short time, with little to go with. Within a holiday month.

List of conferences:

ASCO GU 2019 2/14 – 2/16 | Las Vegas
AACR 2019 3/31 – 4/3 | Atlanta
ASCO 2019 5/31 – 6/4 | Chicago

THE PROCESS

The work in progress…

I quickly had gathered up my tools and got to work. I was very attracted to a 3D immersive map that the user could explore. Due to the abstract brief, I wanted to be sure the client would be comfortable in my idea of 3D.

Prototype

Within a couple of days I had placed this rough and dirty prototype in the hands of the client and let them play. I had to communicate where this could materialize from, explaining that the ‘orbs’ and ‘satellites’ would have a glassy material, the navigation may be different, number of orbs in view, orbs would have labels- as some options to research.

View Prototype

Testing materials & performance

WebGL is a GPU hog and will make your laptop sound like it’s about to take off. So I had to get the best bang for your buck as far as performance went. I researched reflections on all the orbs, but realized it was going to be too taxing on the GPU.

View material test 

Review 1

Ready for review – whew… The first conference was going to launch with three categories, as the client could not provide all the brochures and assets for the ‘Targets’ category. Navigation in, labels on, tons of data feed in. There were some bugs and kinks that I still needed to work out.

View Review 

Release Candidate

This was the release candidate that was sent out the first conference in Las Vegas. It was received very well, the client was thrilled and proud to show off their kiosk. Their feedback was positive, and was looking forward to the next version with the added Targets.

View Release

THE APP

Amgen’s Interactive Oncology Pipeline

The Tech

Loading up the toolbox

I chose tools that I am very comfortable with as I was in a short deadline. My go to’s consist of react, three.js, webpack, json for modeling, etc.

Considerations and Reccommendations

Due to the demand on the GPU for WebGL, I made sure that the hardware would be more than enough to handle the application. Broth supplied me with options from a third party vendor, and I provided my recommendation.

Discovery & Pride

There was so much I was proud about, especially now looking back with what I was given and what I was able to create. One of my favorite pieces of the code was how I was able to interpolate over time the labels to look at the camera.

/**
 * Helper function to get quaternion from src
 * looking at target 
 */
const getLookAtQuaternion = (srcObj, targetObj) => {
    var q1 = new THREE.Quaternion();
    var m1 = new THREE.Matrix4();
    var target = new THREE.Vector3();
    var position = new THREE.Vector3();
    var quaternion = srcObj.quaternion.clone();
    const { x, y, z } = targetObj;
    target.set(x, y, z);
    var parent = srcObj.parent;
    srcObj.updateWorldMatrix(true, false);
    position.setFromMatrixPosition(srcObj.matrixWorld);
    m1.lookAt(target, position, srcObj.up);
    quaternion.setFromRotationMatrix(m1);
    if (parent) {
        m1.extractRotation(parent.matrixWorld);
        q1.setFromRotationMatrix(m1);
        quaternion.premultiply(q1.inverse());
    }
    return quaternion
}

/**
 * On ever render tick, have the label and cta move its
 * quaternion towards the camera
 */
update = slerpSpeedOverride => {
    const {
        type
    } = this.data;
    const q = getLookAtQuaternion(this.textContainer, ThreeView.camera.position)
    this.textContainer.quaternion.slerp(q, slerpSpeedOverride || this.slerpSpeed);
    if (this.plane) {
        this.plane.quaternion.slerp(q, 1);
    }   
}

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

When choosing a CMS for the project, I consider who will be the publisher. Tools like Contentful or sites like WordPress often need a little hand holding for those that are not too tech-savy. Most of my clients are comfortable in Excel. It’s my rough and dirty way to get the client to add the data, for me to extrapolate it and then export to JSON.

Conclusion

Strong relationships were developed with both Broth and Amgen. Resulting in future work with both Amgen and Broth for the remainder of 2019.

RESULTS
Orbs

81

Number of Paths

Infinite

Successful Conferences

3

Avg. Session Duration

00:02:44

Total Sessions

314

Orbs Clicked

2,299