用途
Grainient 是一个用于复刻 grainient.supply 视觉语言的技能包，目标是把该站点的 16 种可组合暗色模式效果，生成为不依赖 Framer 的单文件 HTML 页面。效果横跨 WebGL 着色器、CSS 表面、JS 驱动动效与布局模式。
主要能力
效果目录共 16 项，按层级划分：
- Hero 层：WebGL 着色器渐变（WebGL2+GLSL）、暗角叠加（CSS）、9 层盒阴影（CSS）
- Motion 层：平滑滚动（JS）、弹簧动画（CSS/JS）、悬停图片缩放（CSS）、垂直跑马灯（JS）
- Surface 层：玻璃拟态、3D 透视卡片翻转、Bento 网格、渐变 CTA（均为 CSS）
- Detail 层：SVG 渐变图标（SVG）、内嵌边框系统、网格图案叠加、自定义滚动条、响应式 clamp 排版（均为 CSS）
每种效果都有对应的参考文档，按需加载。
使用方式
提供 Python 生成脚本，支持五种模式：
# 生成带极光着色器的 hero 区块
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
脚本参数包括 --mode（hero|bento|ticker|page|catalog）、--accent、--bg、--surface、--output。也可让 Claude 直接基于模板和参考文档生成。
各模式组合的效果：hero 组合着色器渐变、暗角、玻璃拟态导航、clamp 排版与弹簧；bento 组合 Bento 网格、9 层阴影、悬停缩放、玻璃拟态与渐变 CTA；ticker 组合跑马灯、平滑滚动、渐变 CTA、暗角与 SVG 图标；page 包含全部 16 种效果；catalog 逐一演示每种效果并提供控件。
校验脚本：
python3 scripts/validate_grainient.py output.html
检查项包括视口 meta、--grn-* 属性、无框架导入、暗色背景、requestAnimationFrame、prefers-reduced-motion、Inter 字体、overflow:clip；可选检查项包括 WebGL 上下文、wheel 监听、translateY、CSS grid、渐变 CTA、box-shadow 发光、backdrop-filter、暗角。
配色与主题
所有效果读取 --grn-* CSS 自定义属性，可在 :root 覆盖以重新主题化，涵盖背景层级（--grn-bg、--grn-surface、--grn-elevated、--grn-card）、强调色及其透明度变体、文本透明度层级、边框、动效 cubic-bezier、模糊层级与排版。
默认配色为 Lime（--grn-accent: #C2F13C）。另提供 Glass Hero 预设（薄荷/紫罗兰）：薄荷绿 #57FFA8 强调色、紫罗兰 #A78BFA 次要色、偏蓝近黑 #0a0a0c 底色，并包含 Geist 排版令牌与玻璃边缘边框值。
实现规则
- 仅用原生技术，不使用 React、Vue、Svelte、Angular
- 单文件输出，仅通过 CDN 引入 Inter 字体
- 暗色优先，body 为 #000，表面通过 #141414 → #1A1A1A → #2B2B2B 抬升
- 统一使用 --grn-* 令牌，不硬编码颜色
- 每个动画效果必须提供 prefers-reduced-motion 回退
- WebGL 画布 DPR 限制为 1.5，CSS 使用完整 DPR
- 仅用 requestAnimationFrame，不用 setInterval
- 单个容器用 overflow: clip，不用在 body 上
- Inter 字体，开启抗锯齿
适用场景
适合需要快速产出暗色、高质感视觉页面的前端与设计场景，例如 hero 区块、Bento 展示页、跑马灯落地页、完整暗色落地页以及效果演示目录。
限制与注意事项
文档列出了多项反模式：不使用 ease 时间函数；盒阴影不少于 4 层；内嵌边框用 box-shadow 而非 border；backdrop-filter 必须搭配半透明背景；不用 scroll-behavior: smooth 替代 Lenis 式滚动；使用着色器背景时不可省略暗角；排版不硬编码像素值；悬停缩放初始 opacity: 0 需配 pointer-events: none；跑马灯各列速度需有 10-30% 差异；perspective() 容器需 overflow: visible；任何背景不得使用纯白；全屏渐变不用 Three.js，原生 WebGL2 即可。
跨技能关系：rocaille-shader 负责 Three.js 着色器路径；minoan-frontend-design 提供更广的创意方向；threejs-particle-canvas Mode 6（glass-hero）提供带 MeshPhysicalMaterial 折射/色散/虹彩的完整 3D 玻璃版本，而 Grainient 的 glass-hero 配色提供对应的扁平 CSS 版本。
效果解构自 grainient.supply（Framer，2026 年 4 月）。涉及技术：UnicornStudio（WebGL）、Lenis（平滑滚动）、Framer Motion（弹簧动画）、@shadergradient/react（着色器渐变子域）。