[{"data":1,"prerenderedAt":144},["ShallowReactive",2],{"works":3,"work-\u002Fui\u002Fgrain-gradient-cover":71},[4,22,39,55],{"path":5,"title":6,"short":7,"description":8,"cover":9,"date":10,"source":11,"author":12,"authorShort":13,"origin":14,"stack":15,"tags":17,"type":20,"no":21},"\u002Fui\u002Fpaper-scroll","纸张滚动效果","纸张滚动","文字在纸上流动，纸张的边缘与阴影保持原位。","\u002Fimages\u002Fcovers\u002Fpaper.jpg","2026-10-05","https:\u002F\u002Fseg6.space\u002F","seg6.space",null,"recreation",[16],"css",[18,19],"滚动","纸张","ui","001",{"path":23,"title":24,"short":25,"description":26,"cover":27,"date":28,"source":29,"author":30,"authorShort":13,"origin":14,"stack":31,"tags":33,"type":37,"no":38},"\u002Fanimation\u002Fdither-ripple-avatar","抖动像素波纹头像","像素波纹头像","指针划过时像素被推开再弹回，点击激起向外扩散的波环。每个像素都是一个带弹簧的粒子。","\u002Fimages\u002Fcovers\u002Favatar.jpg","2026-10-08","https:\u002F\u002Fadixcode.com\u002F","adixcode.com",[32],"canvas",[34,35,36],"头像","粒子","指针交互","animation","002",{"path":40,"title":41,"short":42,"description":43,"cover":44,"date":45,"source":46,"author":47,"authorShort":48,"origin":14,"stack":49,"tags":50,"type":37,"no":54},"\u002Fanimation\u002Fclaude-micro-interactions","Claude 风格的文字显现与输入框交互","Claude 风格微交互","逐字模糊消解、输入框的悬浮边框，以及聚焦时的双环反馈。","\u002Fimages\u002Fcovers\u002Fclaude.jpg","2026-10-14","https:\u002F\u002Fclaude-storybook.bystanderss.chatgpt.site\u002F","Claude Design System Storybook","Claude Storybook",[16],[51,52,53],"文字动画","输入框","聚焦状态","003",{"path":56,"title":57,"short":13,"description":58,"cover":59,"date":60,"source":61,"author":62,"authorShort":63,"origin":14,"stack":64,"tags":65,"type":20,"no":70},"\u002Fui\u002Fgrain-gradient-cover","颗粒渐变封面","几团糊开的色块，上面撒一层 1px 的灰色颗粒。拆解 ElevenLabs 博客封面的做法，做成一个可以导出图片的生成器。","\u002Fimages\u002Fcovers\u002Fgrain.jpg","2026-10-24","https:\u002F\u002Fx.com\u002Fianneo_ai\u002Fstatus\u002F2113225499556381172","Ian (@ianneo_ai)","X @ianneo_ai",[32],[66,67,68,69],"渐变","噪点","封面","背景","004",{"id":72,"title":57,"author":62,"authorShort":63,"body":73,"cover":59,"date":60,"description":58,"extension":136,"icon":13,"meta":137,"navigation":138,"origin":14,"path":56,"seo":139,"short":13,"source":61,"stack":140,"stem":141,"tags":142,"__hash__":143},"ui\u002Fui\u002Fgrain-gradient-cover.md",{"type":74,"value":75,"toc":131},"minimark",[76,80,83,87,94,105,115,118,121],[77,78,79],"p",{},"先点「去掉颗粒」，再点「加上颗粒」，注意看颜色过渡的地方。也可以切换配色和纹样，点「换一张」重新摆放色块。满意的话可以下载一张 1600×1600 的 PNG。",[81,82],"grain-gradient-cover",{},[84,85,86],"h2",{"id":86},"三层",[77,88,89,93],{},[90,91,92],"strong",{},"底色和色块。"," 底色是一条从上到下的线性渐变：上端浅、偏冷，下端深、偏暖。上面叠 5 团色块，每团是一个径向渐变，半径占画布边长的 45%–70%，不透明度从中心的 95% 按 (1 − t²)² 的曲线淡到 0，用 16 个色标逼近。只放三四个色标的话，色标处衰减速度会突变，看上去是一圈圈的环。色块按颜色从浅到深，分到从上到下的五条横带里，所以随机摆放也不会把深色放到顶上。每套配色只用色环上相邻的颜色。",[77,95,96,99,100,104],{},[90,97,98],{},"颗粒。"," 预先生成一张噪点图，每个 CSS 像素一个随机灰度，用 ",[101,102,103],"code",{},"overlay"," 混合模式盖在最上面。底色低于中灰时，overlay 的变化量和底色亮度成正比，所以颗粒在暗处几乎看不见，在亮处明显。颗粒的不透明度是 14%。",[77,106,107,110,111,114],{},[90,108,109],{},"纹样。"," 白色细线，线宽是边长的 1\u002F600（480px 见方时 0.8px），不透明度 30%，都用参数方程画成折线。射线从中心向四周散开，每条沿垂直方向做正弦摆动，离中心越远摆得越大，摆动相位跟着角度走，相邻射线的走势接近；等高线是以中心为圆心的一圈圈环，一直铺到四角，半径叠加 2、3、5、9 倍角的正弦扰动，合计约 ±5%，轮廓不规则又不会变成多边形；声波是两层横向正弦叠加；点阵是规则网格；透镜是两条二次曲线围成的梭形，横竖相间排成格子。画完后用一个径向渐变以 ",[101,112,113],{},"destination-in"," 合成，把中间擦淡，让出标题的位置。",[84,116,117],{"id":117},"提示词",[77,119,120],{},"复制给 Claude、ChatGPT 或编码 agent，可以复现本页的封面。原推文附的提示词还带色块漂移和悬停柔光，这里没有这两项。",[122,123,129],"pre",{"className":124,"code":126,"language":127,"meta":128},[125],"language-text","用 Canvas 2D 画一张方形封面：几团糊开的色块，上面撒一层细颗粒，正中是白色标题。不用图片，不依赖外部库。\n\n1. 底色：从上到下的线性渐变，上端浅、偏冷，下端深、偏暖。\n2. 色块：5 团径向渐变，颜色从浅到深依次放进从上到下 5 条等高的横带：横向位置在 10%–90% 之间随机，纵向在横带中心上下浮动 8%。半径是边长的 45%–70%。不透明度从中心的 0.95 按 (1 − t²)² 衰减到 0，用 16 个色标逼近；只放三四个色标会在色标处看到一圈圈的环。\n3. 纹样（可选一种）：白色细线，线宽是边长的 1\u002F600，不透明度 0.3。中心在画布正中附近。\n   - 射线：从中心向四周散开 72 条，每条沿垂直方向做正弦摆动，振幅随离中心距离增大，相位取 3 × 角度，让相邻射线走势一致、互不交叉。\n   - 等高线：以中心为圆心的 36 圈环，间距是边长的 2.4%，铺满到四角。半径叠加 2、3、5、9 倍角的小幅正弦扰动，合计约 ±5%，轮廓不规则但不能变成多边形。\n   - 声波：28 条横线，每条叠加两层不同频率的正弦，相邻线相位错开。\n   - 点阵：间距为边长 5% 的规则网格。\n   - 透镜：两条二次曲线围成的梭形，长度是格子边长的 80%，最宽处的一半是长度的 20%。按边长 42% 的格子排列：横的放在格子横边上，竖的放在竖边上，尖端在格点附近相对，互不重叠。\n   纹样画完后，用以画布中心为圆心、半径为边长 60% 的径向渐变做 destination-in 合成：不透明度在 0 处为 0，30% 处为 0.15，75% 及以外为 1，把中间让给标题。\n4. 颗粒：生成一张噪点图，每个 CSS 像素一个随机灰度，灰度取两个随机数相加的三角分布，让大多数颗粒接近中灰。用 overlay 混合、不透明度 0.14 盖在最上面，放大时关闭图像平滑。\n5. 标题：白色，字重 400，字号是边长的 7.5%，行高 1.2，居中；按边长 70% 的宽度换行，最多 3 行。\n6. canvas 的像素尺寸按 devicePixelRatio（最大取 2）设置。\n\n配色（底色上端 → 下端；色块从上到下），只用色环上相邻的颜色：\n- 暮色：#8f93d6 → #e0703c；#7f8fe0 #c88bc8 #d4688c #ec5a3a #f3a63c\n- 沙丘：#90a4ad → #1f0c08；#8fa3ad #a9aea4 #ebc27c #d8581e #2a0f0b\n- 深潮：#d2dde4 → #0b2633；#c9d6df #9cc8b9 #4f8f8a #1f5a6e #0b2633\n- 苔原：#bccbcd → #142a0c；#b9c9cc #c6d0bf #a0b46a #3f6a23 #142a0c\n- 夜航：#b9b4e4 → #120612；#b7b2e3 #e18cc1 #7d40a2 #3a1450 #120612\n- 橘光：#d0d7de → #5a1a0c；#cfd6de #f7c79a #ef6b3e #c2471f #5a1a0c\n","text","",[101,130,126],{"__ignoreMap":128},{"title":128,"searchDepth":132,"depth":132,"links":133},2,[134,135],{"id":86,"depth":132,"text":86},{"id":117,"depth":132,"text":117},"md",{},true,{"title":57,"description":58},[32],"ui\u002Fgrain-gradient-cover",[66,67,68,69],"PxH6GhL_RyQLBvu4tqK0gEoNBZQeHJ45Scm-ATAtYCA",1793078289885]