Opus 5.5 一镜到底 UI 变形产品发布片提示词
本提示词由 @twoclipping 在 X 上公开，用于指导 Claude Opus 5.5 制作 Apple 发布会风格的一镜到底正方形 2D 产品发布短片。
动画中字标、照片网格、液态玻璃工具栏、手机界面、订单状态与真实墙面装裱画连续变形，涉及 SVG feImage 位移图、三重 feDisplacementMap 色差边、全帧内（-g 1）视频解码与闭环无缝循环。
- 原帖链接：https://x.com/twoclipping/status/2103835273813496100
- 开源地址：原帖直接开源代码规范模板
中文翻译提示词
OPUS 5.5 是你唯一需要的动效设计师
这支发布视频成本为 0 美元，纯代码制作
X 上其他人都声称同样的话，然后把你引流到他们的网站或 MCP
这是完全免费的，无需外部工具，只有一个可以运行的提示词。
拿去用吧 ↓
<inputs>
请向我索取：一个用于字标的单词品牌名（动词最好）、9–12 张高分辨率照片、一首约 120 BPM 且有高潮和安静间奏的免版税歌曲（Mixkit，可免费商用），以及一段植物影子在素墙上移动的免费素材视频（Pexels）。
</inputs>
<direction>
制作一段 Apple 发布会式的产品短片，只用 2D，一镜到底。每个场景都从前一个场景的元素演化而来：不使用淡入淡出、模糊转场或切镜，而是让物体改变形状。文字从遮罩线后升起，图标以弹簧运动从零尺寸弹出，横条向两边生长，页面推入；一个黑色形状先淹没整帧，再收缩成为下一场景。画布为暖调米白色，UI 为黑色；照片上叠加 iOS 26 液态玻璃质感。字标使用 Archivo（宽度轴 125、字重 800），UI 使用 Geist。光标通过真实的点击、拖动和长按推动每次变化。镜头按屏幕演示视频的方式缩放，让每个瞬间充满正方形画面，光标也随镜头同比缩放。
禁止：交叉淡化、模糊进入、逐渐变亮的“显影”、3D 翻转、粒子、发光、超过 1 秒的静止，以及任何模板味的处理。
</direction>
<structure>
120 BPM，共 54 拍；每一拍都要有变化。
开场：字标像手风琴一样挤向自己的句点；这个点变成黑色胶囊，文字从胶囊内升起。点击后，六片虹膜叶片在文字上闭合，再突然打开，显露一张照片。圆变成方形并缩小，网格从后方像纸地图一样展开（先中心、再十字、后四角），重排成 bento 布局；点击某一格并放大，准确落在歌曲高潮开始处。
玻璃段：玻璃质感的单词逐字弹出，融化成液滴，再拉伸为玻璃工具栏。调节图标将其变为滑块。拖动时，照片从白天变成金色黄昏（使用两张对齐的照片）；按住时，旋钮变为玻璃镜片。镜片抬起成为玻璃球，下一张照片在球内以圆形展开，玻璃球扩张成锁屏：玻璃时钟数字、日期，以及拉伸成玻璃音乐播放器的底部横条。
舞台段：锁屏后退变成手机，边框从屏幕边缘长出来。灵动岛像液体般拉伸、分离、飞走，变成一个像卷帘一样展开的 Mac 窗口。长按壁纸，把它拖到 Safari 标签页；网页向内推进，壁纸落下后成为着陆页主视觉。向下滚动时，主视觉变成产品卡片上的装裱画，衬纸和画框从照片边缘生长出来。选择画框颜色（颜色扫过画框）和尺寸，然后导航按钮飞下来，变成“Order print”。
订单段：同一个黑色形状持续变化：Ordered ✓ → Printing % → On its way（沿路线行驶的小货车）→ Delivered ✓。
墙面段：“已送达”圆形铺满画面，留一拍纯黑，再收缩成真实墙面素材中的装裱画。同样的虹膜在画面上打开又闭合；画框随后铺满屏幕，依次收缩成胶囊、句点，字母再弹出，并落在节拍返回点。最后一帧与第一帧相同。
</structure>
<build>
1. 只用一个 HTML 文件，画幅 1440×1440。所有样式都由异步 seek(t) 按时间计算；不使用 CSS 过渡、定时器或跨帧状态。
2. 弹簧运动采用闭式阶跃响应。若一个值有多个目标，就把每次变化对应的弹簧相加，以保持它是时间的纯函数。
3. 液态玻璃：每个玻璃元素都保存背景场景的一个副本，用 SVG feImage 位移图（圆角矩形距离场）和三个不同尺度的 feDisplacementMap 处理，形成彩色边缘，再加边缘光。玻璃字母则为每个字形建立 Canvas 距离场，以生成位移图、遮罩和高光。
4. 黏连效果：先模糊再按 alpha 阈值裁切，最后把原始图层叠回去，使玻璃内部仍清晰。
5. 虹膜：六片叶片围住一个六边形开口；每片叶片由两个顶点、两侧的边延长段，以及两点之间的短圆弧构成。
6. 字标挤压：每个字母以相同系数向句点移动，字母绘制宽度同步缩小（收窄字体宽度轴并缩放其余部分），让字母始终相连。
7. 视频素材：用 ffmpeg -g 1 重新编码成全帧内格式，以 Blob URL 加载；每次绘帧前等待 seeked 事件。
8. 声音：每个事件使用从 Mixkit 下载的音效，不自行合成；根据测得的峰值定位。歌曲从强拍开始：放大动作落在高潮，墙面画面处于安静间奏，字标随节拍回归。用 loudnorm 规范到 -14 LUFS。
9. 用 Playwright 渲染：每帧取四个子帧，以 ffmpeg tmix 混合，输出 60 fps。检查每拍的一帧，再扫描单帧突变（帧差峰值达到相邻帧的三倍）。
</build>
<gotchas>
Chromium 会错误读取 backdrop-filter: url() 的位移图，因此改为复制背景场景。铺满全屏的形状必须越过四角，过程约需 0.3 秒，否则半个画面会在单帧中突然改变。即使父元素隐藏，visibility: visible 的子元素仍可能露出，所以要使用 inherit。形变容器内切换的文字需要独立遮罩。python http.server 无法提供视频范围定位，因此使用 Blob URL。
</gotchas>
<start>
先索取输入素材，再给我看节拍图和四张静帧（开场、玻璃、舞台、墙面），然后才编写完整影片。
</start>原版提示词
OPUS 5.5 IS THE ONLY MOTION DESIGNER YOU NEED
this launch video cost $0 and is pure code
everyone else on X claims the same shit, then sends you to their website or mcp
this is completely free with 0 external tools
steal the prompt and try it in your claude ↓
<inputs>
Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free song around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels).
</inputs>
<direction>
An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, pages push, and a black shape floods the whole frame and contracts into the next scene. Warm off-white canvas, black UI, iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for UI. A cursor drives every change with real clicks, drags and long-presses. The camera zooms screen-studio style so each moment fills the square, and the cursor scales with it.
Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template.
</direction>
<structure>
120 BPM, 54 beats, something happens on every beat.
Open: the wordmark squeezes into its own period like an accordion, the dot grows into a black pill, a label rises inside it. Click: six iris blades close over the label and snap open onto a photo. The circle becomes a square, shrinks, the grid unfolds from behind it like a paper map (center, plus, corners), reflows into a bento, and a click zooms into one tile, landing exactly on the drop.
Glass: a glass word pops in letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob turns into a glass lens while held. It lifts into a glass orb, the next photo opens inside it as a circle, and the orb expands into a lock screen: glass clock digits, date, and a home bar that stretches into a glass music player.
Stage: the lock screen pulls back into a phone (the bezel grows out of the screen edge). The Dynamic Island stretches like liquid, pinches off, flies over and grows into a Mac window that rolls up like a blind. Long-press the wallpaper, drag it onto a Safari tab, the page pushes in, drop it and it becomes the hero of a landing page. Scroll: the hero morphs into a framed print on a product card, with the mat and molding growing out of the photo's edge. Pick a frame color (it paints across) and a size, then the nav button flies down into "Order print".
Order: one black shape keeps morphing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓.
Wall: the delivered circle floods the frame edge to edge, holds black for a beat, and contracts into the framed print hanging on the real wall footage. The same iris opens onto the print, closes again, the frame floods the screen and contracts into the pill → the dot → the letters spring back out, landing on the beat return. Last frame = first frame.
</structure>
<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside an async seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value with many targets is the sum of one spring per change, so it stays a pure function of time.
3. Liquid glass: each glass element holds its own clone of the scene behind it, filtered with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, plus a rim light. Glass letters: a canvas distance field per glyph gives the map, mask and highlights.
4. Goo: blur + alpha threshold, then composite the source atop it so the glass stays sharp inside.
5. Iris: 6 blades around a hexagonal aperture. Each blade is its two vertices, both edge extensions and the SHORT arc between them.
6. Wordmark squeeze: every letter moves toward the dot by the same factor and its drawn width follows (narrow the wdth axis, scale the rest), so the letters stay touching.
7. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing each frame.
8. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each placed by its measured peak. The song starts on a downbeat: the zoom lands on the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS.
9. Render with Playwright: 4 subframes per frame blended with ffmpeg tmix, 60fps. Check one frame per beat, then scan for single-frame pops (frame-difference spikes 3x their neighbours).
</build>
<gotchas>
backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale past the corners and take about 0.3s, or half the screen changes in one frame. A child with visibility: visible shows through a hidden parent, so use inherit. Text that swaps inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL.
</gotchas>
<start>
Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film.
</start>