SuperAPI AI 工具集

screenshot-wall

设计与创作

查看项目

更新于 11-05 17:11

技能介绍

用途:在 Tella 中生成一面倾斜的 3D 截图墙动画。多张产品截图同时出现在向远处倾斜的墙面上,墙面缓慢横向滑动,中间行保持清晰,上下行按距离逐级虚化,远端边缘渐隐到背景,整体像一次运镜而非模板化排版,传达“内容很多”的信息。可选让一张截图从墙上起飞、转平并向前飞出。适合发布视频的开场钩子或收尾节拍,或年度交付回顾。基于 tella-motion-design 构建,需先加载该技能;若需要逐张卡片轮播用 tella-carousels,若要从单张截图中提取元素用 tella-ui-parallax。

主要能力:

  • 墙面姿态:透视 1500–1800,屏幕倾斜旋转 ±12–20°,后仰 rotateX 30–38°,不使用 rotateY,使每行保持同一深度。
  • 瓦片:16:9,16:9 下约 520–540 px 宽(9:16 下 480),间距 30–40 px,圆角 12–14,奇数行错开半格呈砖砌感;平面远大于画框。
  • 景深:按距焦点行的距离逐行模糊,约 0、1.5、4、7、10 px。
  • 雾化:用背景色渐变覆盖远端顶部(380–520 px)与近端底部(220–420 px,55–75% 不透明),让墙渐隐而非硬边结束。
  • 背景:纯色填充,暗色调时叠加强调色柔和径向光晕(0.2–0.45);瓦片阴影仅用于亮色调。
  • 标题:Inter 800 大标题(16:9 约 136 px,9:16 约 84)加 500–600 副标题;亮色墙面上在文字下方加背景色柔和色池,并把清晰行移到文字下方。
  • 运动:平面横向漂移 360–620 px,线性,贯穿整段;社交网格效果可让奇数行反向滑动;整面墙从 scale 1 推进到 1.06。漂移至少 4 秒才像运动,总长 6–8 秒。
  • 主视觉飞出:单独图片从起飞时瓦片所在位置(含漂移与推进)开始,用 1.3 秒、缓动 {x1: 0.7, y1: 0, x2: 0.2, y2: 1} 转平(rotation 和 rotateX 归零),放大到终止框(满画幅,或留 60 px 边距、圆角 28 的卡片),满画幅时去掉圆角;起飞时隐藏其瓦片,墙面亮度降到 0.3–0.35;落地后缓慢放大到约 1.02–1.04。
  • 标题淡入并上升约 28 px,历时 0.7–0.9 秒;落地卡片下的说明文字提前 0.2 秒出现,与落地读作一个动作。

使用方式:先读取视频,然后一次性询问并预填猜测:图片(4–12 张,上传、公开页面截取或生成的产品界面,注明生成文字为虚构);主视觉(无,或哪张图飞出、是否满画幅或作为带说明的卡片落地);文字(可选,墙面上的标题或落地卡片下的说明,最多七词,来自用户或讲者,绝不虚构名称或声明);外观(暗色 #0A0C16 配靛蓝光晕、亮色 #F3F0EA 配柔和瓦片阴影,或品牌色);位置(独立片段、覆盖演讲的 B-roll,或标题背景)。上传用 create_source;页面用 import_from_url 且 video: false,并逐张检查,剔除出现他公司 logo、cookie 横幅、真实人物或空白页的截图。生成屏幕时每屏一次 generate_image(正面平面 UI,无设备边框、无真实 logo、文字清晰),提示中的人名用虚构名,并检查结果裁掉真实品牌名。少于 6 张图时补充 16:9 裁剪版本(瓦片 sourceRect),避免墙面重复。截图需 16:9 且宽 1600 px 以上;主视觉满画幅展示,必须清晰。构建为单个 Tella Motion 文档(create_motion_document,配 videoId 用于 B-roll 或叠加层),绘制顺序由后到前:背景与光晕、按行分组的瓦片(row0、row1…)、作为平面分组的各行(漂移)、承载 3D 姿态与推进的 wall 组,然后是雾、主视觉和标题;瓦片保持 addMedia 且 fit: "fill",便于用户日后替换截图;16:9 墙面约 37 块瓦片。时间安排:在说出主视觉名称的上一词前 0.3 秒起飞,使落地与句子结束同步;起飞前留 2 秒漂移,落地后留 1.5 秒停留。独立片段用 create_clip {type: "motion", documentId} 再移动;B-roll 用 add_layout 铺 Tella Motion 媒体并硬切,墙面一开始就在漂移,无需入场;标题背景用满画布叠加层并把标题放上层。满画幅主视觉之后,下一拍切到真实产品,最后一帧即该截图平铺满屏,切换无缝。检查:用 get_filmstrip 取 0 秒、漂移中、起飞前、飞行中、落地和最后一帧,再用 get_motion_preview 检查:墙边缘之外无背景露出的硬线、中间行清晰、起飞时无跳变或图片替换、飞行中主视觉边缘干净、标题避开清晰行。

适用场景:产品发布视频的开场钩子或收尾节拍;年度“我们发布了什么”回顾;需要同时展示大量界面或图片的展示片段;作为演讲 B-roll 或标题背景。

限制与注意事项:飞行主视觉加投影会产生阶梯状锯齿,应关闭投影(行组内瓦片阴影没问题);主视觉的 3D 应设在图片本身而非组上,组投影会不经过滤镜渲染,需在图片上设透视、旋转与 rotateX,锚点放在画布中心;组模糊无法打关键帧,改用亮度关键帧压暗墙面;对单图组打亮度关键帧会让图片消失,应打在 wall 组上;组不会被画布裁剪,瓦片可位于画面外较远位置;开场视频的片段不要从 0 淡入整面墙,第 0 帧不能空白;墙面瓦片被缩小,细小 UI 文字会发虚,这可接受,仅主视觉需可读。