1 files changed, 107 insertions, 0 deletions
diff --git a/docs/assets/js/shards.js b/docs/assets/js/shards.js
new file mode 100644
index 0000000..1b374ee
--- /dev/null
+++ b/docs/assets/js/shards.js
@@ -0,0 +1,107 @@
+const shards = (function(){
+  let count
+  let delay = 120 * 1000
+  let els = []
+  let t = 0
+  let rebuilding = false
+  let nextTimeout
+  let dark, light
+  const bg_el = document.querySelector('.bgs')
+
+  function init(){
+    bind()
+    build()
+    step()
+    setTimeout(next, 20)
+    bg_el.classList.remove('fade')
+  }
+  function bind(){
+    document.querySelector('h1').addEventListener('click', () => {
+      sounds.play('click')
+      rebuild()
+      site.navigateHash('')
+      player.hidePlaylist()
+    })
+  }
+  function build(){
+    count = choice(is_mobile ? [5,7] : [5,7,7,11,11])
+    light = cielab.gradient(count)
+    dark = cielab.gradient(count)
+    let el
+    for (var i = 0; i < count; i++) {
+      el = append(i)
+    }
+  }
+  function destroy(){
+    for (var i = 0; i < count; i++) {
+      els[i] && bg_el.removeChild(els[i])
+    }
+    els.length = 0
+  }
+  function rebuild(){
+    if (rebuilding) return
+    rebuilding = true
+    // sounds.play('click')
+    stars.rebuild()
+    next()
+    t = 0
+    bg_el.classList.add('fade')
+    setTimeout(() => {
+      destroy()
+      build()
+      step()
+      setTimeout(next, 20)
+      bg_el.classList.remove('fade')
+      rebuilding = false
+      // sounds.play('click')
+    }, 500)
+  }
+  function append(i){
+    const el = document.createElement('div')
+    el.classList.add('bg')
+    els.push(el)
+    bg_el.appendChild(el)
+    return el
+  }
+  function next(){
+    clearTimeout(nextTimeout)
+    nextTimeout = setTimeout(next, delay)
+    step()
+  }
+  function step() {
+    t += 1
+    light = cielab.gradient(count)
+    let w = { min: is_mobile ? randrange(40, 90) : randrange(20, 40), max: randrange(10, 90) }
+    if (w.min > w.max) {
+      w.min += 10
+    }
+    let rot = { min: randint(360), max: randrange(720, 1080) }
+    for (var i = 0; i < count; i++) {
+      update(i, t, w, rot, dark, light)
+    }
+    document.body.style.backgroundColor = cielab.gradient(2)(0.05)
+  }
+  function update(i, t, w, rot){
+    const el = els[i]
+    const n = i / count
+    const side = lerp(n, w.min, w.max)
+    const spin = lerp(i % 2 ? (1-n) : (n), rot.min, rot.max)
+    const rotation = "rotate3d(" + [randrange(-1,1), randrange(-1,1), randrange(-1,1)].join(',') + ',' + randint(360) + "deg)"
+    el.style.width = side + 'vmin'
+    el.style.height = side + 'vmin'
+    el.style.transform = "translate3d(-50%, -50%, 0) rotate(" + spin + "deg) translate3d(50%, 50%, 0) " + rotation
+    // el.style.transform = "translate3d(-50%, -50%, 0)"
+    if (t === 1) {
+      light = cielab.gradient(count)
+      if (is_mobile) {
+        el.style.backgroundImage = 'linear-gradient(0deg, ' + dark(1) + ', ' + light(1) + ')'
+      } else {
+        el.style.backgroundImage = 'linear-gradient(0deg, ' + dark(1) + ', ' + light(0) + ')'
+      }
+    }
+    el.style.backgroundColor = light(1)
+    el.style.opacity = lerp(n, randrange(0.1, 0.4), randrange(0.2, 0.5))
+  }
+  init()
+  return { rebuild: rebuild, step: step, }
+})()
+\ No newline at end of file