grainy-gradient 是一个用于生成柔和、高级感渐变背景与封面卡片的前端技能，其视觉参考为 ElevenLabs 博客封面与 macOS 壁纸风格。它的核心做法是：用若干大面积模糊色块叠加形成无硬边的渐变底色，再在整个画面上覆盖一层 1 物理像素的灰色噪点，以打散色带、去除"塑料感"，使结果接近纸张或失焦胶片的质地。
【视觉规则】
- 颜色：4 至 5 个大色块相互重叠，边缘完全模糊，不出现可见形状。
- 方向：画面上部偏亮偏冷，下部偏暗偏暖，类似天空与地面的关系。
- 配色：只使用色轮上相邻的类似色；示例为蓝灰到沙黄到橙红，绿色只与蓝色和黄色搭配。
- 颗粒：最关键的一层，1 物理像素的灰色噪点在亮部明显、在暗部几乎消失。
- 可选图案：最上层可加细白线条，如射线、同心等高线、声波线、点阵、透镜形。
【构建方式】
- 基础层：一个自上而下的线性渐变，顶部亮冷、底部暗暖。
- 色块层：叠加 4 个淡出为透明的大径向渐变，放置于角落与边缘而非中心。
- 颗粒层：在 canvas 上绘制 128x128 随机灰度噪点图块，平铺覆盖整个区域，使用 mix-blend-mode: overlay 与 opacity: 0.4；canvas 按 devicePixelRatio 设置尺寸，保证 1 噪点像素对应 1 物理像素。
- 图案层（可选）：内联 SVG 白线，线宽 0.8px、透明度约 0.3，并用径向 mask-image 让中心保持干净以放置文字。
- 文字：白色居中，Inter 400，字号约为卡片宽度的 8%，最多两行。
- 卡片：圆角 20px，内侧 0.5px 淡黑色边框。
- 动效（可选）：色块以 20 至 28 秒的 CSS 动画缓慢漂移和缩放；悬停时色块朝光标移动，图案小幅反向移动，光标处淡入柔光；使用弹簧参数（stiffness 70、damping ratio 0.86）实现平滑启停，离开后回归静止。
- 无障碍：在 prefers-reduced-motion 下关闭全部动效。
【调参要点】
- 颗粒取值范围不要用完整 0 至 255，保持在 128 加减 70 左右；完整范围在 overlay 0.4 下过重，会让饱和色出现斑点。
- 色块按各自色带高度摆放：冷色放在顶部角落，最亮的强调色放在侧边中部高度，最暗的暖色放在底边之下。
- 底部 15% 至 20% 保持暗色；基础渐变使用多个色标（如 0、30、55、78、100%），而非只有两端颜色。
- 色块尺寸约为卡片的 90% 至 100%，径向渐变分多个色标淡出到 0 alpha，并加约 15 至 20px 的轻微模糊。
- 图案遮罩约为 radial-gradient(ellipse 50% 46%, transparent 30%, #000 100%)。
- 射线原点应放在卡片下方较远处，否则线条会挤成杂乱的一点。
- 透镜形使用 12 个或更多，沿边缘分布。
- 悬停位移：色块约移动卡片宽度的 9%，图案反向约 3%；弹簧作用在外层 wrapper 上，避免与色块自身的 CSS 漂移动画冲突。
- 参考图中的图案顺序：第 2 张射线、第 3 张同心等高线、第 4 张声波线、第 5 张点阵、第 6 张透镜。
【内置调色方案】（自上而下） 紫粉到橙金；灰蓝到深棕；雾蓝到深海蓝；雾蓝到墨绿；薰衣草到午夜紫；天灰到锈红。
【可复制提示词摘要】 构建一个 3x2 的方形封面卡片墙，HTML + CSS + Canvas 实现，每张卡片中央只有两行白色英文文字，背景为带颗粒的柔和渐变，不使用图片。卡片圆角 20px，内侧 0.5px 淡黑边框，文字 Inter 400、字号为卡片宽度的 8% 并居中。背景先是一个自上而下的线性渐变（上亮冷、下暗暖），再叠加 4 个边缘淡出的大径向渐变色块，位于角落与边缘，只使用色轮相邻色，每张卡片一组上述配色。用 canvas 生成 128x128 灰度随机噪点并平铺，overlay 混合、透明度 0.4，按 devicePixelRatio 缩放。第 2 至 6 张卡片依次添加细白 SVG 线条图案：射线、同心等高线、声波线、点阵、透镜；线宽 0.8px、透明度约 0.3，用径向遮罩保持中心清爽。色块以 CSS 动画在 20 至 28 秒内缓慢漂移缩放；悬停时色块朝光标偏移、图案小幅反向偏移，光标处淡入柔光，离开回归；使用弹簧（stiffness 70、damping ratio 0.86）。prefers-reduced-motion 开启时关闭全部动效。输出单个 HTML 文件，不依赖外部库。
【适配与交付检查】
- 可将配色换成品牌色，但需保留类似色规则以及"上亮冷、下暗暖"的结构。
- 用于视频或静态导出时保留颗粒，并按最终像素尺寸渲染，使颗粒保持 1px。
- 交付前放大到 200% 检查：颗粒应细腻均匀、无可见色带；色块无硬边；每张卡片最多 3 个色系家族；文字在最亮区域仍可读。
技能目录中的 examples/index.html 提供了可运行的示例。