JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://imapo.ru/js/angular.min.js"></script>
<div ng-app="ngApp" ng-controller="MyCtrl" class="thing">
    <input ng-model="thing" class="result" />
    <input ng-model="thing" class="i1" />
</div>

CSS

body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000
}
body .thing {
    position: relative;
    -webkit-perspective: 200px;
    perspective: 200px;
    -webkit-perspective-origin: 50% 0;
    perspective-origin: 50% 0;
}
body .thing input {
    padding: 0.5rem;
    box-sizing: border-box;
    font-size: 2rem;
}
body .thing .i1 {
    border: 1px solid #666;
    outline: none;
}
body .thing .result {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 90%;
    border: 1px solid #000;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    pointer-events: none;
    -webkit-transform: scale(1.1, -1) rotateX(-65deg);
    transform: scale(1.1, -1) rotateX(-65deg);
    opacity: 0.3;
}

JavaScript

(function () {
    angular.module('ngApp', []).controller('MyCtrl', function ($scope, $timeout) {
        var index, target, writeChar;
        $scope.thing = '';
        target = 'IMAPO.RU';
        index = 0;
        writeChar = function () {
            if ($scope.thing !== target) {
                $scope.thing += target.charAt(index++);
                return $timeout(writeChar, 220);
            }
        };
        return writeChar();
    });
}.call(this));