5 files changed, 102 insertions, 3 deletions
diff --git a/luax/common.luax b/luax/common.luax
index 64109bb..dcd443c 100644
--- a/luax/common.luax
+++ b/luax/common.luax
@@ -21,6 +21,8 @@ return <html lang="en">
     <script type="text/javascript"
             src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
+    <script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
+
     <script src="/index.js"></script>
 
     <link rel="stylesheet" href="/app.css" />
diff --git a/luax/components/animated_bg.luax b/luax/components/animated_bg.luax
index 029c933..0c5105c 100644
--- a/luax/components/animated_bg.luax
+++ b/luax/components/animated_bg.luax
@@ -1,3 +1,3 @@
 return function()
-  return <div></div>
+  return <div id="animated-bg" />
 end
diff --git a/luax/public/app.css b/luax/public/app.css
index b16cfea..c390f73 100644
--- a/luax/public/app.css
+++ b/luax/public/app.css
@@ -93,6 +93,16 @@
   background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-bg) 10%, var(--color-bg) 90%, rgba(0, 0, 0, 0) 100%);
 }
 
+#animated-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -10;
+}
+
+
 @media (max-width: 480px) {
   .back-shadows {
       margin: auto;
diff --git a/luax/public/index.js b/luax/public/index.js
index 982672e..51716de 100644
--- a/luax/public/index.js
+++ b/luax/public/index.js
@@ -1,4 +1,91 @@
 $(document).ready(function() {
-    $('.carousel-wrapper').slick({});
+  $('.carousel-wrapper').slick({
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  });
+
+  var canvas_parent = document.getElementById('animated-bg');
+  var canvas = document.createElement('canvas');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight / 2;
+  window.sandbox_canvas = canvas;
+
+  canvas_parent.appendChild(canvas, null, { filtering: 'nearest' });
+  var sandbox = new GlslCanvas(canvas);
+  // randomize time
+  sandbox.timeLoad = Math.random() * 100000;
+
+  window.sandbox = sandbox; // for access
+
+  const shader_code = `
+precision highp float;
+uniform vec3 color;
+uniform sampler2D t;
+uniform vec2 tiles;
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform float symbol_count;
+
+vec2 map_to_symbol_uv(vec2 image_coord, float symbol_index) {
+    float symbol_width = 1.0 / symbol_count;
+    float symbol_height = 1.0;
+    float symbol_x = symbol_index * symbol_width;
+    return vec2(symbol_x + image_coord.x * symbol_width, image_coord.y * symbol_height);
+}
+
+vec2 tile_index(vec2 p, vec2 tiles) {
+    return vec2(floor(p.x * tiles.x), floor(p.y * tiles.y));
+}
+
+vec2 tilefy (vec2 p, vec2 tiles) {
+    return vec2(fract(p.x * tiles.x), fract(p.y * tiles.y));
+}
+
+float randf(float n) {
+    return fract(sin(n) * 43758.5453123);
+}
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 tile = tile_index(uv, tiles);
+    float tilerand = randf(tile.x + tile.y * tiles.x);
+    float v = tilerand + randf(floor(tilerand * u_time));
+    float diff = fract(tilerand * u_time);
+    float s = floor(v * 9.0);
+    vec2 tp = tilefy(uv, tiles);
+    vec2 tp_center = vec2(0.5, 0.5);
+    float d = distance(tp, tp_center);
+    float scale = min(sin(diff * 3.1415) * 1.2, 1.0);
+    tp = tp_center + (tp - tp_center) / scale;
+    if (tp.x < 0.0 || tp.x > 1.0 || tp.y < 0.0 || tp.y > 1.0) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        return;
+    }
+    vec2 p = map_to_symbol_uv(tp, mod(s, symbol_count));
+    vec4 c = texture2D(t, p);
+    c.rgb *= color;
+    c.a *= uv.y * 4.0;
+    gl_FragColor = vec4(c.rgb * c.a, c.a);
+}
+`
+
+  sandbox.load(shader_code);
+
+  sandbox.setUniform('t', "/assets/images/symbols.png");
+
+  sandbox.setUniform('color', 42 / 255, 42 / 255, 80 / 255);
+
+  sandbox.setUniform('symbol_count', 9);
+
+  sandbox.setUniform('tiles', Math.ceil(window.innerWidth / 32), Math.ceil(window.innerHeight / 64));
+
+  addEventListener('resize', function() {
+    window.sandbox_canvas.width = window.innerWidth;
+    window.sandbox_canvas.height = window.innerHeight / 2;
+    window.sandbox.setUniform('tiles', Math.ceil(window.innerWidth / 32), Math.ceil(window.innerHeight / 64));
+  });
 });
 
diff --git a/luax/public/project.css b/luax/public/project.css
index ba14088..742c072 100644
--- a/luax/public/project.css
+++ b/luax/public/project.css
@@ -35,7 +35,7 @@
   display: table;
   align-self: center;
   clear: both;
-  margin-bottom: 24pt;
+  margin-top: 24pt;
 }
 
 .project-info {