专为 designer、developer、founder 而做的 UI/UX 实验室。 每个 demo 都是可复制、可安装的 shadcn 组件， 研究 AI agent 时代的产品交互该长什么样。
iOS Dynamic Island — 12 interaction states with Framer Motion spring physics.
macOS-style glass-morphism notification stack with configurable spring presets.
Multi-state share modal with public / access-code modes and layout animations.
Configurable spring list with top-insert enter effects and preset switching.
TOC 方案探索：左侧时间线轨道 + H2 索引 + 选文高亮标记，可点击跳转。
TOC 方案探索：右侧缩略线面板以 IntersectionObserver 同步当前阅读位置。
Three variants of an animated sync / loading button — Framer Motion & pure CSS.
USD / CNY P&L calculator with buy, sell, and target-price inputs.
纯 SVG 实现的股价 dashboard：区域线图 / 蜡烛图切换，OHLC tooltip。
Feature-detection based viewport-height adaptation for mobile browsers.
iOS-style glassmorphism bottom navigation bar with animated active indicator.
Cursor-style 文本闪光：基色 + 一道窄高光循环穿过，暗示 agent 正在执行。
光束沿圆角描边匀速绕行：CSS offset-path + mask-composite 实现，含 5 种用法。
iOS 18 Siri 同款边缘光晕：旋转 conic 彩虹 + glow / ring 双层 + 4 边等宽 mask。
lightweight-charts 双 pane：蜡烛图 + 共享时间轴的成交量直方图，crosshair 联动 OHLC legend。
TradingView 首页 hero 风格：渐变 Area + 4 套主题色 + visibleRange 切换的时段选择器。
BaselineSeries：基准线上方绿、下方红，拖动 slider 实时改变 cost basis 重新着色。
实时 tick 流：series.update() 增量渲染，可暂停 / 调速，演示 lightweight-charts 的高性能流式更新。
完整交易终端布局：蜡烛 + 布林带 / Volume / MACD 三 pane，右侧实时 L2 订单簿 + 成交流水。
复刻 benji.org/liveline 排版的单页：用 liveline 库内嵌 4 个实时折线 demo（心率 / CPU / 多 series / 压力测试）。
1:1 抓取 claude.ai 计算样式还原成 ~280 行 CSS，用一篇博客示范 h1–h4 / 列表 / 代码块 / 表格 / 引用。
旋转 conic-gradient + 白色模糊遮罩，纯 CSS 实现 iOS 18 风格彩虹描边效果。
Tiptap 编辑器 + 顶部图片附件区：拖拽 / 粘贴图片自动归位到顶部，无图时折叠。
reaviz LineChart 多 series：5 只科技股归一化到 0% 比相对涨跌，crosshair tooltip + 时段切换 + 滚轮缩放。
AreaChart + ValueMarker 画到期 P&L 曲线：六种常用策略、可调 strike / premium，breakeven 自动求解。
1:1 复刻 reaviz.dev blocks 里的 Multi Series · Medium：Incident Report 卡片，沿用官方调色板。
SaaS 增长面板：4 个 KPI + Sparkline、按订阅层堆叠的 MRR、转化漏斗。一次串起 reaviz 三类图表。
自研文本动画小库：Text 字符级流体过渡 / Number 平滑计数 / Slots 老虎机数字轮，零依赖 Web Animations API、合成层满帧。灵感来自 calligraph。
复刻 HeroUI Pro 角落引导卡：四角任意弹出、可替换内部元素、可挂事件回调的复合组件。
@paper-design/shaders-react 冷色系效果展示：7 个全屏可滚动 section（GrainGradient 作 hero），用 IntersectionObserver 只在进入视口时挂载对应 WebGL shader。
4 段手写 GLSL 片段着色器复刻「流动的光」：语音流光带 / 呼吸光环 / 边缘流光(Apple Intelligence) / 弥散渐变，纯 WebGL 实时渲染，可拖滑块、点按钮实时调参。
用 @paper-design/shaders-react 复刻 ElevenLabs 音色球轮播：激活球 Mesh/Grain 实时流动，圆形靠 CSS 遮罩裁软边，最外侧两片用 CSS 渐变虚化以控制 WebGL context 数量。
复刻 ElevenLabs 右下角对话式 AI 语音挂件：玻璃拟态胶囊展开为带动效对话框，GrainGradient sphere 语音球 + 通话键，通话时球体流动加速。
同一份未知高度内容做展开动画:height:auto 不可插值直接跳变 vs grid-template-rows 0fr→1fr 平滑生长,纯 CSS 并排对比。
一条 SVG path 画出气泡轮廓：凹角外扩(C) · 直斜边(L) · 圆角顶点(A)。可调参 + 导入导出配置 + 真实悬停示例。
对照 /mobile-fullscreen 的实验方案：不写视口 JS，纯 CSS 视口单位（svh/lvh/dvh/vh）实时切换，含 safe-area 与软键盘 interactive-widget。未验收。
选区气泡定位抽象成纯函数：popup 围绕 SelectedRect 在 ContainerRect 内按 右→下→左→上 择位，永不出安全区；放不下时取遮挡选区最小的兜底位。含可拖沙箱 + 真实文本选择案例。
划选 AI 回复任意文字就地开分支：自适应 2–4 列 + 列满面包屑替换（可撤销），⌘K 会话树 / 每列 ⇄ 切换器指定打开任意会话，Artifact 右侧抽屉舞台。
荧光笔划出重点，再编辑正文 / 刷新页面，高亮依然贴在正确的文字上。存的是文本锚点（引用文本 + 前后上下文 + 字符偏移）而非 DOM 路径，三层降级 position→exact→fuzzy 找回；改动过则近似匹配并给相似度。抽象自 chat-aside 插件。