Módulo 2.5 · Fundos / Background

🗺️ Visão geral — backgrounds como contexto emocional

Um background animado não compete com o conteúdo — ele define o clima. Starfield diz "tecnologia e escala". Bokeh diz "elegância e profundidade". Noise-grain diz "cinema e textura". A escolha certa invisível amplia a mensagem; a errada distrai.

🎯 Critérios de escolha

•Tom do vídeo: institucional → geometric-patterns ou grid-pulse; emocional → bokeh-circles ou gradient-shift.
•Complexidade visual do conteúdo: muito texto → use fundos sutis (noise-grain, gradient-shift); pouco texto → pode usar matrix-rain ou starfield.
•Custo de render: starfield (80 elementos) e matrix-rain pesam mais que gradient-shift (puro CSS). Considere em render de longa duração.

💡 Dica de composição

Reduza a opacidade do background para 0.3–0.6 quando houver conteúdo por cima. Use position: absolute; inset: 0; opacity: 0.4 no container do background e o conteúdo principal em z-index superior. Isso mantém o clima sem abafar a leitura.

9 templates

Nesta categoria

0 assets

Tudo em código

sin/cos

Padrão recorrente

random()

Seed determinístico

🫧 bokeh-circles — círculos suaves em deriva

O bokeh-circles gera círculos semi-transparentes de tamanhos variados que flutuam lentamente pela tela. Cada círculo tem posição, velocidade e tamanho determinísticos — baseados no índice como semente — criando movimento orgânico sem Math.random().

Deriva determinística por índice bokeh-circles.tsx

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;

💡 Por que 137.508?

Esse é o ângulo áureo em graus (φ ≈ 137,5°). Multiplicar o índice por ele distribui os pontos de forma quase uniforme sem clustering, gerando a aparência natural de "dispersão equilibrada" característica do template.

✓ O que FAZER

✓Ajustar opacidade dos círculos entre 0.05 e 0.2 para fundo sutil.
✓Usar blur via CSS filter: blur() para o efeito bokeh real.
✓Variar o raio entre 20px e 120px para profundidade visual.

✗ O que NÃO fazer

✗Usar Math.random() sem seed — os círculos "piscam" a cada render.
✗Colocar mais de 30 círculos sem reduzir o blur — render fica pesado.
✗Alta opacidade com textos — os círculos competem com a leitura.

Arquivo

bokeh-circles.tsx

Técnica

sin/cos deriva

Seed

137.508 áureo

Uso

Elegância · calma

🌈 gradient-shift — gradiente ambiente rotativo

O gradient-shift é o template de background mais leve da biblioteca. Usa apenas um linear-gradient com ângulo e cores que evoluem via ondas senoidais baseadas em frame / fps. Zero elementos na DOM além de um único <div>.

Ângulo e cores via sin waves gradient-shift.tsx

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})

Velocidade do ciclo de cores

O multiplicador 0.3 em sin(t * 0.3) controla a frequência de mudança de cor. Valores menores = ciclo mais lento; maiores = pulsação rápida. Para a maioria dos fundos, 0.15–0.4 é o ideal.

Paleta de cores

O template usa uma paleta de 4 cores baseadas em azuis profundos. Troque o array colors para adaptar ao seu tom. Mantenha cores próximas em matiz para evitar transições bruscas.

Velocidade de rotação do ângulo

frame * 0.5 faz o gradiente girar 180° em 360 frames (12s a 30fps). Reduza para frame * 0.2 para rotação quase imperceptível — ideal para apresentações longas.

Arquivo

gradient-shift.tsx

Hook

useCurrentFrame

Custo

Levíssimo

Uso

Fundo universal

💻 matrix-rain — colunas de código caindo

O matrix-rain é o background mais temático da biblioteca: caracteres verdes caindo em colunas, evocando o visual icônico do filme Matrix. Cada coluna tem velocidade e posição determinísticas, e a cor pode ser adaptada para qualquer paleta.

🖥️ Mecânica das colunas

Cada coluna é um array de caracteres. A posição Y de cada char é calculada pelo frame para criar o efeito de "trilha que cai". O char mais recente fica mais brilhante; os mais antigos vão esmaecendo.

// 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 que FAZER

