JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://raw.github.com/gist/304522/f306edfdab80d72795565a5fcdeb4eb86368fee0/perlin-noise-classical.js"></script>
<div id="container"></div>

CSS

html, body {
    background: #417D7B;
    margin: 0;
    height: 100%;
}

#container {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

.cell {
    -webkit-transition: all 200ms linear;
    background: #6ED492;
    position: absolute;
    display: block;
}

.cell .shading {
    background: rgba(0,0,0,0.5);
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

JavaScript

var CELL_SIZE = 80;
var NOISE_SCALE = 0.12;

var noise = new ClassicalNoise();
var container = $('#container');
container.css({
    'transform': 'perspective(400)',
    'transform-style': 'preserve-3d'
});
var list = $('<ul/>');
var cells = [];

function Cell(x, y) {
    this.x = x;
    this.y = y;
    this.shading = $( '<span class="shading"/>' );
    this.domElement = $('<li class="cell">');
    this.domElement.css({
        height: CELL_SIZE,
        width: CELL_SIZE,
        left: this.x * (CELL_SIZE + 2),
        top: this.y * (CELL_SIZE + 2)
    });
    this.domElement.append( this.shading );
}

Cell.prototype = {
    update: function( time ) {
        
        var n = noise.noise( this.x * NOISE_SCALE, this.y * NOISE_SCALE, time );
        var r = n * Math.PI;
        var l = n;
        
        this.domElement.css({
           //'transform': 'rotateX(' + r + 'rad)'
            'transform': 'translateZ(' + (r*200) + 'px) rotateY(' + (r*4) + 'rad)'
        });
        
        this.shading.css({
            'opacity': l
        });
    }
};

function init() {
    
    var rows = Math.floor( container.height() / CELL_SIZE );
    var cols = Math.floor( container.width() / CELL_SIZE );
    
    var row, col, cell;
    
    for ( row = 0; row < rows; row++ ) {
        for ( col = 0; col < cols; col++ ) {
            cell = new Cell( col, row );
            cells.push( cell );
            list.append( cell.domElement );
        }
    }
    
    container.append(list);
    update();
}

function update() {
    
    var time = ( +new Date() ) * 0.0008;
    
    for ( var i = 0, n = cells.length; i < n; i++ ) {
        cell = cells[i];
        cell.update( time );
    }
    
    setTimeout( update, 1000/5 );
}

init();