# bgHub

> A curated gallery of animated web backgrounds: CSS, Canvas 2D, Three.js and GLSL. Preview every background live, then copy or download framework-agnostic source code for React and plain HTML.

bgHub is a free, open catalogue of animated website backgrounds. Every
entry has a live preview plus the complete, unminified source behind it, in two
framework variants:

- **react**: a React (react-three-fiber where WebGL is involved) TypeScript
  component, with setup notes and dependencies documented at the top of the file.
- **html**: a standalone `index.html` that runs by opening it in a browser;
  Three.js is loaded from a CDN via an import map.

Snippets are MIT-licensed and free to use, including commercially. Each
background is classified by rendering technique (CSS, Canvas 2D, Three.js, GLSL)
and by runtime weight (light, medium, heavy) so you can judge where it is safe
to use.

URL structure: every background lives at `/bg/<slug>`, where the slug is
`<pattern>-<palette>`; the pattern half encodes family, variant and parameter
mood, e.g. `/bg/plasma-warp-calm-aurora-borealis` is the pattern
`plasma-warp-calm` in the `aurora-borealis` palette.

The backgrounds are a set of distinct patterns, each offered in a range of
palettes and, usually, two motion settings (a calmer and a livelier parameter
set). The gallery lists one card per pattern; a background's page links to the
same pattern at every other motion and in every other palette, so swapping the
palette half of a slug recolours a background and swapping the mood word
changes how fast it moves.

## Site

