[{"data":1,"prerenderedAt":125},["ShallowReactive",2],{"works":3,"work-\u002Fui\u002Fpaper-scroll":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":6,"author":12,"authorShort":13,"body":73,"cover":9,"date":10,"description":8,"extension":117,"icon":13,"meta":118,"navigation":119,"origin":14,"path":5,"seo":120,"short":7,"source":11,"stack":121,"stem":122,"tags":123,"__hash__":124},"ui\u002Fui\u002Fpaper-scroll.md",{"type":74,"value":75,"toc":113},"minimark",[76,80,83,86,95,99,102],[77,78,79],"p",{},"把鼠标放在下面的纸张里滚动，或在触屏上滑动。留意纸张上下边缘：文字经过，边框和阴影停留。",[81,82],"paper-scroll-demo",{},[77,84,85],{},"这个演示有自己的滚动区域。你也可以点击纸张后，用方向键或 Page Down 阅读；切换导航上的主题按钮，可以查看深色效果。",[77,87,88,89,94],{},"灵感来自 ",[90,91,12],"a",{"href":11,"rel":92},[93],"nofollow","，使用 Vue 组件与局部 CSS 实现。",[96,97,98],"h2",{"id":98},"提示词",[77,100,101],{},"复制给 Claude、ChatGPT 或编码 agent，可以复现本页的纸张窗口。",[103,104,110],"pre",{"className":105,"code":107,"language":108,"meta":109},[106],"language-text","做一个「纸张滚动」阅读窗口：固定高度的区域里有一张纸，滚动时文字在纸上经过，纸的边框、阴影和四周的桌面留白停在原处。只用 HTML 和 CSS，目录高亮用少量 JS。\n\n1. 外层滚动容器：高度 clamp(420px, 65svh, 620px)，overflow: auto，overscroll-behavior: contain，内边距 16px（记为 --gap），背景是桌面色，隐藏滚动条，isolation: isolate，加 tabindex=\"0\" 让键盘也能滚动。\n2. 容器里是一篇很长的文章，这才是真正滚动的内容。它的最小高度 = 容器高度 − 2 × 16px（记为纸张高度）。背景用横向线性渐变画出纸：两侧各 --side 宽是桌面色（大屏 120px，小屏 0），中间是纸色。\n3. 文章最前面放一个装饰层：position: sticky; top: 0; z-index: 2；高度等于纸张高度，margin-bottom 取负的纸张高度，让它不占文档流；pointer-events: none。装饰层里有两样东西：\n   - 遮罩：一个 3×3 网格，向外扩出 16px 盖住容器内边距，铺满整个容器。上、下两条和左、右两块填桌面色，中间格留空。文字滚到纸外时被它盖住。\n   - 纸框：position: absolute; inset: 0 var(--side)；1px 边框 rgb(20 20 16 \u002F 8%)；阴影 0 1px 2px rgb(20 20 16 \u002F 8%), 0 14px 35px rgb(20 20 16 \u002F 18%)。\n4. 配色：浅色模式桌面 #cacac6、纸 #fffefb、文字 #10100f；深色模式桌面 #111210、纸 #1b1c19、文字 #e9e7df。正文用衬线体（Georgia, \"Songti SC\", serif），字号 14px，行高 1.85，版心最宽 720px，左右内边距 28px。\n5. 目录（可选）：大屏放在右侧 --side 栏里，sticky 置顶。滚动时把容器顶部往下 100px 当作阅读线，最后一个越过阅读线的章节标题高亮；滚到底时直接高亮最后一章。点击目录平滑滚动到对应章节，prefers-reduced-motion 时直接跳转。\n","text","",[111,112,107],"code",{"__ignoreMap":109},{"title":109,"searchDepth":114,"depth":114,"links":115},2,[116],{"id":98,"depth":114,"text":98},"md",{},true,{"title":6,"description":8},[16],"ui\u002Fpaper-scroll",[18,19],"8Pwh-ODlFhpp9Gl295xl8l7ZOwjYGNPKMyuv-VDd8sU",1793078289886]