motion-background

ساخت پس‌زمینه‌های متحرک، ظریف و بهینه برای Hero، لندینگ و رابط‌های وب

این مهارت برای ساخت پس‌زمینه‌های زنده و کم‌حواس‌پرت‌کننده در صفحات وب استفاده می‌شود؛ از mesh gradient و aurora گرفته تا shaderهای GLSL و میدان‌های ذره‌ای constellation. بر اساس ظاهر موردنظر، مناسب‌ترین روش CSS، Canvas یا Three.js انتخاب می‌شود.

خروجی به‌صورت یک فایل HTML مستقل ارائه می‌شود و شامل حلقه‌ی بدون پرش، نمونه‌ی محتوای foreground، پشتیبانی از prefers-reduced-motion و توقف هنگام مخفی‌شدن صفحه یا خارج‌شدن از viewport است. فریم‌های ابتدا، میانه و انتهای انیمیشن نیز برای بررسی خوانایی و کیفیت رندر آزمایش می‌شوند.

چه چیزی می‌گیرید

• پس‌زمینه‌ی متحرک CSS با gradient و mesh بدون نیاز به JavaScript
• پس‌زمینه‌ی aurora و noise با GLSL و Three.js
• پس‌زمینه‌ی ذره‌ای و constellation با Canvas 2D
• حلقه‌ی seamless با امکان فریز دقیق فریم از طریق پارامتر `?t=N`
• بهینه‌سازی عملکرد، محدودسازی `devicePixelRatio` و پشتیبانی از reduced motion

برای چه کاری خوب است

• Hero section و landing pageهایی که به عمق و حرکت ظریف نیاز دارند
• صفحات login، splash، empty state و بخش‌های معرفی محصول
• پروژه‌هایی که خوانایی متن، مصرف باتری و عملکرد موبایل در آن‌ها مهم است

برای چه کاری نیست

• پس‌زمینه‌های پرتحرک و پرکنتراست که باید توجه اصلی کاربر را جلب کنند
• ویدئو، تدوین سینمایی یا انیمیشن‌های روایی چندلایه
• پروژه‌هایی که به مدل‌های سنگین سه‌بعدی یا تعاملات پیچیده‌ی WebGL نیاز دارند

دربارهٔ این اسکیل

Motion Background

Ambient, living backgrounds that sit behind content without stealing focus. The goal is subtle, seamlessly looping motion that stays readable and performant. This skill is self-contained: every technique below ships its own runnable code — CSS, GLSL, and canvas — with no external dependencies beyond Three.js where a shader is involved.

When to use

• Hero/landing background that subtly moves; section ambience.
• Login/splash/empty-state living backdrops.
• A gradient, mesh, aurora, shader, or particle/constellation field behind text or UI.

Pick an approach

Default to CSS if a gradient suffices — it is the cheapest and most reliable. Use a shader for organic flowing color; use canvas particles for a constellation/network look.

Design rules

• Subtle: low contrast versus content, slow motion (long periods, 8–30s loops), nothing that competes with text.
• Readable: keep contrast for foreground text; add a scrim (linear-gradient overlay or backdrop) if needed.
• Seamless loop: drive motion with periodic functions so time wraps with no visible jump (see below).
• Respect motion preferences and battery: honor prefers-reduced-motion, and pause when offscreen or the tab is hidden.

Core techniques (inlined, runnable)

1. Animated CSS mesh gradient (no JS)

Layered radial gradients whose positions drift. Animating background-position on a larger-than-viewport gradient loops seamlessly.

