fix(backgrounds): expose remaining hardcoded colors in shooting-stars, meteors, gradient-animation

src/components/ui/backgrounds/background-gradient-animation.tsx

@@ -32,6 +32,7 @@ export default function BackgroundGradientAnimation({ settings }: Props) {
   const thirdColor = hexToRgbString(sanitizeColor(settings.thirdColor, '#64DCFF'));
   const fourthColor = hexToRgbString(sanitizeColor(settings.fourthColor, '#C83232'));
   const fifthColor = hexToRgbString(sanitizeColor(settings.fifthColor, '#B4B432'));
+  const pointerColor = hexToRgbString(sanitizeColor(settings.pointerColor, '#8C64FF'));
   const interactive = safeBoolean(settings.interactive, true);
   const size = safeSelect(settings.size, ['60%', '80%', '100%'] as const, '80%');
 
@@ -172,7 +173,7 @@ export default function BackgroundGradientAnimation({ settings }: Props) {
             ref={interactiveRef}
             className="absolute left-[calc(50%-var(--size)/2)] top-[calc(50%-var(--size)/2)] h-[var(--size)] w-[var(--size)] rounded-full opacity-70 mix-blend-hard-light"
             style={{
-              background: `radial-gradient(circle at center, rgba(140, 100, 255, 0.8) 0, rgba(140, 100, 255, 0) 50%) no-repeat`,
+              background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,
             }}
           />
         )}

src/components/ui/backgrounds/meteors.tsx

@@ -36,7 +36,7 @@ export default function Meteors({ settings }: Props) {
             animationPlayState: paused ? 'paused' : 'running',
             width: meteor.size,
             height: meteor.size,
-            boxShadow: `0 0 0 1px rgba(255,255,255,0.05), 0 0 2px 1px ${meteorColor}20, 0 0 20px 2px ${meteorColor}40`,
+            boxShadow: `0 0 0 1px ${meteorColor}0d, 0 0 2px 1px ${meteorColor}20, 0 0 20px 2px ${meteorColor}40`,
             background: meteorColor,
           }}
         >

src/components/ui/backgrounds/registry.ts

@@ -194,6 +194,12 @@ export const backgroundRegistry: BackgroundDefinition[] = [
         type: 'color',
         default: '#2EB9DF',
       },
+      {
+        key: 'bgStarColor',
+        label: 'admin.backgrounds.bgStarColor',
+        type: 'color',
+        default: '#ffffff',
+      },
       {
         key: 'starDensity',
         label: 'admin.backgrounds.density',
@@ -248,6 +254,12 @@ export const backgroundRegistry: BackgroundDefinition[] = [
       { key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#64DCFF' },
       { key: 'fourthColor', label: 'admin.backgrounds.color4', type: 'color', default: '#C83232' },
       { key: 'fifthColor', label: 'admin.backgrounds.color5', type: 'color', default: '#B4B432' },
+      {
+        key: 'pointerColor',
+        label: 'admin.backgrounds.pointerColor',
+        type: 'color',
+        default: '#8C64FF',
+      },
       {
         key: 'interactive',
         label: 'admin.backgrounds.interactive',

src/components/ui/backgrounds/shooting-stars.tsx

@@ -41,6 +41,7 @@ export default function ShootingStarsBackground({ settings }: Props) {
 
   const starColor = sanitizeColor(settings.starColor, '#9E00FF');
   const trailColor = sanitizeColor(settings.trailColor, '#2EB9DF');
+  const bgStarColor = sanitizeColor(settings.bgStarColor, '#ffffff');
   const starDensity = clampNumber(settings.starDensity, 0.00001, 0.001, 0.00015);
   const minSpeed = clampNumber(settings.minSpeed, 1, 50, 10);
   const maxSpeed = clampNumber(settings.maxSpeed, 5, 100, 30);
@@ -117,9 +118,11 @@ export default function ShootingStarsBackground({ settings }: Props) {
         }
         ctx.beginPath();
         ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(255,255,255,${opacity})`;
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = bgStarColor;
         ctx.fill();
       }
+      ctx.globalAlpha = 1;
 
       if (time - state.lastShootingTime > state.nextShootingDelay) {
         state.shootingStars.push({
@@ -166,7 +169,7 @@ export default function ShootingStarsBackground({ settings }: Props) {
         return true;
       });
     },
-    [starColor, trailColor, starDensity, minSpeed, maxSpeed],
+    [starColor, trailColor, bgStarColor, starDensity, minSpeed, maxSpeed],
   );
 
   return <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />;

src/locales/en.json

@@ -1168,6 +1168,8 @@
       "particleColor": "Particle Color",
       "starColor": "Star Color",
       "trailColor": "Trail Color",
+      "bgStarColor": "Background Stars Color",
+      "pointerColor": "Pointer Color",
       "bgColor": "Background Color",
       "fillColor": "Fill Color",
       "color1": "Color 1",

src/locales/ru.json

@@ -1198,6 +1198,8 @@
       "particleColor": "Цвет частиц",
       "starColor": "Цвет звёзд",
       "trailColor": "Цвет следа",
+      "bgStarColor": "Цвет фоновых звёзд",
+      "pointerColor": "Цвет курсорного блоба",
       "bgColor": "Цвет фона",
       "fillColor": "Цвет заливки",
       "color1": "Цвет 1",