backgrounds

What it does

backgrounds generates self-contained, brand-aware background effects, recolored from your DESIGN.md and shaped for your framework, with accessibility baked in:

• shader: an animated, domain-warped fBm WebGL field. Calm, organic, one draw call, no deps.
• dotgrid: a dot-matrix backdrop. Static CSS tile (free), or a canvas variant that reacts to the cursor.
• ascii: an animated ASCII char-shader. Retro/terminal texture.

Every effect ships with a prefers-reduced-motion static frame, a graceful fallback (no WebGL → dark CSS background), a device-pixel-ratio cap, and a readability scrim, so it's decoration that never hurts your content.

What you can do with it

• "Add an animated shader background to the hero."
• "Give me a subtle dot grid behind this section."
• "Make an ASCII art background in my brand colors."

How it works

Rather than write fragile WebGL/canvas from scratch, the plugin bundles proven, documented reference implementations and the skill recolors and reshapes them, applying your DESIGN.md palette and emitting a React component (if React is detected) or a self-contained HTML/canvas snippet. Everything is dependency-free: one <canvas>/<div> + inline JS. The shader is adapted from the brand shader running on sherizan.com. Decoration that never fights the content, the only kind Coco allows.

Install

• Add the marketplace: /plugin marketplace add sherizan/designagent
• Install: /plugin install backgrounds@designagent
• Run: /backgrounds shader (or dotgrid / ascii, or just ask for a background)