Generative Backgrounds: Art From Math, Not Stock
Code-driven generative art — flow fields, noise, particles — is unique per render and never looks like stock. The anti-slop move for hero textures.
Every vibe-coded hero section has the same background: a faint purple radial gradient, maybe a stock photo of a glass building blurred to 20%, maybe nothing at all. It's the visual equivalent of clearing your throat. The model ships the median, and the median is a gradient nobody chose and nobody remembers. You can do better in the same number of keystrokes — you just have to stop reaching for an asset and start generating one.
Generative art is the move. Flow fields, Perlin noise, particle systems — these are a few dozen lines of code that produce a background that is unique per render. Two runs of the same algorithm with a different seed are visibly different, and none of them exist on a stock site, because they were computed for you on the spot. Pair that with your brand tokens and the texture isn't just unique, it's on-brand. This is Layer 2 of killing AI design slop: the image layer, where the anti-slop weapon is a real, code-backed file instead of a flat JPEG.
Key Takeaways
- Stock is shared; generative is yours. A code-driven background is computed per render and never appears on another site — the opposite of a stock texture downloaded by ten thousand people.
- Math beats the median. Flow fields and noise produce organic complexity the model can't flatten into a default gradient — see the broader thesis in why AI ships the median.
- Load the skill, not the stock library. algorithmic-art teaches your agent flow fields, noise, and particles as first-class techniques.
- Tokens make it on-brand. Pair generative art with theme-factory so the palette comes from your design tokens, not a random color picker.
- SVG ships light. An animated SVG flow field is a few KB of vector math, not a multi-megabyte hero video — it animates at 60fps without killing your Core Web Vitals.
Why Generative Beats Stock
Stock assets fail for a structural reason: they're shared. The moment you pull a texture from a library, you've inherited every other site that pulled the same one. The "tell" of a vibe-coded site isn't that the gradient is ugly — it's that it's recognizable. Recognizable means generic, and generic means forgettable.
Generative art inverts every property that makes stock weak.
| Property | Stock asset | Generative art |
|---|---|---|
| Uniqueness | Shared across every site that downloaded it | Unique per render, per seed |
| Brand fit | Whatever the photographer chose | Driven by your design tokens |
| File size | Multi-MB JPEG/PNG, or a heavy video | A few KB of SVG vector math |
| Animation | Pre-rendered loop, fixed | Live, parametric, responds to state |
| Editability | Crop and filter only | Change a constant, get a new world |
| The "tell" | Reads as median/generic | Reads as bespoke |
The last row is the whole point. A stock background announces "default settings." A generative one announces that somebody made a decision. Users don't consciously parse the math, but they register the difference between an asset that was chosen for them and one that was computed for them.
Loading the Skill
You don't need to be a creative coder to ship this. You need your agent to know the techniques, which is exactly what a SKILL.md does — it overwrites the model's default taste before any CSS is written. algorithmic-art loads flow fields, noise functions, and particle systems into Claude Code or Cursor as named, reusable methods.
npx skills add anthropics/skills --skill algorithmic-art
Once it's loaded, the agent stops reaching for background: linear-gradient(...) as a reflex and starts treating "background" as a thing it can compute. Then wire in your palette so the art isn't using random colors. theme-factory turns your brand into design tokens the agent can reference:
"Generate an animated SVG flow-field hero background. Use the brand
palette from theme-factory tokens — primary as the dominant stroke,
accent for highlights, on a near-black base. Render as inline SVG with
a JS animation loop targeting 60fps. 1200 particles tracing a Perlin
noise field; stroke opacity 0.08 so trails accumulate; wrap-around at
the edges; reseed on each page load for a unique render."
That prompt is doing three jobs: the technique comes from algorithmic-art, the colors come from theme-factory, and the output format (inline animated SVG) keeps it light enough to ship. The result is a hero texture that looks like a generative-art studio made it, computed fresh every visit.
Keeping It Fast and On-Brand
Generative backgrounds earn their keep only if they don't tank performance. Two rules keep them cheap.
First, prefer SVG and canvas over video. A flow field is vector math — it ships as a few KB of code and animates on the client, not a pre-rendered MP4 you have to download. If you need the animation to pause off-screen, gate the loop on IntersectionObserver so it stops computing when nobody's looking.
Second, drive every color from tokens. The fastest way to make generative art look like slop is to let it pick its own rainbow. Constrain the palette to your brand — two or three tokens, max — and the complexity reads as intentional instead of chaotic. The theme-factory tokens are the leash; the algorithmic-art techniques are the dog.
"Constrain the flow-field palette to exactly three theme tokens:
colors.base (background), colors.primary (90% of strokes),
colors.accent (10%, for the brightest trails). Cap the particle count
at 1200 and pause the animation loop via IntersectionObserver when the
hero scrolls out of view."
The discipline here mirrors the rest of this series: distinctiveness comes from technique, coherence comes from tokens. Neither alone is enough. A flow field with random colors is just a different flavor of slop; a brand palette with no texture is the same old gradient. Together they produce a background that is unmistakably yours.
Frequently Asked Questions
Do I need to know creative coding to use this?
No. The whole point of loading algorithmic-art as a SKILL.md is that the agent knows flow fields, noise, and particle systems — you describe the look you want and it writes the math. You're directing, not coding. Knowing the vocabulary (flow field, Perlin noise, particle system) helps you give sharper prompts, but you don't implement the algorithms by hand.
Will an animated SVG background hurt my Core Web Vitals?
Not if you keep it light. An SVG flow field is a few KB of vector math, far smaller than a hero image or background video. Cap the particle count, gate the animation loop on IntersectionObserver so it stops when off-screen, and you get motion without dragging down INP or LCP. The failure mode is an unbounded particle count running every frame on a hidden element — avoid that and you're fine.
How do I keep the art on-brand instead of a random rainbow?
Drive every color from your design tokens. Pair algorithmic-art with theme-factory and constrain the palette to two or three brand tokens. Random colors are the fastest way to make generative art read as chaos; a tight, token-driven palette makes the same complexity read as intentional.
Isn't a static gradient simpler and safer?
Simpler, yes. Safer, no — "safe" here means "looks like every other vibe-coded site." A static gradient is the median, and the median is the thing this series is about killing. Generative art costs you a few dozen lines of code (that the agent writes) and buys you a background no other site has. That trade is the entire move.
Browse 135+ agent-ready design systems in the Designs category, or explore the full skill catalog at aiskill.market.