diff options
Diffstat (limited to 'aero.js')
| -rw-r--r-- | aero.js | 26 |
1 files changed, 25 insertions, 1 deletions
@@ -17,6 +17,30 @@ function spawnBubbles(host, count = 22) { host.appendChild(f); } +function spawnShards(host, count = 30, kind = 'shard', speed = 1) { + const f = document.createElement('div'); + f.className = 'shard-field'; + for (let i = 0; i < count; i++) { + const s = document.createElement('div'); + s.className = 'chrome-shard ' + kind; + const w = kind === 'blade' ? 8 + Math.random() * 14 : 16 + Math.random() * 34; + const h = kind === 'blade' ? 64 + Math.random() * 130 : 36 + Math.random() * 92; + s.style.width = w + 'px'; + s.style.height = h + 'px'; + s.style.left = Math.random() * 100 + '%'; + s.style.setProperty('--drift', ((Math.random() - 0.5) * 170) + 'px'); + const rot0 = Math.round(Math.random() * 360); + const spin = (Math.random() < 0.5 ? -1 : 1) * (110 + Math.random() * 250); + s.style.setProperty('--rot0', rot0 + 'deg'); + s.style.setProperty('--rot1', (rot0 + spin) + 'deg'); + s.style.animationDuration = ((18 + Math.random() * 16) / speed) + 's'; + s.style.animationDelay = (-Math.random() * 30) + 's'; + f.appendChild(s); + } + host.appendChild(f); + return f; +} + function makeClouds(host) { const svg = `<svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%;"> <defs> @@ -270,7 +294,7 @@ async function fetchReelMouthFeed(limit = 6) { } window.Aero = { - spawnBubbles, makeClouds, sparkleCursor, makeDraggable, makeResizable, + spawnBubbles, spawnShards, makeClouds, sparkleCursor, makeDraggable, makeResizable, counterHTML, nowPlayingHTML, animateEq, musicToggleHTML, // theme api getTheme, setTheme, mountThemeSwitcher, initTheme, THEMES, |