CORE.LOGIC.MATH

Procedural Intelligence

The invisible math that makes every wallpaper unique.

The Algorithmic Heart

Instead of storing static images, AuraWall stores 'recipes'. Every wallpaper is recalculated in real-time using deterministic pseudo-random functions.

Perlin Noise & Turbulence

We utilize SVG <feTurbulence> filters to generate organic textures that break digital perfection, creating surfaces that feel natural and tactile.

Dynamic Color Theory

Algorithms ensure harmony and contrast. If the background is dark, shapes glow. If in 'Difference Mode', colors mathematically invert.

The Liquid Glass Aesthetic

Layers of blur, noise, and exclusion blend-modes simulate the refraction and density of materials like glass, ice, and liquid metal.

Controlled Chaos

True randomness is noise. Procedural beauty comes from controlled stochasticity. We define boundaries (hue ranges, size variance, flow vectors) and let the algorithms improvise within those safety rails.

DeterministicSeed-basedVector-firstResolution Independent

generateShape.ts

const generateShape = (seed) => {
  // Deterministic 'Random'
  const rng = createRNG(seed);
  
  return {
    x: rng.next(0, 100),
    y: rng.next(0, 100),
    size: rng.next(20, 150),
    // Harmonic Color Selection
    color: pickHarmonicColor(
      baseHue, 
      ['analogous', 'triadic'][rng.int(0,1)]
    ),
    // Physics Simulation
    velocity: {
      x: rng.next(-1, 1),
      y: rng.next(-1, 1)
    }
  };
}

DEEP DIVE

The Seed Architecture

Unlike pixel-based image editors (raster), AuraWall defines the image through a lightweight, serializable state called WallpaperConfig. This JSON object is the 'seed' that contains all instructions needed to reconstruct the image at any resolution.

WallpaperConfig Structure

The main object that stores all visual state. Contains dimensions, base color (solid or gradient), noise intensity, shape array, and animation/vignette settings.

width/heightCanvas dimensions (aspect ratio and resolution)
baseColorBackground color (Hex) or gradient configuration
shapes[]Array of shapes with position, color, blur and blendMode
animation?Real-time animation settings (optional)

WallpaperConfig.ts

interface WallpaperConfig {
  // Canvas Dimensions
  width: number;      
  height: number;     

  // Global Appearance
  baseColor: string | BackgroundConfig;
  noise: number;      // 0-100
  noiseScale: number; // 1-20

  // Composition Layers
  shapes: Shape[];    

  // Post-processing
  animation?: AnimationSettings;
  vignette?: VignetteSettings;
}

Shape.ts

interface Shape {
  id: string;           // React keys & filtros
  type: 'circle' | 'blob';
  
  // Relative Positioning (%)
  x: number;            // 0-100
  y: number;            // 0-100
  size: number;         // % da largura
  
  // Style
  color: string;        // Hex
  opacity: number;      // 0.0 - 1.0
  blur: number;         // stdDeviation
  
  // Color Mathematics
  blendMode: BlendMode;
  complexity?: number;  // blob edges
}

Shape Structure

Each visual element is a 'Shape' with specific blending and relative position properties. Using percentages for coordinates ensures responsive layout at any resolution.

Blend Modes

multiplyscreenoverlaydifferenceexclusionhard-light

The 'Contrast Safeguard'

The ensureVisibility function acts as a visual 'linter', mathematically correcting colors and modes that would result in invisibility. It converts Hex colors to HSL, analyzes the background, and applies automatic rules.

Background Scenario	Problem Detected	Corrective Action
`Pitch Black (L<10%)`	multiply, overlay	Forces screen/normal
`Dark (L<40%)`	multiply	Switches to overlay/screen
`Light (L>60%)`	screen, color-dodge	Switches to multiply/normal

Creation Modes