Let your coding agent pick the background

Install one file, then describe what you want in plain language. Your agent searches the pattern index, picks a colour, and downloads the real source into your project. No package to install and no API key, just a fair-use limit an install never reaches.

1Install the skill

Claude Code

This command is specific to Claude Code: it writes into the .claude/skills directory, which no other agent reads. Global puts it in your home directory, so every project on the machine has it and you only run it once; This project keeps it inside the current repo. Restart the session afterwards so it is picked up, and delete the folder to remove it.

terminal

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

Also works on Windows inside Git Bash or WSL.

Cursor, Codex, Copilot, anything else

Nothing in the skill is Claude-specific: it is one markdown file of instructions for any agent that can run curl and write files. Download it and drop it wherever your tool reads rules from, or just attach it to the chat.

Download SKILL.md Read it first

Cursor takes it as .cursor/rules/bghub.mdc; most other tools read AGENTS.md in the project root, so paste the contents in there. For a one-off, attaching the file to a single message works too.

2Ask for what you want

No command to remember. Describe the background and the skill triggers itself.

Add a calm dark purple background to the hero section.
This landing page looks flat. Put something subtle behind the headline that still reads well with white text.
I want a Canvas particle background, light on the CPU, in our teal brand colour.

Vague is fine. Naming a mood, a colour and where it goes is enough for the agent to narrow the whole catalogue down to one.

3What the agent does

Four calls, in order. Worth knowing so you can tell whether it went wrong, and where.

01Reads the index
GET /api/patterns
The pattern index fits in one response, so the agent reads all of it and matches your words against the descriptions itself. There is no search endpoint to get wrong.
02Picks a colour
GET /api/palettes
Palettes are a separate, closed list. The agent chooses one by name, and every palette ships a dark and a light scheme that the download switches between on its own.
03Composes the slug
GET /api/bg/<slug>
A background slug is simply a group id joined to a palette id with a hyphen. Both halves came from the two responses above, so the agent never invents an id. If it still gets one wrong, the 404 tells it which part was wrong and what the valid values are.
04Downloads the files
GET /r/<slug>/<framework>/<file>
The manifest lists the files and the exact curl commands. Files arrive as bytes, so the GLSL and template literals in them stay intact rather than being retyped through the model.

Then it mounts the component behind your content, in a positioned wrapper:

tsx

<section className="relative isolate overflow-hidden">
  <div className="absolute inset-0 -z-10">
    <ShaderBackground />
  </div>
  <h1 className="relative">Your content</h1>
</section>

The API

Public, read-only and unauthenticated. Useful if you would rather script it than let an agent drive.

Endpoint	Returns
`/api/patterns`	Every pattern, one compact row each: id, tech, weight, group ids, palettes, tags, description. Add ?format=json to parse it instead of reading it.
`/api/palettes`	Every palette with the base colour and accents of both its dark and light schemes. Add ?format=json.
`/api/bg/<slug>`	The file manifest for one background: frameworks, file names and sizes, any install hint, and ready-to-run curl commands. A wrong slug returns 404 with a hint and the closest valid slugs.
`/r/<slug>/<framework>/<file>`	One source file as text/plain, byte-identical to the site. This is what the download commands point at.
`/skill.md`	The skill file itself, ready to curl into a skills directory.

Slugs are composed, never invented

A background slug is a group id and a palette id joined by a hyphen, and both halves come out of the index endpoints. That is the whole addressing scheme. Try the sequence yourself:

terminal

# 1. see what exists (one row per pattern)
curl -fsSL https://bghub.space/api/patterns | head -20

# 2. see the colours
curl -fsSL https://bghub.space/api/palettes

# 3. compose a slug: group "plasma-silk-calm" + palette "royal-violet"
curl -fsSL https://bghub.space/api/bg/plasma-silk-calm-royal-violet

# 4. download the react file the manifest listed
curl -fsSL https://bghub.space/r/plasma-silk-calm-royal-violet/react/ShaderBackground.tsx \
  -o ShaderBackground.tsx

Search happens over the patterns rather than the backgrounds, because the backgrounds are those patterns crossed with motion and colour. Adding a colour multiplies the catalogue without adding anything new to search for, so colour stays a parameter.

If something goes wrong

The agent asks permission for every curl

Expected on first use. In Claude Code you can allow this origin once in .claude/settings.json:

.claude/settings.json

{
  "permissions": {
    "allow": ["Bash(curl -fsSL https://bghub.space/*)"]
  }
}

The code arrived broken

Almost always because the agent reproduced the file through its own output instead of downloading it. The sources contain GLSL, nested template literals and regex, which do not survive that. Tell it to use curl -o and fetch again. Every file is served as plain text, byte-identical to what you see on the site.

It picked something too heavy

Say so and name the budget. Every pattern carries two independent labels: a weight for runtime cost (light, medium, heavy) and a tech for the technique (css, canvas, glsl, three). They do not imply each other, so say which you mean: "keep it light" for the cost, "no WebGL, no new dependencies" for the technique.

It picked a slug that does not exist

The 404 body says which half was wrong and lists the closest valid slugs, so the agent normally recovers on its own. If it loops, tell it to re-read /api/patterns.

Every curl fails on Windows PowerShell

In PowerShell, curl is an alias for Invoke-WebRequest, which does not accept -fsSL. Tell the agent to call curl.exe instead, or run it from Git Bash or WSL where the plain commands work as printed. The allowlist entry above then needs Bash(curl.exe -fsSL https://bghub.space/*) as well.