Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.
npx versuz@latest install kevinzai-commander-skills-ccc-design-generative-backgroundsgit clone https://github.com/KevinZai/commander.gitcp commander/SKILL.MD ~/.claude/skills/kevinzai-commander-skills-ccc-design-generative-backgrounds/SKILL.md---
name: generative-backgrounds
description: "Create procedural, animated website backgrounds as React components for shadcn/ui projects. Noise gradients, gradient meshes, voronoi, cellular automata, reaction-diffusion, moving pixel art, dot grids, and dynamic color-shifting backgrounds. Use when: user wants animated backgrounds, gradient meshes, procedural patterns, or living textures."
---
# Generative Backgrounds Skill
Create procedural background components for **Next.js + shadcn/ui + Tailwind CSS + TypeScript** projects.
All output MUST be:
- React functional components with TypeScript
- Positioned as background layers (`absolute inset-0 -z-10`)
- Using shadcn CSS variables for color derivation
- SSR-safe, with `"use client"` directive
- Providing CSS fallback gradient for non-JS/reduced-motion
- Performant (60fps target, mobile-aware)
## Component Shell
```tsx
"use client"
import { useRef, useEffect } from "react"
import { cn } from "@/lib/utils"
interface GenerativeBackgroundProps {
className?: string
speed?: number
seed?: number
}
export function GenerativeBackground({ className, speed = 1, seed = 42 }: GenerativeBackgroundProps) {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
const canvas = canvasRef.current
if (!canvas || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
const ctx = canvas.getContext("2d")!
// ... setup and animation loop
return () => { /* cleanup */ }
}, [speed, seed])
return (
<canvas
ref={canvasRef}
className={cn("absolute inset-0 -z-10 h-full w-full", className)}
style={{ background: "linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted)))" }}
/>
)
}
```
## Background Recipes
### 1. Flowing Noise Gradient (Apple/Stripe style)
```tsx
// Use simplex noise to create smooth flowing color fields
// Sample 3 noise layers at different frequencies for RGB channels
// Or: use noise to interpolate between 3-4 theme colors
const n = snoise(x * 0.005 + time, y * 0.005)
const color = lerpColors(palette, (n + 1) / 2)
// Draw pixel-by-pixel or use ImageData for performance
// At half resolution, then CSS scale up with image-rendering: auto
```
### 2. Animated Gradient Mesh
```tsx
// Define 4-8 control points with colors
// Each point orbits slowly (sin/cos with different frequencies)
interface MeshPoint { x: number; y: number; color: [number, number, number]; vx: number; vy: number }
// Move points: p.x += Math.sin(time * p.vx) * amplitude
// Blend: weight = 1 / (dist * dist); color += point.color * weight
// Use WebGL shader for real-time performance at full resolution
```
### 3. Voronoi Pattern
```tsx
// Place N seed points, optionally animated
// For each pixel, find nearest seed -> color by seed's color
// Or: color by distance to nearest seed (creates cell borders)
// Animate seeds with slow drift
```
### 4. Cellular Automata (Game of Life)
```tsx
// Grid of cells, each alive or dead
// Conway rules: survive with 2-3 neighbors, born with exactly 3
// Fade dead cells slowly for trail effect
// Use double-buffer: current grid + next grid
const nextGrid = grid.map((row, y) => row.map((cell, x) => {
const neighbors = countNeighbors(grid, x, y)
return cell ? (neighbors === 2 || neighbors === 3) : (neighbors === 3)
}))
```
### 5. Reaction-Diffusion (Gray-Scott)
```tsx
// Two chemicals A and B on a grid
// A feeds in, B kills A, both diffuse at different rates
// f=0.055 k=0.062 -> mitosis pattern
// f=0.035 k=0.065 -> coral pattern
// Use Laplacian for diffusion, Euler integration per frame
```
### 6. Moving Pixel Grid
```tsx
const cellSize = 6
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
const n = snoise(x * 0.1 + time, y * 0.1)
ctx.fillStyle = `hsl(${220 + n * 40}, 70%, ${40 + n * 20}%)`
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize)
}
}
```
### 7. Dot Grid with Wave
```tsx
const wave = Math.sin(dist * 0.05 - time * 2) * 0.5 + 0.5
ctx.globalAlpha = wave * 0.6
ctx.beginPath()
ctx.arc(x * spacing, y * spacing, baseRadius * wave, 0, Math.PI * 2)
ctx.fill()
```
### 8. CSS-Only Animated Gradient (Zero JS)
```tsx
export function CSSGradientBackground({ className }: { className?: string }) {
return (
<div className={cn(
"absolute inset-0 -z-10",
"bg-[length:400%_400%] animate-[gradient-shift_8s_ease_infinite]",
"bg-gradient-to-br from-primary/20 via-accent/20 to-secondary/20",
className
)} />
)
}
// tailwind.config.ts: "gradient-shift": { "0%,100%": { backgroundPosition: "0% 50%" }, "50%": { backgroundPosition: "100% 50%" } }
```
### 9. Blob / Lava Lamp
```tsx
// Multiple large circles with gaussian blur
// Circles orbit and overlap
// CSS filter: blur(40px) contrast(20)
// Colors from shadcn palette
```
### 10. Noise Texture Overlay
```tsx
const imageData = ctx.createImageData(256, 256)
for (let i = 0; i < imageData.data.length; i += 4) {
const v = Math.random() * 255
imageData.data[i] = imageData.data[i+1] = imageData.data[i+2] = v
imageData.data[i+3] = 15 // very subtle
}
```
## Color Integration with shadcn
```tsx
function getCSSColor(varName: string): string {
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
}
const palette = [getCSSColor("--primary"), getCSSColor("--accent"), getCSSColor("--muted")]
```
## Performance Rules
1. Render at half resolution, scale up with CSS `image-rendering: auto`
2. Use `ImageData` direct pixel manipulation for noise
3. Pre-compute noise lookup tables for static patterns
4. Use WebGL shader for full-res real-time noise
5. Target 30fps for backgrounds (not 60)
6. Use `OffscreenCanvas` in Web Worker for heavy computation
7. Pause when not in viewport (IntersectionObserver)
## Dependencies
| Package | Purpose | Install |
|---------|---------|---------|
| simplex-noise | Fast noise generation | `npm i simplex-noise` |
| three | WebGL shader backgrounds | `npm i three @types/three` |
**Version:** 1.0.0
**Last Updated:** 2026-03-17