Animated background

An animated website background, built into your site with no plugin and no library. A moving background behind a hero: waves, cells, fog, rings, bubbles, birds, snow, a breathing halo, or a scrolling texture. One 2D canvas (or, for the scrolling ones, CSS alone) in one file, with no WebGL and no dependency. Still under reduced motion, below `minWidth` or with `motion="off"`; paused off screen and in hidden tabs; one per page.

Pointer

The look of a WebGL background, in one small file

Copy sits above it.
The motion stays behind.

Asked your device for less motion? Then the band above holds one still frame, and so does this one: the same element with motion="off".

Still frame (cells)

The moving hero background people ask for — waves, cells, fog, birds — in one small file, no WebGL, and it holds still for anyone who asked for less motion.

Also called

Vanta.jsVanta backgroundsUABB Animated BackgroundPowerPack animated backgroundanimated hero backgroundwaves backgroundfog backgroundbirds background

What it replaces

Vanta.js + three.js (≈600 KB, WebGL)
UABB / PowerPack animated background rows
video loops used for ambience

Good for

A hero band, or a section divider on a brand with room for motion.

Not for

Under body text; more than one per page (the second instance draws only its still frame and warns: two moving layers fight for attention and for the main thread); a page that already has video-background or particle-field; and any look that needs dots joined by lines — that is particle-field.

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

Decorative: aria-hidden, no pointer events, nothing announced.
The pointer reaction is decorative and never required to reach any content; it is off on touch screens and in every still state.
prefers-reduced-motion (tracked live): one still frame is drawn and the frame loop stops; the CSS presets pause their keyframe. The look survives without the movement.
Pauses while off screen and while the tab is hidden; one requestAnimationFrame loop capped at 60 fps.
Nothing flashes: every preset moves slowly and fades; no strobing (WCAG 2.3.1).
Removed from the page (Astro view transitions, SPA swaps), it cancels its frame and frees its canvas: it is a custom element with a disconnectedCallback.

Where it's live

superherotech.ai: /elements/animated-background/ (demo)

How to ask for it

“The animated-background on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.

More in Hero & motion

See them all working

Particle field
Give your hero quiet, constant movement, like a network coming alive, without the weight of a video.
Video background
Open your home page with moving footage of your work, without making visitors wait for it or wrestle with it.
Parallax band
Break up a long page with a wide photo that glides behind your words as visitors scroll.
Scroll reveal
Let sections and cards arrive as visitors scroll to them, so a long page feels alive without anything getting in the way.