← 返回提示词
GitHub

[awesome-opus5-5-videos · UI动效] GSAP卡片时序与逐帧核验

留白公开素材集中的提示词条目。

提示词发布于 2026-11-09更新于 2026-11-09浏览 0

部分附加信息、来源说明或示例仍显示原文。

来源:import:liubai_public_20261104 · https://github.com/Shanvision-star/liubai-prompt-library/blob/25f0137e36a8fae46aebace86b18cdfeff624a99/bundled-library/entries/PRM-0016/original.md · 授权:MIT License Copyright (c) 2026 yihui-dev Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

适用说明

适用场景

来源仓库标注作者 @fleyta88;中文解读或分析以留白条目说明为准,效果未实测。
上游:https://github.com/yihui-dev/awesome-opus5-5-videos/blob/92aee2f586ac0715cb3cbcb6384834f98a33383d/prompts/fleyta88-443662.md

MIT 许可(续):
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

公开署名

@fleyta88;留白素材库整理

EXAMPLE

使用示例

提示词示例输入

示例目标:在深色界面中让一张卡片从左侧进入并停在中间;先确定入场和停留的关键状态,再逐帧核对。

文字示意结果

以下结果为人工编写的示意,并非模型实测输出。

可先用四个关键状态描述卡片从画面左侧进入、接近中心和停稳。下面的循环图仅展示概念,没有运行 GSAP,也不能代替真实时间线及逐帧核验。

实际生成时的文字输入

Create one precise 4-COLUMN BY 3-ROW contact sheet containing exactly TWELVE separate complete animation frames, all equal-size rectangular tiles, strictly aligned in a straight grid with thin neutral gutters. No letters, words, numerals, logos, watermark or people. This is THREE DIFFERENT animation examples, one per row; do not mix rows. ROW 1, all four tiles: same minimal dark navy dashboard with one rounded pale-blue card; the card enters from the left in frame 1, approaches center in frame 2, settles center in frames 3 and 4. ROW 2, all four tiles: same cream dashboard canvas; one blue rounded data widget appears in frame 1, a second teal widget joins in frame 2, a third amber widget joins in frame 3, all three remain in frame 4. ROW 3, all four tiles: same centered plain gold star badge on deep indigo background; badge is dim in frame 1, gently brightens in frame 2, glows with a few small gold sparkles in frame 3, returns to softer glow in frame 4. Each row has a fixed camera, matching background and consistent objects across its four frames. Clean modern flat vector style, high contrast, ample margins around objects; no frame of one row may contain elements from another row.
查看输入译文

译文仅供参考;实际生成时使用的是上方原文。

创建一张精确的 4 列 x 3 行联系表,包含恰好十二个独立的完整动画帧,所有帧均为等大的矩形瓦片,严格沿直线网格排列,带有细微的中性间隙。无字母、单词、数字、徽标、水印或人物。这是三个不同的动画示例,每行一个;不要混合行。第 1 行,所有四个瓦片:相同的极简深海军蓝仪表板,带有一个圆角淡蓝色卡片;卡片在第 1 帧从左侧进入,在第 2 帧接近中心,在第 3 帧和第 4 帧定位于中心。第 2 行,所有四个瓦片:相同的奶油色仪表板画布;一个蓝色圆角数据组件在第 1 帧出现,第二个青色组件在第 2 帧加入,第三个琥珀色组件在第 3 帧加入,所有三个组件在第 4 帧保持不变。第 3 行,所有四个瓦片:深靛蓝色背景上相同的居中纯金色星形徽章;徽章在第 1 帧呈暗淡状态,在第 2 帧轻轻变亮,在第 3 帧伴随少量细小金色闪光发光,在第 4 帧恢复到较柔和的光芒。每一行都有固定的摄像机、匹配的背景以及在其四个帧中保持一致的物体。干净的现代扁平矢量风格,高对比度,物体周围有充足的边距;任何一行的帧都不得包含另一行的元素。

图片与动图示意结果

一张蓝色卡片在深色背景上进入并停稳;这是四帧简化示意。 素材来自三主题帧图的第 1 行,仅为短循环示意。

静态图片由 imagegen 按上面的输入生成;动图由生成的四帧画面拼接而成,效果仅供参考。

卡片从左侧进入并停稳的四帧示意
生成的四格关键画面

THE PROMPT

提示词正文

为 UI 卡片构建一个具有特定时间约束的 GSAP 时间轴:卡片为 280ms,标题为 220ms,元数据为 160ms,元素间采用 60ms 的交错延迟。实现一个验证循环,通过 Playwright 逐帧步进动画,将截图进行对比以检测过冲或错误,并在不重写全部代码的情况下进行补丁修复,直到通过检查。

提示词仅供参考,请结合实际场景调整,并核实 AI 生成结果。