diff --git a/codepen/arcs.html b/codepen/arcs.html
new file mode 100644
index 0000000..85071ef
--- /dev/null
+++ b/codepen/arcs.html
@@ -0,0 +1,124 @@
+<style>
+    html,
+    body {
+        background-color: #fff;
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    canvas {
+        margin: 0;
+    }
+</style>
+
+<script>
+    const PI2 = Math.PI * 2;
+
+    let scene, camera, renderer, container, fov, light, ambient;
+    let gui, controls = {
+        color: 0xF22200,
+        ambient: 0.01,
+        arcs: 7,
+        gap: 30,
+        radius: 50,
+        width: 50,
+        side: 'front',
+        speed: 0.003,
+    };
+
+    window.onload = () => {
+        gui = new dat.GUI();
+        gui.addColor(controls, 'color').onChange(change);
+        gui.add(controls, 'ambient', 0, 1).step(0.01).onChange(change);
+        gui.add(controls, 'side', ['front', 'back', 'double']).onChange(change);
+        gui.add(controls, 'arcs', 1, 20).step(1).onChange(populate);
+        gui.add(controls, 'gap', 1, 100).step(1).onChange(populate);
+        gui.add(controls, 'radius', 1, 100).step(1).onChange(populate);
+        gui.add(controls, 'width', 1, 100).step(1).onChange(populate);
+        gui.add(controls, 'speed', 0, 0.03).step(0.0001);
+        gui.close();
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        fov = Math.tan(camera.fov * (Math.PI / 180) / 2) * 2;
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        ambient = new THREE.AmbientLight(controls.color, controls.ambient);
+        scene.add(ambient);
+
+        light = new THREE.PointLight(controls.color, 1, 10000);
+        scene.add(light);
+
+        container = new THREE.Group();
+        scene.add(container);
+        container.rotation.x = Math.PI / 2;
+
+        material = new THREE.MeshPhongMaterial({
+            side: THREE.DoubleSide,
+        });
+
+        window.addEventListener('resize', resize);
+        resize();
+        change();
+        populate();
+        render();
+    };
+
+    function resize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.position.z = window.innerHeight / fov;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function change() {
+        material.side = {
+            'front': THREE.FrontSide,
+            'back': THREE.BackSide,
+            'double': THREE.DoubleSide,
+        }[controls.side];
+
+        ambient.color.set(controls.color);
+        ambient.intensity = controls.ambient;
+
+        light.color.set(controls.color);
+        light.position.z = controls.radius + controls.arcs * controls.gap + 200;
+    }
+
+    function populate() {
+        while (container.children.length) {
+            container.remove(container.children[0]);
+        }
+
+        let r, i, n, p = 0, mesh, geometry, parent = container;
+        for (i = 0; i < controls.arcs; i++) {
+            n = 1 - (i / controls.arcs);
+            r = controls.radius + (controls.arcs - i) * controls.gap;
+            geometry = new THREE.CylinderGeometry(r, r, controls.width, 100 * n, 1, true, 0, PI2 * n);
+            mesh = new THREE.Mesh(geometry, material);
+            mesh.rotation.y = p;
+            mesh.rotation.z = PI2 * Math.random();
+            parent.add(mesh);
+            parent = mesh;
+            p = n;
+        }
+    }
+
+    function render() {
+        requestAnimationFrame(render);
+
+        let i, mesh = container;
+        for (i = 0; i < controls.arcs; i++) {
+            mesh = mesh.children[0];
+            mesh.rotation.z += controls.speed;
+        }
+
+        renderer.render(scene, camera);
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/cubes.html b/codepen/cubes.html
new file mode 100644
index 0000000..b66d64e
--- /dev/null
+++ b/codepen/cubes.html
@@ -0,0 +1,139 @@
+<style>
+    body {
+    margin: 0;
+    overflow: hidden;
+}
+canvas {
+    background-color: #000;
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+<script>
+    let canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+let ctx = canvas.getContext('2d');
+
+let controls = {
+    size: 200,
+    layers: 5,
+    shade: 50,
+    speed: 20,
+    offset: 30,
+};
+let gui = new dat.GUI();
+gui.add(controls, 'size', 10, 1000).step(1);
+gui.add(controls, 'layers', 1, 100).step(1);
+gui.add(controls, 'shade', 1, 100).step(1);
+gui.add(controls, 'speed', 1, 100).step(1);
+gui.add(controls, 'offset', 1, 100).step(1);
+gui.close();
+
+let colorIndex = 0;
+
+function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+window.onresize = resize;
+resize();
+
+function draw() {
+    requestAnimationFrame(draw);
+    
+    colorIndex = (colorIndex + controls.speed * 0.0001) % 1;
+    let i, colors = new Array(controls.layers);
+    for (i=0; i<colors.length; i++) {
+        colors[i] = hslToRgb(colorIndex + ((colors.length - i) * controls.offset * 0.001), 1, 0.5);
+    }
+    
+    let wide = Math.ceil(canvas.width / controls.size) + 1;
+    let high = Math.ceil(canvas.height / (controls.size / 4 * 3)) + 1;
+    
+    let x, y;
+    for (x=0; x<wide; x++) {
+        for (y=0; y<high; y++) {
+            for (i=0; i<controls.layers; i++) {
+                cube(x * controls.size + (y % 2) * controls.size / 2, y * controls.size / 4 * 3, (controls.layers - i) * (controls.size / controls.layers), colors[controls.layers - i - 1]);
+            }
+        }
+    }
+}
+draw();
+
+function cube(x, y, size, color) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x - size / 2, y - size / 4);
+    ctx.lineTo(x, y - size / 2);
+    ctx.lineTo(x + size / 2, y - size / 4);
+    ctx.lineTo(x, y);
+    ctx.fill();
+    
+    ctx.fillStyle = shadeColor(color, -controls.shade / 2);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x - size / 2, y - size / 4);
+    ctx.lineTo(x - size / 2, y + size / 4);
+    ctx.lineTo(x, y + size / 2);
+    ctx.lineTo(x, y);
+    ctx.fill();
+
+    ctx.fillStyle = shadeColor(color, -controls.shade);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + size / 2, y - size / 4);
+    ctx.lineTo(x + size / 2, y + size / 4);
+    ctx.lineTo(x, y + size / 2);
+    ctx.moveTo(x, y);
+    ctx.fill();
+}
+
+function hslToRgb(h, s, l){
+    var r, g, b;
+
+    if(s == 0){
+        r = g = b = l; // achromatic
+    }else{
+        var hue2rgb = function hue2rgb(p, q, t){
+            if(t < 0) t += 1;
+            if(t > 1) t -= 1;
+            if(t < 1/6) return p + (q - p) * 6 * t;
+            if(t < 1/2) return q;
+            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+        }
+
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+    }
+
+    return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
+}
+
+function rgbToHex(r, g, b) {
+    r = r.toString(16);
+    g = g.toString(16);
+    b = b.toString(16);
+    
+    return '#'
+        + ((r.length==1)?"0"+r:r)
+        + ((g.length==1)?"0"+g:g)
+        + ((b.length==1)?"0"+b:b);
+}
+
+function shadeColor(color, percent) {
+    let R = parseInt(color.substring(1,3),16);
+    let G = parseInt(color.substring(3,5),16);
+    let B = parseInt(color.substring(5,7),16);
+    R = parseInt(R * (100 + percent) / 100);
+    G = parseInt(G * (100 + percent) / 100);
+    B = parseInt(B * (100 + percent) / 100);
+    return rgbToHex((R<255)?R:255, (G<255)?G:255, (B<255)?B:255);
+}
+</script>
\ No newline at end of file
diff --git a/codepen/drops.html b/codepen/drops.html
new file mode 100644
index 0000000..b624009
--- /dev/null
+++ b/codepen/drops.html
@@ -0,0 +1,165 @@
+<div id="container"></div>
+<div id="footer">
+    <p>
+        Music by <a href="https://maxcooper.net/order-from-chaos" target="_blank">Max Cooper</a>
+    </p>
+    <audio crossOrigin="anonymous" controls autoplay>
+        <source src="https://dl.dropboxusercontent.com/s/xisz69ic7imkdfj/max_cooper-order_from_chaos.mp3?dl=1" type="audio/mp3">
+    </audio>
+</div>
+
+<style>
+    body {
+        background-color: #000;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    #footer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        margin: 0;
+
+        p {
+            margin: 1em;
+            font-size: 0.8em;
+
+            &,
+            a,
+            a:visited {
+                color: #fff;
+            }
+        }
+
+        audio {
+            width: 100%;
+            margin-bottom: -5px;
+
+            &::-webkit-media-controls-panel {
+                background-color: #000;
+            }
+        }
+    }
+
+
+
+    #container {
+        width: 100vw;
+        height: 100vh;
+        position: relative;
+    }
+
+    .drop {
+        border-radius: 50%;
+        border: 5px solid #fff;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        transform: translate3d(-50%, -50%, 0);
+        animation: drop 0s ease-in-out 0s 1 forwards;
+    }
+
+    @keyframes drop {
+        0% {
+            opacity: 0;
+            transform: scale(0.5);
+        }
+
+        5% {
+            transform: scale(1);
+            opacity: 0.5;
+        }
+
+        100% {
+            opacity: 0;
+            transform: scale(0);
+        }
+    }
+</style>
+
+<script>
+    var audioContext = (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext);
+
+    var container = $('#container').get(0);
+    var center;
+    var radius;
+    var PI2 = Math.PI * 2;
+    var rotation = 0;
+
+    var audio = $('audio');
+    var audioContext = new audioContext();
+    var source = audioContext.createMediaElementSource(audio.get(0));
+    var analyser = audioContext.createAnalyser();
+    source.connect(analyser);
+    analyser.connect(audioContext.destination);
+    analyser.fftSize = 32;
+    analyser.minDecibels = -90;
+    analyser.maxDecibels = 0;
+    var frequenciesData = new Uint8Array(analyser.frequencyBinCount);
+    var frequencies = new Float32Array(frequenciesData.length);
+    var average;
+
+    function render() {
+        requestAnimationFrame(render);
+
+        analyser.getByteFrequencyData(frequenciesData);
+        average = 0;
+        var i, n;
+        for (i = 0; i < frequenciesData.length; i++) {
+            n = frequenciesData[i] / 256;
+            frequencies[i] = n;
+            average += n;
+        }
+        average /= frequenciesData.length;
+
+        var f, a = 0;
+        for (i = Math.floor(frequencies.length * 0.5); i < frequencies.length; i++) {
+            a += frequencies[i];
+        }
+        a /= 2;
+
+        for (i = 0; i < frequencies.length; i++) {
+            f = frequencies[i];
+            if (f > 0.025) {
+                add(i / frequencies.length, f, a);
+            }
+        }
+
+        rotation += average * average * average * 10;
+        container.style['-webkit-transform'] = 'rotate(' + rotation + 'deg)';
+    }
+
+    function add(distance, force, offset) {
+        var drop = document.createElement('span');
+        drop.className = 'drop';
+        container.appendChild(drop);
+
+        var n = Math.random() * PI2;
+        var r = (distance + 0.1) * radius;
+        drop.style.left = center.x + Math.sin(n) * r + 'px';
+        drop.style.top = center.y + Math.cos(n) * r + 'px';
+        drop.style.border = (force * 10) + 'px solid hsl(' + (force + offset) * 256 + ', 100%, 50%)';
+        drop.style.width = drop.style.height = (average * force * 100) + 'px';
+        drop.style['-webkit-animation-duration'] = force * 3 + 's';
+
+        setTimeout(function () {
+            container.removeChild(drop);
+        }, force * 3000);
+    }
+
+    function resize() {
+        center = {
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2 - 20
+        };
+        radius = Math.max(center.x, center.y);
+    }
+
+    $(window).on('resize', resize);
+    resize();
+    render();
+</script>
\ No newline at end of file
diff --git a/codepen/face.html b/codepen/face.html
new file mode 100644
index 0000000..382260b
--- /dev/null
+++ b/codepen/face.html
@@ -0,0 +1,157 @@
+<div class="loader">
+    <div class="loader-bar"></div>
+</div>
+
+<style>
+    html, body {
+    background-color: #000;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+.loader {
+    background-color: #207d93;
+    position: absolute;
+    left: 25%;
+    top: 50%;
+    width: 50%;
+}
+
+.loader-bar {
+    background-color: #5DBCD2;
+    height: 4px;
+    width: 0;
+}
+
+canvas {
+    margin: 0;
+}
+</style>
+
+<script>
+    let scene, camera, renderer, container, fov, points;
+let rotation = new THREE.Vector2();
+let gui, controls = {
+    color: 0x5DBCD2,
+    ease: 5,
+    size: 1,
+    spread: 30,
+};
+
+let loader = $('.loader-bar');
+$.ajax({
+    url: 'https://dl.dropboxusercontent.com/s/fdl8fk6e29k6aoe/face.json?dl=1',
+    dataType: 'json',
+    xhr: () => {
+        let xhr = new window.XMLHttpRequest();
+        xhr.addEventListener('progress', e => {
+            loader.css('width', (e.loaded / 3899536 * 100) + '%');
+        });
+        return xhr;
+    },
+    success: data => {
+        loader.parent().remove();
+        init(data);
+    }
+});
+
+function init(data) {
+    gui = new dat.GUI();
+    gui.addColor(controls, 'color').onChange(change);
+    gui.add(controls, 'ease', 0, 20).step(1).onChange(change);
+    gui.add(controls, 'size', 0.1, 3).step(0.01).onChange(change);
+    gui.add(controls, 'spread', 1, 100).step(1).onChange(build);
+    gui.close();
+
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    fov = Math.tan(camera.fov * (Math.PI / 180) / 2) * 2;
+    
+    renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.body.appendChild(renderer.domElement);
+    
+    container = new THREE.Group();
+    scene.add(container);
+    
+    points = [];
+    let i;
+    for (i=0; i<data.vertices.length; i+=3) {
+        points.push([data.vertices[i], data.vertices[i+1], data.vertices[i+2]]);
+    }
+    
+    window.addEventListener('mousemove', move);
+    window.addEventListener('resize', resize);
+    resize();
+    build();
+    change();
+    render();
+}
+
+function resize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.position.z = window.innerHeight / fov;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    
+    container.scale.setScalar(Math.min(1000, window.innerWidth, window.innerHeight) / 4);
+}
+
+function build() {
+    while (container.children.length) {
+        container.remove(container.children.pop());
+    }
+    
+    let i, collections = [];
+    for (i=0; i<controls.spread; i++) {
+        collections.push([]);
+    }
+    
+    let c, p;
+    for (i=0; i<points.length; i++) {
+        c = collections[Math.floor(Math.random() * collections.length)];
+        p = points[i];
+        c.push(p[0], p[1], p[2]);
+    }
+    
+    let material = new THREE.PointsMaterial();
+    let collection, geometry;
+    for (i=0; i<collections.length; i++) {
+        geometry = new THREE.BufferGeometry();
+        geometry.addAttribute('position', new THREE.Float32BufferAttribute(collections[i], 3));
+        collection = new THREE.Points(geometry, material);
+        container.add(collection);
+    } 
+    
+    change();
+}
+
+function change() {
+    let i, c;
+    for (i=0; i<container.children.length; i++) {
+        c = container.children[i];
+        c.material.size = controls.size;
+        c.material.color.set(controls.color);
+        c.ease = controls.ease ? (((i+1) / container.children.length) / controls.ease) : 1;
+    }
+}
+
+function move(e) {
+   rotation.set(e.pageY / window.innerHeight - 0.5, e.pageX / window.innerWidth - 0.5);
+}
+
+function render(){
+    requestAnimationFrame(render);
+    
+    let i, c;
+    for (i=0; i<container.children.length; i++) {
+        c = container.children[i];
+        c.rotation.x += (rotation.x - c.rotation.x) * c.ease;
+        c.rotation.y += (rotation.y - c.rotation.y) * c.ease;
+    }
+    
+    renderer.render(scene, camera);
+}
+</script>
\ No newline at end of file
diff --git a/codepen/foggy-forest.html b/codepen/foggy-forest.html
new file mode 100644
index 0000000..1e1eab5
--- /dev/null
+++ b/codepen/foggy-forest.html
@@ -0,0 +1,102 @@
+<style>
+    html, body {
+    background-color: #fff;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+canvas {
+    margin: 0;
+}
+</style>
+
+<script>
+    let scene, camera, renderer, container, fov, orbit, light, tree;
+let gui, controls = {
+    color: 0xFF0000,
+    trees: 300,
+    distance: 1000,
+};
+
+window.onload = () => {
+    gui = new dat.GUI();
+    gui.addColor(controls, 'color').onChange(change);
+    gui.add(controls, 'trees', 10, 1000).step(10).onChange(populate);
+    gui.add(controls, 'distance', 10, 10000).step(10).onChange(change);
+    gui.close();
+
+    scene = new THREE.Scene();
+    scene.fog = new THREE.Fog(0xFFFFFF, 0, controls.distance);
+    
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
+    fov = Math.tan(camera.fov * (Math.PI / 180) / 2) * 2;
+    
+    renderer = new THREE.WebGLRenderer();
+    renderer.setClearColor(0xffffff, 1);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.body.appendChild(renderer.domElement);
+    
+    orbit = new THREE.OrbitControls(camera, renderer.domElement);
+
+    scene.add(new THREE.AmbientLight(0xFFFFFF, 0.1));
+    
+    light = new THREE.PointLight(controls.color, 0.8, 10000);
+    scene.add(light);
+    
+    container = new THREE.Group();
+    scene.add(container);
+    container.position.y = -300;
+    
+    let loader = new THREE.OBJLoader();
+    loader.load('https://dl.dropboxusercontent.com/s/vlgaren1nnsnx4e/pine.obj?dl=1', obj => {
+        tree = obj;
+        populate();
+	});
+    
+    window.addEventListener('resize', resize);
+    resize();
+    render();
+}
+
+function resize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.position.set(0, 200, window.innerHeight / fov);
+    camera.updateProjectionMatrix();
+    orbit.update();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    light.position.copy(camera.position);
+}
+
+function populate() {
+    let i, t;
+    for (i=container.children.length; i<controls.trees; i++) {
+        t = tree.clone();
+        container.add(t);
+        t.position.x = -controls.distance + Math.random() * (controls.distance * 2);
+        t.position.y = -20 + Math.random() * 40;
+        t.position.z = -controls.distance + Math.random() * (controls.distance * 2);
+        t.rotation.y = Math.random() * (Math.PI * 2);
+    }
+    
+    for (i=0; i<container.children.length; i++) {
+        container.children[i].visible = (i < controls.trees);
+    }
+    
+    change();
+}
+
+function change() {
+    scene.fog.far = controls.distance;
+    light.color.set(controls.color);
+}
+
+function render(){
+    requestAnimationFrame(render);
+    
+    
+    
+    renderer.render(scene, camera);
+}
+</script>
\ No newline at end of file
diff --git a/codepen/followers.html b/codepen/followers.html
new file mode 100644
index 0000000..15ced05
--- /dev/null
+++ b/codepen/followers.html
@@ -0,0 +1,101 @@
+<style>
+    body {
+        background-color: #000;
+    }
+
+    .follower {
+        background-color: #000;
+        position: absolute;
+        transition: transform 0.1s ease-in-out;
+    }
+</style>
+<script>
+    console.clear();
+
+    let controls = {
+        followers: 200,
+        size: 50,
+        delay: 0.001,
+    };
+    let gui = new dat.GUI();
+    gui.add(controls, 'followers', 1, 1000).step(1).onChange(change);
+    gui.add(controls, 'size', 10, 100).step(1).onChange(change);
+    gui.add(controls, 'delay', 0, 0.01).step(0.0001).onChange(change);
+    gui.close();
+
+    let target = {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+    };
+    window.onmousemove = e => {
+        target.x = e.pageX - (e.pageX % controls.size);
+        target.y = e.pageY - (e.pageY % controls.size);
+    };
+
+    let followers = [];
+
+    function change() {
+        let i, d, f;
+
+        while (followers.length) {
+            f = followers.pop();
+            document.body.removeChild(f.element);
+        }
+
+        for (i = 0; i < controls.followers; i++) {
+            d = i * controls.delay;
+
+            f = document.createElement('span');
+            f.className = 'follower';
+            f.style.backgroundColor = `hsl(${Math.floor((i / controls.followers) * 360)}, 100%, 50%)`;
+            f.style.width = controls.size + 'px';
+            f.style.height = f.style.width;
+            f.style.transitionDelay = d + 's';
+            document.body.appendChild(f);
+
+            f = {
+                element: f,
+                delay: d,
+                x: 0,
+                y: 0,
+            };
+
+            followers.push(f);
+            move(f);
+        }
+    }
+
+    function move(follower) {
+        if (follower.timeout) {
+            return;
+        }
+
+        let d = {
+            x: target.x - follower.x,
+            y: target.y - follower.y,
+        };
+
+        if (d.x && d.y) {
+            if (Math.random() < 0.5) {
+                d.x = 0;
+            } else {
+                d.y = 0;
+            }
+        }
+
+        if (d.x) {
+            follower.x += controls.size * (d.x / Math.abs(d.x));
+        } else if (d.y) {
+            follower.y += controls.size * (d.y / Math.abs(d.y));
+        }
+
+        follower.element.style.transform = `translate3d(${follower.x + 'px'}, ${follower.y + 'px'}, 0)`;
+
+        follower.timeout = setTimeout(() => {
+            follower.timeout = null;
+            move(follower);
+        }, 100 + (follower.delay * 1000));
+    }
+
+    change();
+</script>
\ No newline at end of file
diff --git a/codepen/morbius.html b/codepen/morbius.html
new file mode 100644
index 0000000..ad3cd85
--- /dev/null
+++ b/codepen/morbius.html
@@ -0,0 +1,66 @@
+<script>
+    var width = 5;
+    var length = 200;
+    var spacing = 5;
+    var speed = 1;
+
+    var camera = new THREE.PerspectiveCamera(75, 1, 1, 5000);
+    var scene = new THREE.Scene();
+    camera.position.z = 300;
+    camera.position.y = 200;
+    camera.lookAt(scene.position);
+    var renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.body.append(renderer.domElement);
+
+    var material = new THREE.SpriteMaterial({
+        color: new THREE.Color('white')
+    });
+
+    var radius = spacing / Math.sin(Math.PI * 2 / length);
+
+    var i, j, n, dot, group, mat;
+    for (i = 0; i < length; i++) {
+        group = new THREE.Group();
+        scene.add(group);
+
+        n = (i / length) * (Math.PI * 2);
+        group.position.x = Math.sin(n) * radius;
+        group.position.z = Math.cos(n) * radius;
+        group.rotation.x = n * 0.5;
+        group.rotation.y = n;
+        group.rotation.order = 'YXZ';
+
+        mat = material.clone();
+        mat.color.setHSL(i / length, 1, 0.5);
+
+        for (j = 0; j < width; j++) {
+            dot = new THREE.Sprite(mat);
+            group.add(dot);
+            dot.scale.set(3, 3);
+            dot.position.y = (((j + 0.5) / width) * 2 - 1) * width * spacing * 0.5;
+        }
+    }
+
+    self.addEventListener('resize', resize);
+    function resize() {
+        camera.aspect = self.innerWidth / self.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(self.innerWidth, self.innerHeight);
+    }
+    resize();
+
+    function render() {
+        requestAnimationFrame(render);
+
+        scene.rotation.y += 0.005 * speed;
+
+        for (i = 0; i < scene.children.length; i++) {
+            group = scene.children[i];
+            group.rotation.x += 0.01 * speed;
+        }
+
+        renderer.render(scene, camera);
+    }
+    render();
+</script>
\ No newline at end of file
diff --git a/codepen/morph.html b/codepen/morph.html
new file mode 100644
index 0000000..d0fafe5
--- /dev/null
+++ b/codepen/morph.html
@@ -0,0 +1,239 @@
+<style>
+    body {
+        margin: 0;
+    }
+
+    canvas {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        height: 100vh;
+    }
+</style>
+
+<script>
+    const PI2 = Math.PI * 2;
+    const $window = $(window);
+
+    var camera, scene, renderer, material, time = 0;
+    var from, to, particles = [];
+
+    var gui, controls = {
+        particles: 1000,
+        speed: 0.5,
+        colorize: false,
+        morph: 0
+    };
+
+    $(function () {
+        camera = new THREE.PerspectiveCamera(75, 1, 1, 5000);
+        camera.position.z = 1000;
+        scene = new THREE.Scene();
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.append(renderer.domElement);
+        new THREE.OrbitControls(camera, renderer.domElement);
+
+        material = new THREE.SpriteMaterial({
+            color: new THREE.Color('white')
+        });
+
+        gui = new dat.GUI();
+        gui.add(controls, 'particles', 100, 10000).step(100).onChange(populate);
+        gui.add(controls, 'speed', -1, 1).step(0.01);
+        gui.add(controls, 'colorize');
+        gui.add(controls, 'morph', 0, 1).step(0.001).listen().onChange(morph);
+        gui.close();
+
+        $window.on('resize', resize);
+        populate();
+        render();
+
+        TweenMax.to(controls, 4, {
+            morph: 1,
+            delay: 1,
+            onUpdate: morph,
+            ease: Sine.easeInOut,
+            yoyo: true,
+            repeat: 1,
+            repeatDelay: 1
+        });
+    });
+
+
+    function populate() {
+        let i, particle;
+
+        if (scene.children.length > controls.particles) {
+            while (scene.children.length > controls.particles) {
+                scene.remove(scene.children[scene.children.length - 1]);
+            }
+
+        } else {
+            for (i = particles.length; i < controls.particles; i++) {
+                particle = new THREE.Object3D();
+                particles.push(particle);
+
+                particle.container = new THREE.Object3D();
+                particle.add(particle.container);
+
+                particle.shape = new THREE.Sprite(material.clone());
+                particle.shape.scale.set(5, 5);
+                particle.container.add(particle.shape);
+
+                particle.ease = 0.1 + Math.random() * 0.1;
+
+                particle.target = {
+                    position: new THREE.Vector3(),
+                    rotation: new THREE.Vector3(),
+                    shapePosition: new THREE.Vector3(),
+                    scale: 1
+                };
+            }
+
+            for (i = scene.children.length; i < controls.particles; i++) {
+                scene.add(particles[i]);
+            }
+        }
+
+        resize();
+
+        for (i = 0; i < scene.children.length; i++) {
+            particle = scene.children[i];
+            particle.position.set(
+                particle.target.position.x,
+                particle.target.position.y,
+                particle.target.position.z
+            );
+            particle.rotation.z = particle.target.rotation.z;
+            particle.container.rotation.y = particle.target.rotation.y;
+            particle.shape.position.set(
+                particle.target.shapePosition.x,
+                particle.target.shapePosition.y,
+                particle.target.shapePosition.z
+            );
+            particle.shape.scale.set(particle.target.scale, particle.target.scale);
+        }
+    }
+
+    function colorize() {
+        if (!controls.colorize) {
+            for (let i = 0; i < scene.children.length; i++) {
+                scene.children[i].shape.material.color.set('white');
+            }
+        }
+    }
+
+    function resize() {
+        camera.aspect = self.innerWidth / self.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(self.innerWidth, self.innerHeight);
+
+        let i, n, r, y;
+        let radius = Math.min(self.innerWidth, self.innerHeight) * 0.5;
+        let wide = Math.ceil((5 + scene.children.length / 500) / 2) * 2 + 1;
+
+        from = [];
+        to = [];
+
+        for (i = 0; i < scene.children.length; i++) {
+            n = 2 / scene.children.length;
+            y = i * n - 1 + n / 2;
+            r = Math.sqrt(1 - y * y) * radius;
+            n = i % scene.children.length * Math.PI * (3 - Math.sqrt(5));
+            from.push({
+                position: new THREE.Vector3(),
+                rotation: new THREE.Vector3(0, 0.004, 0),
+                shapePosition: new THREE.Vector3(
+                    Math.cos(n) * r,
+                    y * radius,
+                    Math.sin(n) * r
+                ),
+                scale: Math.min(6, 10000 / scene.children.length)
+            });
+
+            n = (Math.floor(i / wide) / (scene.children.length / wide)) * PI2 * 2;
+            r = (i % wide - wide / 2) * (radius / 40);
+            to.push({
+                position: new THREE.Vector3(
+                    Math.sin(n) * radius,
+                    Math.floor((i - scene.children.length / 2) / wide) / (scene.children.length / wide) * radius * (wide / 5),
+                    Math.cos(n) * radius
+                ),
+                rotation: new THREE.Vector3(0, 0.04, Math.PI * 0.5),
+                shapePosition: new THREE.Vector3(
+                    Math.sin(n) * r,
+                    0,
+                    Math.cos(n) * r
+                ),
+                scale: (Math.abs(i % wide - wide / 2) / (wide / 2) + 1) * (30 / wide)
+            });
+        }
+
+        morph();
+    }
+
+    function morph() {
+        let s, p, f, t, i, particle;
+        for (i = 0; i < scene.children.length; i++) {
+            particle = scene.children[i];
+            f = from[i];
+            t = to[i];
+
+            particle.target.position.set(
+                f.position.x + (t.position.x - f.position.x) * controls.morph,
+                f.position.y + (t.position.y - f.position.y) * controls.morph,
+                f.position.z + (t.position.z - f.position.z) * controls.morph
+            );
+
+            particle.target.rotation.set(
+                0,
+                f.rotation.y + (t.rotation.y - f.rotation.y) * controls.morph,
+                f.rotation.z + (t.rotation.z - f.rotation.z) * controls.morph
+            );
+
+            particle.target.shapePosition.set(
+                f.shapePosition.x + (t.shapePosition.x - f.shapePosition.x) * controls.morph,
+                f.shapePosition.y + (t.shapePosition.y - f.shapePosition.y) * controls.morph,
+                f.shapePosition.z + (t.shapePosition.z - f.shapePosition.z) * controls.morph
+            );
+
+            particle.target.scale = f.scale + (t.scale - f.scale) * controls.morph;
+        }
+    }
+
+    function render() {
+        requestAnimationFrame(render);
+
+        let i, particle;
+        for (i = 0; i < scene.children.length; i++) {
+            particle = scene.children[i];
+            particle.position.x += (particle.target.position.x - particle.position.x) * particle.ease;
+            particle.position.y += (particle.target.position.y - particle.position.y) * particle.ease;
+            particle.position.z += (particle.target.position.z - particle.position.z) * particle.ease;
+            particle.rotation.z += (particle.target.rotation.z - particle.rotation.z) * particle.ease;
+
+            particle.container.rotation.y = (particle.container.rotation.y + particle.target.rotation.y * controls.speed) % PI2;
+
+            particle.shape.position.x += (particle.target.shapePosition.x - particle.shape.position.x) * particle.ease;
+            particle.shape.position.y += (particle.target.shapePosition.y - particle.shape.position.y) * particle.ease;
+            particle.shape.position.z += (particle.target.shapePosition.z - particle.shape.position.z) * particle.ease;
+
+            particle.shape.scale.x = particle.shape.scale.y += (particle.target.scale - particle.shape.scale.x) * particle.ease;
+        }
+
+        if (controls.colorize) {
+            time = (time + controls.speed * 0.01) % 1;
+            for (i = 0; i < scene.children.length; i++) {
+                scene.children[i].shape.material.color.setHSL(
+                    time + (i / scene.children.length) % 1,
+                    1,
+                    1 - controls.colorize * 0.5
+                );
+            }
+        }
+
+        renderer.render(scene, camera);
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/mother-box.html b/codepen/mother-box.html
new file mode 100644
index 0000000..9314b21
--- /dev/null
+++ b/codepen/mother-box.html
@@ -0,0 +1,209 @@
+<style>
+    body {
+        margin: 0;
+    }
+
+    canvas {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        height: 100vh;
+    }
+</style>
+
+<script>
+    const PI2 = Math.PI * 2;
+    const SIZE = 5;
+    const LAYER_DEFAULT = 0;
+    const LAYER_OCCLUSION = 1;
+
+    let scene, camera, renderer, composer, boxes, cubes;
+    let light, lightMesh, pass, occlusionComposer, occlusionRenderTarget, volumetericLightShaderUniforms;
+    let time = 0;
+
+    let gui, controls = {
+        grid: 10,
+        color: '#FF0000',
+        position: false,
+        scale: true,
+        rotation: false,
+        speed: 0.02,
+        min: 0.3,
+        max: 0.9,
+        randomize: false,
+    };
+
+    window.onload = function () {
+        scene = new THREE.Scene();
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(SIZE * 0.8, SIZE * 0.8, SIZE);
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        new THREE.OrbitControls(camera, renderer.domElement);
+
+        light = new THREE.PointLight(0xFFFFFF);
+        scene.add(light);
+
+        let geometry = new THREE.BoxBufferGeometry(SIZE * 0.7, SIZE * 0.7, SIZE * 0.7);
+        let material = new THREE.MeshBasicMaterial();
+        lightMesh = new THREE.Mesh(geometry, material);
+        lightMesh.layers.set(LAYER_OCCLUSION);
+        scene.add(lightMesh);
+
+        occlusionRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
+        occlusionComposer = new THREE.EffectComposer(renderer, occlusionRenderTarget);
+        occlusionComposer.addPass(new THREE.RenderPass(scene, camera));
+        pass = new THREE.ShaderPass(THREE.VolumetericLightShader);
+        pass.needsSwap = false;
+        occlusionComposer.addPass(pass);
+        volumetericLightShaderUniforms = pass.uniforms;
+
+        composer = new THREE.EffectComposer(renderer);
+        composer.addPass(new THREE.RenderPass(scene, camera));
+        pass = new THREE.ShaderPass(THREE.AdditiveBlendingShader);
+        pass.uniforms.tAdd.value = occlusionRenderTarget.texture;
+        composer.addPass(pass);
+        pass.renderToScreen = true;
+
+        gui = new dat.GUI();
+        gui.add(controls, 'grid', 1, 30).step(1).onChange(change);
+        gui.addColor(controls, 'color').onChange(change);
+        gui.add(controls, 'position').onChange(change);
+        gui.add(controls, 'scale').onChange(change);
+        gui.add(controls, 'rotation').onChange(change);
+        gui.add(controls, 'speed', 0.001, 0.1).step(0.001);
+        gui.add(controls, 'min', 0.1, 0.9).step(0.1);
+        gui.add(controls, 'max', 0.2, 1).step(0.1);
+        gui.add(controls, 'randomize');
+        gui.close();
+
+        window.addEventListener('resize', resize);
+        resize();
+        change();
+        render();
+    };
+
+    function resize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+
+        let ratio = renderer.getPixelRatio();
+        let width = Math.floor(window.innerWidth / ratio) || 1;
+        let height = Math.floor(window.innerHeight / ratio) || 1;
+        composer.setSize(width, height);
+        occlusionComposer.setSize(width, height);
+    }
+
+    function change() {
+        light.color = new THREE.Color(controls.color);
+        lightMesh.material.color = light.color;
+
+        if (boxes) {
+            while (boxes.length) {
+                scene.remove(boxes.pop());
+            }
+        }
+        boxes = [];
+        cubes = [];
+
+        box();
+    }
+
+
+    function box() {
+        let group = new THREE.Group();
+        scene.add(group);
+        boxes.push(group);
+
+        group.add(wall(0, 0, -1));
+        group.add(wall(0, 0, 1));
+        group.add(wall(1, 0, 0));
+        group.add(wall(-1, 0, 0));
+        group.add(wall(0, 1, 0));
+        group.add(wall(0, -1, 0));
+    }
+
+    function wall(x, y, z) {
+        let size = SIZE / controls.grid;
+
+        let group = new THREE.Group();
+        group.position.set(
+            x * (controls.grid / 2 - 0.5) * size,
+            y * (controls.grid / 2 - 0.5) * size,
+            z * (controls.grid / 2 - 0.5) * size
+        );
+        group.rotation.set(y * Math.PI / 2, x * Math.PI / 2, 0);
+
+        let geometry = new THREE.BoxBufferGeometry(size, size, size);
+        let materialPhong = new THREE.MeshPhongMaterial({ color: 0xFFFFFF });
+        let materialBasic = new THREE.MeshBasicMaterial({ color: 0x000000 });
+
+        let i, j, cube, occlusionBox, offset = (controls.grid - 1) / 2 * size;
+        for (i = 0; i < controls.grid; i++) {
+            for (j = 0; j < controls.grid; j++) {
+                cube = new THREE.Mesh(geometry, materialPhong);
+                group.add(cube);
+                cubes.push(cube);
+                cube.userData.rand = Math.random();
+                cube.position.set(i * size - offset, j * size - offset, 0);
+                cube.userData.position = cube.position.clone();
+                cube.scale.set(0.8, 0.8, 0.8);
+
+                occlusionBox = new THREE.Mesh(geometry, materialBasic);
+                group.add(occlusionBox);
+                cube.userData.occlusionBox = occlusionBox;
+                occlusionBox.layers.set(LAYER_OCCLUSION);
+                occlusionBox.position.copy(cube.position);
+                occlusionBox.scale.copy(cube.scale);
+            }
+        }
+
+        return group;
+    }
+
+
+
+    function render() {
+        requestAnimationFrame(render);
+
+        scene.rotation.y += controls.speed * 0.1;
+        time += controls.speed;
+
+        let a, i, n, cube;
+        for (i = 0; i < cubes.length; i++) {
+            cube = cubes[i];
+            a = Math.sin(time + (controls.randomize ? cube.userData.rand : (i / cubes.length)) * PI2);
+            n = controls.min + Math.abs(a) * (controls.max - controls.min);
+
+            if (controls.position) {
+                cube.position.copy(cube.userData.position);
+                cube.position.addScalar(controls.min + a * (controls.max - controls.min));
+                cube.userData.occlusionBox.position.copy(cube.position);
+            }
+
+            if (controls.scale) {
+                cube.scale.set(n, n, n);
+                cube.userData.occlusionBox.scale.copy(cube.scale);
+            }
+
+            if (controls.rotation) {
+                cube.rotation.set(n, n, n);
+                cube.userData.occlusionBox.rotation.copy(cube.rotation);
+            }
+        }
+
+        camera.layers.set(LAYER_OCCLUSION);
+        occlusionComposer.render();
+
+        camera.layers.set(LAYER_DEFAULT);
+        composer.render();
+    }
+
+
+    THREE.VolumetericLightShader = { uniforms: { tDiffuse: { value: null }, lightPosition: { value: new THREE.Vector2(.5, .5) }, exposure: { value: .18 }, decay: { value: .95 }, density: { value: .8 }, weight: { value: .4 }, samples: { value: 50 } }, vertexShader: ["varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}"].join("\n"), fragmentShader: ["varying vec2 vUv;", "uniform sampler2D tDiffuse;", "uniform vec2 lightPosition;", "uniform float exposure;", "uniform float decay;", "uniform float density;", "uniform float weight;", "uniform int samples;", "const int MAX_SAMPLES = 100;", "void main()", "{", "vec2 texCoord = vUv;", "vec2 deltaTextCoord = texCoord - lightPosition;", "deltaTextCoord *= 1.0 / float(samples) * density;", "vec4 color = texture2D(tDiffuse, texCoord);", "float illuminationDecay = 1.0;", "for(int i=0; i < MAX_SAMPLES; i++)", "{", "if(i == samples){", "break;", "}", "texCoord -= deltaTextCoord;", "vec4 sample = texture2D(tDiffuse, texCoord);", "sample *= illuminationDecay * weight;", "color += sample;", "illuminationDecay *= decay;", "}", "gl_FragColor = color * exposure;", "}"].join("\n") }, THREE.AdditiveBlendingShader = { uniforms: { tDiffuse: { value: null }, tAdd: { value: null } }, vertexShader: ["varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}"].join("\n"), fragmentShader: ["uniform sampler2D tDiffuse;", "uniform sampler2D tAdd;", "varying vec2 vUv;", "void main() {", "vec4 color = texture2D( tDiffuse, vUv );", "vec4 add = texture2D( tAdd, vUv );", "gl_FragColor = color + add;", "}"].join("\n") }, THREE.PassThroughShader = { uniforms: { tDiffuse: { value: null } }, vertexShader: ["varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}"].join("\n"), fragmentShader: ["uniform sampler2D tDiffuse;", "varying vec2 vUv;", "void main() {", "gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );", "}"].join("\n") };
+</script>
\ No newline at end of file
diff --git a/codepen/nebula.html b/codepen/nebula.html
new file mode 100644
index 0000000..1dd40b4
--- /dev/null
+++ b/codepen/nebula.html
@@ -0,0 +1,166 @@
+<canvas></canvas>
+
+<style>
+    html,
+    body {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    canvas {
+        margin: 0;
+    }
+</style>
+
+<script>
+    var gui, controls = {
+        particles: 3000,
+        opacity: 0.2,
+        size: 0,
+        trail: 0.7,
+        colors: 20,
+        noise: 0.1,
+        velocity: 0.7,
+        lines: 50,
+        vectors: 50
+    };
+
+    const PI2 = Math.PI * 2;
+
+    var canvas = $('canvas').get(0);
+    var ctx = canvas.getContext('2d');
+    var particles = [];
+    let field;
+    let noiseZ = 0;
+
+    $(function () {
+        gui = new dat.GUI();
+        gui.add(controls, 'particles', 100, 50000).step(100).onChange(populate);
+        gui.add(controls, 'opacity', 0, 1).step(0.01).onChange(change);
+        gui.add(controls, 'colors', 0, 255).step(1).onChange(change);
+        gui.add(controls, 'size', 0, 5).step(1);
+        gui.add(controls, 'trail', 0, 1).step(0.01).onChange(change);
+        gui.add(controls, 'lines', 0, 100).step(1).onChange(change);
+        gui.add(controls, 'noise', 0.01, 1).step(0.01);
+        gui.add(controls, 'velocity', 0.1, 3).step(0.01);
+        gui.add(controls, 'vectors', 1, 100).step(1).onChange(change);
+        gui.close();
+
+        $(window).on('resize', resize);
+        resize();
+        populate();
+        tick();
+    });
+
+    function resize() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.lineWidth = 1;
+
+        let i, p;
+        for (i = 0; i < particles.length; i++) {
+            p = particles[i];
+            p.x = Math.random() * window.innerWidth;
+            p.y = Math.random() * window.innerHeight;
+        }
+
+        change();
+    }
+
+    function populate() {
+        let i, p;
+        for (i = particles.length; i < controls.particles; i++) {
+            particles.push({
+                x: Math.random() * window.innerWidth,
+                y: Math.random() * window.innerHeight,
+                v: (0.1 + Math.random() * 0.9)
+            });
+        }
+
+        change();
+    }
+
+    function change() {
+        let i, n;
+        for (i = 0; i < particles.length; i++) {
+            particles[i].c = `hsla(${Math.round(Math.random() * controls.colors)}, 100%, 50%, ${Math.random() * controls.opacity})`;
+        }
+
+        controls.fade = `rgba(0,0,0,${(1 - controls.trail) * 0.3})`;
+        controls.lineDistance = controls.lines * controls.lines;
+        ctx.strokeStyle = `hsla(${controls.colors},100%,50%,${(110 - controls.lines) * 0.0005})`;
+
+        noise.seed(Math.random());
+        field = new Array(controls.vectors);
+        for (let x = 0; x < controls.vectors; x++) {
+            field[x] = new Array(controls.vectors);
+        }
+    }
+
+    function tick() {
+        requestAnimationFrame(tick);
+
+        ctx.fillStyle = controls.fade;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        noiseZ += controls.noise * 0.01;
+        let x, y, a;
+        for (x = 0; x < controls.vectors; x++) {
+            for (y = 0; y < controls.vectors; y++) {
+                a = noise.simplex3(x / controls.vectors, y / controls.vectors, noiseZ) * PI2;
+                field[x][y] = {
+                    x: Math.sin(a),
+                    y: Math.cos(a)
+                };
+            }
+        }
+
+        let i, p, v;
+        for (i = 0; i < controls.particles; i++) {
+            p = particles[i];
+
+            x = Math.floor(p.x / canvas.width * controls.vectors);
+            y = Math.floor(p.y / canvas.height * controls.vectors);
+            v = field[x][y];
+
+            p.x = Math.max(1, Math.min(canvas.width - 1, p.x + v.x * p.v * controls.velocity));
+            p.y = Math.max(1, Math.min(canvas.height - 1, p.y + v.y * p.v * controls.velocity));
+        }
+
+        if (controls.lines) {
+            ctx.beginPath();
+
+            let j, p1, p2, dx, dy;
+            for (i = 0; i < controls.particles; i++) {
+                p1 = particles[i];
+                for (j = i + 1; j < controls.particles; j++) {
+                    p2 = particles[j];
+                    dx = p2.x - p1.x;
+                    dy = p2.y - p1.y;
+
+                    if (dx * dx + dy * dy <= controls.lineDistance) {
+                        ctx.moveTo(p1.x, p1.y);
+                        ctx.lineTo(p2.x, p2.y);
+                    }
+                }
+            }
+
+            ctx.stroke();
+        }
+
+        if (controls.size) {
+            let h = controls.size / 2;
+            for (i = 0; i < controls.particles; i++) {
+                p = particles[i];
+                ctx.fillStyle = p.c;
+                ctx.fillRect(p.x - h, p.y - h, controls.size, controls.size);
+            }
+        }
+    }
+
+</script>
\ No newline at end of file
diff --git a/codepen/pixeliser.html b/codepen/pixeliser.html
new file mode 100644
index 0000000..14da605
--- /dev/null
+++ b/codepen/pixeliser.html
@@ -0,0 +1,123 @@
+<canvas></canvas>
+<input type="file">
+
+<style>
+    canvas {
+        width: 100%;
+    }
+
+    input[type="file"] {
+        visibility: hidden;
+    }
+</style>
+
+<script>
+    const PI2 = Math.PI * 2;
+
+    let input, reader, canvas, ctx;
+    let imgCanvas, imgCtx, img;
+    let gui, controls = {
+        size: 5,
+        shape: 'circle',
+        load: () => {
+            input.click();
+        }
+    };
+
+    window.onload = () => {
+        gui = new dat.GUI();
+        gui.add(controls, 'size').step(1).onChange(change);
+        gui.add(controls, 'shape', ['circle', 'square', 'diamond', 'triangle', 'hexagon']).onChange(change);
+        gui.add(controls, 'load').name('Load image');
+        gui.close();
+
+        reader = new FileReader();
+        reader.onload = loaded;
+
+        input = document.getElementsByTagName('input')[0];
+        input.onchange = load;
+
+        canvas = document.getElementsByTagName('canvas')[0];
+        ctx = canvas.getContext('2d');
+
+        imgCanvas = document.createElement('canvas');
+        imgCtx = imgCanvas.getContext('2d');
+
+        img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = change;
+        img.src = 'https://dl.dropboxusercontent.com/s/dwceem6j2x0gcme/starrynight.jpg?dl=1';
+    };
+
+    function load() {
+        reader.readAsDataURL(input.files[0]);
+    }
+
+    function loaded() {
+        img.src = reader.result;
+    }
+
+    function change() {
+        imgCanvas.width = img.width / controls.size;
+        imgCanvas.height = img.height / controls.size;
+        imgCtx.drawImage(img, 0, 0, imgCanvas.width, imgCanvas.height);
+
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        let i, x, y;
+        for (i = 0; i < 2; i++) {
+            for (y = i; y < imgCanvas.height; y += 2) {
+                for (x = i; x < imgCanvas.width; x += 2) {
+                    draw(x, y);
+                }
+            }
+        }
+
+    }
+
+    function draw(x, y) {
+        let p = imgCtx.getImageData(x, y, 1, 1).data;
+        ctx.fillStyle = `rgb(${p[0]},${p[1]},${p[2]})`;
+        ctx.beginPath();
+
+        x *= controls.size;
+        y *= controls.size;
+        let s = controls.size;
+
+        switch (controls.shape) {
+            case 'circle':
+                ctx.arc(x, y, s, 0, PI2);
+                break;
+            case 'square':
+                s *= 2;
+                ctx.rect(x, y, s, s);
+                break;
+            case 'diamond':
+                s *= 2;
+                ctx.moveTo(x, y);
+                ctx.lineTo(x + s, y + s);
+                ctx.lineTo(x, y + s * 2);
+                ctx.lineTo(x - s, y + s);
+                break;
+            case 'triangle':
+                s *= 2;
+                ctx.moveTo(x, y);
+                ctx.lineTo(x + s, y + s);
+                ctx.lineTo(x - s, y + s);
+                break;
+            case 'hexagon':
+                ctx.moveTo(x, y);
+                ctx.lineTo(x + s, y + s * 0.45);
+                ctx.lineTo(x + s, y + s * 1.55);
+                ctx.lineTo(x, y + s * 2);
+                ctx.lineTo(x - s, y + s * 1.55);
+                ctx.lineTo(x - s, y + s * 0.45);
+                ctx.lineTo(x, y);
+                break;
+        }
+
+        ctx.fill();
+
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/rings.html b/codepen/rings.html
new file mode 100644
index 0000000..38eb5c3
--- /dev/null
+++ b/codepen/rings.html
@@ -0,0 +1,137 @@
+<style>
+    html,
+    body {
+        background-color: #000;
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    canvas {
+        margin: 0;
+    }
+</style>
+
+<script>
+    const PI2 = Math.PI * 2;
+
+    let scene, camera, renderer, container, fov, material;
+    let gui, controls = {
+        rings: {
+            amount: 30,
+            segments: 10,
+            radiusInner: 100,
+            radiusOuter: 250,
+            spread: 30,
+        },
+        rotation: {
+            amount: 0.3,
+            speed: 0.01,
+            stagger: 0.1,
+        },
+        scale: {
+            amount: 0.1,
+            speed: 0.01,
+            stagger: 0.1,
+        },
+        color: {
+            saturation: 0.5,
+            lightness: 0.5,
+            speed: 0.01,
+            stagger: 0.1,
+            inverse: true,
+        },
+    };
+    let index = {
+        rotation: 0,
+        scale: 0,
+        color: 0,
+    };
+
+    window.onload = () => {
+        gui = new dat.GUI();
+        let guiRings = gui.addFolder('Rings');
+        guiRings.add(controls.rings, 'amount', 3, 100).step(1).onChange(populate);
+        guiRings.add(controls.rings, 'segments', 3, 10).step(1).onChange(populate);
+        guiRings.add(controls.rings, 'radiusInner', 1, 1000).step(1).onChange(populate);
+        guiRings.add(controls.rings, 'radiusOuter', 1, 1000).step(1).onChange(populate);
+        guiRings.add(controls.rings, 'spread', 1, 1000).step(1).onChange(populate);
+        let guiRotation = gui.addFolder('Rotation');
+        guiRotation.add(controls.rotation, 'amount', 0, PI2).step(0.01);
+        guiRotation.add(controls.rotation, 'speed', 0, 0.1).step(0.001);
+        guiRotation.add(controls.rotation, 'stagger', 0, 1).step(0.0001);
+        let guiScale = gui.addFolder('Scale');
+        guiScale.add(controls.scale, 'amount', 0, PI2).step(0.01);
+        guiScale.add(controls.scale, 'speed', 0, 0.1).step(0.001);
+        guiScale.add(controls.scale, 'stagger', 0, 0.1).step(0.0001);
+        let guiColor = gui.addFolder('Color');
+        guiColor.add(controls.color, 'saturation', 0, 1).step(0.01);
+        guiColor.add(controls.color, 'lightness', 0, 1).step(0.01);
+        guiColor.add(controls.color, 'speed', 0, 0.1).step(0.0001);
+        guiColor.add(controls.color, 'stagger', 0, 1).step(0.0001);
+        guiColor.add(controls.color, 'inverse');
+        gui.close();
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        fov = Math.tan(camera.fov * (Math.PI / 180) / 2) * 2;
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        container = new THREE.Group();
+        scene.add(container);
+
+        material = new THREE.MeshBasicMaterial({
+            color: 0xffff00, side: THREE.DoubleSide
+        });
+
+        window.addEventListener('resize', resize);
+        resize();
+        populate();
+        render();
+    };
+
+    function resize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.position.z = window.innerHeight / fov;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function populate() {
+        while (container.children.length) {
+            container.remove(container.children[0]);
+        }
+
+        let geometry = new THREE.RingGeometry(controls.rings.radiusInner, controls.rings.radiusOuter, controls.rings.segments);
+
+        let i, ring;
+        for (i = 0; i < controls.rings.amount; i++) {
+            ring = new THREE.Mesh(geometry, material.clone());
+            container.add(ring);
+            ring.position.z = (i - (controls.rings.amount / 2)) * controls.rings.spread;
+        }
+    }
+
+    function render() {
+        requestAnimationFrame(render);
+
+        index.rotation = (index.rotation + controls.rotation.speed) % PI2;
+        index.scale = (index.scale + controls.scale.speed) % PI2;
+        index.color = (index.color + controls.color.speed) % 1;
+
+        let i, ring;
+        for (i = 0; i < container.children.length; i++) {
+            ring = container.children[i];
+            ring.rotation.z = Math.sin(index.rotation + (i * controls.rotation.stagger)) * controls.rotation.amount;
+            ring.scale.setScalar(1 + Math.sin(index.scale + (i * controls.scale.stagger)) * controls.scale.amount);
+            ring.material.color.setHSL(index.color + ((controls.color.inverse ? (container.children.length - i - 1) : i) * controls.color.stagger), controls.color.saturation, controls.color.lightness);
+        }
+
+        renderer.render(scene, camera);
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/ripples.html b/codepen/ripples.html
new file mode 100644
index 0000000..4a51ef2
--- /dev/null
+++ b/codepen/ripples.html
@@ -0,0 +1,90 @@
+<div id="grid"></div>
+
+<style>
+    body {
+        background-color: #000;
+        overflow: hidden;
+    }
+
+
+    #grid {
+        position: relative;
+    }
+
+    .dot {
+        background-color: #fff;
+        border-radius: 50%;
+        display: inline-block;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        will-change: auto;
+    }
+</style>
+
+<script>
+    // Create grid
+    var grid = document.getElementById('grid');
+    var wide = Math.ceil(window.innerWidth / 30);
+    var high = Math.ceil(window.innerHeight / 30);
+    var dots = [];
+    var i, dot;
+
+    for (i = 0; i < wide * high; i++) {
+        dot = document.createElement('div');
+        dot.className = 'dot';
+        grid.appendChild(dot);
+
+        // Save dot in object in dots array
+        // For more info on x and y, see https://codepen.io/Emroni/pen/rwBBrO
+        dot = {
+            element: dot,
+            x: (i % wide) * 30,
+            y: Math.floor(i / wide) * 30
+        };
+        dots.push(dot);
+
+        // Position in grid
+        dot.element.style.left = dot.x + 'px';
+        dot.element.style.top = dot.y + 'px';
+    }
+
+    // Create ripple effect
+    function ripple() {
+        // Select random dot from grid
+        var selected = dots[Math.floor(Math.random() * dots.length)];
+
+        // Loop through all dots
+        var i, x, y, dot, distance, amount, t = 0;
+        for (i = 0; i < dots.length; i++) {
+            dot = dots[i];
+
+            // Get distance to selected dot
+            x = dot.x - selected.x;
+            y = dot.y - selected.y;
+            distance = Math.sqrt(x * x + y * y);
+
+            // Effect amount, decreases over distance
+            amount = 1 - (distance / window.innerWidth);
+
+            // Animate dot out/in, delayed by the distance
+            TweenMax.to(dot.element, 0.5, {
+                opacity: 1 - amount,
+                width: (1 - amount) * 20,
+                height: (1 - amount) * 20,
+                left: dot.x + amount * 10,
+                top: dot.y + amount * 10,
+                repeat: 3, // Creates (value - 1) ripples
+                yoyo: true, // So it animates back and forth
+                delay: distance * 0.002, // The further away, the more delay, causing a ripple effect
+                ease: Quad.easeInOut
+            });
+        }
+
+        // Repeat, wait max delay + duration + 1 second
+        setTimeout(ripple, window.innerWidth * 2 + 500 + 1000);
+    }
+
+    // Start
+    ripple();
+</script>
\ No newline at end of file
diff --git a/codepen/solar.html b/codepen/solar.html
new file mode 100644
index 0000000..bc27c53
--- /dev/null
+++ b/codepen/solar.html
@@ -0,0 +1,84 @@
+<div id="container"></div>
+<p>Position of the moon, sun and planets in our solar system, as seen from earth</p>
+
+<style>
+    html,
+    body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    p {
+        color: #ccc;
+        position: absolute;
+        font-size: 0.75em;
+        left: 0.5em;
+        bottom: 0.5em;
+        margin: 0;
+        z-index: 1;
+        text-shadow: 0 0 2px #000;
+    }
+</style>
+
+<script>
+    const NAMES = ['sun', 'moon', 'mercury', 'venus', 'mars', 'jupiter', 'saturn', 'uranus', 'neptune', 'pluto'];
+
+    let data, container, svg, date = new Date();
+    let gui, controls = {
+        year: date.getFullYear(),
+        month: date.getMonth(),
+        day: date.getDay(),
+        background: '#000000',
+        fill: '#000000',
+        stroke: '#ffffff',
+        strokeWidth: 2,
+        offsetX: 0,
+        offsetY: 0,
+    };
+
+    window.onload = () => {
+        container = $('#container');
+
+        gui = new dat.GUI();
+        gui.add(controls, 'year', 1900, 2100).step(1).onChange(change);
+        gui.add(controls, 'month', 1, 12).step(1).onChange(change);
+        gui.add(controls, 'day', 1, 31).step(1).onChange(change);
+        gui.addColor(controls, 'background').onChange(render);
+        gui.addColor(controls, 'fill').onChange(render);
+        gui.addColor(controls, 'stroke').onChange(render);
+        gui.add(controls, 'strokeWidth', 0, 10).step(1).onChange(render);
+        gui.add(controls, 'offsetX', -1, 1).step(0.001).onChange(render);
+        gui.add(controls, 'offsetY', -1, 1).step(0.001).onChange(render);
+        gui.close();
+
+        window.addEventListener('resize', render);
+        change();
+    };
+
+    function change() {
+        let date = `${controls.year}-${controls.month < 10 ? '0' : ''}${controls.month}-${controls.day < 10 ? '0' : ''}${controls.day}`;
+        $.getJSON(`https://codepen.emroni.com/solar/?date=${date}`, d => {
+            data = d;
+            render();
+        });
+    }
+
+    function render() {
+        if (svg) svg.remove();
+        svg = $(`<svg width="${window.innerWidth}px" height="${window.innerHeight}px"><rect x="0" y="0" width="100%" height="100%" fill="${controls.background}"></rect></svg>`);
+
+        let i, body, size;
+        for (i = 0; i < NAMES.length; i++) {
+            body = data[NAMES[i]];
+            size = Math.max(2, body.diameter / 5000000);
+
+            svg.append(`<circle r="${size}px" fill="${controls.fill}" stroke-width="${controls.strokeWidth}px" stroke="${controls.stroke}" cx="${(body.ascension + controls.offsetX) * 100}%" cy="${50 + ((body.declination + controls.offsetY) * 50)}%"><title>${body.name}</title></rect>`);
+        }
+
+        container.append(svg);
+        container.html(container.html());
+        svg = container.find('svg');
+    }
+
+</script>
\ No newline at end of file
diff --git a/codepen/tau.html b/codepen/tau.html
new file mode 100644
index 0000000..dba8798
--- /dev/null
+++ b/codepen/tau.html
@@ -0,0 +1,132 @@
+<style>
+    html,
+    body {
+        background-color: #000;
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    canvas {
+        margin: 0;
+    }
+</style>
+
+<script>
+    let scene, camera, renderer, container, fov, material, geometry, animatable;
+    let gui, controls = {
+        color: 0xFF0000,
+        planes: 1000,
+        rings: 6,
+        delay: 10,
+        radiusIn: 30,
+        radiusOut: 300,
+        rotation: 0.002,
+    };
+
+    window.onload = () => {
+        gui = new dat.GUI();
+        gui.addColor(controls, 'color').onChange(change);
+        gui.add(controls, 'planes', 100, 10000).onChange(populate);
+        gui.add(controls, 'rings', 3, 10);
+        gui.add(controls, 'delay', 1, 100);
+        gui.add(controls, 'rotation', 0, 0.01);
+        gui.add(controls, 'radiusIn', 0, 100);
+        gui.add(controls, 'radiusOut', 10, 1000);
+        gui.close();
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        fov = Math.tan(camera.fov * (Math.PI / 180) / 2) * 2;
+        new THREE.OrbitControls(camera);
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        container = new THREE.Group();
+        scene.add(container);
+
+        material = new THREE.MeshBasicMaterial({
+            color: controls.color,
+        });
+
+        geometry = new THREE.PlaneGeometry(6, 20, 1, 1);
+
+        window.addEventListener('resize', resize);
+        resize();
+        change();
+        populate();
+        render();
+    };
+
+    function resize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.position.z = window.innerHeight / fov;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function change() {
+        let i, plane, color = new THREE.Color(controls.color);
+        for (i = 0; i < container.children.length; i++) {
+            plane = container.children[i];
+            plane.shape.material.color = color;
+            plane.scale.setScalar(controls.scale);
+        }
+    }
+
+    function populate() {
+        TweenMax.killAll();
+
+        while (container.children.length) {
+            container.remove(container.children[0]);
+        }
+
+        let i, plane;
+        for (i = 0; i < controls.planes; i++) {
+            plane = new THREE.Group();
+            container.add(plane);
+            plane.rotation.z = Math.random() * Math.PI * 2;
+
+            plane.shape = new THREE.Mesh(geometry, material);
+            plane.add(plane.shape);
+
+            animate(plane, true);
+        }
+    }
+
+    function animate(plane, first) {
+        plane.ring = Math.ceil(Math.random() * controls.rings);
+
+        if (!first && Math.random() < 0.99) {
+            TweenMax.to(plane.rotation, 1 + Math.random(), {
+                z: plane.rotation.z + (-0.5 + Math.random()),
+            });
+
+        } else {
+            TweenMax.to(plane.shape.position, 1 + Math.random(), {
+                y: controls.radiusIn + ((plane.ring / controls.rings) * (controls.radiusOut - controls.radiusIn)),
+            });
+
+        }
+
+        setTimeout(() => {
+            animate(plane);
+        }, 1.8 + (Math.random() * 0.2) * controls.delay * 1000);
+    }
+
+    function render() {
+        requestAnimationFrame(render);
+
+        let i, plane;
+        for (i = 0; i < container.children.length; i++) {
+            plane = container.children[i];
+            plane.rotation.z += (i % 2 - 0.5) * controls.rotation;
+        }
+
+        renderer.render(scene, camera);
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/tree-of-thought.html b/codepen/tree-of-thought.html
new file mode 100644
index 0000000..621360b
--- /dev/null
+++ b/codepen/tree-of-thought.html
@@ -0,0 +1,175 @@
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+
+        &:after {
+            content: "";
+            display: block;
+            margin-top: 50vh;
+            height: 50vh;
+            background-color: #000;
+        }
+    }
+
+    div.dg.ac {
+        z-index: 1;
+    }
+
+    canvas {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+    }
+</style>
+
+<script>
+    const SIZE = 800;
+    const RATIO = 0.68;
+    const SCALE = 1.2;
+    const DURATION = 10;
+
+    var $body = $(document.body);
+    var $window = $(window);
+    var layers = [];
+
+    var gui, controls = {
+        layers: 3,
+        branches: 10,
+        jumps: 10,
+        offset: 0.1,
+        skew: 0.1
+    };
+
+    $(function () {
+        gui = new dat.GUI();
+        gui.add(controls, 'layers', 2, 20).step(1).onChange(populate);
+        gui.add(controls, 'branches', 1, 100).step(1).onChange(change);
+        gui.add(controls, 'jumps', 1, 20).step(1).onChange(change);
+        gui.add(controls, 'offset', 0, 0.5).step(0.001).onChange(change);
+        gui.add(controls, 'skew', 0, 0.5).step(0.001).onChange(change);
+        gui.close();
+
+        $window.on('resize', resize);
+        populate();
+    });
+
+    function populate() {
+        let i, layer;
+
+        for (i = 0; i < layers.length; i++) {
+            layers[i].toggle(i < controls.layers);
+        }
+
+        for (i = layers.length; i < controls.layers; i++) {
+            layers.push(new Layer(i));
+        }
+
+        resize();
+    }
+
+    function resize() {
+        let i, scale = Math.min($window.width() / (SIZE * RATIO), $window.height() / SIZE) * SCALE;
+        for (i = 0; i < layers.length; i++) {
+            layers[i].resize(scale);
+        }
+    }
+
+    function change() {
+        for (let i = 0; i < layers.length; i++) {
+            layers[i].change();
+        }
+    }
+
+
+    class Layer {
+        constructor(index) {
+            this.index = index;
+            this.visible = true;
+
+            this.canvas = document.createElement('canvas');
+            this.ctx = this.canvas.getContext('2d');
+            this.element = $(this.canvas);
+            $body.append(this.element);
+
+            this.canvas.height = SIZE;
+            this.canvas.width = SIZE * RATIO;
+
+            this.ctx.lineWidth = 1;
+            this.ctx.lineCap = 'round';
+
+            this.change();
+        }
+
+        toggle(visible) {
+            if (this.visible != visible) {
+                this.visible = visible;
+                this.element.toggle(this.visible);
+
+                this.change();
+            }
+        }
+
+        resize(scale) {
+            this.element.css('transform', `translate3d(-50%, -50%, 0) scale(${scale})`);
+        }
+
+        change() {
+            if (this.visible) {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                for (let i = 0; i < controls.branches; i++) {
+                    this.branch();
+                }
+
+                let duration = DURATION / 3 * 2;
+                let delay = DURATION / 3;
+                let delayStart = (this.index / controls.layers) * (DURATION / 3);
+
+                TweenLite.set(this.canvas, { opacity: 0 });
+                this.timeline = new TimelineMax({ delay: delayStart, repeat: -1, repeatDelay: delay });
+                this.timeline.add(TweenLite.to(this.canvas, duration / 2, { opacity: 1 }));
+                this.timeline.add(TweenLite.to(this.canvas, duration / 2, { opacity: 0 }));
+
+            } else if (this.timeline) {
+                this.timeline.kill(true);
+            }
+        }
+
+        draw(canvas, ctx) {
+            for (let i = 0; i < controls.branches * 2; i++) {
+                this.branch(canvas, ctx);
+            }
+        }
+
+        branch() {
+            let radius = this.canvas.height * 0.4;
+            let length = radius / controls.jumps;
+            let jumps = Math.round((0.5 + Math.random() * 0.5) * controls.jumps);
+
+            let hor = (Math.random() < 0.5 ? -1 : 1) * length;
+            let ver = (Math.random() < 0.5 ? -1 : 1) * length;
+            let start = (ver < 0 ? -1 : 1) * radius / Math.max(8, controls.jumps);
+            var angle = (1 - controls.skew) * (Math.PI * 0.5);
+
+            let x = this.canvas.width / 2;
+            let y = this.canvas.height / 2 - start;
+
+            this.ctx.strokeStyle = ver > 0 ? '#000' : '#FFF';
+            this.ctx.beginPath();
+            this.ctx.moveTo(x + (Math.random() - 0.5) * 2 * start, y + start);
+            this.ctx.lineTo(x, y);
+
+            let i, n, o;
+            for (i = 0; i < jumps; i++) {
+                n = Math.random() < 0.7 ? 0 : ((0.5 + Math.round(Math.random()) / 2) * angle);
+                o = (1 - controls.offset) + Math.random() * controls.offset;
+                x += Math.sin(n) * hor * o * 1.5;
+                y -= Math.cos(n) * ver * o;
+                this.ctx.lineTo(x, y);
+            }
+
+            this.ctx.stroke();
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/trigonometry.html b/codepen/trigonometry.html
new file mode 100644
index 0000000..e4ed479
--- /dev/null
+++ b/codepen/trigonometry.html
@@ -0,0 +1,278 @@
+<!-- <div class="wrap">
+  <h2>Sin</h2>
+  <div class="container sin">
+    <div class="circle"></div>
+    <div class="lines">
+      <div class="start"></div>
+      <div class="end"></div>
+    </div>
+    <div class="graph">
+      <div class="graph-hor"></div>
+      <div class="graph-ver"></div>
+    </div>
+    <svg>
+      <path fill="#000"></path>
+    </svg>
+    <div class="range-container">
+      0
+      <input class="range" type="range" min="-1" max="1" step="0.01" disabled>
+    </div>
+  </div>
+</div>
+
+<div class="wrap">
+  <h2>Cos</h2>
+  <div class="container cos">
+    <div class="circle"></div>
+    <div class="lines">
+      <div class="start"></div>
+      <div class="end"></div>
+    </div>
+    <div class="graph">
+      <div class="graph-hor"></div>
+      <div class="graph-ver"></div>
+    </div>
+    <svg>
+      <path fill="#000"></path>
+    </svg>
+    <div class="range-container">
+      0
+      <input class="range" type="range" min="-1" max="1" step="0.01" disabled>
+    </div>
+  </div>
+</div>
+
+<div class="wrap">
+  <h2>Input</h2>
+  <input class="input" type="range" min="0" max="360" step="1" value="0">
+  <table>
+    <tr>
+      <td class="output-percent"></td>
+      <td>percent</td>
+    <tr>
+    <tr>
+      <td class="output-degrees"></td>
+      <td>degrees</td>
+    <tr>
+    <tr>
+      <td class="output-radians"></td>
+      <td>radians</td>
+    <tr>
+    <tr>
+      <td class="output-pi"></td>
+      <td>PI</td>
+    <tr>
+    <tr>
+      <td class="output-sin"></td>
+      <td>sin</td>
+    <tr>
+    <tr>
+      <td class="output-cos"></td>
+      <td>cos</td>
+    <tr>
+</div> -->
+
+<style>
+    html,
+    body {
+        background-color: #000;
+        padding: 0;
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+    }
+
+    canvas {
+        margin: 0;
+        width: calc(50% - 130px);
+        height: 50%;
+        float: left;
+
+        &.graph {
+            width: 100%;
+        }
+    }
+</style>
+
+<script>
+    var $body = $(document.body);
+
+    var gui, controls = {
+        degrees: 0,
+        radians: 0,
+        percent: 0,
+        pi: 0,
+        sin: 0,
+        cos: 0
+    };
+
+    var sin, cos, graph;
+
+    $(function () {
+        gui = new dat.GUI();
+        gui.add(controls, 'percent', 0, 100).step(0.01).listen().onChange(() => change('percent'));
+        gui.add(controls, 'degrees', 0, 360).step(0.1).listen().onChange(() => change('degrees'));
+        gui.add(controls, 'radians', 0, Math.PI * 2).step(0.01).listen().onChange(() => change('radians'));
+        gui.add(controls, 'pi', 0, 2).step(0.01).listen().onChange(() => change('pi'));
+        gui.add(controls, 'sin', -1, 1).step(0.01).listen().onChange(() => change('sin'));
+        gui.add(controls, 'cos', -1, 1).step(0.01).listen().onChange(() => change('cos'));
+        gui.close();
+
+        sin = new Circle('sin');
+        cos = new Circle('cos');
+        graph = new Graph();
+
+        $(window).on('resize', change);
+        change();
+    });
+
+    function change(type) {
+        if (type != 'percent') {
+            switch (type) {
+                case 'degrees': controls.percent = (controls.degrees / 360) * 100; break;
+                case 'radians': controls.percent = controls.radians / (Math.PI * 2) * 100; break;
+                case 'pi': controls.percent = controls.pi / 2 * 100; break;
+                case 'sin': controls.percent = ((((Math.asin(controls.sin) / Math.PI) * 180 + 360) % 360) / 360) * 100; break;
+                case 'cos': controls.percent = ((((Math.acos(controls.cos) / Math.PI) * 180 + 360) % 360) / 360) * 100; break;
+            }
+
+            change('percent');
+
+
+        } else {
+            let n = controls.percent / 100;
+            controls.degrees = n * 360;
+            controls.radians = n * (Math.PI * 2);
+            controls.pi = n * 2;
+            controls.sin = Math.sin(controls.radians);
+            controls.cos = Math.cos(controls.radians);
+        }
+
+        sin.change();
+        cos.change();
+        graph.change();
+    }
+
+
+
+    class Circle {
+        constructor(type) {
+            this.type = type;
+            this.offset = (type == 'sin' ? 0.5 : 1) * Math.PI;
+            this.color = (type == 'sin' ? '#4D8' : '#4CF');
+
+            this.canvas = document.createElement('canvas');
+            this.element = $(this.canvas);
+            $body.append(this.element);
+
+            this.ctx = this.canvas.getContext('2d');
+        }
+
+        change() {
+            this.canvas.width = this.element.width();
+            this.canvas.height = this.element.height();
+
+            let half = Math.min(this.canvas.width, this.canvas.height) * 0.5;
+            let radius = half * 0.7;
+            let margin = half - radius;
+
+            this.ctx.fillStyle = this.color;
+            this.ctx.font = margin + 'px Arial';
+            this.ctx.fillText(this.type, margin, margin);
+
+            this.ctx.fillStyle = '#999';
+            this.ctx.font = (margin * 0.3) + 'px Arial';
+            this.ctx.fillText('1', half, margin * 1.5);
+            this.ctx.fillText('0', margin * 0.5, half + margin);
+            this.ctx.fillText('0', half + half - margin * 0.6, half + margin);
+            this.ctx.fillText('-1', half, half + half + margin * 0.5);
+
+            this.ctx.fillStyle = '#333';
+            this.ctx.arc(half, half + margin, radius, 0, Math.PI * 2);
+            this.ctx.fill();
+            this.ctx.stroke();
+
+            this.ctx.strokeStyle = '#666';
+            this.ctx.beginPath();
+            this.ctx.moveTo(half, margin * 1.8);
+            this.ctx.lineTo(half, radius + radius + margin * 2.2);
+            this.ctx.moveTo(margin * 0.8, radius + margin * 2);
+            this.ctx.lineTo(radius + radius + margin * 1.2, radius + margin * 2);
+            this.ctx.stroke();
+
+            let angle = controls.radians + this.offset;
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = this.color;
+            this.ctx.moveTo(half, margin + half);
+            this.ctx.lineTo(half + Math.sin(angle) * radius, margin + half + Math.cos(angle) * radius);
+            this.ctx.stroke();
+
+            this.ctx.fillStyle = this.color;
+            this.ctx.fillText(controls[this.type].toFixed(2), half + Math.sin(angle) * radius * 1.1, margin + half + Math.cos(angle) * radius * 1.1);
+        }
+    }
+
+
+    class Graph {
+        constructor() {
+            this.canvas = document.createElement('canvas');
+            this.element = $(this.canvas);
+            this.element.addClass('graph');
+            $body.append(this.element);
+
+            this.ctx = this.canvas.getContext('2d');
+        }
+
+        change() {
+            this.canvas.width = this.element.width();
+            this.canvas.height = this.element.height();
+
+            let width = this.canvas.width * 0.9;
+            let margin = (this.canvas.width - width) * 0.5;
+            let height = this.canvas.height - margin - margin;
+            let radius = height / 2;
+
+            this.ctx.strokeStyle = '#666';
+            this.ctx.beginPath();
+            this.ctx.moveTo(margin, margin);
+            this.ctx.lineTo(margin, margin + height);
+            this.ctx.moveTo(margin, margin + height * 0.5);
+            this.ctx.lineTo(margin + width, margin + height * 0.5);
+            this.ctx.stroke();
+
+            let i, step = (Math.PI * 2 / 100);
+
+            this.ctx.beginPath();
+            this.ctx.moveTo(margin, margin + height * 0.5);
+            for (i = 0; i < (Math.PI * 2); i += step) {
+                this.ctx.lineTo(margin + (i / Math.PI) * radius * 2, margin + height * 0.5 - Math.sin(i) * radius);
+            }
+            this.ctx.stroke();
+
+            this.ctx.beginPath();
+            this.ctx.moveTo(margin, margin + height * 0.5);
+            for (i = 0; i < (Math.PI * 2); i += step) {
+                this.ctx.lineTo(margin + (i / Math.PI) * radius * 2, margin + height * 0.5 - Math.cos(i) * radius);
+            }
+            this.ctx.stroke();
+
+            this.ctx.fillStyle = '#999';
+            this.ctx.font = (margin * 0.3) + 'px Arial';
+            this.ctx.fillText('1', margin * 0.5, margin);
+            this.ctx.fillText('0', margin * 0.5, margin + radius);
+            this.ctx.fillText('-1', margin * 0.5, margin + height);
+
+
+            this.ctx.fillStyle = sin.color;
+            this.ctx.fillRect(margin + controls.pi * radius * 2 - 3, margin + height * 0.5 - Math.sin(controls.radians) * radius - 3, 6, 6);
+            this.ctx.fillText(controls.sin.toFixed(2), margin + controls.pi * radius * 2, margin + height * 0.5 - Math.sin(controls.radians) * radius - 7);
+
+            this.ctx.fillStyle = cos.color;
+            this.ctx.fillRect(margin + controls.pi * radius * 2 - 3, margin + height * 0.5 - Math.cos(controls.radians) * radius - 3, 6, 6);
+            this.ctx.fillText(controls.cos.toFixed(2), margin + controls.pi * radius * 2, margin + height * 0.5 - Math.cos(controls.radians) * radius - 7);
+
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/wander-lost.html b/codepen/wander-lost.html
new file mode 100644
index 0000000..0e7d995
--- /dev/null
+++ b/codepen/wander-lost.html
@@ -0,0 +1,289 @@
+<style>
+    html,
+    body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        height: 100%;
+    }
+
+    canvas {
+        display: block;
+    }
+</style>
+
+<script>
+    const guiw = new GUIW({
+        ease: [0.05, 0.01, 1, 0.01],
+        colors: {
+            primary: [0x000000, 'color'],
+            secondary: [0xFFFFFF, 'color'],
+        },
+        flakes: {
+            amount: [40, 0, 300],
+            angle: [-0.5, -1, 1, 0.01],
+            blur: [2, 0, 3],
+            scale: [1, 0.1, 2, 0.1],
+            velocity: [2, -100, 100, 0.01],
+        },
+        mountains: {
+            blur: [5, 0, 30],
+            curve: [1, -10, 10, 0.01],
+            elevation: [100, 10, 300],
+            layers: 10,
+            position: [0.5, 0, 2, 0.01],
+            spread: [0.5, 0, 5, 0.01],
+            steps: 20,
+            sway: 50,
+        },
+        umbrella: {
+            blur: [15, 0, 30],
+            position: [0.2, 0, 1, 0.01],
+            rotation: [0.1, 0, 1, 0.01],
+            scale: [1, 0.1, 2, 0.1],
+            velocity: [1, 0, 10, 0.01],
+            sway: 50,
+        },
+    }, change);
+
+    const app = new PIXI.Application({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        antialias: true,
+        autoResize: true,
+        resolution: devicePixelRatio,
+        backgroundColor: 0xFFFFFF,
+    });
+    document.body.appendChild(app.view);
+
+    const time = performance.now();
+    const cursor = {
+        x: 0,
+        y: 0,
+    };
+
+    const flakes = [];
+    const mountains = [];
+    const umbrella = new PIXI.Graphics();
+
+    window.onload = () => {
+        for (let i = 0; i < 300; i++) {
+            const flake = new PIXI.Graphics();
+            flakes.push(flake);
+            app.stage.addChild(flake);
+        }
+
+        for (let i = 0; i < 100; i++) {
+            const mountain = new PIXI.Graphics();
+            mountains.push(mountain);
+            app.stage.addChild(mountain);
+        }
+
+        app.stage.addChild(umbrella);
+        umbrella.x = window.innerWidth / 2;
+        umbrella.y = window.innerHeight * guiw.umbrella.position;
+
+        window.addEventListener('mousemove', moveCursor);
+        window.addEventListener('touchstart', moveCursor);
+        window.addEventListener('touchmove', moveCursor);
+        window.addEventListener('resize', change);
+        change();
+
+        PIXI.ticker.shared.add(tick);
+    };
+
+    function change(value, key, folder) {
+        const force = !key || folder === 'colors';
+
+        if (force) {
+            app.renderer.resize(window.innerWidth, window.innerHeight);
+            app.renderer.backgroundColor = guiw.colors.secondary;
+        }
+
+        if (force || (folder === 'flakes' && key !== 'angle' && key !== 'velocity')) {
+            drawFlakes();
+        }
+
+        if (force || folder === 'mountains') {
+            drawMountains();
+        }
+
+        if (force || folder === 'umbrella') {
+            drawUmbrella();
+        }
+    }
+
+    function drawFlakes() {
+        const { primary } = guiw.colors;
+        const { amount, blur, scale, velocity } = guiw.flakes;
+
+        for (let i = 0; i < flakes.length; i++) {
+            const flake = flakes[i];
+
+            if (i >= amount) {
+                flake.visible = false;
+                continue;
+            }
+
+            const indexFraction = 1 - i / amount / 3;
+
+            flake.visible = true;
+            flake.scale.x = flake.scale.y = indexFraction;
+            flake.y = velocity < 0 ? 0 : window.innerHeight;
+
+            if (blur) {
+                flake.filters = [
+                    new PIXI.filters.BlurFilter(Math.ceil(Math.abs(blur * indexFraction)), 2),
+                ];
+            }
+
+            flake.cacheAsBitmap = false;
+            flake.clear();
+            flake.beginFill(primary);
+            flake.drawCircle(0, 0, scale * indexFraction * 3);
+            flake.cacheAsBitmap = true;
+        }
+    }
+
+    function drawMountains() {
+        const { innerWidth, innerHeight } = window;
+        const { primary } = guiw.colors;
+        const { blur, curve, elevation, layers, position, spread, steps } = guiw.mountains;
+
+        const curveHeight = innerHeight * curve;
+        const positionHeight = innerHeight * position;
+
+        for (let i = 0; i < mountains.length; i++) {
+            const mountain = mountains[i];
+
+            if (i >= layers) {
+                mountain.visible = false;
+                continue;
+            }
+
+            const indexFraction = 1 - i / layers;
+            const offsetY = innerHeight * (position - spread / 2 + (spread * indexFraction));
+            const stepWidth = Math.ceil(innerWidth / (steps * 0.5 * Math.random() + steps * 0.5));
+            const boundLeft = -stepWidth * 2;
+            const boundRight = innerWidth + stepWidth * 2;
+            const boundBottom = innerHeight * 2;
+
+            mountain.visible = true;
+            mountain.cacheAsBitmap = false;
+
+            if (blur) {
+                mountain.filters = [
+                    new PIXI.filters.BlurFilter(Math.ceil(Math.abs(blur * (indexFraction - 0.2))), 1),
+                ];
+            }
+
+            mountain.clear();
+            mountain.beginFill(primary, indexFraction);
+            mountain.moveTo(boundLeft, boundBottom);
+            mountain.lineTo(boundLeft, positionHeight);
+
+            for (let x = boundLeft; x <= boundRight; x += stepWidth) {
+                const y = curveHeight * (1 - Math.pow(x / innerWidth - 0.5, 2)) + (elevation * Math.random()) + offsetY - curveHeight;
+                mountain.lineTo(x, y);
+            }
+
+            mountain.lineTo(boundRight, positionHeight);
+            mountain.lineTo(boundRight, boundBottom);
+            mountain.endFill();
+
+            mountain.cacheAsBitmap = true;
+        }
+
+    }
+
+    function drawUmbrella() {
+        const { primary, secondary } = guiw.colors;
+        const { blur } = guiw.umbrella;
+
+        umbrella.cacheAsBitmap = false;
+        umbrella.scale.x = umbrella.scale.y = guiw.umbrella.scale / 4;
+
+        umbrella.filters = blur ? [
+            new PIXI.filters.GlowFilter(blur, 1, 0, primary),
+        ] : null;
+
+        umbrella.clear();
+        umbrella.beginFill(primary);
+        umbrella.arc(0, 0, 200, 0, Math.PI, true);
+        for (let i = 0; i < 6; i++) {
+            umbrella.arc(-200 + (i + 0.5) * (200 / 3), 0, 200 / 6, Math.PI, 0);
+        }
+        umbrella.endFill();
+
+        umbrella.beginFill(primary);
+        umbrella.drawRect(-4, -210, 8, 330);
+        umbrella.drawRect(-6, 120, 12, 20);
+        umbrella.endFill();
+
+        umbrella.lineStyle(12, primary);
+        umbrella.arc(28, 140, 28, 0.2, Math.PI);
+
+        umbrella.cacheAsBitmap = true;
+    }
+
+    function moveCursor(e) {
+        if (e.touches) {
+            e = e.touches[0];
+        }
+        cursor.x = 0.5 - e.pageX / window.innerWidth;
+        cursor.y = 0.5 - e.pageY / window.innerHeight;
+    }
+
+    function tick() {
+        const distance = (window.innerWidth + window.innerHeight) / 10;
+        const elapsed = (performance.now() - time) / 10000;
+
+        moveFlakes();
+        moveMountains(distance, elapsed);
+        moveUmbrella(distance / 3, elapsed);
+    }
+
+    function moveFlakes() {
+        const { amount, angle, velocity } = guiw.flakes;
+        const dX = Math.sin(angle) * velocity;
+        const dY = Math.cos(angle) * velocity;
+
+        for (let i = 0; i < amount; i++) {
+            const flake = flakes[i];
+            flake.x += dX;
+            flake.y += dY;
+
+            if (velocity > 0) {
+                if (flake.y > window.innerHeight) {
+                    flake.x = window.innerWidth * (-1 + Math.random() * 3);
+                    flake.y = -window.innerHeight * Math.random();
+                }
+            } else if (flake.y < 0) {
+                flake.x = window.innerWidth * (-1 + Math.random() * 3);
+                flake.y = window.innerHeight * (1 + Math.random());
+            }
+        }
+    }
+
+    function moveMountains(distance, time) {
+        const { layers, spread, sway } = guiw.mountains;
+        const swayX = sway * Math.sin(time);
+        const swayY = sway * Math.sin(time * 2);
+
+        for (let i = 0; i < layers; i++) {
+            const mountain = mountains[i];
+            const index = 0.8 - i / layers;
+            mountain.x += (index * distance * cursor.x + swayX * index - mountain.x) * guiw.ease;
+            mountain.y += (index * distance * cursor.y + swayY * index - mountain.y) * guiw.ease;
+        }
+    }
+
+    function moveUmbrella(distance, time) {
+        const { position, rotation, sway, velocity } = guiw.umbrella;
+        const move = time * velocity;
+
+        umbrella.x += ((distance * cursor.x + sway * Math.sin(move * 3) + window.innerWidth / 2) - umbrella.x) * guiw.ease;
+        umbrella.y += ((distance * cursor.y + sway * Math.cos(move * 4) + window.innerHeight * position) - umbrella.y) * guiw.ease;
+        umbrella.rotation = Math.cos(move * 10) * rotation;
+    }
+</script>
\ No newline at end of file
diff --git a/codepen/worlds-end.html b/codepen/worlds-end.html
new file mode 100644
index 0000000..ed28b0a
--- /dev/null
+++ b/codepen/worlds-end.html
@@ -0,0 +1,203 @@
+<style>
+    body {
+    margin: 0;
+    overflow:hidden;
+}
+
+canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>
+
+<script>
+    const IMAGE_PATH = 'https://res.cloudinary.com/dkni0xdkf/image/upload/v1519504912/threejs/assets/textures/planet/';
+
+let gui, controls = {
+    meshes: 1000,
+    progress: 0,
+    play: function() {
+        if (player) {
+            player.kill();
+        }
+        player = TweenMax.to(controls, 30, {
+            progress: 1,
+            ease: Quad.easeIn,
+            onUpdate: scrub,
+        });
+    }
+};
+
+let scene, camera, renderer, container;
+let pass, occlusionComposer, occlusionRenderTarget, volumetericLightShaderUniforms;
+let material, occlusionMaterial, timeline, player;
+
+window.onload = function() {
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.z = Math.min(window.innerWidth, window.innerHeight) / 2;
+    
+    renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.body.appendChild(renderer.domElement);
+    
+    occlusionRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
+    occlusionComposer = new THREE.EffectComposer(renderer, occlusionRenderTarget);
+    occlusionComposer.addPass(new THREE.RenderPass(scene, camera));
+    pass = new THREE.ShaderPass(THREE.VolumetericLightShader);
+    pass.needsSwap = false;
+    occlusionComposer.addPass(pass);
+    volumetericLightShaderUniforms = pass.uniforms;
+    
+    composer = new THREE.EffectComposer(renderer);
+    composer.addPass(new THREE.RenderPass(scene, camera));
+    pass = new THREE.ShaderPass(THREE.AdditiveBlendingShader);
+    pass.uniforms.tAdd.value = occlusionRenderTarget.texture;
+    composer.addPass(pass);
+    pass.renderToScreen = true;
+
+    gui = new dat.GUI();
+    gui.add(controls, 'meshes', 100, 5000).step(10).onChange(build);
+    gui.add(controls, 'progress', 0, 1).step(0.0001).listen().onChange(scrub);
+    gui.add(controls, 'play');
+    gui.close();
+
+    new THREE.OrbitControls(camera, renderer.domElement);
+    
+    scene.add(new THREE.AmbientLight('white', 0.2));
+    
+    let sun = new THREE.PointLight('white');
+    scene.add(sun);
+    sun.position.set(-200, 200, 200);
+    
+    container = new THREE.Group();
+    scene.add(container);
+    
+    
+    inner = new THREE.Mesh(new THREE.SphereBufferGeometry(90, 90, 90), new THREE.MeshBasicMaterial({
+        color: 'red',
+    }));
+    inner.layers.set(1);
+    scene.add(inner);
+    
+    
+    let loader = new THREE.TextureLoader();
+    material = new THREE.MeshLambertMaterial({
+        map: loader.load(IMAGE_PATH + 'earthmap4K.jpg'),
+    });
+    
+    occlusionMaterial = new THREE.MeshBasicMaterial( { color: 'black' } );
+
+    window.addEventListener('resize', resize);
+    resize();
+    render();
+    
+    build();
+};
+
+function resize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    
+    let ratio = renderer.getPixelRatio();
+    let width = Math.floor(window.innerWidth / ratio) || 1;
+    let height = Math.floor(window.innerHeight / ratio) || 1;
+    composer.setSize(width, height);
+    occlusionComposer.setSize(width, height);
+}
+
+function render(){
+    requestAnimationFrame(render);
+    
+    container.rotation.y += 0.001;
+    
+    camera.layers.set(1);
+    occlusionComposer.render();
+
+    camera.layers.set(0);
+    composer.render();
+}
+
+function scrub(e) {
+    if (e && player) {
+        player.kill();
+        player = null;
+    }
+    timeline.progress(controls.progress);
+}
+
+function build() {
+    timeline = new TimelineMax({
+        paused: true,
+    });
+    
+    inner.scale.set(1, 1, 1);
+    timeline.add(TweenMax.to(inner.scale, 100, {
+        x: 3,
+        y: 3,
+        z: 3,
+        ease: Linear.easeIn,
+    }));
+    
+    while(container.children.length) {
+        container.remove(container.children[0]);
+    }
+    
+    let n = Math.floor(Math.sqrt(controls.meshes));
+    let sphere = new THREE.SphereGeometry(100, n, n);
+    let i, v, p, uvs, mesh, occlusionMesh, face, geometry;
+    for (i=0; i<sphere.faces.length; i++) {
+        face = sphere.faces[i];
+        v = new THREE.Vector3(
+            (sphere.vertices[face.a].x + sphere.vertices[face.b].x + sphere.vertices[face.c].x) / 3,
+            (sphere.vertices[face.a].y + sphere.vertices[face.b].y + sphere.vertices[face.c].y) / 3,
+            (sphere.vertices[face.a].z + sphere.vertices[face.b].z + sphere.vertices[face.c].z) / 3
+        ).multiplyScalar(0.5 + Math.random() * 0.3);
+        
+        geometry = new THREE.Geometry(100);
+        geometry.vertices.push(sphere.vertices[face.a].clone().sub(v));
+        geometry.vertices.push(sphere.vertices[face.b].clone().sub(v));
+        geometry.vertices.push(sphere.vertices[face.c].clone().sub(v));
+        geometry.vertices.push(new THREE.Vector3());
+        geometry.faces.push(new THREE.Face3(0, 1, 2));
+        geometry.faces.push(new THREE.Face3(0, 1, 3));
+        geometry.faces.push(new THREE.Face3(0, 2, 3));
+        geometry.faces.push(new THREE.Face3(1, 2, 3));
+
+        uvs = sphere.faceVertexUvs[0][i];
+        uvs = [ uvs[0].clone(), uvs[1].clone(), uvs[2].clone() ];
+        geometry.faceVertexUvs[0] = [uvs, uvs, uvs, uvs];
+        
+        geometry.computeFaceNormals();
+        mesh = new THREE.Mesh(geometry, material);
+        mesh.position.copy(v);
+
+        container.add(mesh);
+        
+        occlusionMesh = new THREE.Mesh(mesh.geometry, occlusionMaterial);
+        container.add(occlusionMesh);
+        occlusionMesh.layers.set(1);
+        occlusionMesh.position.copy(mesh.position);
+        
+        p = v.multiplyScalar(20 + Math.random() * 30);
+        timeline.insert(TweenMax.allTo([mesh.position, occlusionMesh.position], 100, {
+            x: p.x - 10 + Math.random() * 20,
+            y: p.y - 10 + Math.random() * 20,
+            z: p.z - 10 + Math.random() * 20,
+            ease: Quad.easeIn,
+        }));
+        timeline.insert(TweenMax.to([mesh.rotation, occlusionMesh.rotation], 100, {
+            x: -10 + Math.random() * 20,
+            y: -10 + Math.random() * 20,
+            z: -10 + Math.random() * 20,
+            ease: Quad.easeIn,
+        }));
+    }
+}
+
+THREE.VolumetericLightShader={uniforms:{tDiffuse:{value:null},lightPosition:{value:new THREE.Vector2(.5,.5)},exposure:{value:.18},decay:{value:.95},density:{value:.8},weight:{value:.4},samples:{value:50}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["varying vec2 vUv;","uniform sampler2D tDiffuse;","uniform vec2 lightPosition;","uniform float exposure;","uniform float decay;","uniform float density;","uniform float weight;","uniform int samples;","const int MAX_SAMPLES = 100;","void main()","{","vec2 texCoord = vUv;","vec2 deltaTextCoord = texCoord - lightPosition;","deltaTextCoord *= 1.0 / float(samples) * density;","vec4 color = texture2D(tDiffuse, texCoord);","float illuminationDecay = 1.0;","for(int i=0; i < MAX_SAMPLES; i++)","{","if(i == samples){","break;","}","texCoord -= deltaTextCoord;","vec4 sample = texture2D(tDiffuse, texCoord);","sample *= illuminationDecay * weight;","color += sample;","illuminationDecay *= decay;","}","gl_FragColor = color * exposure;","}"].join("\n")},THREE.AdditiveBlendingShader={uniforms:{tDiffuse:{value:null},tAdd:{value:null}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","uniform sampler2D tAdd;","varying vec2 vUv;","void main() {","vec4 color = texture2D( tDiffuse, vUv );","vec4 add = texture2D( tAdd, vUv );","gl_FragColor = color + add;","}"].join("\n")},THREE.PassThroughShader={uniforms:{tDiffuse:{value:null}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","varying vec2 vUv;","void main() {","gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );","}"].join("\n")};
+</script>
\ No newline at end of file
diff --git a/old/src/experiments/polyhedron/1.ts b/old/src/experiments/polyhedron/1.ts
deleted file mode 100644
index a3d2025..0000000
--- a/old/src/experiments/polyhedron/1.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as THREE from 'three';
-import * as Base from './base';
-
-const shape = new THREE.TetrahedronGeometry(200);
-export default Base.run(shape, 10, 20);
\ No newline at end of file
diff --git a/old/src/experiments/polyhedron/2.ts b/old/src/experiments/polyhedron/2.ts
deleted file mode 100644
index e3bb52c..0000000
--- a/old/src/experiments/polyhedron/2.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as THREE from 'three';
-import * as Base from './base';
-
-const shape = new THREE.DodecahedronGeometry(200);
-export default Base.run(shape, 1, 30);
\ No newline at end of file
diff --git a/old/src/experiments/polyhedron/base.ts b/old/src/experiments/polyhedron/base.ts
deleted file mode 100644
index 50f26da..0000000
--- a/old/src/experiments/polyhedron/base.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { PI2 } from '@/constants';
-import SimplexNoise from 'simplex-noise';
-import * as THREE from 'three';
-
-const FRAME = 640;
-const PARTICLES = 10000;
-const SIZE = 2;
-
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
-camera.position.z = 500;
-
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize(FRAME, FRAME);
-
-export function run(shape: THREE.PolyhedronGeometry, layers: number, spread: number) {
-    const lines = [];
-    for (let i = 0; i < shape.attributes.position.array.length; i += 9) {
-        const face = {
-            a: {
-                x: shape.attributes.position.array[i],
-                y: shape.attributes.position.array[i + 1],
-                z: shape.attributes.position.array[i + 2],
-            },
-            b: {
-                x: shape.attributes.position.array[i + 3],
-                y: shape.attributes.position.array[i + 4],
-                z: shape.attributes.position.array[i + 5],
-            },
-            c: {
-                x: shape.attributes.position.array[i + 6],
-                y: shape.attributes.position.array[i + 7],
-                z: shape.attributes.position.array[i + 8],
-            },
-        };
-
-        lines.push({
-            from: face.a,
-            to: face.b,
-        });
-
-        lines.push({
-            from: face.b,
-            to: face.c,
-        });
-
-        lines.push({
-            from: face.c,
-            to: face.a,
-        });
-    }
-
-    const particles = [];
-    const vertices = [];
-    const group = Math.ceil(PARTICLES / lines.length / layers);
-    for (let i = 0; i < PARTICLES; i++) {
-        const line = lines[Math.floor(i / group / layers)];
-        const index = i % group;
-
-        const n = 1.6 * (index / group) - 0.3;
-        const dX = line.from.x + (line.to.x - line.from.x) * n;
-        const dY = line.from.y + (line.to.y - line.from.y) * n;
-        const dZ = line.from.z + (line.to.z - line.from.z) * n;
-        const position = new THREE.Vector3(dX, dY, dZ);
-        vertices.push(position.clone());
-
-        const particle = {
-            point: vertices[i],
-            group: Math.floor(i / group),
-            layer: Math.floor(i / group) % layers,
-            position,
-            index,
-            line,
-        };
-        particles.push(particle);
-    }
-
-    const geometry = new THREE.BufferGeometry();
-
-    const material = new THREE.PointsMaterial({
-        color: 0xFFFFFF,
-        opacity: 0.2,
-        size: SIZE,
-        transparent: true,
-    });
-
-    const points = new THREE.Points(geometry, material);
-    scene.add(points);
-
-    const simplex = new SimplexNoise();
-
-    return {
-        duration: 10,
-        element: renderer.domElement,
-        size: SIZE,
-        onTick: (tick) => {
-            const d = (0.5 * Math.sin(PI2 * tick) + 0.5);
-            const p = 1 - 0.75 * d;
-            const s = spread * d + 5;
-
-            scene.rotation.y = PI2 * tick;
-
-            for (let i = 0; i < particles.length; i++) {
-                const particle = particles[i];
-
-                const n = particle.index / group;
-                const alpha = PI2 * (n + tick);
-                const cos = Math.cos(alpha);
-                const sin = Math.sin(alpha);
-                const noiseX = simplex.noise3D(cos + particle.group + 1, sin, n) * s;
-                const noiseY = simplex.noise3D(cos + particle.group + 2, sin, n) * s;
-                const noiseZ = simplex.noise3D(cos + particle.group + 3, sin, n) * s;
-                particle.point.x = particle.position.x * p + noiseX;
-                particle.point.y = particle.position.y * p + noiseY;
-                particle.point.z = particle.position.z * p + noiseZ;
-            }
-
-            geometry.setFromPoints(vertices);
-
-            renderer.render(scene, camera);
-        },
-    }
-}
diff --git a/package.json b/package.json
index c51b477..873372c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@types/lodash": "^4.17.7",
     "@types/three": "^0.166.0",
     "alea": "^1.0.1",
+    "gsap": "^3.12.5",
     "lodash": "^4.17.21",
     "next": "14.2.5",
     "pixi-filters": "^6.0.4",
diff --git a/public/assets/images/duality.png b/public/assets/images/duality.png
new file mode 100644
index 0000000..43699d6
Binary files /dev/null and b/public/assets/images/duality.png differ
diff --git a/public/assets/images/polyhedron-1.png b/public/assets/images/polyhedron-1.png
new file mode 100644
index 0000000..20331e6
Binary files /dev/null and b/public/assets/images/polyhedron-1.png differ
diff --git a/public/assets/images/polyhedron-2.png b/public/assets/images/polyhedron-2.png
new file mode 100644
index 0000000..2d3a056
Binary files /dev/null and b/public/assets/images/polyhedron-2.png differ
diff --git a/src/@types/common.d.ts b/src/@types/common.d.ts
index 9ea1cab..b49a8ff 100644
--- a/src/@types/common.d.ts
+++ b/src/@types/common.d.ts
@@ -1,5 +1,7 @@
 interface Experiment {
+    date: string;
     disabled?: boolean;
+    featured?: boolean;
     image: string;
     index: string;
     path: string;
diff --git a/src/app/cubic/1/page.tsx b/src/app/cubic/1/page.tsx
index de52e01..fd64410 100644
--- a/src/app/cubic/1/page.tsx
+++ b/src/app/cubic/1/page.tsx
@@ -45,6 +45,9 @@ export default class Cubic1 extends React.Component<any, ExperimentControlItems>
                 }
             }
         }
+
+        // Trigger state change
+        this.setState({});
     }
 
     handleTick = (progress: number) => {
diff --git a/src/app/cubic/2/page.tsx b/src/app/cubic/2/page.tsx
index b195176..da74d6b 100644
--- a/src/app/cubic/2/page.tsx
+++ b/src/app/cubic/2/page.tsx
@@ -38,6 +38,9 @@ export default class Cubic2 extends React.Component<any, ExperimentControlItems>
                 }
             }
         }
+
+        // Trigger state change
+        this.setState({});
     }
 
     handleTick = (progress: number) => {
diff --git a/src/app/cubic/3/page.tsx b/src/app/cubic/3/page.tsx
index 63ec232..6562bb9 100644
--- a/src/app/cubic/3/page.tsx
+++ b/src/app/cubic/3/page.tsx
@@ -57,6 +57,9 @@ export default class Cubic3 extends React.Component<any, ExperimentControlItems>
                 }
             }
         }
