← ClaudeAtlas

interactive-projects-streamlisted

交互式项目流 / logo stream / 无限横向内容流 / hover·长按预览 / rAF。Use when building continuous clickable content streams that need collision-safe transport, static interaction mode, user motion controls, accessible previews, and measured performance.
lizliz404/agent-skills · ★ 0 · AI & Automation · score 75
Install: claude install-skill lizliz404/agent-skills
# Interactive Projects Stream 构建“运动负责吸引、静态负责交互”的连续内容流。核心不是双行或河流皮肤,而是:有序内容、无超车 transport、可进入的 static interaction mode、真实链接和可验证的 motion policy。 ## 先判定是否该流动 | 内容形态 | 选择 | |---|---| | 项目少、一次可读完、重复会显得造假 | Static rail / grid;到此停止 | | 离散 slide、需要前后翻页或位置指示 | Carousel | | 连续发现、内容顺序弱、横向运动有价值 | 本 skill | | 每个 tile 需要独立 X 物理或碰撞 | 专用 simulation;不要偷塞进默认 runtime | ## 四条核心契约 | 契约 | 不变量 | |---|---| | Continuity | 同 lane 保序且维持最小 gap;全局同速只是充分条件,不是铁律 | | Interaction | Auto motion 是 attractor;focus、user pause、reduced motion、pre-hydration 使用 static mode | | Semantics | Primary items 是真实 `<a>`;visual repeats 不增加 keyboard/AT 噪音 | | Control | 无限运动提供 i18n pause/resume;focus 进入后不自动重启 | ## Runtime 选择 | Runtime | 默认度 | 机制 | |---|---:|---| | Lane track | 默认 | 每 lane 一个 modulo offset / transform;tile 内层独立做 Y/scale | | Independent floaters | 例外 | 仅独立 X 行为不可避免时;必须有 no-overtake 或 collision solver | | Static mode | 必备 | Normal-flow grid/rail;也是 SSR、no-JS、focus、pause、reduced fallback | ## Concrete profiles | 场景 | Topology | Transport | Interaction | |---|---|---|---| | Main Projects | 2 lanes,强 band | Calm shared lane speed | Rich preview + static mode | | Nearby Skills | 1 lane,quiet band | Slower track | Lightweight preview + static mode | | Partner logos | 1 lane | CSS/track only | 无 rich popup;若重复明显则 static | ## Build checklist - [ ] 先渲染完整 static semantic source;JS 只 progressive-enhance,禁止首帧堆在 `(0,0)`。 - [ ] Measure unique cycle;按 viewport 推导 repeats,不写死 `copies: 3`。 - [ ] 默认移动 lane track;tick 内只