grainient

# Grainient Effects Skill Recreate the visual vocabulary of [grainient.supply](https://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 ```bash # 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: ```css :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. ```css /* 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 ```bash python3 scripts/grainient_generator.py \ --mode hero|bento|ticker|page|catalog \ --accent "#C2F13C" \ --bg "#000000" \ --surface "#141414" \ --output output.html ``` ## Validation ```bash 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](https://grainient.supply/) (Framer, Apr 2026). Technologies: UnicornStudio (WebGL), Lenis (smooth scroll), Framer Motion (spring animations), @shadergradient/react (shader gradient subdomain).