早刊 · 07:00 9 项
Pace 拼贴版式 Pace Layouts · 半调人像压非对称色块网格
★ ★ ★ ★ ★
解析 recent.design 收录 cerral2 的两张整页版式研究：金绿半调人像上压「按你的节奏，传递下去」与右上字标 pace，下半页被紫色椭圆块按 8 栏错位切开；第二屏换成紫底翻转人像，橄榄长条与白块落成另一套网格。复刻保留这套层级并做成可切换：滚轮或上下方向键在两屏间吸附换页，点椭圆块提亮并加 2px 白描边，底部「静态」把两屏按 0.46 倍并排缩成验收帧。
#editorial-layout #halftone #asymmetric-grid #type-hierarchy #duotone
关键参数 栏数 8 栏 页边距 40px 字标字号 clamp(48px, 9vw, 140px) 紫色块 #D6C7F5 橄榄绿 #5A5F3C 换屏动画 320ms cubic-bezier(0.22,0.9,0.16,1) 关键代码 let page=0,selected=null,timers=[],startY=null,overview=motion.matches;
.demo.overview *,.demo.overview *:before{transition:none!important;animation:none!important}
timers.push(setTimeout(showStatic,4400));
motion.addEventListener('change',e=>{stop();overview=e.matches;render()});来源：Godly / Recent · Pace Experimental Layouts ↗ 分享链接 独立页
八向万花筒 Kaleidoscope · 八向镜像图案向外旋转扩散
★ ★ ★ ★ ★
解析 Motion Prompt #135，Shohei Ohtaki 的八向对称万花筒：画面切成 45° 楔形、隔一个镜像一次，单楔 13 个圆、菱形、三角从中心走到半径 300 再回卷，整图每 4.7 秒转 90°，中心白星每周期脉动两次。复刻用 Canvas 2D 按同周期重画：鼠标悬停画面把循环提到 2×，点画面或按 C 在三套配色间轮换，空格与暂停按钮把动画冻在当前帧。
#kaleidoscope #radial-symmetry #mirror-wedge #canvas-loop
关键参数 周期 4700ms 楔形角度 45° 单楔图形 13 个 外扩半径 300px 中心星 半径 20±4px 整体旋转 90°/周期 关键代码 .viewport{position:relative;overflow:hidden;isolation:isolate}
canvas{position:relative;z-index:0;display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
.hint{position:absolute;z-index:3;bottom:9px;right:12px;max-width:calc(100% - 24px);font-size:10px;line-height:16px;white-space:nowrap;color:#ece8f5;padding:5px 9px;background:#17141f;border:1px solid #51475f;border-radius:6px;box-shadow:0 2px 8px #0005;pointer-events:none;opacity:1}来源：Motion Prompt · #135 Kaleidoscope ↗ 分享链接 独立页
CK 字母胸针 C/K Monogram · 黑底银字标与纸面图注
★ ★ ★ ★ ★
解析 recent.design 上一枚 CK 字母组合胸针：近黑底中央银色字标斜穿一根细杆，表面带冷白反光，左下角衬线小字写 Fig. I、C/K MONOGRAM、年代未定。复刻把金属反光交给指针：在卡面移动时胸针绕 X/Y 轴倾斜、120px 光斑沿笔画滑动，抬离 400ms 衰减归位；点胸针或「翻看背面 ↗」在 800ms 内绕 Y 轴翻到针扣面，方向键微调倾角，顶部「减少动效」压成正面静帧。
#monogram #metal-sheen #brand-object #flip-card #specular
关键参数 底色 #050505 高光色 #F2F5F7 光斑半径 120px 倾角跟随 400ms ease-out 翻转时长 800ms cubic-bezier(0.22,0.7,0.18,1) 胸针尺寸 242×244px 关键代码 .still .tilt,.still .rotor,.still .shine{transition:none}
.still .shine{display:none}
const isStill=()=>reduced.matches||preview;
later(5100,()=>{preview=true;syncMotion();if(back)turn();});来源：Godly / Recent · CK Monogram Lapel Pin ↗ 分享链接 独立页
五条建站资源 5 Sites · 五条资源清单一行一条
★ ★ ★ ★ ★
解析 Csaba Kissi 在 X 上发的一条「5 must know sites for web developers」：140 条免费 AI 设计提示词、69 个开源 React 组件、15 个免费文档 UI 组件、开源 agent skills，配套录屏里还出现 ninna-ui 的 92 个 UI 区块。复刻做成一列五行：入场每 700ms 多露一行，自动巡览依次上浮 2px、左侧亮 3px 紫条；点行或回车收藏，圆形徽章变 ✓、副标题改成「已收藏」，再点取消，↑↓ 与 Home/End 在行间移动。
#resource-list #count-badge #keyboard-nav #bookmark-card
关键参数 行高 64px 悬停位移 -2px 徽章直径 24px 过渡 150ms ease-out 强调色 #6D5EF8 入场间隔 700ms 关键代码 .resource-list li{height:64px;opacity:0;transform:translateY(7px);transition:opacity 150ms ease-out,transform 150ms ease-out}
.resource:hover,.resource.preview,.resource:focus-visible{transform:translateY(-2px);background:color-mix(in srgb,var(--a) 12%,var(--dd-card,#17141f));border-radius:9px;box-shadow:inset 3px 0 var(--a)}
for(let i=2;i<=5;i++)later(()=>reveal(i),(i-1)*700);
addEventListener('pointerdown',stop,{capture:true});来源：X · @csaba_kissi 5 must-know sites ↗ 分享链接 独立页
天体明暗开关 Dark Toggle · 月亮化成太阳的明暗开关
★ ★ ★ ★ ★
解析 recent.design 上一段明暗开关录屏：暗态滑块停在左侧，表面是点阵方块拼出的月牙，边缘泛蓝紫辉光；拨到右侧后点阵重排成太阳，光晕转琥珀，背景从近黑过渡到米白。复刻用弹簧驱动滑块，stiffness 260 / damping 26，位移与 320ms 的天体形变同步进行，月牙缺口一点点填成圆面；按下时滑块缩到 92%。点按钮、按空格或「重播演示 ↻」都能触发，顶部「减少动效」跳过全部过渡直达终态。
#toggle-switch #dark-mode #dot-matrix #celestial-glow #moon-sun-morph
关键参数 轨道尺寸 148×72px 滑块 64px 圆角方块 弹簧 stiffness 260 / damping 26 形变时长 320ms 暗态辉光 #C9CBFF 亮态辉光 #FFB53D 关键代码 .scene-title{color:#f4f2fa;background:#28262f}
.state{color:#f4f2fa;background:#28262f}
if(instant()){cancelAnimationFrame(raf);raf=0;last=0;x=target;morph=to;v=0;paint()}
at(5800,()=>{setMode(true,'减少动效 · 亮 → 暗，已瞬间切换')});来源：Godly / Recent · Dark Mode Toggle ↗ 分享链接 独立页
开小车逛作品集 Bruno Simon · 圆环里能开的小车世界
★ ★ ★ ★ ★
解析 Beyond Media 动效图鉴收录了 bruno-simon.com 作品集：夜晚点阵地面上浮着一圈发光圆环，环里停着低多边形小车，深度感来自地面点阵的视差。复刻用 Canvas 2D 做等价效果：方向键驾驶，点地面设目标点让小车自己开过去，滚轮或右侧 +/− 把视角缩到 0.7–1.4 倍；车灯以暖橙照亮附近点阵，越过 220px 光圈边界时边界亮度拉满并左右抖 2px，「Ⅱ」按钮切成静帧。
#portfolio-world #dotted-ground #fake-3d #drivable #canvas-2d
关键参数 光圈半径 220px 点阵间距 40px 视角倾角 55° 缩放范围 0.7–1.4× 霓虹紫 #6D4BFF 车灯 #FFA33C 关键代码 header{position:absolute;z-index:3;top:0;left:0;right:0;min-height:76px;background:var(--dd-stage,#140b2b)}
ctx.save();ctx.beginPath();ctx.rect(0,77,w,263);ctx.clip();
function zoomBy(v){zoom=Math.max(.7,Math.min(1.4,zoom+v));resize()}
if(n===3)text('方向键 / 指针控制','点击地面或按方向键继续。');来源：Beyond Media · Bruno Simon Portfolio ↗ 分享链接 独立页
渐变翻面按钮 UIverse · 悬停时渐变斜着翻过去
★ ★ ★ ★ ★
解析 UIverse 上 0x3ther 的社交渐变按钮组：Facebook、YouTube、Twitter、Instagram 四个 Tailwind 按钮，默认 to-r 三段渐变，hover 切到 to-br，光像被斜着推过去；阴影取主色 50% 透明，focus 叠 4px 同色 ring。复刻补上按下反馈：translateY(1px) 并加深内阴影、焦点环保留；下方读数条用 01/05 五格进度跟着「默认 / 悬停 / 聚焦 / 按下 / 减少动效」切换，Tab 与空格可完整走一遍。
#gradient-button #hover-flip #focus-ring #tailwind
关键参数 圆角 8px 内边距 10px 20px 渐变 #3B82F6 → #2563EB → #1D4ED8 阴影 rgba(59,130,246,0.5) 0 10px 15px -3px 焦点环 4px 按下位移 1px 关键代码 @media (max-width:519px){
.buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:100%}
.social{width:100%;padding:9px 8px}
}
.social::before{background:linear-gradient(to bottom right,var(--g1),var(--g2),var(--g3));opacity:0;transition:opacity .22s ease}来源：UIverse Galaxy · 0x3ther social gradient buttons ↗ 分享链接 独立页
像素法师施法 Pixel Wizard · 纯代码画的像素施法循环
★ ★ ★ ★ ★
解析 Majid Manzarpour 在 Beyond Media 动效库发布的一条提示词：用纯代码画 128×96 像素法师，跑 IDLE → CHARGE → CAST → RECOVER 循环，蓄力时星火绕法杖宝石螺旋收拢，施法一瞬向外炸开并带 1–2px 屏震。复刻按提示词实现：24 色调色板、绘制全部取整、姿态先插值再量化到 10fps 节拍。点画面或按空格立即施法，「暂停」停住循环，「静帧」冻结在蓄力帧，自动演示跑到 5.5 秒也会自己停成静帧。
#pixel-art #wizard #state-machine #particle-pool #pixel-grid
关键参数 逻辑分辨率 128×96 调色板 24 色 角色尺寸 24×32px 像素节拍 10fps 状态时长 1.2 / 1.5 / 0.9 / 1.2s 屏震 1–2px 关键代码 const hintNode=document.createTextNode('');
hint.replaceChildren(hintNode);
function setHint(text){hintNode.nodeValue=text}
if(auto&&total>=5.5){auto=false;freeze();setHint('演示完成 · 减少动效静帧 · 点击可施法')}来源：Beyond Media Motion Library · pixel art wizard ↗ 分享链接 独立页 午间加推 · 14:00 2 项
按住才删：圆环走满，垃圾桶缩没、勾号弹出 Hold to Confirm Button · 环形进度 + 早松手弹簧回弹
★ ★ ★ ★ ★
解析 arihantcodes 在 21st.dev 发的 Hold to Confirm Button，来自他的 Spectrum UI：一颗玫红描边的胶囊按钮，左边垃圾桶外面套着一圈细环。按住时按钮在 200ms 内缩到 0.97，环按 1.2 秒匀速走满（故意用线性，因为它是读数）；中途松手，环用 k500 / c30 的弹簧退回 0，什么都不发生。按满才触发一次确认：垃圾桶缩没，勾号以 k500 / c22 带一点过冲弹出，同时 250ms 把描边画出来；标签「Hold to delete」往上滑走，「Deleted」晚 120ms 从下方滑进，整颗按钮染成翠绿。1.5 秒后复位，环 300ms 倒着收回。键盘按住空格或 Enter 也算，长按重复不会重新开始，指针和键盘同时按住时松开其中一个不会取消。复刻按源码常量手写成单文件，没有 framer-motion，弹簧用一个小的积分器模拟。上方加了一张「Q3 roadmap.fig」文件卡，确认后变灰，复位后恢复，好看出按钮在保护什么。另外并排放了 sm / lg 两个尺寸（环 20 / 30px）。自动演示先按一下就松，再完整按满一次，碰一下就停。
#hold-to-confirm #destructive-action #progress-ring #spring #micro-interaction
关键参数 按住时长 1200ms · 线性 · 从当前进度续走，速率不变 按压缩放 0.97 · 200ms cubic-bezier(.22,1,.36,1) · 松开弹回 k500 / c30 早松回弹 环进度弹簧 k500 / c30 退回 0 勾号弹出 弹簧 k500 / c22 · 延后 50ms · 描边 250ms 标签错位 上移 6px 淡出 · 新标签晚 120ms 自下而上 复位 1.5s 后 · 环 300ms ease-out 收回 关键代码 anim = linear(1, K.DURATION*(1-p), complete); // resume from current p
// released early: no confirm, spring the ring home
anim = spring(p, 0, {k:500, c:30}, v => setP(v));
spring(0, 1, {k:500, c:22}, v => ck.style.transform = `scale(${v})`);来源：21st.dev · arihantcodes/Hold to Confirm Button（Spectrum UI） ↗ 分享链接 独立页
今日习惯清单：打勾划线，三项全满弹出连续天数 Insight Timer · 周条 + 1 / 3 complete + 计时型习惯
★ ★ ★ ★ ★
解析 Mobbin 收录的 Insight Timer iOS「Today」习惯页：顶部一条周一到周日的圆形日期条，今天实心绿，未来几天变灰；下面是衬线体的「1 / 3 complete」，再往下三张暖米色卡片，每张标着分类（Self-care / Gratitude）、习惯名和重复规则，右边要么是勾选框，要么是带「0 / 3」次数的播放键；完成的卡片整张染成薄荷绿、标题划线。底部浮着「Activity complete · 1 consecutive day」的进度条和「Add activity」按钮。复刻把它做成能用的一屏：点勾选框，卡片 280ms 染色，删除线从左往右画 320ms，勾号描边跟着画出；计时型习惯点一下播放键，按钮外圈走一圈 0.9 秒的进度环，次数加一，到目标次数才算完成。完成数用竖向滚动的数字换，带一点过冲。三项全满时日期下面亮一个小绿点，底部卡片从下方弹上来，进度条填满后 2.2 秒收回。点过去的日期能看当天的记录，点未来日期会左右抖一下，表示不能点。过去几天的完成情况是随机示意数据。
#habit-tracker #checklist #week-strip #streak #ios
关键参数 染色 卡片背景 #F6F2EE → #E2F3EE · 280ms 删除线 scaleX 0 → 1 · 320ms cubic-bezier(.65,0,.35,1) · 勾号描边延后 60ms 计数滚动 每格 20px · 320ms cubic-bezier(.3,1.4,.5,1) 计时环 r 12.5 描边 2 · 一圈 900ms 线性 · 每圈 +1 次 完成卡片 上移 16px 弹入 360ms · 进度条 700ms 填满 · 停留 2.2s 配色 主色 #14967F · 分类字 #9B8A72 · 未来日期 #F1F5F3 关键代码 ring.animate([{strokeDashoffset:78.5},{strokeDashoffset:0}],{duration:K.RING_MS})
.onfinish=()=>{ if(++plays[j]>=h.goal){ d[j]=true; done() } render() };
rl.style.transform=`translateY(${-20*count(cur)}px)`; // 1 / 3 → 3 / 3来源：Mobbin · Insight Timer ↗ 分享链接 独立页 下午加推 · 14:08 1 项
知道一切：五段视频撑起的深色整站 Know it all. · Innovation Landing（MotionSites）
★ ★ ★ ★ ★
解析 MotionSites 的 Innovation Landing 整站复刻：Asme 的五段落深色站——全屏视频 hero（衬线大标题「Know it all.」压在循环视频上，结尾前 0.55s 淡出、ended 后 100ms 重置、再 500ms 淡入的无缝循环全靠 rAF 手工驱动）、About 大字宣言、Featured 16:9 视频盒里的液态玻璃卡、Philosophy 双栏配 4:3 视频、Services 双卡视频；滚动显影由 IntersectionObserver 以 −100px 边距逐段触发，液态玻璃是 backdrop blur 4px 加 1.4px 渐变描边的 mask 合成。卡面停在 hero 一屏，点开聚焦后可下滑走完五段（与 Nova 同款的分页模式开关）。
#video-hero #liquid-glass #scroll-reveal #landing-page #dark
关键参数 段落 5 段 · Hero / About / Featured / Philosophy / Services · 共 5 段视频 Hero 循环 结尾前 0.55s 淡出 · ended 后 100ms 重置 · 500ms 淡入（rAF 驱动） 显影 IntersectionObserver · rootMargin −100px · 0.8s cubic-bezier(.25,.1,.25,1) 上浮 40px 液态玻璃 backdrop blur 4px · 1.4px 渐变描边（mask 合成）· inset 高光 标题 Instrument Serif · 72→96→128px 随断点 · 字距 −0.025em 布局 内容宽 72rem · 圆角 24px · Featured 16:9 / Philosophy 4:3 关键代码 if (hv.duration && (hv.duration - hv.currentTime) <= 0.55 && !fadedOut) { fadedOut = true; fadeTo(0, 500); }
// hero 视频不挂 loop 标签：结尾前先淡出、ended 后重置再淡入，接缝藏进两次淡化里来源：MotionSites 提示词复刻 · Know it all.（Innovation Landing，主人选定） ↗ 分享链接 独立页 下午加推 · 15:11 1 项
拖到垃圾箱删除：起拖定点冻结，卡片原地消失 Dropit · Drag to Trash（拖拽删除 + 置顶吸附）
★ ★ ★ ★ ★
解析 主人自己的临时投递产品 Dropit 的删除手势，原站逐帧实测后复刻：按住一张文本卡拖动，卡片抬起（阴影加深、随水平速度倾 2–5°），同时一只白色虚线圆桶在被拖卡片的起始中心右侧 230px 处一次性生成——它不跟随卡片，整次拖拽冻结在原地（实测把卡拖遍全屏，桶心一像素没动；换一张卡起拖，桶就换到那张卡的起始位旁）。命中判定用光标不用卡片重叠：光标进入桶心约 34px，圆盘放大到 1.42× 转红 #dc2626、桶盖掀开、标签换成「松手删除」；松手后卡片不飞向垃圾箱，而是原地 250ms 淡出缩没，红桶在原地多停约 0.8 秒，顶部落下一条「已撤回」toast——没有确认框，也没有撤销按钮，因为在 Dropit 里撤回就是删除。桶外松手或 Esc，卡片飞回虚线槽位。顶部虚线栏是置顶区：卡片拖上去变粉红「松手吸附」，落下变成带蓝点的药丸；拖药丸时不出现垃圾箱，下拉约 190px 松手才取消置顶。单文件零依赖复刻；拖拽阈值原站测不出，取 8px 为判断值。自动演示由假光标先把卡拖远（桶纹丝不动）再回到桶上删掉，接着演示一次置顶与取消置顶，碰一下就停。
#drag-to-delete #trash-bin #pointer-events #pin #micro-interaction
关键参数 倾斜 随水平速度倾 2–5°，指针停下自动回平 删除 卡片原地 250ms 淡出 + 缩到 0.92，不飞向桶；红桶滞留约 0.8s 反馈 顶部白色 toast「已撤回」约 2.5s · 无确认框、无撤销按钮 命中判定 光标距桶心 ≤34.5px（桶半径 30 × 1.15），不看卡片重叠 垃圾箱生成 起拖瞬间一次定点：被拖卡起始中心 +230px（约右缘外 56px），纵向对齐起始中心 拖拽全程 垃圾箱冻结不跟随（原站逐帧像素实测：卡拖遍全屏，桶心不变） 热态 圆盘 1.42× 转红 #dc2626 · 桶盖 −24° 掀开 · 标签换「松手删除」 置顶 拖入虚线栏变粉红「松手吸附」；药丸下拉 ≥190px 松手取消置顶，拖药丸不出垃圾箱 关键代码 // 起拖瞬间按卡片起始中心定点，整拖不再更新（原站实测的冻结模型）
binPos = clampBin(homeCx + 230, homeCy);
// 命中看光标，不看卡片重叠
setBinHot(Math.hypot(e.clientX - binPos.x, e.clientY - binPos.y) <= 30 * 1.15);来源：Dropit · 临时房间卡片流（主人自有产品，原站实测） ↗ 分享链接 独立页