- [Home](https://bghub.space): overview and featured backgrounds.
- [Gallery](https://bghub.space/gallery): every pattern, filterable by tech and colour, searchable by name, tag or colour. Deep links: `/gallery?tech=glsl`, `/gallery?q=aurora`, `/gallery?palette=magma`.
- [Full index](https://bghub.space/llms-full.txt): every background as plain text, with slug, tech, weight and tags.
- [Agent tutorial](https://bghub.space/skill): install the skill, then ask an AI coding agent for a background.
- [Sitemap](https://bghub.space/sitemap.xml): machine-readable URL list.

## For coding agents

Backgrounds are installable straight into a project. There is a ready-made skill
for Claude Code; install it once, then just ask for a background:

```bash
mkdir -p ~/.claude/skills/bghub && curl -fsSL https://bghub.space/skill.md -o ~/.claude/skills/bghub/SKILL.md
```

On Windows PowerShell (`curl` there is an alias for `Invoke-WebRequest`):

```powershell
New-Item -ItemType Directory -Force "$HOME\.claude\skills\bghub" | Out-Null
Invoke-WebRequest -UseBasicParsing "https://bghub.space/skill.md" -OutFile "$HOME\.claude\skills\bghub\SKILL.md"
```

Every other `curl` command on this page must be written `curl.exe` in
PowerShell, or run from Git Bash or WSL as printed.

Step-by-step tutorial: [https://bghub.space/skill](https://bghub.space/skill)

### Endpoints

- `GET /api/patterns`: every pattern, one compact row each. Add `?format=json` to parse.
- `GET /api/palettes`: every palette, with the hex of both its schemes. Add `?format=json` to parse.
- `GET /api/bg/<slug>`: file manifest plus ready-to-run download commands.
- `GET /r/<slug>/<framework>/<file>`: one raw source file as `text/plain`.

No API key. These share a limit of 120 requests per minute per IP; a 429 tells
you how many seconds to wait in `Retry-After`.

### Compose slugs, do not invent them

A background slug is `<groupId>-<paletteId>`. Group ids come from the
`groups` column of `/api/patterns`, palette ids from `/api/palettes`. A wrong
slug returns 404 with a `hint` and a `closest` list rather than a bare error.

Search the patterns, not the backgrounds: the backgrounds are those patterns
crossed with motion and colour, so the extra rows carry no information a palette
id does not already give you.

### Download, do not retype

Fetch files with `curl -o`. The sources contain GLSL, nested template literals
and regex, and reproducing them through model output corrupts them.

## CSS

- [Magma Linear Gradient](https://bghub.space/bg/animated-gradient-linear-slow-magma): A slow, always-moving linear gradient. Pure CSS, zero JavaScript. Tags: gradient, css, linear, magma.
- [Sunset Line Grid](https://bghub.space/bg/grid-lines-calm-sunset): A slow line grid with a soft colour glow. Pure CSS. Tags: grid, css, lines, sunset.
- [Sakura Aura Glow](https://bghub.space/bg/glow-single-soft-sakura): A dark canvas with a soft aura glow and a faint dot mask. Pure CSS. Tags: aura, glow, css, single, sakura.
- [Royal Violet Aurora](https://bghub.space/bg/aurora-blobs-veil-royal-violet): drifting radial aurora glows over a deep sky. Pure CSS. Tags: aurora, gradient, css, blobs, royal-violet.
- [Crimson Light Beams](https://bghub.space/bg/beams-rise-soft-crimson): soft light beams rising from the base of a dark canvas. Pure CSS. Tags: beams, aura, css, rise, crimson.
- [Neon Lime Animated Tiles](https://bghub.space/bg/tiles-shine-slow-neon-lime): A slow tile grid with a diagonal shine sweeping across. Pure CSS animated tiles. Tags: tiles, grid, css, shine, neon-lime.
- [Magma Diagonal Stripes](https://bghub.space/bg/stripes-diagonal-calm-magma): slow diagonal stripes sliding across a dark base. Pure CSS, zero JavaScript. Tags: stripes, css, diagonal, magma.
- [Sunset Trellis](https://bghub.space/bg/shapes-trellis-calm-sunset): A slow trellis tiling panning slowly. Pure CSS, zero JavaScript. Tags: shapes, tiling, css, trellis, sunset.
- [Sakura Mesh Gradient](https://bghub.space/bg/meshgradient-mesh-calm-sakura): A slow mesh gradient of blurred colour fields drifting on unequal cycles. Pure CSS. Tags: gradient, mesh, css, mesh, sakura.
- [Cyber Teal Honeycomb](https://bghub.space/bg/honeycomb-comb-calm-cyber-teal): A slow honeycomb lattice lit cell by cell. Pure CSS, zero JavaScript. Tags: hexagon, tiling, css, comb, cyber-teal.
- [Rose Noir Houndstooth](https://bghub.space/bg/weave-houndstooth-calm-rose-noir): A slow houndstooth weave panning across a dark base. Pure CSS, zero JavaScript. Tags: textile, pattern, css, houndstooth, rose-noir.
- [Neon Lime Sunburst](https://bghub.space/bg/rays-sunburst-calm-neon-lime): A slow sunburst of hard-edged conic spokes turning on a dark field. Pure CSS. Tags: rays, conic, light, css, sunburst, neon-lime.

## Canvas 2D

- [Midnight Aurora Drift](https://bghub.space/bg/particles-drift-dots-midnight-aurora): A round Canvas 2D particle field in drift motion. Interactive and GPU-light. Tags: particles, canvas, drift, midnight-aurora.
- [Aurora Borealis Waves](https://bghub.space/bg/waves-layered-gentle-aurora-borealis): gentle layered sine waves rolling across the base. Canvas 2D. Tags: waves, canvas, layered, aurora-borealis.
- [Emerald Constellation](https://bghub.space/bg/constellation-network-sparse-emerald): A sparse constellation network reacting to the cursor. Canvas 2D. Tags: particles, network, canvas, network, emerald.
- [Mono Ice Warp Starfield](https://bghub.space/bg/starfield-warp-cruise-mono-ice): A steady warp starfield rushing outward. Canvas 2D. Tags: stars, warp, canvas, warp, mono-ice.
- [Gold Noir Matrix Rain](https://bghub.space/bg/matrix-rain-steady-gold-noir): A steady column of falling glyphs. Canvas 2D digital matrix rain. Tags: matrix, rain, canvas, rain, gold-noir.
- [Indigo Night Falling Lines](https://bghub.space/bg/rain-lines-soft-indigo-night): soft falling lines streaking down a dark canvas. Canvas 2D. Tags: rain, lines, canvas, lines, indigo-night.
- [Vapor Circuit Glow](https://bghub.space/bg/circuit-flow-calm-vapor): calm glowing pulses running along a grid, leaving traces. Canvas 2D circuit glow. Tags: circuit, glow, canvas, flow, vapor.
- [Cyber Teal Bokeh](https://bghub.space/bg/bokeh-orbs-soft-cyber-teal): soft blurred bokeh orbs drifting over a dark canvas. Canvas 2D. Tags: bokeh, glow, canvas, orbs, cyber-teal.
- [Rose Noir Neon Trails](https://bghub.space/bg/trails-flow-calm-rose-noir): calm particles tracing a flow field, leaving glowing neon trails. Canvas 2D. Tags: neon, trails, flow, canvas, flow, rose-noir.
- [Crimson Boids](https://bghub.space/bg/flock-boids-calm-crimson): slow flocking agents steering by separation, alignment and cohesion. Canvas 2D boids. Tags: boids, flock, canvas, boids, crimson.
- [Indigo Night Spirograph](https://bghub.space/bg/curves-spirograph-calm-indigo-night): A slow spirograph traced by a parametric drawing machine. Canvas 2D. Tags: curves, math, canvas, spirograph, indigo-night.
- [Vapor Ripple Rings](https://bghub.space/bg/ripples-rings-calm-vapor): slow ripple rings spreading out and fading. Canvas 2D. Tags: ripples, rings, canvas, rings, vapor.

## Three.js

- [Tangerine Blobs](https://bghub.space/bg/floating-geometry-icosahedron-float-tangerine): drifting distorted blobs lit by coloured point lights. A Three.js scene. Tags: 3d, three, mesh, icosahedron, tangerine.
- [Ultraviolet Phone Glyph](https://bghub.space/bg/icon3d-phone-scatter-ultraviolet): Dozens of small phone glyph extruded from a coded silhouette, under coloured rim light. Tags: 3d, three, object, icon, phone, ultraviolet.
- [Tangerine Car](https://bghub.space/bg/models-car-scatter-tangerine): Dozens of small car assembled from Three.js primitives, under coloured rim light. Tags: 3d, three, object, model, car, tangerine.
- [Aurora Borealis Cube Field](https://bghub.space/bg/instanced-cubes-calm-aurora-borealis): A slow cube field of instanced meshes riding a travelling wave. A Three.js scene. Tags: 3d, three, instanced, cubes, aurora-borealis.
- [Royal Violet Point Galaxy](https://bghub.space/bg/points3d-galaxy-calm-royal-violet): A slow point galaxy of tens of thousands of additive points. A Three.js scene. Tags: 3d, three, points, galaxy, royal-violet.
- [Emerald Wireframe Knot](https://bghub.space/bg/wireframe-knot-calm-emerald): A slow wireframe knot drawn as bright line segments over the dark base. A Three.js scene. Tags: 3d, three, wireframe, knot, emerald.
- [Mono Ice Rolling Hills](https://bghub.space/bg/terrain3d-hills-calm-mono-ice): slow rolling hills displaced per vertex and flown over. A Three.js scene. Tags: 3d, three, terrain, hills, mono-ice.
- [Gold Noir Tube Flight](https://bghub.space/bg/tube3d-flight-calm-gold-noir): A slow tube flight seen from inside as the camera flies through. A Three.js scene. Tags: 3d, three, tunnel, flight, gold-noir.
- [Crimson Glass Shards](https://bghub.space/bg/glass-shards-calm-crimson): slow glass shards with lit cores showing through translucent shells. A Three.js scene. Tags: 3d, three, glass, shards, crimson.
- [Indigo Night Ringed Planet](https://bghub.space/bg/orbits-planet-calm-indigo-night): A slow ringed planet of bodies on circular paths. A Three.js scene. Tags: 3d, three, space, planet, indigo-night.
- [Vapor City Skyline](https://bghub.space/bg/city-skyline-calm-vapor): A slow city skyline of instanced towers with hashed heights. A Three.js scene. Tags: 3d, three, city, skyline, vapor.
- [Coral Reef Crystals](https://bghub.space/bg/floating-geometry-octahedron-float-coral-reef): drifting distorted crystals lit by coloured point lights. A Three.js scene. Tags: 3d, three, mesh, octahedron, coral-reef.

## GLSL Shader

- [Ultraviolet Plasma](https://bghub.space/bg/plasma-fbm-calm-ultraviolet): A slow full-screen plasma fragment shader running on the GPU. Tags: shader, glsl, gpu, fbm, ultraviolet.
- [Oceanic Iridescent](https://bghub.space/bg/flux-iridescent-calm-oceanic): A slow full-screen iridescent shader running on the GPU. Tags: shader, glsl, gpu, iridescent, oceanic.
- [Mono Ice Volumetric Smoke](https://bghub.space/bg/craft-smoke-calm-mono-ice): A slow-moving, realistic volumetric smoke effect rendered on the GPU. Tags: realistic, shader, glsl, smoke, mono-ice.
- [Coral Reef Voronoi Cells](https://bghub.space/bg/voronoi-cells-calm-coral-reef): A slow voronoi cells field computed per pixel on the GPU. Tags: shader, glsl, cells, cells, coral-reef.
- [Midnight Aurora Round Tunnel](https://bghub.space/bg/tunnel-round-calm-midnight-aurora): A slow round tunnel receding to a vanishing point, drawn per pixel on the GPU. Tags: shader, glsl, depth, round, midnight-aurora.
- [Magma Kaleidoscope](https://bghub.space/bg/kaleido-mirror-calm-magma): A slow kaleidoscope folding a noise field into mirrored symmetry. GPU shader. Tags: shader, glsl, symmetry, mirror, magma.
- [Sunset Truchet Arcs](https://bghub.space/bg/truchet-arcs-calm-sunset): A slow truchet arcs tiling that never visibly repeats. GPU shader. Tags: shader, glsl, tiles, arcs, sunset.
- [Sakura Metaballs](https://bghub.space/bg/metaballs-blobs-calm-sakura): slow metaballs merging and splitting as they drift. GPU shader. Tags: shader, glsl, blobs, blobs, sakura.
- [Ultraviolet Moire Rings](https://bghub.space/bg/moire-rings-calm-ultraviolet): slow moire rings beating against each other into large slow shapes. GPU shader. Tags: shader, glsl, interference, rings, ultraviolet.
- [Tangerine Julia Set](https://bghub.space/bg/fractal-julia-calm-tangerine): A slow julia set unfolding endless detail, iterated per pixel on the GPU. Tags: shader, glsl, fractal, julia, tangerine.
- [Aurora Borealis Contour Map](https://bghub.space/bg/terrain-contour-calm-aurora-borealis): A slow contour map built from layered noise. GPU shader. Tags: shader, glsl, noise, contour, aurora-borealis.
- [Royal Violet Ripples](https://bghub.space/bg/liquid-ripple-calm-royal-violet): A slow ripples surface distorted by flowing noise. GPU shader. Tags: shader, glsl, fluid, ripple, royal-violet.

## Legal

- [Terms and Conditions](https://bghub.space/terms)
- [Privacy Policy](https://bghub.space/privacy)
- [Disclaimer](https://bghub.space/disclaimer)