+
+        // Trigger state change
+        this.setState({});
     }
 
     handleTick = (progress: number) => {
diff --git a/src/app/duality/Shapes.tsx b/src/app/duality/Shapes.tsx
new file mode 100644
index 0000000..1946144
--- /dev/null
+++ b/src/app/duality/Shapes.tsx
@@ -0,0 +1,260 @@
+import { PI_D2, PI_M2 } from '@/setup';
+import gsap, { Back, Power2 } from 'gsap';
+import * as PIXI from 'pixi.js';
+import { Ticker } from 'pixi.js';
+
+export class ShapeBase extends PIXI.Container {
+
+    mask = new PIXI.Graphics();
+    maskRounded = false;
+    progress = 0;
+    shape = new PIXI.Graphics();
+    speed = 0.00001;
+
+    length: number;
+    maskThickness: number;
+    radius: number;
+    tickElement: PIXI.Graphics | null;
+    velocity: number;
+
+    constructor(radius: number, thickness: number, length = 1, velocity = 0) {
+        super();
+
+        this.radius = radius;
+        this.length = length;
+        this.velocity = velocity;
+
+        this.addChild(this.mask);
+        this.maskThickness = thickness + 5;
+
+        this.addChild(this.shape);
+        this.tickElement = this.shape;
+    }
+
+    intro = (index: number) => {
+        const delay = index * 0.1;
+        this.progress = 0;
+
+        gsap.from(this, {
+            delay,
+            duration: 0.5,
+            ease: Power2.easeInOut,
+            maskThickness: 0,
+        });
+
+        gsap.from(this.scale, {
+            delay,
+            duration: 3,
+            ease: Back.easeInOut,
+            x: 0.9,
+            y: 0.9,
+        });
+
+        gsap.to(this, {
+            delay,
+            duration: 3,
+            ease: Power2.easeInOut,
+            progress: Math.PI * this.length,
+            onUpdate: this.introProgress,
+        });
+
+        if (this.velocity) {
+            PIXI.Ticker.shared.add(this.tick);
+        }
+    }
+
+    introProgress = () => {
+        if (this.mask) {
+            this.mask.clear();
+            this.mask.setStrokeStyle({
+                color: 0,
+                width: this.maskThickness,
+            });
+            this.mask.arc(0, 0, this.radius, -this.progress, this.progress);
+
+            if (this.maskRounded) {
+                this.mask.circle(Math.sin(PI_D2 + this.progress) * this.radius, Math.cos(PI_D2 + this.progress) * this.radius, 1);
+                this.mask.circle(Math.sin(PI_D2 - this.progress) * this.radius, Math.cos(PI_D2 - this.progress) * this.radius, 1);
+            }
+
+            this.mask.stroke();
+        }
+    }
+
+    tick = (ticker: Ticker) => {
+        if (this.tickElement) {
+            this.tickElement.rotation += this.velocity * ticker.deltaMS * this.speed;
+        }
+    }
+}
+
+export class Circle extends ShapeBase {
+
+    constructor(color: number, radius: number, thickness: number, length?: number, velocity?: number) {
+        super(radius, thickness, length, velocity);
+
+        this.shape.setStrokeStyle({
+            color,
+            width: thickness,
+        });
+        this.shape.circle(0, 0, radius);
+        this.shape.stroke();
+
+        this.tickElement = this.mask;
+    }
+
+}
+
+export class Dashed extends ShapeBase {
+
+    color: number;
+    radius: number;
+    thickness: number;
+    dash: number;
+    gap: number;
+    velocity: number;
+
+    constructor(color: number, radius: number, thickness: number, dash: number, gap: number, velocity: number) {
+        super(radius, thickness, 1, velocity);
+
+        this.maskRounded = true;
+
+        const circumference = PI_M2 * radius;
+        const segments = Math.round(circumference / (dash + gap));
+        const radiusInner = radius - thickness / 2;
+        const radiusOuter = radiusInner + thickness;
+
+        this.shape.setStrokeStyle({
+            color,
+            width: dash,
+        });
+        for (let i = 0; i < segments; i++) {
+            const n = (i / segments) * PI_M2;
+            const x = Math.sin(n);
+            const y = Math.cos(n);
+
+            this.shape.moveTo(x * radiusInner, y * radiusInner);
+            this.shape.lineTo(x * radiusOuter, y * radiusOuter);
+        }
+        this.shape.stroke();
+    }
+
+}
+
+export class Iterated extends ShapeBase {
+
+    constructor(color: number, radius: number, thickness: number, segments: number, velocity: number, shapesData: string) {
+        super(radius, thickness, 1, velocity);
+
+        this.maskRounded = true;
+
+        const bounds = {
+            left: Number.MAX_VALUE,
+            right: -Number.MAX_VALUE,
+        };
+
+        const shapes = shapesData.split(';')
+            .map(shapeData => {
+                const shape = shapeData.split(',');
+
+                const data: any = {
+                    type: shape.length === 3 ? 'circle' : 'line',
+                };
+
+                if (data.type === 'circle') {
+                    data.x = parseInt(shape[0]) + radius;
+                    data.y = parseInt(shape[1]);
+                    data.radius = parseInt(shape[2]);
+
+                    bounds.left = Math.min(bounds.left, -data.radius);
+                    bounds.right = Math.max(bounds.right, data.radius);
+
+                } else {
+                    data.x = [];
+                    data.y = [];
+
+                    for (let i = 0; i < shape.length; i++) {
+                        const value = parseInt(shape[i]);
+                        if (i % 2) {
+                            data.x.push(value + radius);
+                        } else {
+                            data.y.push(value);
+                        }
+                    }
+
+                    bounds.left = Math.min.apply(this, [
+                        bounds.left,
+                        ...data.x,
+                    ]);
+                    bounds.right = Math.max.apply(this, [
+                        bounds.right,
+                        ...data.x,
+                    ]);
+                }
+
+                return data;
+            });
+
+        this.maskThickness = Math.abs(bounds.right - bounds.left) + 5;
+
+        this.shape.setStrokeStyle({
+            color,
+            width: thickness,
+        });
+        for (let i = 0; i < segments; i++) {
+            const n = (i / segments) * PI_M2;
+            const cosN = Math.cos(n);
+            const sinN = Math.sin(n);
+
+            for (const shape of shapes) {
+                if (shape.type === 'circle') {
+                    this.shape.circle(shape.x * cosN - shape.y * sinN, shape.y * cosN + shape.x * sinN, shape.radius);
+
+                } else {
+                    for (let k = 0; k < shape.x.length; k++) {
+                        const x = shape.x[k];
+                        const y = shape.y[k];
+                        if (k) {
+                            this.shape.lineTo(x * cosN - y * sinN, y * cosN + x * sinN);
+                        } else {
+                            this.shape.moveTo(x * cosN - y * sinN, y * cosN + x * sinN);
+                        }
+                    }
+
+                }
+
+            }
+        }
+        this.shape.stroke();
+    }
+
+}
+
+export class Polygon extends ShapeBase {
+
+    constructor(color: number, radius: number, thickness: number, sides: number, velocity: number) {
+        super(radius, thickness, 1, velocity);
+
+        const angle = PI_M2 / sides;
+
+        this.shape.setStrokeStyle({
+            color,
+            width: thickness, 
+        });
+        for (let i = 0; i <= sides; i++) {
+            const a = i * angle;
+            const x = Math.sin(a) * radius;
+            const y = Math.cos(a) * radius;
+
+            if (i) {
+                this.shape.lineTo(x, y);
+            } else {
+                this.shape.moveTo(x, y);
+            }
+        }
+        this.shape.stroke();
+
+        this.maskThickness = thickness + 20;
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/duality/Sides.tsx b/src/app/duality/Sides.tsx
new file mode 100644
index 0000000..153e568
--- /dev/null
+++ b/src/app/duality/Sides.tsx
@@ -0,0 +1,110 @@
+import { BLACK, PI_D2, WHITE } from '@/setup';
+import * as PIXI from 'pixi.js';
+import { Circle, Dashed, Iterated, Polygon, ShapeBase } from './Shapes';
+
+class SideBase extends PIXI.Container {
+
+    background = new PIXI.Graphics();
+    shapes = new PIXI.Container<ShapeBase>();
+    size = 1920;
+
+    constructor(primary: number, secondary: number, offset: number) {
+        super();
+
+        const center = this.size / 2;
+
+        // Add background
+        this.addChild(this.background);
+        this.background.clear();
+        this.background.rect(offset * (center), 0, center, this.size);
+        this.background.fill(primary);
+
+        // Add shapes container
+        this.addChild(this.shapes);
+        this.shapes.x = Math.round(center);
+        this.shapes.y = Math.round(center);
+
+        // Add shapes mask
+        const mask = new PIXI.Graphics();
+        this.shapes.mask = mask;
+        mask.clear();
+        mask.rect(offset * (center), 0, center, this.size);
+        mask.fill(0);
+
+        // Add shapes
+        this.add(new Dashed(secondary, 130, 0.5, 2, 5, 1));
+        this.add(new Dashed(secondary, 160, 3, 3, 100, -5));
+        this.add(new Dashed(secondary, 260, 0.5, 2, 5, -1));
+        this.add(new Circle(secondary, 280, 1));
+        this.add(new Dashed(secondary, 290, 10, 1, 15, 3));
+        this.add(new Circle(secondary, 300, 1));
+        this.add(new Circle(secondary, 270, 2, 0.3, 20));
+        this.add(new Circle(secondary, 310, 2, 0.4, -30));
+        this.add(new Dashed(secondary, 390, 3, 3, 118, 4));
+        this.add(new Dashed(secondary, 470, 2, 2, 15, 3));
+        this.add(new Dashed(secondary, 480, 2, 2, 7, -2));
+        this.add(new Circle(secondary, 490, 2));
+        this.add(new Circle(secondary, 555, 1));
+        this.add(new Dashed(secondary, 570, 25, 2, 100, -5));
+        this.add(new Circle(secondary, 585, 1));
+        this.add(new Dashed(secondary, 600, 2, 2, 7, 6));
+        this.add(new Circle(secondary, 625, 2, 0.3, -40));
+        this.add(new Circle(secondary, 655, 2, 0.4, 30));
+        this.add(new Circle(secondary, 710, 2));
+        this.add(new Circle(secondary, 871, 1));
+        this.add(new Circle(secondary, 890, 1));
+    }
+
+    add = (shape: ShapeBase) => {
+        this.shapes.addChild(shape);
+        shape.rotation = this.shapes.children.length % 2 ? PI_D2 : -PI_D2;
+    }
+
+    intro = () => {
+        for (const shape of this.shapes.children) {
+            shape.intro(shape.radius / 890 * this.shapes.children.length);
+        }
+    }
+}
+
+export class BlackSide extends SideBase {
+
+    constructor() {
+        super(BLACK, WHITE, 0);
+
+        this.add(new Polygon(WHITE, 80, 0.5, 8, -5));
+        this.add(new Polygon(WHITE, 95, 1, 8, -5));
+        this.add(new Polygon(WHITE, 100, 0.5, 8, -5));
+        this.add(new Iterated(WHITE, 210, 1, 12, 15, '-5,-10,-5,10,8,0,-5,-10'));
+        this.add(new Iterated(WHITE, 390, 1, 14, -3, '-40,0,-20,-35,20,-35,40,0,20,35,-20,35,-40,0'));
+        this.add(new Iterated(WHITE, 520, 1, 50, 5, '-5,-5,5,5;-5,5,5,-5'));
+        this.add(new Iterated(WHITE, 640, 1, 260, 4, '-10,0,0,-10,10,0,0,10,-10,0'));
+        this.add(new Polygon(WHITE, 690, 2, 20, -5));
+        this.add(new Polygon(WHITE, 695, 0.5, 20, -5));
+        this.add(new Iterated(WHITE, 787, 1, 100, -2, '0,50,-3,-50,3,-50,0,50'));
+
+        this.intro();
+    }
+
+}
+
+export class WhiteSide extends SideBase {
+
+    constructor() {
+        super(WHITE, BLACK, 1);
+
+        this.add(new Circle(BLACK, 80, 0.5));
+        this.add(new Circle(BLACK, 95, 1));
+        this.add(new Circle(BLACK, 100, 0.5));
+        this.add(new Iterated(BLACK, 210, 1, 12, 15, '0,0,10'));
+        this.add(new Iterated(BLACK, 390, 1, 14, -3, '0,0,40'));
+        this.add(new Iterated(BLACK, 520, 1, 50, 5, '0,-6,0,6;-6,0,6,0'));
+        this.add(new Iterated(BLACK, 640, 1, 260, 4, '0,0,10'));
+        this.add(new Circle(BLACK, 690, 2));
+        this.add(new Circle(BLACK, 695, 0.5));
+        this.add(new Iterated(BLACK, 787, 1, 100, -2, '0,-50,0,50'));
+
+        this.intro();
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/duality/page.tsx b/src/app/duality/page.tsx
new file mode 100644
index 0000000..12768ac
--- /dev/null
+++ b/src/app/duality/page.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { PixiPlayer } from '@/components';
+import * as PIXI from 'pixi.js';
+import React from 'react';
+import { BlackSide, WhiteSide } from './Sides';
+
+export default class Duality extends React.Component<any, ExperimentControlItems> {
+
+    // TODO: Add experiment controls
+    // TODO: Add player controls
+
+    handleInit = (app: PIXI.Application) => {
+        const black = new BlackSide();
+        app.stage.addChild(black);
+
+        const white = new WhiteSide();
+        app.stage.addChild(white);
+    }
+
+    render() {
+        return <PixiPlayer
+            duration={5}
+            size={1920}
+            onInit={this.handleInit}
+        />;
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fd1124b..454d3de 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,30 +1,71 @@
 'use client';
 import { experiments } from '@/setup';
-import { Box, Card, CardActionArea, CardContent, CardHeader, CardMedia, Grid, Typography } from '@mui/material';
+import { Box, Card, CardActionArea, CardContent, CardHeader, CardMedia, Divider, Grid, Typography } from '@mui/material';
 
 export default function Home() {
 
-    return <Box overflow="auto" padding={3}>
-        <Card>
-            <CardHeader title="Experimental" />
-            <CardContent>
-                <Typography>
-                    Just some experimental digital artwork
-                </Typography>
-            </CardContent>
-        </Card>
-        <Grid container marginTop={0} overflow="auto" spacing={3}>
-            {experiments.map((experiment, index) => !experiment.disabled && (
-                <Grid item key={index} xs={12} md={6} lg={4} xl={3}>
-                    <CardActionArea href={experiment.path}>
-                        <Card>
-                            <CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
-                            <CardHeader subheader={experiment.index} title={experiment.title} />
-                        </Card>
-                    </CardActionArea>
-                </Grid>
-            ))}
-        </Grid>
+    return <Box display="flex" flexDirection="column" gap={6} overflow="auto" padding={3}>
+        <Box>
+            <Card>
+                <CardHeader title="Experimental" />
+                <CardContent>
+                    <Typography>
+                        Just some experimental digital artwork
+                    </Typography>
+                </CardContent>
+            </Card>
+        </Box>
+        <Box display="flex" flexDirection="column" gap={2}>
+            <Typography variant="h4">
+                Featured
+            </Typography>
+            <Divider />
+            <Grid container overflow="auto" spacing={3}>
+                {experiments.filter(experiment => experiment.featured).map((experiment, index) => (
+                    <Grid item key={index} xs={12} md={6} lg={4} xl={3}>
+                        <CardActionArea href={experiment.path}>
+                            <Card>
+                                <CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
+                                <CardHeader
+                                    subheader={(
+                                        <Box display="flex" gap={1}>
+                                            <Typography>{experiment.index}</Typography>
+                                            <Typography color="grey.700">|</Typography>
+                                            <Typography>{experiment.date}</Typography>
+                                        </Box>
+                                    )}
+                                    title={experiment.title}
+                                />
+                            </Card>
+                        </CardActionArea>
+                    </Grid>
+                ))}
+            </Grid>
+            <Divider />
+        </Box>
+        <Box>
+            <Grid container overflow="auto" spacing={3}>
+                {experiments.filter(experiment => !experiment.disabled && !experiment.featured).map((experiment, index) => (
+                    <Grid item key={index} xs={12} md={6} lg={4} xl={3}>
+                        <CardActionArea href={experiment.path}>
+                            <Card>
+                                <CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
+                                <CardHeader
+                                    subheader={(
+                                        <Box display="flex" gap={1}>
+                                            <Typography>{experiment.index}</Typography>
+                                            <Typography color="grey.700">|</Typography>
+                                            <Typography>{experiment.date}</Typography>
+                                        </Box>
+                                    )}
+                                    title={experiment.title}
+                                />
+                            </Card>
+                        </CardActionArea>
+                    </Grid>
+                ))}
+            </Grid>
+        </Box>
     </Box>;
 
 }
diff --git a/src/app/polyhedron/1/page.tsx b/src/app/polyhedron/1/page.tsx
new file mode 100644
index 0000000..e9dc018
--- /dev/null
+++ b/src/app/polyhedron/1/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+import * as THREE from 'three';
+import PolyhedronBase from '../PolyhedronBase';
+
+export default function Polyhedron1() {
+
+    const shape = new THREE.TetrahedronGeometry(200);
+
+    return <PolyhedronBase
+        layers={5}
+        spread={10}
+        shape={shape}
+    />;
+
+}
\ No newline at end of file
diff --git a/src/app/polyhedron/2/page.tsx b/src/app/polyhedron/2/page.tsx
new file mode 100644
index 0000000..e4b6016
--- /dev/null
+++ b/src/app/polyhedron/2/page.tsx
@@ -0,0 +1,15 @@
+'use client';
+import * as THREE from 'three';
+import PolyhedronBase from '../PolyhedronBase';
+
+export default function Polyhedron2() {
+
+    const shape = new THREE.DodecahedronGeometry(200);
+
+    return <PolyhedronBase
+        layers={1}
+        spread={30}
+        shape={shape}
+    />;
+
+}
\ No newline at end of file
diff --git a/src/app/polyhedron/PolyhedronBase.tsx b/src/app/polyhedron/PolyhedronBase.tsx
new file mode 100644
index 0000000..e72228c
--- /dev/null
+++ b/src/app/polyhedron/PolyhedronBase.tsx
@@ -0,0 +1,168 @@
+'use client';
+import { ExperimentControls, ThreePlayer } from '@/components';
+import { PI_M2 } from '@/setup';
+import React from 'react';
+import { createNoise3D } from 'simplex-noise';
+import * as THREE from 'three';
+
+export default class PolyhedronBase extends React.Component<PolyhedronBaseProps, ExperimentControlItems> {
+
+    container = new THREE.Group();
+    geometry = new THREE.BufferGeometry();
+    groups = 0;
+    lines: PolyhedronBaseLine[] = [];
+    noise3D = createNoise3D();
+    particles: PolyhedronBaseParticle[] = [];
+    particleSize = 2;
+    vertices: THREE.Vector3[] = [];
+
+    constructor(props: PolyhedronBaseProps) {
+        super(props);
+
+        const { layers, spread } = this.props;
+
+        this.state = {
+            layers: { min: 1, max: 100, step: 1, value: layers },
+            particles: { min: 100, max: 100000, step: 100, value: 50000 },
+            speed: { min: 1, max: 10, step: 1, value: 1 },
+            spread: { min: 1, max: 100, step: 1, value: spread },
+        };
+    }
+
+    handleInit = (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => {
+        const { shape } = this.props;
+
+        // Update camera
+        camera.position.z = 500;
+
+        // Add container
+        scene.add(this.container);
+
+        // Add points
+        const material = new THREE.PointsMaterial({
+            color: 0xFFFFFF,
+            opacity: 0.2,
+            size: this.particleSize,
+            transparent: true,
+        });
+
+        const points = new THREE.Points(this.geometry, material);
+        this.container.add(points);
+
+        // Get shape lines
+        for (let i = 0; i < shape.attributes.position.array.length; i += 9) {
+            const face = {
+                a: {
+                    x: shape.attributes.position.array[i],
+                    y: shape.attributes.position.array[i + 1],
+                    z: shape.attributes.position.array[i + 2],
+                },
+                b: {
+                    x: shape.attributes.position.array[i + 3],
+                    y: shape.attributes.position.array[i + 4],
+                    z: shape.attributes.position.array[i + 5],
+                },
+                c: {
+                    x: shape.attributes.position.array[i + 6],
+                    y: shape.attributes.position.array[i + 7],
+                    z: shape.attributes.position.array[i + 8],
+                },
+            };
+
+            this.lines.push({
+                from: face.a,
+                to: face.b,
+            });
+
+            this.lines.push({
+                from: face.b,
+                to: face.c,
+            });
+
+            this.lines.push({
+                from: face.c,
+                to: face.a,
+            });
+        }
+
+        // Trigger state change
+        this.setState({});
+    }
+
+    componentDidUpdate() {
+        const { layers, particles } = this.state;
+
+        // Remove previous particles and vertices
+        while (this.particles.length) {
+            this.particles.pop();
+        }
+        while (this.vertices.length) {
+            this.vertices.pop();
+        }
+
+        // Get new particles and vertices
+        this.groups = Math.ceil(particles.value / this.lines.length / layers.value);
+        for (let i = 0; i < particles.value; i++) {
+            const line = this.lines[Math.floor(i / this.groups / layers.value)];
+            const index = i % this.groups;
+
+            const n = 1.6 * (index / this.groups) - 0.3;
+            const dX = line.from.x + (line.to.x - line.from.x) * n;
+            const dY = line.from.y + (line.to.y - line.from.y) * n;
+            const dZ = line.from.z + (line.to.z - line.from.z) * n;
+            const position = new THREE.Vector3(dX, dY, dZ);
+            this.vertices.push(position.clone());
+
+            const particle = {
+                point: this.vertices[i],
+                group: Math.floor(i / this.groups),
+                layer: Math.floor(i / this.groups) % layers.value,
+                position,
+                index,
+                line,
+            };
+            this.particles.push(particle);
+        }
+    }
+
+    handleTick = (progress: number) => {
+        const { speed, spread } = this.state;
+        const tick = (progress * speed.value) % 1;
+
+        this.container.rotation.y = PI_M2 * tick;
+
+        const d = (0.5 * Math.sin(PI_M2 * tick) + 0.5);
+        const p = 1 - 0.75 * d;
+        const s = spread.value * d + 5;
+
+        for (const particle of this.particles) {
+            const n = particle.index / this.groups;
+            const alpha = PI_M2 * (n + tick);
+            const cos = Math.cos(alpha);
+            const sin = Math.sin(alpha);
+            const noiseX = this.noise3D(cos + particle.group + 1, sin, n) * s;
+            const noiseY = this.noise3D(cos + particle.group + 2, sin, n) * s;
+            const noiseZ = this.noise3D(cos + particle.group + 3, sin, n) * s;
+            particle.point.x = particle.position.x * p + noiseX;
+            particle.point.y = particle.position.y * p + noiseY;
+            particle.point.z = particle.position.z * p + noiseZ;
+        }
+
+        this.geometry.setFromPoints(this.vertices);
+    }
+
+    render() {
+        return <>
+            <ExperimentControls
+                items={this.state}
+                onChange={items => this.setState(items)}
+            />
+            <ThreePlayer
+                duration={12}
+                onInit={this.handleInit}
+                onTick={this.handleTick}
+            />
+        </>;
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/polyhedron/PolyhedronBase.types.d.ts b/src/app/polyhedron/PolyhedronBase.types.d.ts
new file mode 100644
index 0000000..b7c4ce1
--- /dev/null
+++ b/src/app/polyhedron/PolyhedronBase.types.d.ts
@@ -0,0 +1,27 @@
+interface PolyhedronBaseProps {
+    layers: number;
+    spread: number;
+    shape: THREE.PolyhedronGeometry;
+}
+
+interface PolyhedronBaseLine {
+    from: {
+        x: any;
+        y: any;
+        z: any;
+    };
+    to: {
+        x: any;
+        y: any;
+        z: any;
+    };
+}
+
+interface PolyhedronBaseParticle {
+    group: number;
+    index: number;
+    layer: number;
+    line: PolyhedronBaseLine;
+    point: THREE.Vector3;
+    position: THREE.Vector3;
+}
\ No newline at end of file
diff --git a/src/components/PixiPlayer/PixiPlayer.tsx b/src/components/PixiPlayer/PixiPlayer.tsx
index df9a998..035bd65 100644
--- a/src/components/PixiPlayer/PixiPlayer.tsx
+++ b/src/components/PixiPlayer/PixiPlayer.tsx
@@ -85,7 +85,7 @@ export default class PixiPlayer extends Component<PixiPlayerProps, PixiPlayerSta
 
     handleTicker = () => {
         const { duration, startTime } = this.state;
-        
+
         // Update progress
         const progress = (((performance.now() / 1000) - startTime) / duration) % 1;
         this.setState({
@@ -93,7 +93,7 @@ export default class PixiPlayer extends Component<PixiPlayerProps, PixiPlayerSta
         });
 
         // Call tick
-        this.props.onTick(progress);
+        this.props.onTick?.(progress);
     }
 
     handleResize = () => {
@@ -135,12 +135,14 @@ export default class PixiPlayer extends Component<PixiPlayerProps, PixiPlayerSta
             <Box flex={1} padding={3}>
                 <Box height="100%" position="relative" ref={this.canvasContainerRef} />
             </Box>
-            <PlayerControls
-                playing={this.state.playing}
-                progress={this.state.progress}
-                onProgressChange={this.handleProgressChange}
-                onToggle={this.togglePlaying}
-            />
+            {!!this.props.onTick && (
+                <PlayerControls
+                    playing={this.state.playing}
+                    progress={this.state.progress}
+                    onProgressChange={this.handleProgressChange}
+                    onToggle={this.togglePlaying}
+                />
+            )}
         </>;
     }
 
diff --git a/src/components/PixiPlayer/PixiPlayer.types.d.ts b/src/components/PixiPlayer/PixiPlayer.types.d.ts
index 1034adb..4862eaf 100644
--- a/src/components/PixiPlayer/PixiPlayer.types.d.ts
+++ b/src/components/PixiPlayer/PixiPlayer.types.d.ts
@@ -2,7 +2,7 @@ interface PixiPlayerProps {
     duration?: number;
     size?: number;
     onInit(app: PIXI.Application<PIXI.Renderer>): void;
-    onTick(progress: number): void;
+    onTick?(progress: number): void;
 }
 
 interface PixiPlayerState {
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 4b1f2b7..6f03b0f 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -19,7 +19,7 @@ export default function Sidebar() {
                 Experiments
             </Button>
             <Box>
-                <IconButton color="inherit" href="https://github.com/Emroni/experimental" target="_blank">
+                <IconButton color="inherit" href="https://emrekoc.io" target="_blank">
                     <ContactPage />
                 </IconButton>
                 <IconButton color="inherit" href="https://github.com/Emroni/experimental" target="_blank">
diff --git a/src/setup/constants.ts b/src/setup/constants.ts
index e5588ba..8624121 100644
--- a/src/setup/constants.ts
+++ b/src/setup/constants.ts
@@ -1,3 +1,6 @@
+export const BLACK = 0x000000;
+export const WHITE = 0xFFFFFF;
+
 export const PI = Math.PI;
 export const PI_D2 = Math.PI / 2;
 export const PI_D4 = Math.PI / 4;
diff --git a/src/setup/experiments.ts b/src/setup/experiments.ts
index d092d8e..dae0495 100644
--- a/src/setup/experiments.ts
+++ b/src/setup/experiments.ts
@@ -1,82 +1,75 @@
 import _ from 'lodash';
 
-const items = [
-    'simplex-noise/1',
-    'simplex-noise/2',
-    'hexagon/1',
-    'hexagon/2',
-    'hexagon/3',
-    'hexagon/4',
-    'hexagon/5',
-    'sphere/1',
-    'sphere/2',
-    'polyhedron/1',
-    'polyhedron/2',
-    'kaleidoscope/1',
-    'kaleidoscope/2',
-    'kaleidoscope/3',
-    'tunnel/1',
-    'tunnel/2',
-    'cubic/1',
-    'cubic/2',
-    'cubic/3',
-    'wave/1',
-    'flocking/1',
-    'flocking/2',
-    'flocking/3',
-    'eye/1',
-    'eye/2',
-    'eye/3',
-    'plotter/1',
-    'plotter/2',
-    'cubic/4',
-    'tunnel/3',
-    'wave/2',
-    'cubic/5',
-    'cubic/6',
-    'cubic/7',
-    'art/1',
-    'wave/3',
-    'animal/1',
-    'animal/2',
-    'sphere/3',
+const items: [string, string, boolean?, boolean?][] = [
+    ['animal/1', '2019-11-10', false, true],
+    ['animal/2', '2019-12-05', false, true],
+    ['arcs', '2018-04-14', false, true],
+    ['art/1', '2019-10-28', false, true],
+    ['cubes', '2018-06-02', false, true],
+    ['cubic/1', '2019-08-20'],
+    ['cubic/2', '2019-08-20'],
+    ['cubic/3', '2019-08-20'],
+    ['cubic/4', '2019-09-27', false, true],
+    ['cubic/5', '2019-10-07', false, true],
+    ['cubic/6', '2019-10-10', false, true],
+    ['cubic/7', '2019-10-15', false, true],
+    ['drops', '2017-06-02', false, true],
+    ['duality', '2019-05-20', true],
+    ['eye/1', '2019-08-23', false, true],
+    ['eye/2', '2019-08-23', false, true],
+    ['eye/3', '2019-09-10', false, true],
+    ['face', '2018-03-27', false, true],
+    ['flocking/1', '2019-08-21', false, true],
+    ['flocking/2', '2019-08-21', false, true],
+    ['flocking/3', '2019-08-23', false, true],
+    ['foggy-forest', '2018-03-31', false, true],
+    ['followers', '2018-06-03', false, true],
+    ['hexagon/1', '2019-08-11'],
+    ['hexagon/2', '2019-08-11'],
+    ['hexagon/3', '2019-08-11'],
+    ['hexagon/4', '2019-08-11'],
+    ['hexagon/5', '2019-08-11'],
+    ['kaleidoscope/1', '2019-08-18', false, true],
+    ['kaleidoscope/2', '2019-08-18', false, true],
+    ['kaleidoscope/3', '2019-08-18', false, true],
+    ['mobius', '2017-06-01', false, true],
+    ['morph', '2017-10-31', false, true],
+    ['mother-box', '2017-12-04', false, true],
+    ['nebula', '2017-10-30', false, true],
+    ['pixeliser', '2018-04-14', false, true],
+    ['plotter/1', '2019-09-17', false, true],
+    ['plotter/2', '2019-09-18', false, true],
+    ['polyhedron/1', '2019-08-14'],
+    ['polyhedron/2', '2019-08-14'],
+    ['rings', '2018-06-21', false, true],
+    ['ripples', '2017-06-07', false, true],
+    ['simplex-noise/1', '2019-08-09'],
+    ['simplex-noise/2', '2019-08-11'],
+    ['solar', '2018-04-02', false, true],
+    ['sphere/1', '2019-08-13'],
+    ['sphere/2', '2019-08-13'],
+    ['sphere/3', '2020-01-30', false, true],
+    ['tau', '2018-06-15', false, true],
+    ['tree-of-thoughts', '2017-11-01', false, true],
+    ['trigonometry', '2017-08-08', false, true],
+    ['tunnel/1', '2019-08-19', false, true],
+    ['tunnel/2', '2019-08-19', false, true],
+    ['tunnel/3', '2019-09-29', false, true],
+    ['wander-lost', '2019-05-28', false, true],
+    ['wave/1', '2019-08-21', false, true],
+    ['wave/2', '2019-10-04', false, true],
+    ['wave/3', '2019-11-09', false, true],
+    ['worlds-end', '2018-02-22', false, true],
 ];
 
-const disabled = [
-    'polyhedron/1',
-    'polyhedron/2',
-    'kaleidoscope/1',
-    'kaleidoscope/2',
-    'kaleidoscope/3',
-    'tunnel/1',
-    'tunnel/2',
-    'wave/1',
-    'flocking/1',
-    'flocking/2',
-    'flocking/3',
-    'eye/1',
-    'eye/2',
-    'eye/3',
-    'plotter/1',
-    'plotter/2',
-    'cubic/4',
-    'tunnel/3',
-    'wave/2',
-    'cubic/5',
-    'cubic/6',
-    'cubic/7',
-    'art/1',
-    'wave/3',
-    'animal/1',
-    'animal/2',
-    'sphere/3',
-];
+items.sort((a, b) => a[1] < b[1] ? 1 : -1);
 
-items.reverse();
-export const experiments: Experiment[] = items.map((item, index) => ({
-    disabled: disabled.includes(item),
-    image: `/assets/images/${item.replace('/', '-')}.png`,
+export const experiments: Experiment[] = items.map(([name, date, featured, disabled], index) => ({
+    date,
+    disabled,
+    featured,
+    image: `/assets/images/${name.replace('/', '-')}.png`,
     index: (items.length - index).toString().padStart(3, '0'),
-    path: `/${item}`,
-    title: _.startCase(item),
+    path: `/${name}`,
+    title: _.startCase(name),
 }));
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 4ea8cf9..8d0d745 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1749,6 +1749,11 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+gsap@^3.12.5:
+  version "3.12.5"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4"
+  integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"