Under the Hood

The Stack

Why This Stack?

SSG & Performance Optimization

The promotional site uses Static Site Generation (SSG) for maximum performance: pre-rendered pages at build time, zero JavaScript for first paint, TTI under 1s, and centralized scripts for continuous monitoring.

Reactive Architecture

Unidirectional state: all changes flow from global state to visual components.

The Seed Structure

This lightweight JSON object is all that's needed to reconstruct the image deterministically on any device.

interface WallpaperConfig {
  // Dimensões do Canvas
  width: number;      // Largura em pixels
  height: number;     // Altura em pixels

  // Aparência Global
  baseColor: string | BackgroundConfig;
  noise: number;      // Intensidade do grão (0-100)
  noiseScale: number; // Escala do ruído (1-20)

  // Camadas de Composição
  shapes: Shape[];    // Array de formas vetoriais

  // Sistemas Opcionais
  animation?: AnimationSettings;
  vignette?: VignetteSettings;
}

interface Shape {
  id: string;
  type: 'circle' | 'blob';
  
  // Posição Relativa (0-100%)
  x: number;
  y: number;
  size: number;       // % da largura do canvas
  
  // Estilo
  color: string;      // Hex color
  opacity: number;    // 0.0 - 1.0
  blur: number;       // Gaussian blur (px)
  blendMode: BlendMode;
  complexity?: number; // Para blobs
}

Rendering Pipeline

The image is composed in layers: Background → Shapes → Vignette → Noise overlay.

SVG Filters

The visual effects are achieved by combining native SVG filter primitives.

<filter id="noiseFilter">
  <!-- Gera ruído fractal -->
  <feTurbulence 
    type="fractalNoise" 
    baseFrequency={noiseScale / 1000}
    numOctaves="3" 
    stitchTiles="stitch" 
  />
  
  <!-- Remove saturação -->
  <feColorMatrix 
    type="saturate" 
    values="0" 
  />
  
  <!-- Ajusta transparência -->
  <feComponentTransfer>
    <feFuncA 
      type="linear" 
      slope={noise / 100} 
    />
  </feComponentTransfer>
</filter>

<!-- Filtro por forma -->
<filter id="blur-{shape.id}">
  <feGaussianBlur 
    stdDeviation={shape.blur}
    result="coloredBlur" 
  />
</filter>

<!-- Aplicação na forma -->
<circle
  cx={shape.x + '%'}
  cy={shape.y + '%'}
  r={shape.size + '%'}
  fill={shape.color}
  filter="url(#blur-{shape.id})"
  style={{ 
    mixBlendMode: shape.blendMode 
  }}
/>

Contrast Safeguard

An automatic validation system that ensures all shapes are visible, regardless of the color and blend mode combination chosen.

Export Process

SVG is serialized, loaded into an Image, drawn to Canvas, then exported as DataURL.

// Fluxo de exportação simplificado
const svgString = new XMLSerializer().serializeToString(svgElement);
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);

const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = config.width;
  canvas.height = config.height;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  
  const dataUrl = canvas.toDataURL('image/jpeg', quality);
  // Trigger download...
};
img.src = url;