JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang=uk>
<head>
    <meta charset=utf-8>
    <title>for Alice <3</title>
</head>

<body>
<video id = 'video' width="320" height="240" autoplay>
    <source src="http://dl.dropbox.com/u/62013010/C%20%D0%B4%D0%BD%D0%B5%D0%BC%20%D1%81%D0%B2%D1%8F%D1%82%D0%BE%D0%B3%D0%BE%20%D0%92%D0%B0%D0%BB%D0%B5%D0%BD%D1%82%D0%B8%D0%BD%D0%B0.mp4"/>
    <source src="http://dl.dropbox.com/u/62013010/C%20%D0%B4%D0%BD%D0%B5%D0%BC%20%D1%81%D0%B2%D1%8F%D1%82%D0%BE%D0%B3%D0%BE%20%D0%92%D0%B0%D0%BB%D0%B5%D0%BD%D1%82%D0%B8%D0%BD%D0%B0.ogv"/>
   Your browser does not support the video tag.
 </video>
</body>

CSS

/* CSS Document*/

video {
    visibility: hidden;
}

/* END CSS Document*/

JavaScript

var v = 5;                // інтенсивність появи сердечок, більше  v - сердечка з'являтимусть рідше
    var max_heards = 30;    // максимум сердечок на сторінці
    var t = 2;                // час анімації в секундах
    var start_height = 2;    // початкова висота сердечка в пікселях
    var end_height = 30;    // кінцева висота сердечка в пікселях
    var random = 25;        // випадкова збивка сердечка
    var start_x = 0;        // збивка сердечка по x відносно курсора
    var start_y = -1;        // збивка сердечка по y відносно курсора

    var j = 1;
    var canvass = [];

    function screenSize() {
        var w, h;
        w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
        h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
        return {w:w, h:h};
    }

    document.getElementById('video').style.width = screenSize().w + 'px';
    document.getElementById('video').style.height = screenSize().h + 'px';
    document.getElementById('video').style.visibility = 'visible';

/*    // Пример:
 document.write(
       "Длина = " + screenSize().w + "px<br>" +
       "Высота = " + screenSize().h + "px"
);*/

    if ( !window.requestAnimationFrame ) {
        window.requestAnimationFrame = ( function() {
            return window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
                window.setTimeout( callback, 1000 / 60 );
            };
        })();
    }

    document.addEventListener('mousemove', canvas, false);

    function canvas(event) {    //     створюємо новий канвас
        j++;
        if (j % v != 0)...