用途:A10-scrolling-index 是一种动态图形场景原型,由 scrolling-index-dual-rail(布局与滚动机制)、active-row-darken(行过中心时的聚焦变暗)、inner-video-playback(缩略图内循环视频)和 persistent-corner-chrome(左下角品牌标签)组合而成,常作为整支短片的全部内容,而非多场景之一。
主要能力:两条轨道同步纵向滚动:文字轨位于视口左侧 40%,右对齐至垂直栏;媒体轨位于右侧 50%,缩略图为 320×400(4:5)、圆角 16、间距 24、可见 3 个。视口居中、上下出血、圆角 40、1px 描边;上下各 8% 位置有淡出遮罩。每行经过焦点时变暗聚焦,其余行降低透明度。
使用方式:默认渲染器为 hyperframe-gsap;Remotion 也可实现。滚动速度 60 px/s、方向自下而上、线性缓动、可循环。每行聚焦参数:focal_y 为画布半高,距离 96 像素时透明度 50%,240 像素时完全变暗,最小不透明度 0.18,焦点行字重从 400 提升到 600。缩略图需逐张提供 mp4,静音、循环。仅支持 SP-D(编辑杂志)风格包,不兼容 SP-A/B/C/E/F/G;SP-D 下使用米白底、墨色文字、Cormorant Garamond 斜体标题、左下角品牌标签“SESSIONS”及上下淡出遮罩。时长 10 秒到 30 秒以上,按列表长度乘以每行过焦点约 1.5 秒计算。
适用场景与限制:适合编辑杂志风格的双轨索引式动态图形短片。质量要求包括滚动速度恒定、激活行随接近焦点变暗并在离开后恢复、缩略图为真实播放视频而非静态图、淡出遮罩正常渲染、品牌角标在首末帧可见。常见问题包括滚动卡顿(缓动并非真正线性)、聚焦机制失效(未按行与 focal_y 的距离调整透明度)、缩略图为静态图(需确实使用 <video autoplay loop muted>)、视口描边未渲染(CSS outline 被剥离,应改用显式 border)。其余平台、收费与价格信息资料暂未提供。