JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1 id="logo">
        <span class="word">
            <span class="w">w</span>
            <span class="o">o</span>
            <span class="r">r</span>
            <span class="d">d</span>
        </span>
        <span class="arrangement">
            <span class="a1">a</span>
            <span class="r1">r</span>
            <span class="r2">r</span>
            <span class="a2">a</span>
            <span class="n1">n</span>
            <span class="g">g</span>
            <span class="e1">e</span>
            <span class="m">m</span>
            <span class="e2">e</span>
            <span class="n2">n</span>
            <span class="t">t</span>
        </span>
    </h1>
    </header>

CSS

h1#logo {
        font-family:Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-align: justify;
        font-size:1.8em;
        display:block;
        width:100%;
    }

    h1#logo:after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .word .w { }
    .word .o { padding-left:30px; }
    .word .r { padding-left:10px; }
    .word .d { padding-left:50px; }

    .arrangement .a1 { }
    .arrangement .r1 { }
    .arrangement .r2 { }
    .arrangement .a2 { }
    .arrangement .n1 { }
    .arrangement .g { }
    .arrangement .e1 { }
    .arrangement .m { }
    .arrangement .e2 { }
    .arrangement .n2 { }
    .arrangement .t { }

JavaScript

var count=0;
        //$(window).on("mousemove",function(e){




          var options = {};
        var oldx = 0;
        var direction = "";
        var stop_timeout = false;
        var stop_check_time = 150;
        $.mousedirection = function (opts) {
            var defaults = {};
            options = $.extend(defaults, opts);
            $(document).bind("mousemove", function (e) {
                var activeElement = e.target || e.srcElement;
                if (e.pageX > oldx) {
                    direction = "right";
                } else if (e.pageX < oldx) {
                    direction = "left";
                }

                clearTimeout(stop_timeout);
                stop_timeout = setTimeout(function () {
                    direction = "stop";
                    $(activeElement).trigger(direction);
                    $(activeElement).trigger({
                        type: "mousedirection",
                        direction: direction
                    });
                }, stop_check_time);

                $(activeElement).trigger(direction);
                $(activeElement).trigger({
                    type: "mousedirection",
                    direction: direction
                });
                oldx = e.pageX;
            });
        }

        $(function () {
        $.mousedirection();
        $(window).bind("mousedirection", function (e) {

            if(e.direction=="left")
            {
                count++;
                $(".word").filter(":first-child").css("margin-left",count+"px");
            }
            else if(e.direction=="right")
            {
                count--;
                $(".word").filter(":first-child").css("margin-left",count+"px");
            }

        });
    });