灵感
收集好手感的交互与界面
这里暂时空空如也
换个分类或交互方式看看。
收集好手感的交互与界面
Price Odometer
在月付和年付之间切换，价格的每一位都是一条 0–9 的数字带，各自滚到新值：有的向上、有的向下，彼此错开几十毫秒，"省 20%"徽标随后弹出。
60px 的竖列，只用 translateY(-n × 60px) 定位。弹簧（duration: 0.8, bounce: 0.2）会略微越过目标再退回，像机械表盘停稳的那一下。45ms，滚动途中叠一层 blur(1.5px) 的运动模糊，上下边缘用 mask-image 渐隐，数字像是从卡槽里转出来的。tabular-nums 让每一位等宽，切换时整行不会左右晃。springs.snappy 平移；“省 20%“从 scale(0.7) 以带过冲的曲线弹入，并延迟 120ms，等数字先动起来再出场。副标题同步模糊切换成年付总价。Scroll Story
一个真的可以滚动的迷你落地页：标题逐行从基线揭开，图片随滚动从圆角小框展开到满幅，数字在吸顶区块里一路数上去，右侧细线记录阅读进度。
scrollTop 推导：scroll 事件只打一个标记，真正的计算放进 rAF，一帧最多算一次。clip-path: inset(12% round 22px) 线性收到 inset(0 round 0)，内层同时 scale(1.08 → 1)，裁切与缩放反向抵消，画面像是被推到眼前，而不是被放大。position: sticky 钉住 160px 的滚动距离，计数比钉住稍早开始、在释放时刚好数完，三个数字之间再错开 0.14 的进度。clip-path 从下往上揭开并带 0.34em 上浮，110ms 错峰；滚动时首屏以 0.32× 的速度视差下沉并淡出，把注意力交给下一屏。Dynamic Island
锁屏顶部一颗会呼吸的黑色药丸：计时器让它长出紧凑态，轻点展开成音乐播放器，再点收回，放着不管又会自己缩回原形。
bounce: 0.25）一起驱动，三者同步过冲、同步回落，读起来是一块有弹性的整体，而不是三段各走各的动画。120ms 立即淡出，入场晚 60ms 才从 blur(6px) 清晰起来——内容永远跟在容器后面，早于容器离开。40ms 错峰浮现；背后的锁屏时钟同时 blur(6px)、缩到 0.96 退后一步，把注意力让给前景。tabular-nums，读数跳动时宽度纹丝不动。Stacked Toasts
Sonner 风格的通知堆栈：新通知从底部升起，旧的缩小后退只露一条边；指针一放上去整叠展开成列表，计时暂停，往下一甩就能关掉。
transition（transform 400ms ease）而不是 keyframes：连点三下时每一条都在半路被重新定向，过渡能从当前位置平滑接上，keyframes 只会从头重播。scale(0.95) / scale(0.9) 并上移 14px，内容淡到 opacity: 0，只留卡片边缘；最多露出 3 条，再多就隐去，不让堆栈变成一面墙。8px，每条用 ::after 伪元素把上方的缝补上——指针从一条移到另一条时不会“掉出”悬停区，列表也就不会闪一下收回去。45px 或速度大于 0.11px/ms 即关闭，轻轻一甩就够，反方向拖动则越拉越沉。Hold to Delete
危险操作不弹确认框，而是让你按住 1.6 秒。红色从左向右漫过按钮，松手即回弹取消；填满后按钮收窄成"已删除"，片刻后自动复原。
clip-path: inset(0 100% 0 0) → inset(0 0 0 0) 揭开。两层像素完全重合，文字颜色是被逐像素“擦”过去的，任何颜色插值都做不到这么干净。1.6s linear，松开走 200ms ease-out：用户犹豫时慢，系统回应时快。线性进度可预期，你能判断“还差多少”。scale(0.97)；填满的一瞬间用带过冲的 cubic-bezier(0.34, 1.56, 0.64, 1) 弹回原大，手指还没松开就知道已经完成。184px 收到 136px；1.5 秒后文案先模糊交换，底色再以 ease-in-out 退回。键盘按住空格或回车同样生效。Text Scramble Hero
深色落地页首屏：标题逐字从一串等宽符号里"解码"出来，从左到右错峰落定；指针扫过哪个词，哪个词就重新洗一遍牌。
::after 叠在上面绘制，所以解码全程零重排，邻居字母一像素都不会被挤动。26ms 错峰再加 0–60ms 随机抖动，每个字符各自乱跳 240–560ms，波前不是一把尺子，更像信号在逐步锁定。#c7f94f，落定时用 200ms 颜色过渡从透明浮现，“机器噪声 → 显示字体”的反差就是这个效果的记忆点。dt 累加而不是读系统时间，卡片滚出视口暂停后再回来，解码会从停下的那一帧接着走。Command Palette
毛玻璃的 ⌘K 面板：输入即时模糊过滤并高亮命中的字，鼠标移动时高亮块轻轻滑过去，键盘上下则直接跳到位；回车后当前项闪一下，底栏报出执行结果。
transform 120ms 滑动，让眼睛跟得上；方向键移动时 transition: none 瞬移——高频的键盘操作加动画只会显得迟钝。backdrop-filter: blur(22px) saturate(1.7) 加 1px 内高光，背后放了色块和点阵，毛玻璃才有东西可“磨”。480ms 从靛蓝淡回），底栏的结果数用 blur 交叉淡出成“已执行：…”，2.2 秒后再换回来。Warm Neutral Color System
一套以 11 级暖灰为骨架的色彩系统：中性色阶、品牌色与语义色、深色模式令牌映射，三张规范板讲清楚。
Folder Fan-out
一只 macOS 风格的文件夹：悬停时毛玻璃前盖向前翻下，四张卡片像手里的牌一样扇形升起；指到哪张，哪张就抬高摆正。
transform-origin：旋转自然成扇面，放大也只向上长；展开用 bounce: 0.3 的弹簧，每张错峰 35ms 依次发出。0.3s、bounce: 0.1，并从最前面一张倒序收回——打开可以有点戏，关上不该拖泥带水。rotateX(-30deg) 前翻，backdrop-filter 让藏在里面的卡片隐约透出；一道白色内描边和凹印图标补足拟物质感。Drag to Reorder
按住一首歌，卡片微微抬起、倾斜半度，跟着手指上下移动；其他卡片用弹簧让出位置，拖过头会被橡皮筋拉住，松手后带着速度落回空位。
scale(1.03)、rotate(0.5deg)、一层单独的大阴影；阴影层只改 opacity，不在每帧重算 box-shadow。transform 让位（弹簧 0.35s / bounce 0.15），放下后才把 DOM 调整成新顺序，而且只移动放错位置的节点。14px），手感是“拉得动但不想走”，而不是撞上一堵墙。MotionValue.set() 写入，松手的落位弹簧会继承这股速度；同时开启 pointer capture、touch-action: none，拖拽中忽略第二根手指。Like Burst
一次点赞，四个节拍：心形先被压扁，再弹簧般鼓起并填满红粉渐变，一圈冲击波和十粒彩色碎屑同时飞出，计数只滚动变化的那一位。
scaleX 1.2 / scaleY 0.74，110ms）再冲到 1.22，最后交给 bounce: 0.35 的弹簧归位。预备动作让“弹”有了力量来源；transform-origin 放在心形下部，像被按在桌面上。26px 处出发而不是圆心，缩到 scale(0.35) 再淡出，而不是凭空消失。stroke-width 从 9 收到 0，只在按钮边缘外可见，像是从按钮里溢出来的。tabular-nums 保证数字宽度恒定。Spotlight Feature Grid
落地页的特性区块，指针像一盏提着走的灯：所在卡片的 1px 描边和内部被照亮，相邻卡片朝向指针的那条边也跟着发光。
--x/--y（相对自身左上角）绘制同一个光圈，六张卡片始终同时更新：光落在谁身上谁就亮，被光圈边缘扫到的邻居也会亮起一截边框。padding: 1px 的径向渐变，用 mask-composite: exclude 挖空内容区，只剩 1px 的环；内部再叠一层 0.11 透明度的柔光，玻璃感来自这两层的落差。55ms 时间常数指数跟随指针，而不是贴死在指针上——读起来像手里提着灯，而不是一张贴纸。300ms 淡入，离开区域后 600ms 在原地慢慢熄灭；再次进入时光从指针当前的位置亮起，不会从上次离开的地方滑过来。Clip-path Tabs
把整排标签复制一份做成"激活态"叠在上面，用 clip-path 只露出当前那一格。切换时移动的只是裁切框，深色胶囊和白字永远严丝合缝。
clip-path: inset(... round 19px)，底色与文字天然同步。260ms，曲线 cubic-bezier(0.23, 1, 0.32, 1)：起步快、收尾稳，点下去立刻有回应。clip-path 会吃掉 box-shadow，所以阴影改用外层的 filter: drop-shadow()，它跟着裁切后的形状走，胶囊也有真实的投影。blur(4px) + 14px 位移交叉淡入，方向跟随切换的左右：左侧的面板停在左边、右侧的停在右边，新内容总是从你前进的方向滑进来。Magnetic Button
指针一靠近，按钮就被轻轻"吸"过去，文字比按钮走得更远，背后一束暖光扫过点阵；离开后弹簧把它送回原位。
100px 范围内用 smoothstep 渐入：刚进磁场时几乎不动，越靠近吸得越紧，位移上限是距离的 0.35，不会一进场就被猛拽过去。0.55，比按钮本体多走一截，形成两层视差；两者都由弹簧（stiffness 210 / damping 17）追随目标值，而不是直接赋值，所以有重量、松开时会轻轻回弹。transform。scale(0.97)，点击时外扩一圈淡出的描边作为确认。Form Shake Validation
邮箱填错时，输入框像摇头一样晃几下、边框变红、提示从上方滑入；填对后按钮收缩成加载圆环，再展开成绿色的"订阅成功"。
x: [0, -10, 9, -7, 5, -3, 0]，460ms 走完：第一下最大，之后越来越小，像人摇头，而不是机械地来回平移。translateY(-6px) → 0 加淡入和轻微模糊，不会把按钮往下推；一开始输入就自动收起。272px / 12px 收到 44px / 22px，文字在收缩中模糊淡出、加载圈淡入；成功时再展开成绿色，对勾延迟 120ms 描出。Sparkline Scrub
资产走势卡片：指针在图上移动时，参考线和圆点吸附到最近的一天，顶部金额、涨跌幅和日期实时跟着变，参考线右侧的曲线褪成灰色；移开就回到最新值。
duration 0.28s / bounce 0.12）；彩色与灰色的分界、参考线和圆点都读这一个值，永远不会错位。clipPath 矩形实现，静止时分界就停在最后一个点上，所以“没在拖”和“拖到最新”是同一个状态，不需要特殊处理。tabular-nums，拖动时宽度不跳；涨跌徽标按 红涨绿跌 的习惯着色，拖到跌破起点的那几天会自然转绿。Bilingual Type Specimen
中文 PingFang SC 搭配西文 Inter 的字号阶梯与混排规则：行长、行高、中英间距与等宽数字。
font-variant-numeric: tabular-nums，计数动画时宽度不跳。
Swipe Stack
Tinder 式的卡片堆：拖着顶卡左右甩，卡片随位移倾斜、盖上"喜欢/跳过"印章；甩得够快或够远就飞走，下一张顺势顶上来。
|x| > 110 或最近 100ms 的速度超过 0.11 px/ms 就飞出，轻轻一甩即可，不必拖到边缘；速度按“到松手那一刻”计算，停住再放手不会被误判成甩。rotate = x × 0.06°；印章透明度随位移渐显，同时从 scale(1.2) 落到 1，像印泥压上纸面。bounce: 0.3 的弹簧回正，整叠一起回落。70ms 错峰重新发回来。Origin-aware Menu
左上角的头像和右下角的"更多"各自弹出一个菜单，每个都从自己触发器所在的角长出来；高亮块跟着指针在菜单项间滑动，危险操作染成红色。
transform-origin 设为触发器所在的角：头像菜单是 top left，更多菜单是 bottom right。单看察觉不到，但它让菜单像是从按钮里“长”出来的。scale(0.96) + opacity 0 → 1，160ms 自定义 ease-out；退出只要 100ms——打开时用户在等，关闭时系统只是在回应，应该更快。150ms），首次进入菜单时只淡入不滑行，避免从上一次的位置扫过来；滑到危险项时底色同时过渡成浅红。Esc 都能关闭，关闭后焦点回到触发器。Copy Command
终端风格的安装代码块。切换 pnpm / npm / bun 时指示条滑过去、命令模糊交叉切换；点复制，图标和文字一起变成"已复制"，按钮宽度用弹簧贴合新文案。
blur(3px) + scale(0.6) 淡出，新图标反向进入，模糊把两层揉成一次形变。duration: 0.4, bounce: 0.2）过渡，“复制”和“已复制”都刚好包住，不留空也不截字；2 秒后自动复原。50ms 从下方浮入；复制状态同时清除——屏幕上的命令已经不是你刚复制的那条了。58px 宽，指示条只需要 translateX，由 springs.snappy 驱动，快速连点也能从当前位置续上，不会跳回起点。Logo Marquee
「受到这些团队信赖」区块：两行虚构品牌字标反向无限滚动，边缘渐隐；指针停在哪一行，那一行就慢慢刹到 0.2 倍速，被指着的标志恢复品牌色。
@keyframes（内容复制两份，translateX(0 → -50%)），跑在合成线程上，离屏时也能被站点统一暂停；只在变速时通过 WAAPI 的 getAnimations() 拿到它，改 playbackRate。200ms 时间常数向 0.2× 逼近，离开后同样平滑回到 1×——像把手按在传送带上，而不是拔掉电源。#a3a3a3 灰阶，悬停时文字变深、符号恢复品牌色。mask-image 线性渐变淡出，标志是“流进来”的而不是被裁掉的；开启减少动态效果时整条带子静止。Holographic Tilt Card
一张纯 CSS 绘制的会员卡，跟着指针在三维里倾斜：高光追着指针走，全息纹理随角度流动，投影朝反方向滑开。
±12°，由一个手写的弹簧（stiffness 240 / damping 21）追随指针的目标角度，而不是直接赋值：卡片带点重量，指针离开时会越过中心轻摆一次再停稳。mix-blend-mode: overlay 的径向渐变，跟着指针在卡面上移动；全息箔用静止的同心细纹做遮罩、其下铺一层随倾角滑动的彩虹——纹路印在卡上，颜色在纹路里流动。transform：彩虹层用平移代替 background-position，每帧不触发重绘。14px；悬停时卡片 scale(1.025) 轻轻抬起，底部接触阴影同时变淡。Activity Rings
三个同心圆环用弹簧长到目标值，超过 100% 就继续绕第二圈，末端圆头投下一小片阴影压住起点；在"今天 / 本周"间切换，圆环、中心卡路里和图例一起滚到新数字。
stroke-dasharray 描出的弧；超过 100% 时第一圈保持满环，第二条弧从顶部再跑一遍，上限 198%。clipPath 限制在前进方向的半边，只落在被盖住的起点上，不会弄脏自己身后的弧——“盖住”的层次感就来自这里。duration 1.1s / bounce 0.2，三环错开 70ms；切换时从当前速度直接改目标，不会先停再走。tabular-nums，滚动计数时宽度纹丝不动；目标值换档时做一次 blur(3px) → 0 的短淡入，交代“量级换了”。FAQ Accordion
同时只展开一项的 FAQ：高度用零回弹弹簧展开，加号转 45° 变成叉号，答案晚一拍浮现，展开的那张卡片换成白底并浮起一层柔和阴影。
bounce: 0，展开 0.42s、收起 0.32s）：手风琴应该稳稳落定而不是晃，但弹簧在连续点击时能保留速度、从半路掉头。opacity + translateY(-4px) 延后 90ms 进入，落在已经撑开的空间里，而不是被展开的边缘“刮”出来；收起时则 120ms 立刻淡出。45° 变成叉号，圆底同时由浅灰变为近黑；按下时圆钮 scale: 0.88，和旋转各用一个独立属性，互不打架。rgb(24 24 27 / 0.035) 的浅底换成白底加三层阴影，只用颜色和阴影表达“被拿起来”，不改布局。Pull to Refresh
向下拉动态列表，越拉越沉；圆环随距离长满，过了阈值箭头翻转、"咔哒"一下，松手后转圈回弹，新动态从顶部长出来。
80 · ln(1 + d/80) 做阻尼：起手几乎 1:1 跟手，越往下每一像素换来的位移越少，永远拉得动、却拉不远。72px：之前圆环最多只长到 90%，越过时才闭合成整圈，同时箭头翻转、圆环 scale(1.16) 轻弹一下，是一次无声的“咔哒”。56px 转圈 1.2s。收回途中再次按住，会把当前位移反算回原始拖拽距离，接手时不跳。0 展开、内容带 10px 下落淡入，浅蓝底色停留约 1.3s 再慢慢褪去——刚好够眼睛找到它。Toggle Trio
三种开关，三种手感：iOS 开关按住时滑块被"挤"长，日夜切换里太阳滚成月牙、星星亮起，复选框的对勾一笔画出来。
27px 拉宽到 34px，而且朝即将去的方向伸展、另一边不动，像被手指往前推。松开后 translateX 用略带过冲的 cubic-bezier(0.34, 1.32, 0.5, 1) 弹到对面。10.5px 的遮罩圆从右上角滑进来，把太阳“咬”成月亮。圆心坐标是用 @property 注册过的自定义属性，注册后 CSS 才能对它做过渡插值。45ms 错峰浮现，之后各自以不同相位缓慢闪烁，云朵下沉退场；闪烁在 prefers-reduced-motion 下关闭。pathLength="1" 让 stroke-dashoffset 从 1 走到 0 画出对勾；勾选比取消慢（320ms 对 160ms），方框先压到 scale(0.86) 再回弹。Wireframe vs Final
同一个记账 App 的线框稿和完成稿叠在一起，拖动中间的把手，或在任意位置按下拖动，来回对照；两边的每个方块都严丝合缝地对齐。
clip-path: inset(0 X% 0 0) 裁切，分割线用 translate3d 移动，整个拖动只碰合成属性。1.1，松开用 bounce 0.35 的弹簧回到 1；拖出边界时位移按指数衰减，最多再跟出 28px，松手后弹回边缘。最近收录
没有找到相关的交互，换个关键词试试。