Module 2.5 · Backgrounds / Background

🗺️ Overview — backgrounds as emotional context

An animated background doesn’t compete with the content — it sets the mood. Starfield says "technology and scale." Bokeh says "elegance and depth." Noise-grain says "cinema and texture." The right choice goes unnoticed and amplifies the message; the wrong one distracts.

🎯 Selection criteria

•Video tone: institutional → geometric-patterns or grid-pulse; emotional → bokeh-circles or gradient-shift.
•Visual complexity of the content: a lot of text → use subtle backgrounds (noise-grain, gradient-shift); little text → you can use matrix-rain or starfield.
•Render cost: starfield (80 elements) and matrix-rain are heavier than gradient-shift (pure CSS). Consider this for long renders.

💡 Composition tip

Reduce the background opacity to 0.3–0.6 when there is content on top. Use position: absolute; inset: 0; opacity: 0.4 in the background container and the main content at a higher z-index. This preserves the atmosphere without making the text harder to read.

9 templates

In this category

0 assets

Everything in code

sin/cos

Recurring pattern

random()

Deterministic seed

🫧 bokeh-circles — soft drifting circles

O bokeh-circles generates semi-transparent circles of varying sizes that float slowly across the screen. Each circle has a deterministic position, speed, and size — based on its index as a seed — creating organic motion without Math.random().

Deterministic variation by index 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;

💡 Why 137.508?

This is the golden angle in degrees (φ ≈ 137,5°). Multiplying the index by it distributes the points almost uniformly without clustering, creating the natural appearance of "balanced dispersion" characteristic of the template.

✓ What to DO

✓Adjust the circles’ opacity between 0.05 and 0.2 for a subtle background.
✓Use blur via CSS filter: blur() for the real bokeh effect.
✓Vary the radius between 20px and 120px for visual depth.

✗ What NOT to do

✗Use Math.random() without a seed—the circles "flicker" on every render.
✗Add more than 30 circles without reducing the blur — rendering gets heavy.
✗High opacity with text—the circles compete with readability.

File

bokeh-circles.tsx

Technique

sin/cos drift

Seed

137.508 golden ratio

Usage

Elegance · calm

🌈 gradient-shift — rotating ambient gradient

O gradient-shift is the library’s lightest background template. It uses only a linear-gradient with angle and colors that evolve via sine waves based on frame / fps. Zero DOM elements beyond a single <div>.

Angle and colors via sine 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})

Color cycle speed

The multiplier 0.3 in sin(t * 0.3) controls the color-change frequency. Lower values = slower cycle; higher values = faster pulsing. For most backgrounds, 0.15–0.4 is ideal.

Color palette

The template uses a palette of 4 colors based on deep blues. Replace the array colors to adapt it to your tone. Keep hues close to avoid abrupt transitions.

Angle rotation speed

frame * 0.5 makes the gradient rotate 180° over 360 frames (12s at 30fps). Reduce to frame * 0.2 for nearly imperceptible rotation — ideal for long presentations.

File

gradient-shift.tsx

Hook

useCurrentFrame

Cost

Very slight

Usage

Universal background

💻 matrix-rain — falling code columns

O matrix-rain is the library’s most thematic background: green characters falling in columns, evoking the iconic look of the movie Matrix. Each column has a deterministic speed and position, and the color can be adapted to any palette.

🖥️ Column mechanics

Each column is an array of characters. Each character's Y position is calculated from the frame to create the "falling trail" effect. The newest character is brightest; older ones gradually fade.

// 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]);

✓ What to DO

✓Change the column colors to blue or cyan for different branding.
✓Reduce the overall opacity to use as an overlay background.
✓Vary the characters—use hexadecimal digits for a "hack" theme.

✗ What NOT to do

✗Use as a background for serious/corporate presentations—wrong context.
✗Increase the number of columns beyond 40 without measuring the render FPS.
✗Mix with green text — same hue, no contrast.

File

matrix-rain.tsx

Technique

frame % height

Cost

Moderate

Usage

Tech · cyberpunk

🌠 starfield — flight through space

O starfield simulates the hyperspace travel effect: stars emerge from the center and expand toward the edges as the frame advances. Each star’s size and opacity increase with radial progress, creating a sense of speed and perspective.

💡 The illusion of perspective

Each star starts tiny in the center and grows as it moves away. size = baseSize * (1 + progress * 2) ensures that the farther away, the larger it is. This simulates the "vanishing point" effect of 3D perspective using only 2D math.

Deterministic radial trajectory 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;

File

starfield.tsx

Pattern

80 stars · loop

Technique

frame % cycle

Usage

Tech · space

🎨 geometric-patterns vs. grid-pulse — when to use each

Both templates use repetitive geometric shapes, but with different intentions. The geometric-patterns features large rotating shapes — sophisticated visuals for intros. The grid-pulse uses a grid of dots with ripple waves — an “active system” or “heat map” atmosphere.

geometric-patterns

✓Rotating and scaling shapes — polygons, hexagons, diamonds.
✓Ideal for brand intros and strong visual identity.
✓Hook: interpolate(frame, [0,dur], [0, 360]) for continuous rotation.

grid-pulse

✓Grid of dots where a ripple wave expands from the center.
✓Ideal for dashboards, real-time data, and technical contexts.
✓Hook: distância_do_ponto_ao_centro - frame * velocidade for the wave.

💡 Golden rule

If the main content has right angles and aligned text → use grid-pulse (parallel forces, reinforcing the structure). If the content is fluid and organic → use geometric-patterns (complementary contrast).

geometric

Rotation + scale

grid-pulse

Ripple wave

Context

Brand vs. data

Hook

interpolate

📚 Complete Library — all 9 templates

Quick reference for all background templates. Use it as a lookup when you need to choose quickly.

TemplateFileTechnique / hook

bokeh-circles bokeh-circles.tsx sin/cos drift · golden angle

geometric-patterns geometric-patterns.tsx interpolate · continuous rotation

gradient-shift gradient-shift.tsx sin waves · rotating angle

grid-pulse grid-pulse.tsx radial distance · ripple

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

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

noise-grain noise-grain.tsx SVG feTurbulence · subtle focus

pixel-transition pixel-transition.tsx interpolate · pixelated reveal grid

starfield starfield.tsx radial loop · 2D perspective

Total

9 templates

Lighter

gradient-shift

Heavier

matrix-rain

Pattern

sin/cos waves

📌 Module summary

✓

Emotional context — choose the background by tone: organic, fluid, geometric, digital, or space-themed.

✓

bokeh-circles — the golden angle (137.508°) distributes points evenly without true randomness.

✓

gradient-shift — the lightest template: one div, sin waves, zero DOM elements.

✓

starfield — 2D perspective with frame % ciclo for an infinite star loop.

✓

Composition — reduce the background opacity to 0.3–0.6 when there is content on top.

Next module:

2.6 — Cinematic: nine templates that mimic cinematic camera and post-production techniques.

← Module 2.4 Next Module →