🌌 Fondos / Background

Un fondo animado no compite con el contenido — lo define el ambiente. Starfield dice "tecnología y escala". Bokeh dice "elegancia y profundidad". Noise-grain dice "cine y textura". La elección correcta, invisible, amplía el mensaje; la equivocada distrae.

O bokeh-circles genera círculos semitransparentes de varios tamaños que flotan lentamente por la pantalla. Cada círculo tiene una posición, una velocidad y un tamaño determinísticos, basados en el índice como semilla, lo que crea un movimiento orgánico sin Math.random().

const t = frame / fps;
// posição inicial baseada no índice (sem Math.random)
const baseX = ((i * 137.508) % 100);
const baseY = ((i * 97.3)  % 100);
// deriva suave com ondas periódicas
const x = baseX + Math.sin(t * speed + i) * driftAmp;
const y = baseY + Math.cos(t * speed + i) * driftAmp;

O gradient-shift es la plantilla de background más ligera de la biblioteca. Usa solo un linear-gradient con ángulo y colores que evolucionan mediante ondas sinusoidales basadas en frame / fps. Cero elementos en el DOM, aparte de un único <div>.

const t = frame / fps;
// fases defasadas para transição suave de cores
const phase1 = Math.sin(t * 0.3) * 0.5 + 0.5;
const phase2 = Math.sin(t * 0.3 + 2) * 0.5 + 0.5;
// rotação lenta do ângulo
const angle = (frame * 0.5) % 360;
// render: linear-gradient(${angle}deg, ${color1}, ${color2}, ${color3})

O matrix-rain es el background más temático de la biblioteca: caracteres verdes que caen en columnas y evocan el aspecto icónico de la película Matrix. Cada columna tiene velocidad y posición determinísticas, y el color puede adaptarse a cualquier paleta.

// posição y de cada caractere na coluna k
const speed = 1 + (k * 7 % 3);   // 1, 2 ou 3 (determinístico)
const headY = (frame * speed * charH) % (height + trailLength);
const charOpacity = interpolate(j, [0, trailLength], [0.9, 0]);

O starfield simula el efecto de viajar por el hiperespacio: las estrellas brotan en el centro y se expanden hacia los bordes a medida que avanza el frame. El tamaño y la opacidad de cada estrella aumentan con el progreso radial, creando una sensación de velocidad y perspectiva.

// ângulo determinístico por índice (ângulo áureo)
const seedAngle = ((i * 137.508) % 360) * (Math.PI / 180);
const cycleLength = fps * 5;
const progress = ((frame * speed + i * 15) % cycleLength) / cycleLength;
const radius = seedRadius * 20 + progress * maxRadius;
const x = cx + Math.cos(seedAngle) * radius;
const y = cy + Math.sin(seedAngle) * radius;

Ambas plantillas usan formas geométricas repetitivas, pero con intenciones diferentes. El geometric-patterns presenta formas grandes en rotación — recursos visuales sofisticados para intros. El grid-pulse usa una cuadrícula de puntos con ondas de ripple — atmósfera de "sistema activo" o "mapa de calor".

Referencia rápida de todas las plantillas de background. Úsala como referencia cuando necesites elegir rápidamente.