mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
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
This commit is contained in:
Fringg
544
src/components/ui/backgrounds/registry.ts
Normal file
544
src/components/ui/backgrounds/registry.ts
Normal file
@@ -0,0 +1,544 @@
|
||||
import { lazy, type ComponentType } from 'react';
|
||||
import type { BackgroundType, BackgroundDefinition } from './types';
|
||||
|
||||
// Lazy-loaded components — only the selected type is fetched
|
||||
export const backgroundComponents: Record<
|
||||
Exclude<BackgroundType, 'none'>,
|
||||
ComponentType<{ settings: Record<string, unknown> }>
|
||||
> = {
|
||||
aurora: lazy(() => import('./aurora-background')),
|
||||
sparkles: lazy(() => import('./sparkles')),
|
||||
vortex: lazy(() => import('./vortex')),
|
||||
'shooting-stars': lazy(() => import('./shooting-stars')),
|
||||
'background-beams': lazy(() => import('./background-beams')),
|
||||
'background-beams-collision': lazy(() => import('./background-beams-collision')),
|
||||
'gradient-animation': lazy(() => import('./background-gradient-animation')),
|
||||
wavy: lazy(() => import('./wavy-background')),
|
||||
'background-lines': lazy(() => import('./background-lines')),
|
||||
boxes: lazy(() => import('./background-boxes')),
|
||||
meteors: lazy(() => import('./meteors')),
|
||||
grid: lazy(() => import('./grid-background')),
|
||||
dots: lazy(() => import('./grid-background')),
|
||||
spotlight: lazy(() => import('./spotlight-bg')),
|
||||
noise: lazy(() => import('./noise-background')),
|
||||
ripple: lazy(() => import('./background-ripple')),
|
||||
'gemini-effect': lazy(() => import('./google-gemini-effect')),
|
||||
};
|
||||
|
||||
// Registry of all background definitions with settings for the editor
|
||||
// labelKey/descriptionKey are under "admin.backgrounds.*"
|
||||
// setting label keys are under "admin.backgrounds.*"
|
||||
export const backgroundRegistry: BackgroundDefinition[] = [
|
||||
{
|
||||
type: 'aurora',
|
||||
labelKey: 'admin.backgrounds.aurora',
|
||||
descriptionKey: 'admin.backgrounds.auroraDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{ key: 'firstColor', label: 'admin.backgrounds.color1', type: 'color', default: '#00d2ff' },
|
||||
{ key: 'secondColor', label: 'admin.backgrounds.color2', type: 'color', default: '#7928ca' },
|
||||
{ key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#ff0080' },
|
||||
{
|
||||
key: 'speed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'select',
|
||||
default: 'normal',
|
||||
options: [
|
||||
{ label: 'admin.backgrounds.slow', value: 'slow' },
|
||||
{ label: 'admin.backgrounds.normal', value: 'normal' },
|
||||
{ label: 'admin.backgrounds.fast', value: 'fast' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'sparkles',
|
||||
labelKey: 'admin.backgrounds.sparkles',
|
||||
descriptionKey: 'admin.backgrounds.sparklesDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'particleDensity',
|
||||
label: 'admin.backgrounds.density',
|
||||
type: 'number',
|
||||
min: 10,
|
||||
max: 200,
|
||||
step: 10,
|
||||
default: 80,
|
||||
},
|
||||
{
|
||||
key: 'particleColor',
|
||||
label: 'admin.backgrounds.particleColor',
|
||||
type: 'color',
|
||||
default: '#ffffff',
|
||||
},
|
||||
{
|
||||
key: 'minSize',
|
||||
label: 'admin.backgrounds.minSize',
|
||||
type: 'number',
|
||||
min: 0.2,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
default: 0.4,
|
||||
},
|
||||
{
|
||||
key: 'maxSize',
|
||||
label: 'admin.backgrounds.maxSize',
|
||||
type: 'number',
|
||||
min: 1,
|
||||
max: 5,
|
||||
step: 0.1,
|
||||
default: 1.4,
|
||||
},
|
||||
{
|
||||
key: 'speed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'number',
|
||||
min: 0.1,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
default: 0.6,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'vortex',
|
||||
labelKey: 'admin.backgrounds.vortex',
|
||||
descriptionKey: 'admin.backgrounds.vortexDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'particleCount',
|
||||
label: 'admin.backgrounds.particles',
|
||||
type: 'number',
|
||||
min: 50,
|
||||
max: 1000,
|
||||
step: 50,
|
||||
default: 300,
|
||||
},
|
||||
{
|
||||
key: 'rangeY',
|
||||
label: 'admin.backgrounds.rangeY',
|
||||
type: 'number',
|
||||
min: 50,
|
||||
max: 300,
|
||||
step: 10,
|
||||
default: 100,
|
||||
},
|
||||
{
|
||||
key: 'baseHue',
|
||||
label: 'admin.backgrounds.hue',
|
||||
type: 'number',
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 10,
|
||||
default: 220,
|
||||
},
|
||||
{
|
||||
key: 'rangeSpeed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'number',
|
||||
min: 0.5,
|
||||
max: 5,
|
||||
step: 0.5,
|
||||
default: 1.5,
|
||||
},
|
||||
{
|
||||
key: 'backgroundColor',
|
||||
label: 'admin.backgrounds.bgColor',
|
||||
type: 'color',
|
||||
default: '#000000',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'shooting-stars',
|
||||
labelKey: 'admin.backgrounds.shootingStars',
|
||||
descriptionKey: 'admin.backgrounds.shootingStarsDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{ key: 'starColor', label: 'admin.backgrounds.starColor', type: 'color', default: '#9E00FF' },
|
||||
{
|
||||
key: 'trailColor',
|
||||
label: 'admin.backgrounds.trailColor',
|
||||
type: 'color',
|
||||
default: '#2EB9DF',
|
||||
},
|
||||
{
|
||||
key: 'starDensity',
|
||||
label: 'admin.backgrounds.density',
|
||||
type: 'number',
|
||||
min: 0.00005,
|
||||
max: 0.0005,
|
||||
step: 0.00005,
|
||||
default: 0.00015,
|
||||
},
|
||||
{
|
||||
key: 'minSpeed',
|
||||
label: 'admin.backgrounds.minSpeed',
|
||||
type: 'number',
|
||||
min: 5,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 10,
|
||||
},
|
||||
{
|
||||
key: 'maxSpeed',
|
||||
label: 'admin.backgrounds.maxSpeed',
|
||||
type: 'number',
|
||||
min: 15,
|
||||
max: 60,
|
||||
step: 1,
|
||||
default: 30,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'background-beams',
|
||||
labelKey: 'admin.backgrounds.beams',
|
||||
descriptionKey: 'admin.backgrounds.beamsDesc',
|
||||
category: 'svg',
|
||||
settings: [],
|
||||
},
|
||||
{
|
||||
type: 'background-beams-collision',
|
||||
labelKey: 'admin.backgrounds.beamsCollision',
|
||||
descriptionKey: 'admin.backgrounds.beamsCollisionDesc',
|
||||
category: 'svg',
|
||||
settings: [],
|
||||
},
|
||||
{
|
||||
type: 'gradient-animation',
|
||||
labelKey: 'admin.backgrounds.gradientAnimation',
|
||||
descriptionKey: 'admin.backgrounds.gradientAnimationDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{ key: 'firstColor', label: 'admin.backgrounds.color1', type: 'color', default: '#1271FF' },
|
||||
{ key: 'secondColor', label: 'admin.backgrounds.color2', type: 'color', default: '#DD4AFF' },
|
||||
{ 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: 'interactive',
|
||||
label: 'admin.backgrounds.interactive',
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
key: 'size',
|
||||
label: 'admin.backgrounds.size',
|
||||
type: 'select',
|
||||
default: '80%',
|
||||
options: [
|
||||
{ label: '60%', value: '60%' },
|
||||
{ label: '80%', value: '80%' },
|
||||
{ label: '100%', value: '100%' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'wavy',
|
||||
labelKey: 'admin.backgrounds.wavy',
|
||||
descriptionKey: 'admin.backgrounds.wavyDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'speed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'select',
|
||||
default: 'fast',
|
||||
options: [
|
||||
{ label: 'admin.backgrounds.slow', value: 'slow' },
|
||||
{ label: 'admin.backgrounds.fast', value: 'fast' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'waveWidth',
|
||||
label: 'admin.backgrounds.waveWidth',
|
||||
type: 'number',
|
||||
min: 10,
|
||||
max: 100,
|
||||
step: 5,
|
||||
default: 50,
|
||||
},
|
||||
{
|
||||
key: 'blur',
|
||||
label: 'admin.backgrounds.blurAmount',
|
||||
type: 'number',
|
||||
min: 0,
|
||||
max: 30,
|
||||
step: 1,
|
||||
default: 10,
|
||||
},
|
||||
{
|
||||
key: 'waveOpacity',
|
||||
label: 'admin.backgrounds.waveOpacity',
|
||||
type: 'number',
|
||||
min: 0.1,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
default: 0.5,
|
||||
},
|
||||
{
|
||||
key: 'backgroundFill',
|
||||
label: 'admin.backgrounds.bgColor',
|
||||
type: 'color',
|
||||
default: '#000000',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'background-lines',
|
||||
labelKey: 'admin.backgrounds.lines',
|
||||
descriptionKey: 'admin.backgrounds.linesDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'lineCount',
|
||||
label: 'admin.backgrounds.count',
|
||||
type: 'number',
|
||||
min: 10,
|
||||
max: 80,
|
||||
step: 5,
|
||||
default: 40,
|
||||
},
|
||||
{
|
||||
key: 'lineColor',
|
||||
label: 'admin.backgrounds.particleColor',
|
||||
type: 'color',
|
||||
default: '#818cf8',
|
||||
},
|
||||
{
|
||||
key: 'speed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'number',
|
||||
min: 0.001,
|
||||
max: 0.01,
|
||||
step: 0.001,
|
||||
default: 0.002,
|
||||
},
|
||||
{
|
||||
key: 'strokeWidth',
|
||||
label: 'admin.backgrounds.waveWidth',
|
||||
type: 'number',
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.5,
|
||||
default: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'boxes',
|
||||
labelKey: 'admin.backgrounds.boxes',
|
||||
descriptionKey: 'admin.backgrounds.boxesDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{
|
||||
key: 'rows',
|
||||
label: 'admin.backgrounds.rows',
|
||||
type: 'number',
|
||||
min: 4,
|
||||
max: 20,
|
||||
step: 1,
|
||||
default: 12,
|
||||
},
|
||||
{
|
||||
key: 'cols',
|
||||
label: 'admin.backgrounds.cols',
|
||||
type: 'number',
|
||||
min: 4,
|
||||
max: 20,
|
||||
step: 1,
|
||||
default: 12,
|
||||
},
|
||||
{ key: 'boxColor', label: 'admin.backgrounds.fillColor', type: 'color', default: '#818cf8' },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'meteors',
|
||||
labelKey: 'admin.backgrounds.meteors',
|
||||
descriptionKey: 'admin.backgrounds.meteorsDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{
|
||||
key: 'count',
|
||||
label: 'admin.backgrounds.count',
|
||||
type: 'number',
|
||||
min: 5,
|
||||
max: 50,
|
||||
step: 5,
|
||||
default: 20,
|
||||
},
|
||||
{
|
||||
key: 'meteorColor',
|
||||
label: 'admin.backgrounds.particleColor',
|
||||
type: 'color',
|
||||
default: '#ffffff',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'grid',
|
||||
labelKey: 'admin.backgrounds.grid',
|
||||
descriptionKey: 'admin.backgrounds.gridDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{
|
||||
key: 'gridColor',
|
||||
label: 'admin.backgrounds.fillColor',
|
||||
type: 'color',
|
||||
default: 'rgba(255,255,255,0.05)',
|
||||
},
|
||||
{
|
||||
key: 'gridSize',
|
||||
label: 'admin.backgrounds.gridSize',
|
||||
type: 'number',
|
||||
min: 10,
|
||||
max: 80,
|
||||
step: 5,
|
||||
default: 40,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'dots',
|
||||
labelKey: 'admin.backgrounds.dots',
|
||||
descriptionKey: 'admin.backgrounds.dotsDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{
|
||||
key: 'variant',
|
||||
label: 'admin.backgrounds.size',
|
||||
type: 'select',
|
||||
default: 'dots',
|
||||
options: [{ label: 'admin.backgrounds.dots', value: 'dots' }],
|
||||
},
|
||||
{
|
||||
key: 'gridColor',
|
||||
label: 'admin.backgrounds.fillColor',
|
||||
type: 'color',
|
||||
default: 'rgba(255,255,255,0.1)',
|
||||
},
|
||||
{
|
||||
key: 'gridSize',
|
||||
label: 'admin.backgrounds.gridSize',
|
||||
type: 'number',
|
||||
min: 10,
|
||||
max: 60,
|
||||
step: 5,
|
||||
default: 20,
|
||||
},
|
||||
{
|
||||
key: 'dotSize',
|
||||
label: 'admin.backgrounds.size',
|
||||
type: 'number',
|
||||
min: 0.5,
|
||||
max: 4,
|
||||
step: 0.5,
|
||||
default: 1.5,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'spotlight',
|
||||
labelKey: 'admin.backgrounds.spotlight',
|
||||
descriptionKey: 'admin.backgrounds.spotlightDesc',
|
||||
category: 'css',
|
||||
settings: [
|
||||
{
|
||||
key: 'spotlightColor',
|
||||
label: 'admin.backgrounds.particleColor',
|
||||
type: 'color',
|
||||
default: '#818cf8',
|
||||
},
|
||||
{
|
||||
key: 'spotlightSize',
|
||||
label: 'admin.backgrounds.size',
|
||||
type: 'number',
|
||||
min: 200,
|
||||
max: 800,
|
||||
step: 50,
|
||||
default: 400,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'noise',
|
||||
labelKey: 'admin.backgrounds.noise',
|
||||
descriptionKey: 'admin.backgrounds.noiseDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'noiseOpacity',
|
||||
label: 'admin.backgrounds.intensity',
|
||||
type: 'number',
|
||||
min: 0.05,
|
||||
max: 0.5,
|
||||
step: 0.05,
|
||||
default: 0.15,
|
||||
},
|
||||
{ key: 'baseColor', label: 'admin.backgrounds.bgColor', type: 'color', default: '#0a0a1a' },
|
||||
{ key: 'animated', label: 'admin.backgrounds.interactive', type: 'boolean', default: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'ripple',
|
||||
labelKey: 'admin.backgrounds.ripple',
|
||||
descriptionKey: 'admin.backgrounds.rippleDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'rippleColor',
|
||||
label: 'admin.backgrounds.particleColor',
|
||||
type: 'color',
|
||||
default: '#818cf8',
|
||||
},
|
||||
{
|
||||
key: 'rippleCount',
|
||||
label: 'admin.backgrounds.count',
|
||||
type: 'number',
|
||||
min: 3,
|
||||
max: 10,
|
||||
step: 1,
|
||||
default: 5,
|
||||
},
|
||||
{
|
||||
key: 'speed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'number',
|
||||
min: 0.1,
|
||||
max: 2,
|
||||
step: 0.1,
|
||||
default: 0.5,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'gemini-effect',
|
||||
labelKey: 'admin.backgrounds.geminiEffect',
|
||||
descriptionKey: 'admin.backgrounds.geminiEffectDesc',
|
||||
category: 'canvas',
|
||||
settings: [
|
||||
{
|
||||
key: 'speed',
|
||||
label: 'admin.backgrounds.speed',
|
||||
type: 'number',
|
||||
min: 0.001,
|
||||
max: 0.01,
|
||||
step: 0.001,
|
||||
default: 0.003,
|
||||
},
|
||||
{
|
||||
key: 'lineWidth',
|
||||
label: 'admin.backgrounds.waveWidth',
|
||||
type: 'number',
|
||||
min: 1,
|
||||
max: 5,
|
||||
step: 0.5,
|
||||
default: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user