feat: replace animated backgrounds with Aceternity UI system

- Add 16 animated background components (aurora, sparkles, vortex, shooting-stars, beams, beams-collision, gradient-animation, wavy, lines, boxes, meteors, grid, dots, spotlight, noise, ripple, gemini-effect) - Add full admin BackgroundEditor with live preview, type gallery, per-type settings - Add BackgroundRenderer with lazy loading, localStorage cache, mobile reduction - Add input sanitization (sanitizeColor, clampNumber) across all components - Add translations for en, ru, zh, fa locales - Remove old Aurora (WebGL/OGL) and AnimatedBackground (CSS wave-blob) - Remove ogl dependency, add simplex-noise
2026-07-30 02:23:47 +00:00 · 2026-02-25 07:12:59 +03:00
parent 78e70992f1
commit 1a702a68b9
35 changed files with 2919 additions and 653 deletions
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -828,6 +828,96 @@
    }
  },
  "admin": {
+    "backgrounds": {
+      "title": "Animated Background",
+      "description": "Choose a type and configure animation settings",
+      "selectType": "Background Type",
+      "preview": "Preview",
+      "settings": "Settings",
+      "save": "Save",
+      "saved": "Saved",
+      "saving": "Saving...",
+      "enabled": "Background enabled",
+      "disabled": "Background disabled",
+      "reducedOnMobile": "Reduced mode on mobile",
+      "reducedOnMobileDesc": "Reduces particle count and disables interactivity",
+      "globalOpacity": "Opacity",
+      "globalBlur": "Blur",
+      "categoryCSS": "CSS",
+      "categoryCanvas": "Canvas",
+      "categorySVG": "SVG",
+      "aurora": "Aurora",
+      "auroraDesc": "Northern lights with smooth gradients",
+      "sparkles": "Sparkles",
+      "sparklesDesc": "Twinkling particles on the background",
+      "vortex": "Vortex",
+      "vortexDesc": "Spinning particle vortex",
+      "shootingStars": "Shooting Stars",
+      "shootingStarsDesc": "Falling stars on a starry sky",
+      "beams": "Beams",
+      "beamsDesc": "Light beams along SVG paths",
+      "beamsCollision": "Beams Collision",
+      "beamsCollisionDesc": "Exploding light beams",
+      "gradientAnimation": "Gradient Animation",
+      "gradientAnimationDesc": "Smoothly moving gradient blobs",
+      "wavy": "Wavy",
+      "wavyDesc": "Waves based on simplex noise",
+      "lines": "Lines",
+      "linesDesc": "Animated SVG waves",
+      "boxes": "Boxes",
+      "boxesDesc": "Grid of interactive blocks",
+      "meteors": "Meteors",
+      "meteorsDesc": "Flying meteors",
+      "grid": "Grid",
+      "gridDesc": "Minimalist grid pattern",
+      "dots": "Dots",
+      "dotsDesc": "Dot pattern",
+      "spotlight": "Spotlight",
+      "spotlightDesc": "Spotlight beam",
+      "noise": "Noise",
+      "noiseDesc": "Noise gradients with motion",
+      "ripple": "Ripple",
+      "rippleDesc": "Ripple wave effect",
+      "geminiEffect": "Gemini Effect",
+      "geminiEffectDesc": "SVG effect like Google Gemini",
+      "speed": "Speed",
+      "density": "Particle Density",
+      "particles": "Particle Count",
+      "count": "Count",
+      "hue": "Hue",
+      "rangeY": "Y Range",
+      "minSize": "Min Size",
+      "maxSize": "Max Size",
+      "minSpeed": "Min Speed",
+      "maxSpeed": "Max Speed",
+      "particleColor": "Particle Color",
+      "starColor": "Star Color",
+      "trailColor": "Trail Color",
+      "bgColor": "Background Color",
+      "fillColor": "Fill Color",
+      "color1": "Color 1",
+      "color2": "Color 2",
+      "color3": "Color 3",
+      "color4": "Color 4",
+      "color5": "Color 5",
+      "interactive": "Interactive (mouse)",
+      "size": "Size",
+      "radialGradient": "Radial Gradient",
+      "waveWidth": "Wave Width",
+      "blurAmount": "Blur",
+      "waveOpacity": "Wave Opacity",
+      "duration": "Duration",
+      "intensity": "Intensity",
+      "rows": "Rows",
+      "cols": "Columns",
+      "gridSize": "Grid Size",
+      "small": "Small",
+      "normal": "Normal",
+      "slow": "Slow",
+      "fast": "Fast",
+      "none": "No Background",
+      "noneDesc": "Disable animated background"
+    },
    "groups": {
      "analytics": "Analytics",
      "marketing": "Marketing",
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -716,6 +716,96 @@
    "youWon": "شما برنده شدید"
  },
  "admin": {
+    "backgrounds": {
+      "title": "پس‌زمینه متحرک",
+      "description": "نوع را انتخاب کنید و تنظیمات انیمیشن را پیکربندی کنید",
+      "selectType": "نوع پس‌زمینه",
+      "preview": "پیش‌نمایش",
+      "settings": "تنظیمات",
+      "save": "ذخیره",
+      "saved": "ذخیره شد",
+      "saving": "در حال ذخیره...",
+      "enabled": "پس‌زمینه فعال",
+      "disabled": "پس‌زمینه غیرفعال",
+      "reducedOnMobile": "حالت سبک در موبایل",
+      "reducedOnMobileDesc": "تعداد ذرات را کاهش داده و تعامل را غیرفعال می‌کند",
+      "globalOpacity": "شفافیت",
+      "globalBlur": "تاری",
+      "categoryCSS": "CSS",
+      "categoryCanvas": "Canvas",
+      "categorySVG": "SVG",
+      "aurora": "شفق قطبی",
+      "auroraDesc": "شفق شمالی با گرادیان‌های نرم",
+      "sparkles": "درخشش",
+      "sparklesDesc": "ذرات درخشان در پس‌زمینه",
+      "vortex": "گرداب",
+      "vortexDesc": "گرداب چرخان ذرات",
+      "shootingStars": "ستاره‌های دنباله‌دار",
+      "shootingStarsDesc": "ستاره‌های در حال سقوط در آسمان پرستاره",
+      "beams": "پرتوها",
+      "beamsDesc": "پرتوهای نوری در مسیرهای SVG",
+      "beamsCollision": "برخورد پرتوها",
+      "beamsCollisionDesc": "پرتوهای نوری منفجرشونده",
+      "gradientAnimation": "انیمیشن گرادیان",
+      "gradientAnimationDesc": "بلوب‌های گرادیانی با حرکت نرم",
+      "wavy": "موجی",
+      "wavyDesc": "امواج مبتنی بر نویز",
+      "lines": "خطوط",
+      "linesDesc": "امواج SVG متحرک",
+      "boxes": "جعبه‌ها",
+      "boxesDesc": "شبکه‌ای از بلوک‌های تعاملی",
+      "meteors": "شهاب‌سنگ",
+      "meteorsDesc": "شهاب‌سنگ‌های پرنده",
+      "grid": "شبکه",
+      "gridDesc": "الگوی شبکه‌ای مینیمال",
+      "dots": "نقاط",
+      "dotsDesc": "الگوی نقطه‌ای",
+      "spotlight": "نورافکن",
+      "spotlightDesc": "پرتو نورافکن",
+      "noise": "نویز",
+      "noiseDesc": "گرادیان‌های نویزی با حرکت",
+      "ripple": "موج",
+      "rippleDesc": "اثر موج دایره‌ای",
+      "geminiEffect": "افکت Gemini",
+      "geminiEffectDesc": "افکت SVG مشابه Google Gemini",
+      "speed": "سرعت",
+      "density": "تراکم ذرات",
+      "particles": "تعداد ذرات",
+      "count": "تعداد",
+      "hue": "رنگ‌مایه",
+      "rangeY": "محدوده Y",
+      "minSize": "حداقل اندازه",
+      "maxSize": "حداکثر اندازه",
+      "minSpeed": "حداقل سرعت",
+      "maxSpeed": "حداکثر سرعت",
+      "particleColor": "رنگ ذرات",
+      "starColor": "رنگ ستاره",
+      "trailColor": "رنگ دنباله",
+      "bgColor": "رنگ پس‌زمینه",
+      "fillColor": "رنگ پر کردن",
+      "color1": "رنگ ۱",
+      "color2": "رنگ ۲",
+      "color3": "رنگ ۳",
+      "color4": "رنگ ۴",
+      "color5": "رنگ ۵",
+      "interactive": "تعاملی (ماوس)",
+      "size": "اندازه",
+      "radialGradient": "گرادیان شعاعی",
+      "waveWidth": "عرض موج",
+      "blurAmount": "تاری",
+      "waveOpacity": "شفافیت موج",
+      "duration": "مدت زمان",
+      "intensity": "شدت",
+      "rows": "ردیف‌ها",
+      "cols": "ستون‌ها",
+      "gridSize": "اندازه شبکه",
+      "small": "کوچک",
+      "normal": "معمولی",
+      "slow": "آهسته",
+      "fast": "سریع",
+      "none": "بدون پس‌زمینه",
+      "noneDesc": "غیرفعال کردن پس‌زمینه متحرک"
+    },
    "nav": {
      "title": "مدیریت",
      "dashboard": "آمار",
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -857,6 +857,96 @@
    }
  },
  "admin": {
+    "backgrounds": {
+      "title": "Анимированный фон",
+      "description": "Выберите тип и настройте параметры анимации",
+      "selectType": "Тип фона",
+      "preview": "Предпросмотр",
+      "settings": "Настройки",
+      "save": "Сохранить",
+      "saved": "Сохранено",
+      "saving": "Сохранение...",
+      "enabled": "Фон включён",
+      "disabled": "Фон выключен",
+      "reducedOnMobile": "Облегчённый режим на мобильных",
+      "reducedOnMobileDesc": "Уменьшает количество частиц и отключает интерактивность",
+      "globalOpacity": "Прозрачность",
+      "globalBlur": "Размытие",
+      "categoryCSS": "CSS",
+      "categoryCanvas": "Canvas",
+      "categorySVG": "SVG",
+      "aurora": "Aurora",
+      "auroraDesc": "Северное сияние с плавными переливами",
+      "sparkles": "Sparkles",
+      "sparklesDesc": "Мерцающие частицы на фоне",
+      "vortex": "Vortex",
+      "vortexDesc": "Вращающийся водоворот частиц",
+      "shootingStars": "Shooting Stars",
+      "shootingStarsDesc": "Падающие звёзды на звёздном небе",
+      "beams": "Beams",
+      "beamsDesc": "Световые лучи по SVG-путям",
+      "beamsCollision": "Beams Collision",
+      "beamsCollisionDesc": "Взрывающиеся световые лучи",
+      "gradientAnimation": "Gradient Animation",
+      "gradientAnimationDesc": "Плавно движущиеся градиентные блобы",
+      "wavy": "Wavy",
+      "wavyDesc": "Волны на основе simplex noise",
+      "lines": "Lines",
+      "linesDesc": "Анимированные SVG-волны",
+      "boxes": "Boxes",
+      "boxesDesc": "Сетка интерактивных блоков",
+      "meteors": "Meteors",
+      "meteorsDesc": "Летящие метеоры",
+      "grid": "Grid",
+      "gridDesc": "Минималистичная сетка",
+      "dots": "Dots",
+      "dotsDesc": "Точечный паттерн",
+      "spotlight": "Spotlight",
+      "spotlightDesc": "Прожекторный луч",
+      "noise": "Noise",
+      "noiseDesc": "Шумовые градиенты с движением",
+      "ripple": "Ripple",
+      "rippleDesc": "Волновой эффект при клике",
+      "geminiEffect": "Gemini Effect",
+      "geminiEffectDesc": "SVG-эффект как на Google Gemini",
+      "speed": "Скорость",
+      "density": "Плотность частиц",
+      "particles": "Количество частиц",
+      "count": "Количество",
+      "hue": "Оттенок",
+      "rangeY": "Диапазон Y",
+      "minSize": "Мин. размер",
+      "maxSize": "Макс. размер",
+      "minSpeed": "Мин. скорость",
+      "maxSpeed": "Макс. скорость",
+      "particleColor": "Цвет частиц",
+      "starColor": "Цвет звёзд",
+      "trailColor": "Цвет следа",
+      "bgColor": "Цвет фона",
+      "fillColor": "Цвет заливки",
+      "color1": "Цвет 1",
+      "color2": "Цвет 2",
+      "color3": "Цвет 3",
+      "color4": "Цвет 4",
+      "color5": "Цвет 5",
+      "interactive": "Интерактивность (мышь)",
+      "size": "Размер",
+      "radialGradient": "Радиальный градиент",
+      "waveWidth": "Ширина волны",
+      "blurAmount": "Размытие",
+      "waveOpacity": "Прозрачность волн",
+      "duration": "Длительность",
+      "intensity": "Интенсивность",
+      "rows": "Строки",
+      "cols": "Столбцы",
+      "gridSize": "Размер сетки",
+      "small": "Мелкая",
+      "normal": "Обычная",
+      "slow": "Медленно",
+      "fast": "Быстро",
+      "none": "Без фона",
+      "noneDesc": "Отключить анимированный фон"
+    },
    "nav": {
      "title": "Админка",
      "dashboard": "Статистика",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -716,6 +716,96 @@
    }
  },
  "admin": {
+    "backgrounds": {
+      "title": "动画背景",
+      "description": "选择类型并配置动画参数",
+      "selectType": "背景类型",
+      "preview": "预览",
+      "settings": "设置",
+      "save": "保存",
+      "saved": "已保存",
+      "saving": "保存中...",
+      "enabled": "背景已启用",
+      "disabled": "背景已禁用",
+      "reducedOnMobile": "移动端轻量模式",
+      "reducedOnMobileDesc": "减少粒子数量并禁用交互",
+      "globalOpacity": "透明度",
+      "globalBlur": "模糊",
+      "categoryCSS": "CSS",
+      "categoryCanvas": "Canvas",
+      "categorySVG": "SVG",
+      "aurora": "极光",
+      "auroraDesc": "柔和渐变的北极光",
+      "sparkles": "闪烁",
+      "sparklesDesc": "背景中闪烁的粒子",
+      "vortex": "漩涡",
+      "vortexDesc": "旋转的粒子漩涡",
+      "shootingStars": "流星",
+      "shootingStarsDesc": "星空中的流星",
+      "beams": "光束",
+      "beamsDesc": "沿SVG路径的光线",
+      "beamsCollision": "碰撞光束",
+      "beamsCollisionDesc": "爆炸的光束",
+      "gradientAnimation": "渐变动画",
+      "gradientAnimationDesc": "平滑移动的渐变色块",
+      "wavy": "波浪",
+      "wavyDesc": "基于噪声的波浪",
+      "lines": "线条",
+      "linesDesc": "动画SVG波浪",
+      "boxes": "方块",
+      "boxesDesc": "交互式方块网格",
+      "meteors": "流星雨",
+      "meteorsDesc": "飞行的流星",
+      "grid": "网格",
+      "gridDesc": "极简网格图案",
+      "dots": "圆点",
+      "dotsDesc": "圆点图案",
+      "spotlight": "聚光灯",
+      "spotlightDesc": "聚光灯光束",
+      "noise": "噪声",
+      "noiseDesc": "带运动的噪声渐变",
+      "ripple": "涟漪",
+      "rippleDesc": "涟漪波纹效果",
+      "geminiEffect": "Gemini效果",
+      "geminiEffectDesc": "类似Google Gemini的SVG效果",
+      "speed": "速度",
+      "density": "粒子密度",
+      "particles": "粒子数量",
+      "count": "数量",
+      "hue": "色调",
+      "rangeY": "Y范围",
+      "minSize": "最小尺寸",
+      "maxSize": "最大尺寸",
+      "minSpeed": "最小速度",
+      "maxSpeed": "最大速度",
+      "particleColor": "粒子颜色",
+      "starColor": "星星颜色",
+      "trailColor": "尾迹颜色",
+      "bgColor": "背景颜色",
+      "fillColor": "填充颜色",
+      "color1": "颜色1",
+      "color2": "颜色2",
+      "color3": "颜色3",
+      "color4": "颜色4",
+      "color5": "颜色5",
+      "interactive": "交互（鼠标）",
+      "size": "大小",
+      "radialGradient": "径向渐变",
+      "waveWidth": "波浪宽度",
+      "blurAmount": "模糊",
+      "waveOpacity": "波浪透明度",
+      "duration": "持续时间",
+      "intensity": "强度",
+      "rows": "行",
+      "cols": "列",
+      "gridSize": "网格大小",
+      "small": "小",
+      "normal": "普通",
+      "slow": "慢",
+      "fast": "快",
+      "none": "无背景",
+      "noneDesc": "禁用动画背景"
+    },
    "nav": {
      "title": "管理",
      "dashboard": "统计",