@djangocfg/ui-nextjs 1.4.45

package/src/animations/AnimatedBackground.tsx

@@ -0,0 +1,645 @@
+'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>
+);

package/src/animations/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedBackground } from './AnimatedBackground';
+export type { BackgroundVariant } from './AnimatedBackground';