Skip to main content
grainient 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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/tdimino/claude-code-minoan --skill grainientThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... Related occupations SOC
Based on SOC occupation classification
More from this repository Search, post, monitor, and archive on Twitter/X via five tools: the official hosted X MCP server (full-archive search, trends, bookmarks, Articles via xurl bridge), x-search CLI (cost-tracked API v2 research with calendar-day windows, volume counts, multi-query fan-out, feeds, watchlists, posting), xurl (official CLI for any endpoint incl. media/DMs), bird CLI (free session-based reads/writes, frozen at 0.8.0), and Smaug bookmark archival. Triggers on: search tweets, tweets from today, what did X tweet, latest tweets from, tweet volume, expand a Twitter query, check Twitter for, post a tweet, tweet this, post to X, reply on Twitter, full-archive search, what's trending, check mentions, my mentions, timeline, DMs, monitor account, research topic on Twitter, my bookmarks, archive bookmarks.
Manage Claude Code sessions — search by topic or ID, browse recent sessions with full metadata (tags, summaries, titles, cost), view title/nickname history timelines, resume in Ghostty tabs, spawn interactive or headless sessions, monitor live sessions, and bootstrap new setups. Triggers on resume session, find session, list sessions, recent sessions, spawn session, session history, what was I working on, open in ghostty, title history, session nicknames.
Summon Claude Fable 5 (Mythos-class, xenos daimon) for long-horizon tasks. Handles model override, cost awareness, and task routing. Availability probed at invocation.
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
1 WebGL Shader Gradient Hero WebGL2+GLSL references/shader-gradient.md2 Vignette Overlay Hero CSS references/vignette-system.md3 9-Layer Box Shadows Hero CSS references/shadow-system.md4 Smooth Scroll Motion JS references/smooth-scroll.md5 Spring Animations Motion CSS/JS references/spring-animations.md6 Hover Image Zoom Motion CSS references/hover-zoom.md7 Vertical Ticker Marquee Motion JS references/ticker-marquee.md8 Glassmorphism Surface CSS references/surface-effects.md9 3D Perspective Card Flip Surface CSS references/surface-effects.md10 Bento Grid Surface CSS references/surface-effects.md11 Gradient CTAs Surface CSS references/surface-effects.md12 SVG Gradient Icons Detail SVG references/detail-effects.md13 Inset Border System Detail CSS references/detail-effects.md14 Grid Pattern Overlay Detail CSS references/detail-effects.md15 Custom Scrollbar Detail CSS references/detail-effects.md16 Responsive Clamp Typography Detail CSS references/detail-effects.md
Modes Mode Template Effects Composed heroassets/templates/hero-section.htmlShader gradient + vignette + glassmorphism nav + clamp typography + springs bentoassets/templates/bento-showcase.htmlBento grid + 9-layer shadows + hover zoom + glassmorphism + gradient CTAs tickerassets/templates/ticker-landing.htmlTicker marquee + smooth scroll + gradient CTAs + vignette + SVG icons pageassets/templates/dark-page.htmlAll 16 effects in a full landing page catalogassets/templates/effects-catalog.htmlEach 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.prefers-reduced-motion required.DPR clamp at 1.5 for WebGL canvas. Full DPR for CSS.requestAnimationFrame only.setInterval for animation.overflow: clip over overflow: hiddenInter 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.mdWebGL2 aurora shader: GLSL noise layers, setup, DPR, fallback references/vignette-system.md4-directional CSS gradient overlays, z-index, opacity references/shadow-system.md9-layer shadow recipe, lime/white glow variants references/smooth-scroll.mdLenis-style vanilla JS scroll, lerp math, rAF loop references/spring-animations.md3 cubic-bezier presets, hover transitions references/hover-zoom.mdoverflow:clip + opacity+scale reveal pattern references/ticker-marquee.mdMulti-column vertical ticker, speed variance references/surface-effects.mdGlassmorphism, 3D card flip, bento grid, gradient CTAs references/detail-effects.mdSVG gradient icons, inset borders, grid overlay, scrollbar, clamp typography references/color-system.mdFull palette, CSS custom properties, dark-on-dark elevation references/composability.mdLayer stack, composition recipes, performance budget references/anti-patterns.md16+ anti-patterns with wrong/right code examples references/glass-hero-palette.mdGlass 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).
