[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"works":3,"work-\u002Fui\u002Fshiro-header-nav":156,"works-reading":235},[4,28,45,62,78,96,112,128,144],{"path":5,"title":6,"short":7,"description":8,"cover":9,"date":10,"source":11,"author":11,"authorShort":11,"origin":12,"stack":13,"tags":19,"link":24,"repo":11,"team":25,"type":26,"no":27},"\u002Fproject\u002Fmaintpilot","MaintPilot：设备检修 AI 诊断系统","MaintPilot","设备检修的 AI 诊断系统，答案能追溯到手册页码。以维修手册和故障案例为知识源，从一句故障描述走到一张能执行的作业单。","\u002Fimages\u002Fcovers\u002Fmaintpilot.webp","2026-05-22",null,"original",[14,15,16,17,18],"Vue 3","Go","Python","PostgreSQL","pgvector",[20,21,22,23],"项目","RAG","多 Agent","全栈","https:\u002F\u002Fmaintpilot.lzwcc.xyz\u002Fwelcome","两人合作：我负责前端和部署，同学负责后端和 AI 服务","project","P01",{"path":29,"title":30,"short":31,"description":32,"cover":33,"date":34,"source":35,"author":36,"authorShort":11,"origin":37,"stack":38,"tags":40,"type":43,"no":44},"\u002Fui\u002Fpaper-scroll","纸张滚动效果","纸张滚动","文字在纸上流动，纸张的边缘与阴影保持原位。","\u002Fimages\u002Fcovers\u002Fpaper.webp","2026-10-05","https:\u002F\u002Fseg6.space\u002F","seg6.space","recreation",[39],"css",[41,42],"滚动","纸张","ui","001",{"path":46,"title":47,"short":48,"description":49,"cover":50,"date":51,"source":52,"author":53,"authorShort":11,"origin":37,"stack":54,"tags":56,"type":60,"no":61},"\u002Fanimation\u002Fdither-ripple-avatar","抖动像素波纹头像","像素波纹头像","指针划过时像素被推开再弹回，点击激起向外扩散的波环。每个像素都是一个带弹簧的粒子。","\u002Fimages\u002Fcovers\u002Favatar.webp","2026-10-08","https:\u002F\u002Fadixcode.com\u002F","adixcode.com",[55],"canvas",[57,58,59],"头像","粒子","指针交互","animation","002",{"path":63,"title":64,"short":65,"description":66,"cover":67,"date":68,"source":69,"author":70,"authorShort":71,"origin":37,"stack":72,"tags":73,"type":60,"no":77},"\u002Fanimation\u002Fclaude-micro-interactions","Claude 风格的文字显现与输入框交互","Claude 风格微交互","逐字模糊消解、输入框的悬浮边框，以及聚焦时的双环反馈。","\u002Fimages\u002Fcovers\u002Fclaude.webp","2026-10-14","https:\u002F\u002Fclaude-storybook.bystanderss.chatgpt.site\u002F","Claude Design System Storybook","Claude Storybook",[39],[74,75,76],"文字动画","输入框","聚焦状态","003",{"path":79,"title":80,"short":81,"description":82,"cover":83,"date":84,"source":11,"author":11,"authorShort":11,"origin":12,"stack":85,"tags":90,"link":93,"repo":94,"team":11,"type":26,"no":95},"\u002Fproject\u002Fniwa","Niwa：一方安静的新标签页","Niwa","我给自己写的浏览器新标签页扩展：随节气和时辰变化的山水，快捷方式和小组件自由摆放。没有服务器，数据只存在自己的浏览器里。已上架 Edge 扩展商店，MIT 开源。","\u002Fimages\u002Fcovers\u002Fniwa.webp","2026-10-19",[86,87,88,89],"WXT","React","TypeScript","Remotion",[20,91,92],"浏览器扩展","开源","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fniwa\u002Faonnmkpdcdkcfhcionbpmigmfbjcmnec","https:\u002F\u002Fgithub.com\u002FLZWcc\u002FNiwa","P02",{"path":97,"title":98,"short":99,"description":100,"cover":101,"date":102,"source":11,"author":11,"authorShort":11,"origin":12,"stack":103,"tags":107,"link":11,"repo":110,"team":11,"type":26,"no":111},"\u002Fproject\u002Ftoken-stats","token-stats：汇总几台机器的 AI 编程用量","token-stats","统计我在几台机器上用了多少 Claude Code 和 Codex 的 token，画成 GitHub 主页上的卡片。服务器上什么都不用装，只依赖 Python 标准库。","\u002Fimages\u002Fcovers\u002Ftoken-stats.webp","2026-10-23",[16,104,105,106],"SQLite","SVG","GitHub Actions",[20,108,109,92],"命令行工具","数据可视化","https:\u002F\u002Fgithub.com\u002FLZWcc\u002Ftoken-stats","P03",{"path":113,"title":114,"short":11,"description":115,"cover":116,"date":117,"source":118,"author":119,"authorShort":120,"origin":37,"stack":121,"tags":122,"type":43,"no":127},"\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",[55],[123,124,125,126],"渐变","噪点","封面","背景","004",{"path":129,"title":130,"short":11,"description":131,"cover":132,"date":133,"source":134,"author":135,"authorShort":11,"origin":37,"stack":136,"tags":138,"type":43,"no":143},"\u002Fui\u002Fshiro-header-nav","Shiro 的顶部导航","毛玻璃胶囊导航：鼠标经过时有一团光斑跟着走，切换选中项时图标和底部细线一起滑过去。复刻自 Innei 的博客主题 Shiro。","\u002Fimages\u002Fcovers\u002Fshiro.webp","2026-10-27","https:\u002F\u002Fgithub.com\u002FInnei\u002FShiro","Innei",[137],"motion-v",[139,140,141,142],"导航","共享布局动画","毛玻璃","光斑","005",{"path":145,"title":146,"short":11,"description":147,"cover":148,"date":149,"source":11,"author":11,"authorShort":11,"origin":12,"stack":150,"tags":151,"type":43,"no":155},"\u002Fui\u002Fseal-watermark-card","校徽水印卡","一列写学校的卡片，右半边铺一枚圆形校徽做水印，只露出校徽中间一条横带。来自我博客旧首页的「教育」卡片。","\u002Fimages\u002Fcovers\u002Fseal.webp","2026-10-29",[39],[152,153,154],"卡片","水印","校徽","006",{"id":157,"title":130,"author":135,"authorShort":11,"body":158,"cover":132,"date":133,"description":131,"extension":227,"icon":11,"meta":228,"navigation":229,"origin":37,"path":129,"seo":230,"short":11,"source":134,"stack":231,"stem":232,"tags":233,"__hash__":234},"ui\u002Fui\u002Fshiro-header-nav.md",{"type":159,"value":160,"toc":222},"minimark",[161,165,168,172,179,194,200,203,206,209,212],[162,163,164],"p",{},"把鼠标移到导航上来回划，注意光斑跟着指针走；再点不同的项，看图标是怎么从上一项\"搬\"过来的，底部那条细线也一起滑过去。切换深色模式，主题色会从青蓝换成粉色。",[166,167],"shiro-header-nav",{},[169,170,171],"h2",{"id":171},"三处细节",[162,173,174,178],{},[175,176,177],"strong",{},"光斑。"," 胶囊里铺一层径向渐变，圆心是鼠标在导航里的坐标，半径是导航对角线的 1\u002F2.5，颜色是主题色 12% 的不透明度，到半径的 65% 处完全透明。鼠标移入后 0.5 秒淡入，移出后淡出。鼠标移动时只改三个 CSS 变量，不触发组件重新渲染。",[162,180,181,184,185,189,190,193],{},[175,182,183],{},"图标搬家。"," 只有选中项显示图标。图标和底部细线各自只渲染在选中项里，用同一个 ",[186,187,188],"code",{},"layoutId","，切换时 motion-v 会把它从旧位置补间到新位置，图标的内容立刻换成新的。文字加了 ",[186,191,192],{},"layout","，图标离开时左移让位，图标到来时右移腾地方。这几处动画都是弹簧，时长 0.4 秒、不回弹，是 Shiro 全局的默认设定。",[162,195,196,199],{},[175,197,198],{},"胶囊。"," 从上到下由 70% 不透明的浅灰过渡到 90% 不透明的白，1px 描边、很淡的阴影，加 12px 的毛玻璃。底部细线 1px，两头渐隐到透明，中间是主题色 70%。字号 14px、字重 500，选中项文字变成主题色，悬停是主题色 80%。",[162,201,202],{},"原站上还有两样这里没做：「时光」「更多」悬停时会弹出毛玻璃的子菜单；页面往下滚约 200px 后导航逐渐淡出，滚过 600px 再往上滚，屏幕顶部会浮出一份同样的导航。",[162,204,205],{},"开启「减少动态效果」时，图标和细线直接跳到新位置，光斑没有淡入淡出。",[169,207,208],{"id":208},"提示词",[162,210,211],{},"复制给 Claude、ChatGPT 或编码 agent，可以复现本页的导航。和原站相比，没有子菜单和滚动时的显隐。",[213,214,220],"pre",{"className":215,"code":217,"language":218,"meta":219},[216],"language-text","用 Vue 3 + motion-v 写一个胶囊形的顶部导航（也可以用 React + motion，API 对应）。点击只切换选中项。\n\n1. 结构：nav（相对定位、圆角 9999px）里放一层光斑和一排按钮，左右各留 14px。每个按钮 padding 7px 14px，字号 14px、字重 500，不换行。\n2. 胶囊外观：背景从上到下 rgba(250,250,250,0.7) → rgba(255,255,255,0.9)；box-shadow 叠 1px 描边 rgba(24,24,27,0.05)、0 10px 15px -3px 和 0 4px 6px -4px 两层 rgba(39,39,42,0.05)；backdrop-filter: blur(12px)。深色：背景 rgba(24,24,27,0.7) → rgba(39,39,42,0.9)，描边 rgba(244,244,245,0.1)。\n3. 主题色：浅色 #33a6b8，深色 #f596aa。文字默认 #27272a（深色 #e4e4e7），悬停主题色 80%，选中主题色，颜色过渡 200ms。\n4. 光斑：nav 内一个 inset: -1px 的绝对定位层，背景 radial-gradient(R circle at X Y, 主题色 12% 不透明, transparent 65%)。mousemove 时 X、Y 取鼠标相对 nav 的坐标，R = hypot(nav 宽, nav 高) \u002F 2.5，写进 CSS 变量，不要走响应式状态。默认 opacity 0，nav:hover 时 1，transition 500ms。\n5. 图标：只在选中项里渲染，放在文字左边，右边距 7px，外层是带 layoutId 的 motion 元素，固定 14×14。所有项的文字包一层带 layout 的 motion 元素，图标进出时文字平滑让位。\n6. 底部细线：只在选中项里渲染，绝对定位 left\u002Fright 3.5px、bottom -1px、高 1px，背景横向渐变 透明 → 主题色 70% → 透明，同样用 layoutId。\n7. 动画：layout 和 layoutId 都用 spring，duration 0.4、bounce 0。外面包 LayoutGroup 并给唯一 id，页面上有多个导航时 layoutId 不会串。\n8. prefers-reduced-motion：transition 改成 duration 0，光斑和文字颜色不做过渡。\n\n容易做错的地方：图标要真的只渲染在选中项里，而不是每项都有、用透明度切换，否则没有\"搬家\"的效果；图标框要固定尺寸，按需加载的图标在第一帧宽度是 0，下一帧撑开时会把后面的文字推一下，切换时看起来像抖动；光斑如果用响应式状态更新，每次鼠标移动都会让整个组件重新渲染。\n","text","",[186,221,217],{"__ignoreMap":219},{"title":219,"searchDepth":223,"depth":223,"links":224},2,[225,226],{"id":171,"depth":223,"text":171},{"id":208,"depth":223,"text":208},"md",{},true,{"title":130,"description":131},[137],"ui\u002Fshiro-header-nav",[139,140,141,142],"TIWnvJCXnvNcX3MeyddQvc778Fgzbp82wI8lFgwswsA",{"\u002Fui\u002Fcontent-routing":236,"\u002Fui\u002Fgrain-gradient-cover":223,"\u002Fui\u002Fpaper-scroll":236,"\u002Fui\u002Fseal-watermark-card":223,"\u002Fui\u002Fshiro-header-nav":223,"\u002Fanimation\u002Fclaude-micro-interactions":237,"\u002Fanimation\u002Fdither-ripple-avatar":236,"\u002Fproject\u002Fmaintpilot":238,"\u002Fproject\u002Fniwa":223,"\u002Fproject\u002Ftoken-stats":223},1,7,3,1793265917958]