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

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 {
  /* Background scale (dark-on-dark elevation) */
  --grn-bg: #000000;
  --grn-surface: #141414;
  --grn-elevated: #1A1A1A;
  --grn-card: #2B2B2B;

  /* Accent */
  --grn-accent: #C2F13C;
  --grn-accent-40: rgba(194, 241, 60, 0.4);
  --grn-accent-20: rgba(194, 241, 60, 0.2);

  /* Text */
  --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);

  /* Borders */
  --grn-border: rgba(255, 255, 255, 0.2);
  --grn-border-subtle: rgba(255, 255, 255, 0.1);

  /* Motion */
  --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);

  /* Blur tiers */
  --grn-blur-light: blur(5px);
  --grn-blur-medium: blur(10px);
  --grn-blur-heavy: blur(20px);

  /* Typography */
  --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.

/* Quick swap — glass-hero palette */
: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

1. Vanilla only. No React, Vue, Svelte, Angular. Plain HTML + CSS + JS.
2. Single-file output. Everything in one HTML file. CDN imports for Inter font only.
3. Dark-mode-first. Body is #000. Surfaces elevate via #141414 → #1A1A1A → #2B2B2B.
4. --grn-* tokens everywhere. Never hardcode colors — always reference custom properties.
5. prefers-reduced-motion required. Every animated effect needs a reduced-motion fallback.
6. DPR clamp at 1.5 for WebGL canvas. Full DPR for CSS.
7. requestAnimationFrame only. Never setInterval for animation.
8. overflow: clip over overflow: hidden on individual containers, never on body.
9. 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).