maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shop): 9 premium animated backgrounds

Browse Source 
Doubles the bg catalogue from 10 to 19 with richer multi-layer
animations. Every keyframe pack is CSS-only and respects the existing
prefers-reduced-motion fallback.

  sunset       550   slow hue cycle through warm palette
  rain         650   2-layer vertical streaks at different speeds
  snow         700   3-layer drifting flakes pattern
  clouds       750   drifting white blobs on day sky (only LIGHT one)
  fireflies    800   pulsing glowing dots, opposing drift
  cyber-grid   850   neon grid scrolling down with vignette
  kaleidoscope 1000  two huge conic-gradients in opposite rotation
  ocean        1100  layered blobs drift like undulating waves
  aurora-dance 1500  multi-band aurora — new premium top-tier

Tonal classification mirrored in api.js DARK_BG_SLUGS so the veil
picks the right contrast: clouds is light, the other 8 join the dark
set (alongside dark, stars, aurora, nebula, grid).

Each background also gains a matching .bg-preview.bg-<slug> rule that
reuses the same animation at the shop's 90px swatch — WYSIWYG.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-29 21:35:59 +03:00
parent d838c94df4
commit f6fbe922a9
3 changed files with 337 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/api.js
+6 -1
View File
@@ -1084,7 +1084,12 @@ async function applyCosmetics() {
// ON TOP of it (#ls-bg-veil, z-index:-1 vs bg-fx -2) acting as a
// translucent veil so vibrant animations don't drown out the UI.
// The tone attr on <body> lets the veil darken for dark presets.
const DARK_BG_SLUGS = new Set(['dark', 'stars', 'aurora', 'nebula', 'grid']);
const DARK_BG_SLUGS = new Set([
'dark', 'stars', 'aurora', 'nebula', 'grid',
// Phase migration-036 additions — all dark except 'clouds'.
'sunset', 'rain', 'snow', 'fireflies', 'cyber-grid',
'kaleidoscope', 'ocean', 'aurora-dance',
]);
if (c.background && c.background.slug && c.background.slug !== 'none') {
const slug = String(c.background.slug).replace(/[^a-z0-9_-]/gi, '');
let bgEl = document.getElementById('ls-bg-fx');