.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 50% at 20% 30%, #5b8cff55, transparent 60%),
    radial-gradient(45% 55% at 80% 20%, #b05bff55, transparent 60%),
    radial-gradient(50% 60% at 50% 80%, #2de1c255, transparent 60%),
    #0b0e1a;
  background-size: 200% 200%;
  animation: meshmove 24s ease-in-out infinite;
}
@keyframes meshmove {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%      { background-position: 30% 20%, 70% 30%, 60% 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
}

The 0% and 100% keyframes are identical, so the loop has no seam.

2. Full-screen GLSL gradient + noise shader (Three.js)

A flowing aurora/gradient using value noise in a fragment shader on a full-screen plane. uTime advances each frame; to loop, feed it a wrapped time (section 4).

import * as THREE from 'three';

const canvas = document.querySelector('#bg');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // cap for perf
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

const uniforms = {
  uTime: {value: 0},
  uRes: {value: new THREE.Vector2()},
  uColorA: {value: new THREE.Color('#5b8cff')},
  uColorB: {value: new THREE.Color('#b05bff')},
};

const material = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: `void main(){ gl_Position = vec4(position, 1.0); }`,
  fragmentShader: `
    precision highp float;
    uniform float uTime; uniform vec2 uRes;
    uniform vec3 uColorA, uColorB;

    // hash + value noise
    float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
    float noise(vec2 p){
      vec2 i = floor(p), f = fract(p);
      float a = hash(i), b = hash(i+vec2(1,0));
      float c = hash(i+vec2(0,1)), d = hash(i+vec2(1,1));
      vec2 u = f*f*(3.0-2.0*f);
      return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);
    }
    float fbm(vec2 p){
      float v=0.0, a=0.5;
      for(int i=0;i<5;i++){ v += a*noise(p); p*=2.0; a*=0.5; }
      return v;
    }
    void main(){
      vec2 uv = gl_FragCoord.xy / uRes.xy;
      float n = fbm(uv*3.0 + vec2(uTime*0.05, uTime*0.03));
      vec3 col = mix(uColorA, uColorB, smoothstep(0.2, 0.8, n + uv.y*0.3));
      gl_FragColor = vec4(col, 1.0);
    }`,
});

const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
scene.add(quad);

function resize(){
  renderer.setSize(window.innerWidth, window.innerHeight);
  uniforms.uRes.value.set(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resize); resize();

const clock = new THREE.Clock();
let running = true;
function loop(){
  if (running){
    uniforms.uTime.value = clock.getElapsedTime();
    renderer.render(scene, camera);
  }
  requestAnimationFrame(loop);
}
loop();

3. Canvas constellation particles

Drifting points connected by lines when near — the classic "network" background. Pure canvas 2D, no dependencies.

const canvas = document.querySelector('#stars');
const ctx = canvas.getContext('2d');
let W, H, pts;
const COUNT = 80, LINK = 120;

function init(){
  W = canvas.width = innerWidth; H = canvas.height = innerHeight;
  pts = Array.from({length: COUNT}, () => ({
    x: Math.random()*W, y: Math.random()*H,
    vx: (Math.random()-0.5)*0.3, vy: (Math.random()-0.5)*0.3,
  }));
}
addEventListener('resize', init); init();

function frame(){
  ctx.clearRect(0, 0, W, H);
  for (const p of pts){
    p.x += p.vx; p.y += p.vy;
    if (p.x<0||p.x>W) p.vx*=-1;
    if (p.y<0||p.y>H) p.vy*=-1;
    ctx.fillStyle = '#9db4ff'; ctx.fillRect(p.x, p.y, 2, 2);
  }
  for (let i=0;i<COUNT;i++) for (let j=i+1;j<COUNT;j++){
    const dx=pts[i].x-pts[j].x, dy=pts[i].y-pts[j].y;
    const d=Math.hypot(dx, dy);
    if (d<LINK){
      ctx.strokeStyle = `rgba(157,180,255,${1-d/LINK})`;
      ctx.beginPath(); ctx.moveTo(pts[i].x,pts[i].y); ctx.lineTo(pts[j].x,pts[j].y); ctx.stroke();
    }
  }
  requestAnimationFrame(frame);
}
frame();

The O(n²) link loop is fine to ~120 points; above that, spatial-hash into a grid and only test neighboring cells.

4. Seamless loop technique

For canvas/JS, wrap time into a fixed period so motion repeats exactly. Use the loop phase (0→2π) as the argument to periodic functions:

const PERIOD = 12; // seconds
const phase = (t % PERIOD) / PERIOD * Math.PI * 2;
const offset = Math.sin(phase) * amp;          // returns to start at t = PERIOD

Any motion built only from sin/cos of phase (or integer multiples) loops seamlessly. In the shader, feed uTime = phase and use only sin/cos of it; for noise-scrolled gradients, scroll by an integer number of noise cells per period so the field tiles.

5. Reduced motion + offscreen/hidden pause

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) {
  running = false;                 // render one static frame, then stop
  renderer.render(scene, camera);
}

