Screen Juice: Shake & Flash | Game Animation Tutorial

Making Impacts Feel Powerful

"Juice" is the non-essential visual feedback that makes a game feel alive. The two most effective (and easiest) techniques are Screen Shake and Screen Flash.

Screen Shake Screen Flash Particles

1. Screen Shake

Screen shake simulates a camera being rattled by an explosion or impact. The key is to apply a random offset to your game container that decays over time.

camera-shake.js

let shakeIntensity = 0;
let shakeDecay = 0.9;

function triggerShake(amount) {
    shakeIntensity = amount;
}

function updateShake() {
    if (shakeIntensity > 0) {
        // Random offset based on current intensity
        const dx = (Math.random() - 0.5) * shakeIntensity * 2;
        const dy = (Math.random() - 0.5) * shakeIntensity * 2;
        
        // Apply to game container
        gameContainer.style.transform = `translate(${dx}px, ${dy}px)`;
        
        // Decay intensity
        shakeIntensity *= shakeDecay;
        
        if (shakeIntensity < 0.5) {
            shakeIntensity = 0;
            gameContainer.style.transform = 'none';
        }
    }
}

2. Screen Flash

A screen flash simulates a bright explosion blinding the camera for a split second. It's usually a white overlay that fades opacity from 1 to 0.

screen-flash.css

.flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-out; /* Fast fade out */
}

.flash-active {
    opacity: 0.8;
    transition: none; /* Instant fade in */
}

trigger-flash.js

function triggerFlash() {
    const overlay = document.getElementById('flashOverlay');
    
    // 1. Instant on
    overlay.style.transition = 'none';
    overlay.style.opacity = '0.8';
    
    // 2. Force reflow (browser paint)
    void overlay.offsetWidth;
    
    // 3. Fade out
    overlay.style.transition = 'opacity 0.3s ease-out';
    overlay.style.opacity = '0';
}