[{"data":1,"prerenderedAt":388},["ShallowReactive",2],{"works":3,"work-\u002Fanimation\u002Fclaude-micro-interactions":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":41,"author":47,"authorShort":48,"body":73,"cover":44,"date":45,"description":43,"extension":381,"icon":13,"meta":382,"navigation":332,"origin":14,"path":40,"seo":383,"short":42,"source":46,"stack":384,"stem":385,"tags":386,"__hash__":387},"animation\u002Fanimation\u002Fclaude-micro-interactions.md",{"type":74,"value":75,"toc":375},"minimark",[76,80,85,102,105,116,179,183,186,193,196,199,203,218,345,348,357,360,363,371],[77,78,79],"p",{},"有些界面的顺滑感，来自很小的细节：文字如何出现，按钮何时变得可用，输入框如何回应焦点。这篇文章把两个效果拆成可以直接操作的演示。",[81,82,84],"h2",{"id":83},"grapheme-reveal文字从模糊到清晰","Grapheme Reveal：文字从模糊到清晰",[77,86,87,88,92,93,97,98,101],{},"点击「重新播放」，观察文字的边缘。每个字符用 ",[89,90,91],"strong",{},"90ms"," 从 ",[94,95,96],"code",{},"blur(6px)"," 消解到清晰，同时由透明变为可见。相邻字符默认错开 ",[89,99,100],{},"30ms","，所以整句话像一条波浪展开。",[103,104],"grapheme-reveal-demo",{},[77,106,107,108,111,112,115],{},"试着调节字符间隔，或输入中文、英文和 emoji。这里按照字素拆分文字，",[94,109,110],{},"👨‍👩‍👧‍👦"," 和 ",[94,113,114],{},"👍🏽"," 都会作为一个单元出现。演示播放的是已有文字，并没有连接流式接口。",[117,118,122],"pre",{"className":119,"code":120,"language":16,"meta":121,"style":121},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* 每个字符的 delay = index × 字符间隔 *\u002F\nanimation: grapheme-reveal 90ms cubic-bezier(0.215, 0.61, 0.355, 1) both;\n","",[94,123,124,133],{"__ignoreMap":121},[125,126,129],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"sHwdD","\u002F* 每个字符的 delay = index × 字符间隔 *\u002F\n",[125,134,136,140,144,147,151,154,157,160,162,165,167,169,171,174,176],{"class":127,"line":135},2,[125,137,139],{"class":138},"sTEyZ","animation: ",[125,141,143],{"class":142},"sBMFI","grapheme-reveal",[125,145,146],{"class":138}," 90ms cubic-bezier(0",[125,148,150],{"class":149},"sMK4o",".",[125,152,153],{"class":142},"215",[125,155,156],{"class":149},",",[125,158,159],{"class":138}," 0",[125,161,150],{"class":149},[125,163,164],{"class":142},"61",[125,166,156],{"class":149},[125,168,159],{"class":138},[125,170,150],{"class":149},[125,172,173],{"class":142},"355",[125,175,156],{"class":149},[125,177,178],{"class":138}," 1) both;\n",[81,180,182],{"id":181},"chat-composer从悬浮到聚焦","Chat Composer：从悬浮到聚焦",[77,184,185],{},"先把鼠标移到下面的输入框上，观察边框轻微加深；再点击输入框，内环和外环一起变得清晰，外部弥散阴影也随之增强。移走鼠标后，只要焦点还在输入框里，聚焦反馈就会保留。",[77,187,188,189,192],{},"点击文章的其他位置后，输入框回到默认状态；如果鼠标仍在框内，则回到悬浮状态。三种状态之间使用 ",[89,190,191],{},"200ms"," 的过渡。",[194,195],"chat-composer-demo",{},[77,197,198],{},"输入文字后，陶土色发送按钮从淡色变为可用。点击发送，会在演示下方显示这条消息；刷新页面后内容消失。焦点留在发送按钮上时，双环反馈也会保留。",[81,200,202],{"id":201},"双环聚焦的呼吸体现在哪里","双环聚焦的「呼吸」体现在哪里",[77,204,205,206,209,210,213,214,217],{},"这里的呼吸感来自焦点进入与离开时的阴影变化，不会持续循环。圆角保持 ",[89,207,208],{},"20px","，组件通过 CSS ",[94,211,212],{},":hover"," 响应鼠标悬浮，通过 ",[94,215,216],{},":focus-within"," 响应内部控件的焦点。悬浮态轻于聚焦态，触屏设备不启用鼠标悬浮效果。",[117,219,221],{"className":119,"code":220,"language":16,"meta":121,"style":121},"\u002F* 聚焦状态：一层柔和投影，加上内外各 1px 的环。 *\u002F\nbox-shadow:\n  0 0.25rem 1.25rem rgba(0, 0, 0, 0.075),\n  inset 0 0 0 1px rgba(0, 0, 0, 0.16),\n  0 0 0 1px rgba(0, 0, 0, 0.16);\n\ntransition: box-shadow 200ms;\n",[94,222,223,228,236,277,302,327,334],{"__ignoreMap":121},[125,224,225],{"class":127,"line":128},[125,226,227],{"class":131},"\u002F* 聚焦状态：一层柔和投影，加上内外各 1px 的环。 *\u002F\n",[125,229,230,233],{"class":127,"line":135},[125,231,232],{"class":142},"box-shadow",[125,234,235],{"class":138},":\n",[125,237,239,242,244,247,250,252,254,257,259,261,263,265,267,269,271,274],{"class":127,"line":238},3,[125,240,241],{"class":138},"  0 0",[125,243,150],{"class":149},[125,245,246],{"class":142},"25rem",[125,248,249],{"class":138}," 1",[125,251,150],{"class":149},[125,253,246],{"class":142},[125,255,256],{"class":138}," rgba(0",[125,258,156],{"class":149},[125,260,159],{"class":138},[125,262,156],{"class":149},[125,264,159],{"class":138},[125,266,156],{"class":149},[125,268,159],{"class":138},[125,270,150],{"class":149},[125,272,273],{"class":142},"075",[125,275,276],{"class":138},"),\n",[125,278,280,283,285,287,289,291,293,295,297,300],{"class":127,"line":279},4,[125,281,282],{"class":138},"  inset 0 0 0 1px rgba(0",[125,284,156],{"class":149},[125,286,159],{"class":138},[125,288,156],{"class":149},[125,290,159],{"class":138},[125,292,156],{"class":149},[125,294,159],{"class":138},[125,296,150],{"class":149},[125,298,299],{"class":142},"16",[125,301,276],{"class":138},[125,303,305,308,310,312,314,316,318,320,322,324],{"class":127,"line":304},5,[125,306,307],{"class":138},"  0 0 0 1px rgba(0",[125,309,156],{"class":149},[125,311,159],{"class":138},[125,313,156],{"class":149},[125,315,159],{"class":138},[125,317,156],{"class":149},[125,319,159],{"class":138},[125,321,150],{"class":149},[125,323,299],{"class":142},[125,325,326],{"class":138},");\n",[125,328,330],{"class":127,"line":329},6,[125,331,333],{"emptyLinePlaceholder":332},true,"\n",[125,335,337,340,342],{"class":127,"line":336},7,[125,338,339],{"class":138},"transition: ",[125,341,232],{"class":142},[125,343,344],{"class":138}," 200ms;\n",[77,346,347],{},"可以用站点的主题按钮查看深色效果。系统开启「减少动态效果」时，文字直接完整显示，输入框保留聚焦反馈并关闭动画过渡。",[77,349,350,351,356],{},"参考：",[352,353,47],"a",{"href":46,"rel":354},[355],"nofollow","。两个演示依据该参考站的参数改写为 Vue 组件，悬浮边框状态为本演示补充；它们与官方 Claude 的一致性未作验证。",[81,358,359],{"id":359},"提示词",[77,361,362],{},"复制给 Claude、ChatGPT 或编码 agent，可以复现本页的两个效果。",[117,364,369],{"className":365,"code":367,"language":368,"meta":121},[366],"language-text","实现两个 Claude 风格的微交互，用原生 HTML\u002FCSS\u002FJS 或任意前端框架都可以。\n\n一、逐字显现\n1. 用 Intl.Segmenter（granularity: \"grapheme\"）把文字拆成字素，每个字素包进一个 display: inline-block、white-space: pre 的 span，这样 emoji 组合（👨‍👩‍👧‍👦、👍🏽）和带重音的字母不会被拆开。另放一份完整文本给屏幕阅读器，拆开的 span 所在容器设 aria-hidden。\n2. 每个字素播放动画：从 opacity 0、filter: blur(6px) 到 opacity 1、blur(0)，时长 90ms，缓动 cubic-bezier(0.215, 0.61, 0.355, 1)，fill-mode 为 both。第 i 个字素的 animation-delay = i × 30ms。\n3. 重新播放：重新创建这组节点（比如换掉外层元素的 key），不用定时器。\n4. prefers-reduced-motion 时关闭动画，文字直接完整显示。\n\n二、聊天输入框\n1. 结构：一个 form，圆角 20px，内边距 14px，纵向排列、间距 8px。上面是无边框、透明背景的 textarea（3 行，最小高 72px，最大高 240px，字号 15px，行高 1.5，只能纵向拉伸，去掉 outline）；下面一行左边是小号品牌文字，右边是 32×32、圆角 8px 的发送按钮（背景 #d97757，悬浮 #cc5a36，按下 scale(0.95)）。\n2. 边框全部用 box-shadow 画，box-shadow 过渡 200ms。定义变量 --ring（浅色模式 0, 0, 0；深色模式 255, 255, 255）：\n   - 默认：0 0.25rem 1.25rem rgb(0 0 0 \u002F 0.035), inset 0 0 0 1px rgba(var(--ring), 0.08)\n   - 悬浮：投影 0.055，内环 0.12。只写在 @media (hover: hover) and (pointer: fine) 里，避免触屏出现粘住的悬浮态。\n   - 聚焦（:focus-within）：投影 0.075，内环 inset 0 0 0 1px 和外环 0 0 0 1px 都是 0.16。写在悬浮规则之后，聚焦时优先显示双环，移走指针也保持。\n   深色模式下三档环的透明度分别是 0.12、0.18、0.24。\n3. 输入内容去掉首尾空白后为空时，发送按钮 disabled，opacity 0.2。\n4. prefers-reduced-motion 时去掉所有过渡和按下缩放，保留聚焦双环。\n","text",[94,370,367],{"__ignoreMap":121},[372,373,374],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":121,"searchDepth":135,"depth":135,"links":376},[377,378,379,380],{"id":83,"depth":135,"text":84},{"id":181,"depth":135,"text":182},{"id":201,"depth":135,"text":202},{"id":359,"depth":135,"text":359},"md",{},{"title":41,"description":43},[16],"animation\u002Fclaude-micro-interactions",[51,52,53],"xozuSgWjxUymn71kVQgygViU100uJuE2bI6bRB7eqSs",1793078289885]