// Pause when the tab is hidden
document.addEventListener('visibilitychange', () => {
  running = !document.hidden && !reduce;
});

// Pause when the canvas scrolls offscreen
new IntersectionObserver(([e]) => {
  running = e.isIntersecting && !document.hidden && !reduce;
}).observe(canvas);

When running is false, skip the render inside the rAF loop (as in section 2) — the loop stays alive to resume cheaply, but does no GPU/CPU work.

Deliver & verify (standalone HTML)

Packaged helper (scripts/): scripts/seek-shot.sh anim.html 0 1.5 3 freezes the ?t=N harness and screenshots each moment; scripts/contact-sheet.sh sheet.png frame-*.png tiles them for one-glance review. See scripts/README.md.

A motion background ships as one .html file that opens directly in a browser — markup, the background, and (for shader/canvas) Three.js or canvas JS from CDN, all inline. One file is the right tier.

Output contract:

• One .html file: the background layer + a sample of foreground text on top to check readability/contrast.
• One animation driver — the CSS @keyframes, the shader rAF loop, or the canvas rAF loop; just one.
• Include the freeze harness below, matched to the technique, so any moment can be screenshotted deterministically.

Freeze harness — pin a frame for screenshots. Match the mechanism to the technique:

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    const T = parseFloat(t);
    // CSS mesh gradient:
    document.querySelectorAll(".bg").forEach(el => {
      el.style.animationDelay = (-T) + "s";
      el.style.animationPlayState = "paused";
    });
    // GLSL shader instead? → render exactly one frame at fixed time:
    //   uniforms.uTime.value = T; renderer.render(scene, camera); running = false;
    // Canvas particles? → seed deterministically, step the sim to T, draw once, stop the loop.
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

Verify loop — render → freeze → screenshot → check:

1. Open the file frozen at start / mid / end across one loop period: …/bg.html?t=0, ?t=<period/2>, ?t=<period>.
2. Screenshot each frozen frame.
3. Check fidelity (subtle, on-brand, seamless) and artifacts — text contrast holds at every frame, no banding in gradients/shader, the loop seam (t=0 vs t=period) matches, no GPU/console errors.

npx playwright screenshot --wait-for-timeout=600 "file://$PWD/bg.html?t=12" frame-mid.png

Before you finish:

1. Opens standalone in a browser — no console/WebGL errors, no missing CDN.
2. One driver; ?t=N freezes the exact frame (shader renders one frame, canvas sim stepped deterministically).
3. Screenshotted at start / mid / end — foreground text stays readable, no banding, loop seam invisible.
4. prefers-reduced-motion honored (one static frame rendered, loop stopped) + pauses offscreen/hidden.
5. devicePixelRatio capped at 2; motion is slow and subtle, never out-contrasting content.

Quick reference

Gotchas

• Never let the background out-contrast the foreground text — add a scrim if it does.
• Uncapped devicePixelRatio on retina/4K murders the GPU; cap at 2.
• background-position loops only if first and last keyframes match exactly.
• Noise-scrolled shaders loop only if the scroll is an integer number of cells per period; otherwise the loop visibly jumps.
• Forgetting the offscreen/hidden pause drains battery on mobile even when the user can't see it.

Reference files

• references/background-recipes.md — fuller drop-in implementations: a richer multi-blob CSS mesh with blur, the complete Three.js aurora shader with mouse parallax and a true seamless-loop time wrap, a grid-optimized constellation field with mouse repulsion, a perfectly-looping noise-flow technique, and a complete reduced-motion + offscreen-pause manager wrapping all of them.

دانلود ZIP