每张卡片都是手工复刻、可以直接上手的交互 demo。点 demo 右下角 ↻ 重播动效，展开「关键参数」「关键代码」看实现。
从收藏中按评分加权（权重 = 1 + 星级²）、以日期为种子随机抽取不同类别的条目，组合进同一个迷你界面，并共享一个主题强调色。
弹性滑块 + 数字滚轮
Replit 的套餐弹窗用一个分段控件切换 Monthly / Yearly。复刻里把选中背景做成带回弹的滑块，价格每一位数字像老式计数器一样纵向滚动，选中卡片有描边和焦点光晕。
pill.style.width = btn.offsetWidth + 'px';
pill.style.transform = `translateX(${btn.offsetLeft-3}px)`;
// 每位数字是 0-9 的竖条
digit.style.transform = `translateY(${-30 * v}px)`;播放/暂停形变 · 可拖动进度
Brink 的暖棕色播放页。复刻了暂停时封面缩小的 Apple 式反馈、三角形到双竖条的 SVG path 形变、按住加粗的进度条拖动，以及 -15/+30 跳转按钮的回弹旋转。
pa.style.d = `path("${playing ? PAUSE : PLAY}")`;
// PLAY 与 PAUSE 都是两段 M L L L Z，才能补间
bar.onpointerdown = e => { bar.setPointerCapture(e.pointerId); seek(e); };圆点扩散 → loading → success
原组件用 framer-motion layout 动画。这里改写成纯 CSS：悬停时 8px 圆点 scale(40) 铺满按钮，文字右移淡出、反色文字从左滑入；点击后收缩成圆形转圈，再展开为描线对勾。
.b:hover .dot{transform:scale(40)}
.b:hover .lb{transform:translateX(80px);opacity:0}
.b.loading{min-width:46px;padding:0}
.ck path{stroke-dasharray:20;animation:dr .4s forwards}高斯衰减 + 弹簧物理
macOS 风格 Dock：图标按与光标距离的高斯衰减放大、上抬并向光标微微靠拢，每个量都由带子步长的半隐式欧拉弹簧驱动；离开后由虚拟光标做 idle wave。点击图标会弹跳并亮起指示点。
const inf = Math.exp(-(d*d)/(2*sig*sig)) * amp * vert;
function spring(s,t,k,c,dt){
const n = dt>.012 ? Math.ceil(dt/.008) : 1, h = dt/n;
for(let i=0;i<n;i++){ s.v += (-k*(s.x-t) - c*s.v)*h; s.x += s.v*h; }
}AI 设计不再埋在聊天里，而是摊在无限画布上
MagicOS 把 PRD、灵感、变体和决策都保留在一张持续的无限画布上，支持语音输入、多人协作、导入 Figma/GitHub，并能移交给 coding agent。复刻做了画布平移/缩放（指针锚点缩放 + 惯性）、可拖拽节点和流动连线、协作者光标。
function zoomAt(f,cx,cy){
const s = clamp(tcam.s*f, .35, 2.5);
tcam.x = cx - (cx - tcam.x) * s / tcam.s;
tcam.y = cy - (cy - tcam.y) * s / tcam.s;
tcam.s = s;
}AI 一次生成 8 个，人只负责挑 1 个
X 上的讨论：当 AI 让生产变得廉价，判断力和品牌成了真正的优势。小 demo 把这件事做成交互：点 Generate 生成 8 张变体，选一张后其余灰化淘汰。
.g.pick .v{opacity:.18;filter:grayscale(1) blur(1px);transform:scale(.94)}
.g.pick .v.k{transform:scale(1.04);box-shadow:0 0 0 2px var(--a)}1 个强调色 + 2 个中性色
设计师的建议：画面乱往往是颜色太多，而不是排版差。从主体取一个强调色，其余保持中性，只把强调色放在需要视线停留的地方。复刻的 MVP 海报可以切换强调色、开启「太多颜色」做对比，并带分层视差倾斜。
p.style.transform = `rotateY(${cx*16}deg) rotateX(${-cy*16}deg)`;
layers.forEach(l => l.style.transform = `translate(${cx*l.dataset.d}px, ${cy*l.dataset.d}px)`);粗描边泡泡字 + 手绘贴纸
一个流行的 AI 海报 prompt：3:4 竖版、粗泡泡字、手绘插画、彩色文具品牌感。复刻用 CSS 做出描边 + 硬投影的泡泡字，字母依次掉落入场，点击会果冻弹跳，贴纸可拖动。
span{ -webkit-text-stroke:3px #2b2118; paint-order:stroke fill; text-shadow:3px 4px 0 #2b2118 }
@keyframes jig{30%{transform:translateY(-14px) scale(1.15,.9) rotate(-8deg)}}