motion-background

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

Look	Technique	Cost
Soft animated gradient/mesh	CSS gradients + keyframes	Cheapest, no JS
Flowing aurora / organic noise	GLSL fragment shader (Three.js full-screen quad)	GPU, moderate
Constellation / drifting dots	Canvas 2D particles	CPU, scales with count
Depth / parallax	Same shader/particles with mouse-driven offset	Moderate

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