Grainient Effects Skill

Recreate the visual vocabulary of grainient.supply — 16 composable dark-mode effects spanning WebGL shaders, CSS surfaces, JS-driven motion, and layout patterns. No Framer dependency. Single-file HTML output.

Quick Start

# Generate a hero section with aurora shader
python3 scripts/grainient_generator.py --mode hero --output hero.html

# Generate a full landing page
python3 scripts/grainient_generator.py --mode page --output landing.html

# Custom accent color
python3 scripts/grainient_generator.py --mode bento --accent "#FF6B35" --output showcase.html

# Interactive effects catalog
python3 scripts/grainient_generator.py --mode catalog --output catalog.html