JSFiddle - React, Tailwind, and code Playground

by tikosar

HTML

<div class="animated"></div>
<p><strong>Click anywhere to open the Eyedropper</strong>

CSS

body {
    margin: 0;
    overflow: hidden;
}

.animated {
    width: 200px;
    height: 200px;
    background: red;
    animation: flow 5s infinite linear;
}

@keyframes flow {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(calc(100vw + 100%));
    }
}

JavaScript

const eyedropper = new EyeDropper();
const openEyeDropper = async () => {
    try {
        const {sRGBHex: color} = await eyeDropper.open()
        document.body.style.backgroundColor = color
    } catch (err) {
        console.log('Canceled')
    }
}

document.addEventListener('click', openEyeDropper)