Web Sites are Video Games Waiting to Happen

@opherv / JS-IL Apr 2017

Adobe homepage, Oct 25th, 1996

Adobe homepage, Apr 24th, 2017


"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

Examples in sites:

Media boom

Solstice Coil

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

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 Storytelling

Interactive video allows viewers to shape the story

$('button.tell_lie').addEventListener('click', () => {
    /* Viewer chose to lie - There will be consequences! */
$('button.tell_truth').addEventListener('click', () => {
    /* Viewer chose the truth - Was it worth it? */

Implementation: developer.helloeko.com

What is this good for?



User Retention

Don't overdo it!

With great power come great Clichés 






Web Sites are Video Games Waiting to Happen

By Opher Vishnia

Web Sites are Video Games Waiting to Happen

  • 771

More from Opher Vishnia