Web Sites are Video Games Waiting to Happen

@opherv / TechToKnow Feb 2018

Adobe homepage, Oct 25th, 1996

Adobe homepage, feb 12th, 2018


"Juice is typically auditory or visual... it's about maximum output for minimum input."  


-Martin Jonasson and Petri Purho


Hi! I'm Opher

I'm a creative developer at Eko


5 New ways to juice up your site


Starting from somewhere


1. Ambient Animations

Ambient animations make the experience feel dynamic


Implementation: HTML5 Video

<video muted autoplay loop">
    <source src="video/ambientAnimation.mp4">


2. Particles

Particles add a sense of magic and mystery

They are an efficient solution to create atmosphere without spending too much time doing animations


Implementation: Proton

3. Camera Movement

Camera movement adds realism and drama to user actions


It can help convey meaningful actions, or serve as a reward for user action


Implementation: CSS Animation/GSAP

@keyframes shake{
    0% {  transform: translateX(0) translateY(0); }
    10% { transform: translateX(6px) translateY(100px); }
    25% { transform: translateX(-7px) translateY(-50px); }
    45% { transform: translateX(4px) translateY(50px); }
    60% { transform: translateX(-2px) translateY(-10px); }
    75% { transform: translateX(0px) translateY(5px); }
    85% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(0) translateY(0); }


4. Physics

Website examples:


Swiss Army Man


Physics add a sense of fun and excitement

It's a system that is familiar from real life,

but at the same leads to unexpected surprising results

It lets users experiment


Implementation: Matter.js

5. Interactive Video

Interactive Video

Interactive Video

Interactive video allows viewers to shape the story


Implementation: developer.helloeko.com

What is this good for?



User Retention

Don't overdo it!

With great power come great Clichés