SuperAPI AI 工具集

conveyor-pan

通用与其它

查看项目

更新于 10-15 21:54

技能介绍

用途:实现横向滚动卡片轮播,卡片以恒定速度连续平移,画布边缘露出部分卡片以暗示内容无限延续;传送带式滚动本身就是转场,不设场景切换。

主要能力:参数由 params.schema.json 定义,包含 id、cards 卡片内容数组、card_width_px(默认720)、card_height_px(默认1280)、card_gap_px(默认80)、card_radius_px(默认32)、card_tilt_deg(默认0)、velocity_px_per_sec(默认360)、direction(默认 right-to-left)、easing(固定 linear)、start_offset_px、loop、cards_visible_at_once(默认2.3,边缘出现部分卡片)。每张卡片可单独设置 bg_color、tilt_deg 与 content。行为上渲染横向 flex 条带,按 stripX = -velocity_px_per_sec * frame / fps + start_offset_px 计算位移,以 transform: translateX(stripX) 平移,卡片各自通过 transform: rotate(card_tilt_deg) 倾斜,父容器用 CSS overflow: hidden 让部分卡片在边缘干净裁切。实现为使用 useCurrentFrame() 与直接 translateX 的 Remotion 组件,不使用 spring,保持线性运动。

样式包覆盖:SP-E(chaos-card)中 card_tilt_deg 每张卡片随机、范围 -8° 至 +8° 并有种子,速度默认 360,卡片进入可见窗口 8 帧后弹出 sticker-chip-pop 叠加层,不需要音乐节拍锚点;SP-A 与 SP-D 不使用该原语。

适用场景:手机卡片轮播原型(A9)、展示应用信息流持续滚动的界面模拟,以及轮播节奏本身即转场的场合。

不适用:离散定价轮播(应使用 card-stagger-slide 加 step-pan)、需要逐张卡片停留的场景(传送带为匀速,停留请用 step-pan),以及与 SP-A/B/C/D/F/G 样式包不兼容。

质量检查与失败模式:确认位移无缓动、匀速,边缘部分卡片裁切干净、无白边或溢出,倾斜可见但不超过 ±5–8°,场景起止不加减速;条带总宽需支撑整段场景不露出左右端。常见问题包括起点加速(easing 非 linear 或用了 spring)、条带末端露出白色画布(卡片不足,可增加或复制卡片)、卡片出现明显吸附(速度过低,建议 300+)、运动过快模糊(1080 宽画布上超过 600 px/s 时降到 300–450)。官方安装方式与来源链接暂未提供。