✓Trocar a cor das colunas para azul ou ciano para branding diferente.
✓Reduzir a opacidade geral para usar como fundo de overlays.
✓Variar os caracteres — use algarismos hexadecimais para tema "hack".

✗ O que NÃO fazer

✗Usar como fundo de apresentações sérias/corporativas — contexto errado.
✗Aumentar o número de colunas além de 40 sem medir o FPS do render.
✗Misturar com texto verde — mesmo matiz, não destaca.

Arquivo

matrix-rain.tsx

Técnica

frame % altura

Custo

Moderado

Uso

Tech · cyberpunk

🌠 starfield — voo no espaço

O starfield simula o efeito de viagem no hiperespaço: estrelas brotam no centro e se expandem para as bordas à medida que o frame avança. O tamanho e a opacidade de cada estrela aumentam com o progresso radial, criando a sensação de velocidade e perspectiva.

💡 A ilusão de perspectiva

Cada estrela começa minúscula no centro e cresce enquanto se afasta. size = baseSize * (1 + progress * 2) garante que quanto mais longe, maior. Isso simula o efeito de "ponto de fuga" da perspectiva em 3D usando apenas matemática 2D.

Trajetória radial determinística starfield.tsx

// â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;

Arquivo

starfield.tsx

Padrão

80 estrelas · loop

Técnica

frame % ciclo

Uso

Tech · espacial

🎨 geometric-patterns vs. grid-pulse — quando usar cada um

Ambos os templates usam formas geométricas repetitivas, mas com intenções diferentes. O geometric-patterns apresenta formas grandes em rotação — visuais sofisticados para intros. O grid-pulse usa uma grade de pontos com ondas de ripple — atmosfera de "sistema ativo" ou "mapa de calor".

geometric-patterns

✓Formas girando e escalando — polígonos, hexágonos, losangos.
✓Ideal para intros de marca e identidade visual forte.
✓Hook: interpolate(frame, [0,dur], [0, 360]) para rotação contínua.

grid-pulse

✓Grade de pontos onde uma onda ripple se expande do centro.
✓Ideal para dashboards, dados em tempo real, contextos técnicos.
✓Hook: distância_do_ponto_ao_centro - frame * velocidade para a onda.

💡 Regra de ouro

Se o conteúdo principal tem ângulos retos e texto alinhado → use grid-pulse (forças paralelas, reforça a estrutura). Se o conteúdo é fluido e orgânico → use geometric-patterns (contraste complementar).

geometric

Rotação + escala

grid-pulse

Onda ripple

Contexto

Marca vs. dados

Hook

interpolate

📚 Biblioteca completa — todos os 9 templates

Referência rápida para todos os templates de background. Use como lookup quando precisar escolher rapidamente.

TemplateArquivoTécnica / hook

bokeh-circles bokeh-circles.tsx sin/cos deriva · ângulo áureo

geometric-patterns geometric-patterns.tsx interpolate · rotação contínua

gradient-shift gradient-shift.tsx sin waves · ângulo giratório

grid-pulse grid-pulse.tsx distância radial · ripple

liquid-wave liquid-wave.tsx SVG path · sin point-by-point

matrix-rain matrix-rain.tsx frame % altura · trail opacity

noise-grain noise-grain.tsx SVG feTurbulence · foco sutil

pixel-transition pixel-transition.tsx interpolate · grade pixelada reveal

starfield starfield.tsx radial loop · perspectiva 2D

Total

9 templates

Mais leve

gradient-shift

Mais pesado

matrix-rain

Padrão

sin/cos waves

📌 Resumo do módulo

✓

Contexto emocional — escolha o background pelo tom: orgânico, fluido, geométrico, digital ou espacial.

✓

bokeh-circles — ângulo áureo (137.508°) distribui pontos uniformemente sem aleatoriedade real.

✓

gradient-shift — o template mais leve: um div, sin waves, zero elementos na DOM.

✓

starfield — perspectiva 2D com frame % ciclo para loop infinito de estrelas.

✓

Composição — reduza opacidade do background para 0.3–0.6 quando houver conteúdo por cima.

Próximo módulo:

2.6 — Cinemático: nine templates que imitam técnicas de câmera e pós-produção cinematográfica.

← Módulo 2.4 Próximo Módulo →