| name | grainient |
| description | Recreate grainient.supply's 16 dark-mode visual effects as single-file HTML pages: WebGL shader gradients, vignette overlays, 9-layer box shadows, smooth scroll, spring animations, hover-zoom, ticker marquees, glassmorphism, 3D card flips, bento grids, gradient CTAs. Dark-mode-first with lime green (#C2F13C) accent. Triggers on grainient effects, dark-mode landing page, cinematic depth, glow effects, SaaS showcase, visual effects page. |
| argument-hint | [--mode hero|bento|ticker|page|catalog] [description or effect name] |
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
python3 scripts/grainient_generator.py --mode hero --output hero.html
python3 scripts/grainient_generator.py --mode page --output landing.html
python3 scripts/grainient_generator.py --mode bento --accent "#FF6B35" --output showcase.html
python3 scripts/grainient_generator.py --mode catalog --output catalog.html
Or let Claude generate directly from the templates and references.
Effects Catalog
| # | Effect | Tier | Tech | Reference |
|---|
| 1 | WebGL Shader Gradient | Hero | WebGL2+GLSL | references/shader-gradient.md |
| 2 | Vignette Overlay | Hero | CSS | references/vignette-system.md |
| 3 | 9-Layer Box Shadows | Hero | CSS | references/shadow-system.md |
| 4 | Smooth Scroll | Motion | JS | references/smooth-scroll.md |
| 5 | Spring Animations | Motion | CSS/JS | references/spring-animations.md |
| 6 | Hover Image Zoom | Motion | CSS | references/hover-zoom.md |
| 7 | Vertical Ticker Marquee | Motion | JS | references/ticker-marquee.md |
| 8 | Glassmorphism | Surface | CSS | references/surface-effects.md |
| 9 | 3D Perspective Card Flip | Surface | CSS | references/surface-effects.md |
| 10 | Bento Grid | Surface | CSS | references/surface-effects.md |
| 11 | Gradient CTAs | Surface | CSS | references/surface-effects.md |
| 12 | SVG Gradient Icons | Detail | SVG | references/detail-effects.md |
| 13 | Inset Border System | Detail | CSS | references/detail-effects.md |
| 14 | Grid Pattern Overlay | Detail | CSS | references/detail-effects.md |
| 15 | Custom Scrollbar | Detail | CSS | references/detail-effects.md |
| 16 | Responsive Clamp Typography | Detail | CSS | references/detail-effects.md |
Modes
| Mode | Template | Effects Composed |
|---|
hero | assets/templates/hero-section.html | Shader gradient + vignette + glassmorphism nav + clamp typography + springs |
bento | assets/templates/bento-showcase.html | Bento grid + 9-layer shadows + hover zoom + glassmorphism + gradient CTAs |
ticker | assets/templates/ticker-landing.html | Ticker marquee + smooth scroll + gradient CTAs + vignette + SVG icons |
page | assets/templates/dark-page.html | All 16 effects in a full landing page |
catalog | assets/templates/effects-catalog.html | Each effect demonstrated individually with controls |
Color System
All effects read from --grn-* CSS custom properties. Override at :root to re-theme:
:root {
--grn-bg: #000000;
--grn-surface: #141414;
--grn-elevated: #1A1A1A;
--grn-card: #2B2B2B;
--grn-accent: #C2F13C;
--grn-accent-40: rgba(194, 241, 60, 0.4);
--grn-accent-20: rgba(194, 241, 60, 0.2);
--grn-text: #FFFFFF;
--grn-text-70: rgba(255, 255, 255, 0.7);
--grn-text-40: rgba(255, 255, 255, 0.4);
--grn-text-20: rgba(255, 255, 255, 0.2);
--grn-text-10: rgba(255, 255, 255, 0.1);
--grn-border: rgba(255, 255, 255, 0.2);
--grn-border-subtle: rgba(255, 255, 255, 0.1);
--grn-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
--grn-spring-smooth: cubic-bezier(0.25, 1, 0.5, 1);
--grn-spring-subtle: cubic-bezier(0.22, 1, 0.36, 1);
--grn-blur-light: blur(5px);
--grn-blur-medium: blur(10px);
--grn-blur-heavy: blur(20px);
--grn-font: 'Inter', system-ui, sans-serif;
--grn-hero-size: clamp(32px, 4vw + 1rem, 6vw);
--grn-body-size: clamp(16px, 1vw + 1rem, 1.1vw);
}
Font: Inter at weights 400, 500, 600. Always set -webkit-font-smoothing: antialiased.
Palette Presets
Default (Lime): --grn-accent: #C2F13C — the canonical grainient.supply lime green.
Glass Hero (Mint/Violet): Override :root with the glass-hero palette for kaolti's dark glass aesthetic — mint green #57FFA8 accent, violet #A78BFA secondary, blue-tinted near-black #0a0a0c base. Includes Geist typography tokens and glass-edge border values. See references/glass-hero-palette.md for the full token block, typography scale, glassmorphism recipes, and differences from default grainient.
:root {
--grn-bg: #0a0a0c;
--grn-accent: #57FFA8;
--grn-accent-40: rgba(87, 255, 168, 0.4);
--grn-accent-20: rgba(87, 255, 168, 0.2);
--grn-border: rgba(255, 255, 255, 0.11);
}
For the full 3D glass experience with MeshPhysicalMaterial refraction/dispersion/iridescence, use threejs-particle-canvas Mode 6 (glass-hero).
Layer Stack (Composability)
Every grainient page is a z-index stack of 6 layers:
Layer 0 z-index: 0 Body background (#000)
Layer 1 z-index: 1 Shader gradient canvas (position: fixed)
Layer 2 z-index: 2 Vignette overlay (position: fixed, pointer-events: none)
Layer 3 z-index: 3 Grid pattern overlay (position: fixed, pointer-events: none)
Layer 4 z-index: 10 Content sections (position: relative)
Layer 5 z-index: 100 Glassmorphism nav / floating UI (position: fixed)
Effects slot into layers. Content sections use surface colors (--grn-surface, --grn-elevated) for dark-on-dark elevation contrast.
See references/composability.md for composition recipes and performance budget.
Implementation Rules
- Vanilla only. No React, Vue, Svelte, Angular. Plain HTML + CSS + JS.
- Single-file output. Everything in one HTML file. CDN imports for Inter font only.
- Dark-mode-first. Body is
#000. Surfaces elevate via #141414 → #1A1A1A → #2B2B2B.
--grn-* tokens everywhere. Never hardcode colors — always reference custom properties.
prefers-reduced-motion required. Every animated effect needs a reduced-motion fallback.
- DPR clamp at 1.5 for WebGL canvas. Full DPR for CSS.
requestAnimationFrame only. Never setInterval for animation.
overflow: clip over overflow: hidden on individual containers, never on body.
- Inter font, antialiased. Default font for all modes. Palette presets (e.g., glass-hero) may override
--grn-font — see Palette Presets section.
Anti-Patterns
- Never use
ease timing function — use --grn-spring-* cubic-bezier tokens
- Never use
box-shadow with fewer than 4 layers — grainient shadows are deep stacks
- Never use
border for the inset border system — use box-shadow: inset 0 0 0 1px or per-side gradients
- Never use
backdrop-filter without a semi-transparent background — blur on opaque dark is invisible
- Never use
scroll-behavior: smooth as a substitute for Lenis-style scroll — no inertia, no lerp control
- Never omit the vignette when using a shader background — content bleeds into shader without it
- Never hardcode pixel values for typography — always
clamp() with viewport-relative middle
- Never use
opacity: 0 for hover-zoom initial state without pointer-events: none
- Never set all ticker columns to the same speed — vary by 10-30% per column
- Never use
perspective() without overflow: visible on the container — clips 3D rotation
- Never use pure white (
#FFF) as background anywhere — this is a dark-mode skill
- Never use Three.js for the fullscreen gradient — raw WebGL2 suffices; see rocaille-shader for Three.js needs
See references/anti-patterns.md for expanded explanations with code examples.
Generator Script
python3 scripts/grainient_generator.py \
--mode hero|bento|ticker|page|catalog \
--accent "#C2F13C" \
--bg "#000000" \
--surface "#141414" \
--output output.html
Validation
python3 scripts/validate_grainient.py output.html
Checks: viewport meta, --grn-* properties, no framework imports, dark background, requestAnimationFrame, prefers-reduced-motion, Inter font, overflow:clip. Optional checks (pass if found): WebGL context, wheel listener, translateY, CSS grid, gradient CTA, box-shadow glow, backdrop-filter, vignette.
References
Load on-demand when implementing specific effects:
| Reference | Covers |
|---|
references/shader-gradient.md | WebGL2 aurora shader: GLSL noise layers, setup, DPR, fallback |
references/vignette-system.md | 4-directional CSS gradient overlays, z-index, opacity |
references/shadow-system.md | 9-layer shadow recipe, lime/white glow variants |
references/smooth-scroll.md | Lenis-style vanilla JS scroll, lerp math, rAF loop |
references/spring-animations.md | 3 cubic-bezier presets, hover transitions |
references/hover-zoom.md | overflow:clip + opacity+scale reveal pattern |
references/ticker-marquee.md | Multi-column vertical ticker, speed variance |
references/surface-effects.md | Glassmorphism, 3D card flip, bento grid, gradient CTAs |
references/detail-effects.md | SVG gradient icons, inset borders, grid overlay, scrollbar, clamp typography |
references/color-system.md | Full palette, CSS custom properties, dark-on-dark elevation |
references/composability.md | Layer stack, composition recipes, performance budget |
references/anti-patterns.md | 16+ anti-patterns with wrong/right code examples |
references/glass-hero-palette.md | Glass Hero palette preset: mint/violet tokens, Geist typography, glassmorphism recipes |
Cross-Skill Relationships
- rocaille-shader: Cross-ref for Three.js shader path. Grainient owns CSS/surface effects, not shader pipelines.
- minoan-frontend-design: Broader creative direction. Grainient provides grainient.supply's specific vocabulary.
- threejs-particle-canvas Mode 6 (glass-hero): Full 3D glass with MeshPhysicalMaterial refraction, dispersion, iridescence. Grainient's glass-hero palette provides the flat CSS equivalent; Mode 6 provides the physically-accurate 3D version.
Attribution
Effects deconstructed from grainient.supply (Framer, Apr 2026). Technologies: UnicornStudio (WebGL), Lenis (smooth scroll), Framer Motion (spring animations), @shadergradient/react (shader gradient subdomain).