@djangocfg/ui-nextjs 2.1.319 → 2.1.321

package/src/animations/AnimatedBackground.tsx

@@ -1,646 +0,0 @@
-'use client';
-
-import React, { useMemo } from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-export type BackgroundVariant =
-  | 'aurora-borealis'
-  | 'mesh-gradient'
-  | 'floating-orbs'
-  | 'geometric-flow'
-  | 'liquid-gradient'
-  | 'spotlight'
-  | 'none'
-  // Legacy aliases
-  | 'gradient-mesh'
-  | 'dot-matrix'
-  | 'grid-lines'
-  | 'aurora'
-  | 'particles'
-  | 'waves';
-
-interface AnimatedBackgroundProps {
-  variant?: BackgroundVariant;
-  className?: string;
-  intensity?: 'subtle' | 'medium' | 'strong';
-  /** Color scheme - 'vibrant' uses multiple colors, 'monochrome' uses primary only */
-  colorScheme?: 'vibrant' | 'monochrome' | 'cool' | 'warm';
-}
-
-// Map legacy variants to new ones
-const variantMap: Record<string, BackgroundVariant> = {
-  'gradient-mesh': 'mesh-gradient',
-  'dot-matrix': 'geometric-flow',
-  'grid-lines': 'geometric-flow',
-  'aurora': 'aurora-borealis',
-  'particles': 'floating-orbs',
-  'waves': 'liquid-gradient',
-};
-
-export const AnimatedBackground: React.FC<AnimatedBackgroundProps> = ({
-  variant = 'mesh-gradient',
-  className,
-  intensity = 'medium',
-  colorScheme = 'vibrant',
-}) => {
-  // Map legacy variants
-  const resolvedVariant = variantMap[variant] || variant;
-
-  const intensityConfig = useMemo(() => ({
-    subtle: { opacity: 0.15, blur: 'blur-3xl', scale: 0.8 },
-    medium: { opacity: 0.25, blur: 'blur-2xl', scale: 1 },
-    strong: { opacity: 0.4, blur: 'blur-xl', scale: 1.2 },
-  }[intensity]), [intensity]);
-
-  // Color palettes using CSS variables
-  const colors = useMemo(() => {
-    const palettes = {
-      vibrant: [
-        'hsl(var(--chart-1))', // Blue
-        'hsl(var(--chart-2))', // Green
-        'hsl(var(--chart-3))', // Purple
-        'hsl(var(--chart-4))', // Orange
-        'hsl(var(--chart-5))', // Red
-      ],
-      monochrome: [
-        'hsl(var(--primary))',
-        'hsl(var(--primary) / 0.8)',
-        'hsl(var(--primary) / 0.6)',
-      ],
-      cool: [
-        'hsl(var(--chart-1))', // Blue
-        'hsl(var(--chart-3))', // Purple
-        'hsl(210 100% 50%)',   // Bright blue
-        'hsl(260 100% 60%)',   // Violet
-      ],
-      warm: [
-        'hsl(var(--chart-4))', // Orange
-        'hsl(var(--chart-5))', // Red
-        'hsl(35 100% 55%)',    // Gold
-        'hsl(350 100% 60%)',   // Rose
-      ],
-    };
-    return palettes[colorScheme];
-  }, [colorScheme]);
-
-  if (resolvedVariant === 'none') {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn("absolute overflow-hidden pointer-events-none", className)}
-      style={{ inset: 0, width: '100%', height: '100%' }}
-    >
-      {resolvedVariant === 'aurora-borealis' && (
-        <AuroraBorealis colors={colors} intensity={intensityConfig} />
-      )}
-
-      {resolvedVariant === 'mesh-gradient' && (
-        <MeshGradient colors={colors} intensity={intensityConfig} />
-      )}
-
-      {resolvedVariant === 'floating-orbs' && (
-        <FloatingOrbs colors={colors} intensity={intensityConfig} />
-      )}
-
-      {resolvedVariant === 'geometric-flow' && (
-        <GeometricFlow colors={colors} intensity={intensityConfig} />
-      )}
-
-      {resolvedVariant === 'liquid-gradient' && (
-        <LiquidGradient colors={colors} intensity={intensityConfig} />
-      )}
-
-      {resolvedVariant === 'spotlight' && (
-        <Spotlight colors={colors} intensity={intensityConfig} />
-      )}
-
-      <AnimationStyles />
-    </div>
-  );
-};
-
-// =============================================================================
-// Aurora Borealis - Flowing northern lights effect
-// =============================================================================
-
-interface VariantProps {
-  colors: string[];
-  intensity: { opacity: number; blur: string; scale: number };
-}
-
-const AuroraBorealis: React.FC<VariantProps> = ({ colors, intensity }) => (
-  <>
-    {/* Base layer - subtle gradient */}
-    <div
-      className="absolute inset-0"
-      style={{
-        background: `linear-gradient(135deg, ${colors[0]} 0%, transparent 50%, ${colors[1]} 100%)`,
-        opacity: intensity.opacity * 0.3,
-      }}
-    />
-
-    {/* Aurora bands */}
-    <div
-      className={cn("absolute inset-0", intensity.blur)}
-      style={{
-        background: `linear-gradient(110deg,
-          transparent 0%,
-          ${colors[0]} 20%,
-          ${colors[2] || colors[0]} 35%,
-          ${colors[1]} 50%,
-          ${colors[3] || colors[1]} 65%,
-          ${colors[0]} 80%,
-          transparent 100%
-        )`,
-        opacity: intensity.opacity,
-        animation: 'aurora-shift 15s ease-in-out infinite',
-        transform: `translateY(-30%) scaleY(${intensity.scale})`,
-      }}
-    />
-
-    {/* Secondary aurora layer */}
-    <div
-      className={cn("absolute inset-0", intensity.blur)}
-      style={{
-        background: `linear-gradient(70deg,
-          transparent 0%,
-          ${colors[1]} 25%,
-          ${colors[2] || colors[0]} 50%,
-          ${colors[0]} 75%,
-          transparent 100%
-        )`,
-        opacity: intensity.opacity * 0.7,
-        animation: 'aurora-shift 20s ease-in-out infinite reverse',
-        animationDelay: '-5s',
-        transform: `translateY(-20%) scaleY(${intensity.scale * 0.8})`,
-      }}
-    />
-
-    {/* Shimmer overlay */}
-    <div
-      className="absolute inset-0"
-      style={{
-        background: `radial-gradient(ellipse 100% 50% at 50% 0%,
-          ${colors[2] || colors[0]} 0%,
-          transparent 70%
-        )`,
-        opacity: intensity.opacity * 0.4,
-        animation: 'aurora-shimmer 8s ease-in-out infinite',
-      }}
-    />
-  </>
-);
-
-// =============================================================================
-// Mesh Gradient - Modern Apple-style gradient mesh
-// =============================================================================
-
-const MeshGradient: React.FC<VariantProps> = ({ colors, intensity }) => (
-  <>
-    {/* Large gradient orbs with different colors */}
-    <div
-      className={cn("absolute rounded-full", intensity.blur)}
-      style={{
-        width: '60%',
-        height: '60%',
-        top: '-10%',
-        right: '-10%',
-        background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,
-        opacity: intensity.opacity,
-        animation: 'mesh-float-1 25s ease-in-out infinite',
-        transform: `scale(${intensity.scale})`,
-      }}
-    />
-    <div
-      className={cn("absolute rounded-full", intensity.blur)}
-      style={{
-        width: '50%',
-        height: '50%',
-        bottom: '-5%',
-        left: '-5%',
-        background: `radial-gradient(circle, ${colors[1]} 0%, transparent 70%)`,
-        opacity: intensity.opacity,
-        animation: 'mesh-float-2 30s ease-in-out infinite',
-        transform: `scale(${intensity.scale})`,
-      }}
-    />
-    <div
-      className={cn("absolute rounded-full", intensity.blur)}
-      style={{
-        width: '40%',
-        height: '40%',
-        top: '30%',
-        left: '25%',
-        background: `radial-gradient(circle, ${colors[2] || colors[0]} 0%, transparent 70%)`,
-        opacity: intensity.opacity * 0.8,
-        animation: 'mesh-float-3 20s ease-in-out infinite',
-        transform: `scale(${intensity.scale})`,
-      }}
-    />
-    {colors[3] && (
-      <div
-        className={cn("absolute rounded-full", intensity.blur)}
-        style={{
-          width: '35%',
-          height: '35%',
-          bottom: '20%',
-          right: '15%',
-          background: `radial-gradient(circle, ${colors[3]} 0%, transparent 70%)`,
-          opacity: intensity.opacity * 0.6,
-          animation: 'mesh-float-4 22s ease-in-out infinite',
-          transform: `scale(${intensity.scale})`,
-        }}
-      />
-    )}
-  </>
-);
-
-// =============================================================================
-// Floating Orbs - Animated glowing spheres
-// =============================================================================
-
-const FloatingOrbs: React.FC<VariantProps> = ({ colors, intensity }) => {
-  const orbs = useMemo(() => {
-    return Array.from({ length: 12 }).map((_, i) => ({
-      id: i,
-      size: 60 + (i % 4) * 40,
-      x: (i * 23) % 100,
-      y: (i * 31) % 100,
-      color: colors[i % colors.length],
-      duration: 15 + (i % 5) * 5,
-      delay: i * 1.5,
-    }));
-  }, [colors]);
-
-  return (
-    <>
-      {orbs.map((orb) => (
-        <div
-          key={orb.id}
-          className={cn("absolute rounded-full", intensity.blur)}
-          style={{
-            width: `${orb.size * intensity.scale}px`,
-            height: `${orb.size * intensity.scale}px`,
-            left: `${orb.x}%`,
-            top: `${orb.y}%`,
-            background: `radial-gradient(circle at 30% 30%, ${orb.color}, transparent 70%)`,
-            opacity: intensity.opacity * (0.5 + (orb.id % 3) * 0.2),
-            animation: `orb-float-${(orb.id % 4) + 1} ${orb.duration}s ease-in-out infinite`,
-            animationDelay: `${orb.delay}s`,
-          }}
-        />
-      ))}
-    </>
-  );
-};
-
-// =============================================================================
-// Geometric Flow - Clean geometric patterns
-// =============================================================================
-
-const GeometricFlow: React.FC<VariantProps> = ({ colors, intensity }) => (
-  <>
-    {/* Gradient base */}
-    <div
-      className="absolute inset-0"
-      style={{
-        background: `linear-gradient(135deg,
-          ${colors[0]} 0%,
-          transparent 30%,
-          transparent 70%,
-          ${colors[1]} 100%
-        )`,
-        opacity: intensity.opacity * 0.3,
-      }}
-    />
-
-    {/* Animated grid */}
-    <div
-      className="absolute inset-0"
-      style={{
-        backgroundImage: `
-          linear-gradient(${colors[0]}20 1px, transparent 1px),
-          linear-gradient(90deg, ${colors[0]}20 1px, transparent 1px)
-        `,
-        backgroundSize: '60px 60px',
-        animation: 'grid-drift 30s linear infinite',
-        opacity: intensity.opacity,
-      }}
-    />
-
-    {/* Diagonal lines */}
-    <div
-      className="absolute inset-0"
-      style={{
-        backgroundImage: `repeating-linear-gradient(
-          45deg,
-          transparent,
-          transparent 80px,
-          ${colors[2] || colors[0]}10 80px,
-          ${colors[2] || colors[0]}10 82px
-        )`,
-        animation: 'diagonal-shift 20s linear infinite',
-        opacity: intensity.opacity,
-      }}
-    />
-
-    {/* Glowing intersection points */}
-    <div
-      className={cn("absolute rounded-full", intensity.blur)}
-      style={{
-        width: '40%',
-        height: '40%',
-        top: '20%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,
-        opacity: intensity.opacity * 0.5,
-        animation: 'pulse-glow 8s ease-in-out infinite',
-      }}
-    />
-  </>
-);
-
-// =============================================================================
-// Liquid Gradient - Smooth flowing liquid effect
-// =============================================================================
-
-const LiquidGradient: React.FC<VariantProps> = ({ colors, intensity }) => (
-  <>
-    {/* Base gradient */}
-    <div
-      className="absolute inset-0"
-      style={{
-        background: `linear-gradient(180deg,
-          transparent 0%,
-          ${colors[0]}15 30%,
-          ${colors[1]}20 50%,
-          ${colors[2] || colors[0]}15 70%,
-          transparent 100%
-        )`,
-        opacity: intensity.opacity,
-      }}
-    />
-
-    {/* Liquid blob 1 */}
-    <div
-      className={cn("absolute", intensity.blur)}
-      style={{
-        width: '120%',
-        height: '50%',
-        bottom: '-10%',
-        left: '-10%',
-        background: `linear-gradient(90deg,
-          ${colors[0]} 0%,
-          ${colors[1]} 33%,
-          ${colors[2] || colors[0]} 66%,
-          ${colors[0]} 100%
-        )`,
-        opacity: intensity.opacity,
-        borderRadius: '50% 50% 0 0',
-        animation: 'liquid-flow-1 12s ease-in-out infinite',
-        transform: `scaleY(${intensity.scale})`,
-      }}
-    />
-
-    {/* Liquid blob 2 */}
-    <div
-      className={cn("absolute", intensity.blur)}
-      style={{
-        width: '100%',
-        height: '40%',
-        bottom: '-5%',
-        left: '0',
-        background: `linear-gradient(90deg,
-          ${colors[1]} 0%,
-          ${colors[2] || colors[0]} 50%,
-          ${colors[3] || colors[1]} 100%
-        )`,
-        opacity: intensity.opacity * 0.8,
-        borderRadius: '60% 40% 0 0',
-        animation: 'liquid-flow-2 15s ease-in-out infinite',
-        transform: `scaleY(${intensity.scale * 0.9})`,
-      }}
-    />
-
-    {/* Floating bubbles */}
-    {Array.from({ length: 6 }).map((_, i) => (
-      <div
-        key={i}
-        className="absolute rounded-full"
-        style={{
-          width: `${12 + i * 4}px`,
-          height: `${12 + i * 4}px`,
-          left: `${15 + i * 15}%`,
-          bottom: '10%',
-          background: `radial-gradient(circle at 30% 30%,
-            ${colors[i % colors.length]}80,
-            ${colors[i % colors.length]}20
-          )`,
-          border: `1px solid ${colors[i % colors.length]}40`,
-          opacity: intensity.opacity,
-          animation: `bubble-float ${8 + i * 2}s ease-in-out infinite`,
-          animationDelay: `${i * 2}s`,
-        }}
-      />
-    ))}
-  </>
-);
-
-// =============================================================================
-// Spotlight - Dramatic spotlight effect
-// =============================================================================
-
-const Spotlight: React.FC<VariantProps> = ({ colors, intensity }) => (
-  <>
-    {/* Main spotlight */}
-    <div
-      className={cn("absolute", intensity.blur)}
-      style={{
-        width: '80%',
-        height: '80%',
-        top: '-20%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        background: `conic-gradient(from 180deg at 50% 50%,
-          ${colors[0]} 0deg,
-          ${colors[1]} 60deg,
-          ${colors[2] || colors[0]} 120deg,
-          ${colors[3] || colors[1]} 180deg,
-          ${colors[0]} 240deg,
-          ${colors[1]} 300deg,
-          ${colors[0]} 360deg
-        )`,
-        opacity: intensity.opacity,
-        animation: 'spotlight-rotate 30s linear infinite',
-      }}
-    />
-
-    {/* Center fade */}
-    <div
-      className="absolute inset-0"
-      style={{
-        background: `radial-gradient(circle at 50% 30%,
-          transparent 0%,
-          hsl(var(--background)) 70%
-        )`,
-      }}
-    />
-
-    {/* Accent glow */}
-    <div
-      className={cn("absolute rounded-full", intensity.blur)}
-      style={{
-        width: '50%',
-        height: '50%',
-        top: '10%',
-        left: '25%',
-        background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,
-        opacity: intensity.opacity * 0.5,
-        animation: 'pulse-glow 6s ease-in-out infinite',
-      }}
-    />
-  </>
-);
-
-// =============================================================================
-// Animation Styles
-// =============================================================================
-
-const AnimationStyles: React.FC = () => (
-  <style>{`
-    @keyframes aurora-shift {
-      0%, 100% {
-        transform: translateX(-10%) translateY(-30%) scaleX(1.1);
-      }
-      50% {
-        transform: translateX(10%) translateY(-25%) scaleX(0.9);
-      }
-    }
-
-    @keyframes aurora-shimmer {
-      0%, 100% {
-        opacity: 0.2;
-        transform: scale(1);
-      }
-      50% {
-        opacity: 0.4;
-        transform: scale(1.05);
-      }
-    }
-
-    @keyframes mesh-float-1 {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      25% { transform: translate(-5%, 10%) scale(1.05); }
-      50% { transform: translate(5%, 5%) scale(0.95); }
-      75% { transform: translate(-3%, -5%) scale(1.02); }
-    }
-
-    @keyframes mesh-float-2 {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      33% { transform: translate(8%, -8%) scale(1.08); }
-      66% { transform: translate(-6%, 6%) scale(0.92); }
-    }
-
-    @keyframes mesh-float-3 {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      50% { transform: translate(10%, 10%) scale(1.1); }
-    }
-
-    @keyframes mesh-float-4 {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      25% { transform: translate(5%, -10%) scale(0.95); }
-      75% { transform: translate(-8%, 5%) scale(1.05); }
-    }
-
-    @keyframes orb-float-1 {
-      0%, 100% { transform: translate(0, 0); }
-      50% { transform: translate(30px, -40px); }
-    }
-
-    @keyframes orb-float-2 {
-      0%, 100% { transform: translate(0, 0); }
-      50% { transform: translate(-25px, 35px); }
-    }
-
-    @keyframes orb-float-3 {
-      0%, 100% { transform: translate(0, 0); }
-      33% { transform: translate(40px, 20px); }
-      66% { transform: translate(-20px, -30px); }
-    }
-
-    @keyframes orb-float-4 {
-      0%, 100% { transform: translate(0, 0); }
-      25% { transform: translate(-35px, -25px); }
-      75% { transform: translate(25px, 40px); }
-    }
-
-    @keyframes grid-drift {
-      0% { transform: translate(0, 0); }
-      100% { transform: translate(60px, 60px); }
-    }
-
-    @keyframes diagonal-shift {
-      0% { transform: translateX(0); }
-      100% { transform: translateX(160px); }
-    }
-
-    @keyframes pulse-glow {
-      0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
-      50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
-    }
-
-    @keyframes liquid-flow-1 {
-      0%, 100% {
-        transform: translateY(0) scaleX(1);
-        border-radius: 50% 50% 0 0;
-      }
-      25% {
-        transform: translateY(-30px) scaleX(1.05);
-        border-radius: 45% 55% 0 0;
-      }
-      50% {
-        transform: translateY(-50px) scaleX(0.95);
-        border-radius: 55% 45% 0 0;
-      }
-      75% {
-        transform: translateY(-25px) scaleX(1.02);
-        border-radius: 48% 52% 0 0;
-      }
-    }
-
-    @keyframes liquid-flow-2 {
-      0%, 100% {
-        transform: translateY(0) scaleX(1);
-        border-radius: 60% 40% 0 0;
-      }
-      33% {
-        transform: translateY(-40px) scaleX(1.08);
-        border-radius: 40% 60% 0 0;
-      }
-      66% {
-        transform: translateY(-60px) scaleX(0.92);
-        border-radius: 55% 45% 0 0;
-      }
-    }
-
-    @keyframes bubble-float {
-      0%, 100% {
-        transform: translateY(0) scale(1);
-        opacity: 0.6;
-      }
-      50% {
-        transform: translateY(-100px) scale(1.2);
-        opacity: 0.3;
-      }
-    }
-
-    @keyframes spotlight-rotate {
-      0% { transform: translateX(-50%) rotate(0deg); }
-      100% { transform: translateX(-50%) rotate(360deg); }
-    }
-  `}</style>
-);