Playground

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 / 列表 / 代码块 / 表格 / 引用。