<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>
29 秒一镜到底的发布短片,每个场景都从上一个变形而来:液态玻璃、光圈转场、实拍墙面,全卡 120 BPM。 英文标题:Apple-keynote style launch film template 中文提示词译文: <inputs> 先问我要:一个用作文字标志的单词品牌名(动词效果最好)、9 到 12 张高分辨率照片、一首 120 BPM 左右、有 drop 和安静间奏段的免版税歌曲(Mixkit,可免费商用),以及一段植物影子在素墙上晃动的免费素材视频(Pexels)。 </inputs> <direction> 一支苹果发布会风格的发布短片,只用 2D,一镜到底。每个场景都由上一个场景变出来:没有淡入淡出、没有模糊、没有剪切。物体靠改变形状来过渡:文字从遮罩线里升起,图标用弹簧从零弹出,条形横向画出,页面推入,一个黑色形状铺满整个画面,再收缩成下一个场景。暖白色画布,黑色 UI,照片上叠 iOS 26 液态玻璃。文字标志用 Archivo(wdth 125,字重 800),UI 用 Geist。每次变化都由光标通过真实的点击、拖拽和长按驱动。镜头像 Screen Studio 那样缩放,让每个瞬间都填满方形画面,光标也随之缩放。 禁止:交叉淡化、模糊入场、亮度「显影」、3D 翻转、粒子、辉光、停顿超过 1 秒、任何看起来像模板的东西。 </direction> <structure> 120 BPM,54 拍,每一拍都有事发生。 开场:文字标志像手风琴一样挤进自己的句号,这个点长成一个黑色胶囊,里面升起一个标签。点击:六片光圈叶片合拢盖住标签,再猛地张开,露出一张照片。圆形变成方形并缩小,网格像纸质地图一样从它背后展开(中心、十字、四角),重排成 bento 布局,一次点击放大进其中一格,正好落在 drop 上。 玻璃:一个玻璃质感的单词逐字弹出,融化成一滴水珠,再拉伸成一条玻璃工具栏。调节图标把它变成滑块。拖动滑块把照片从白天重新打光成黄金时刻(两张对齐的照片),按住时滑块圆钮变成一枚玻璃透镜。它升起成一个玻璃球,下一张照片在球里以圆形打开,玻璃球再扩展成锁屏:玻璃质感的时钟数字、日期,以及一条拉伸成玻璃音乐播放器的 Home 条。 舞台:锁屏往后拉,变成一部手机(边框从屏幕边缘长出来)。灵动岛像液体一样拉长、掐断、飞过去,长成一个 Mac 窗口,再像百叶帘一样卷起。长按壁纸,把它拖到一个 Safari 标签页上,页面推入,松手后它成为一个落地页的主视觉。滚动:主视觉变形成商品卡片上的装裱画,卡纸和画框线条从照片边缘长出来。选一个画框颜色(颜色会刷过去)和一个尺寸,然后导航按钮飞下来变成「Order print」。 下单:一个黑色形状持续变形:Ordered ✓ → Printing % → On its way(一辆货车走在路线上)→ Delivered ✓。 墙面:送达的圆形从边到边铺满画面,保持黑色一拍,然后收缩成挂在真实墙面素材上的装裱画。同一个光圈在画上打开、再合上,画框铺满屏幕,再收缩成胶囊 → 点 → 字母弹回来,正好落在节拍回归处。最后一帧 = 第一帧。 </structure> <build> 1. 一个 HTML 文件,正方形 1440x1440。所有样式都在一个 async seek(t) 里由时间算出:不用 CSS 过渡,不用定时器,帧与帧之间不保留状态。 2. 弹簧用闭式阶跃响应。一个有多个目标的值,等于每次改变各对应一个弹簧的叠加,所以它仍是时间的纯函数。 3. 液态玻璃:每个玻璃元素持有一份它背后场景的克隆,用 SVG feImage 位移贴图(一个圆角矩形距离场)过滤,经过三个比例略有不同的 feDisplacementMap 形成色散边缘,再加一圈边缘高光。玻璃字母:每个字形用一个 canvas 距离场生成贴图、遮罩和高光。 4. 粘滞(Goo)效果:模糊 + alpha 阈值,然后把源图合成在上面,让玻璃内部保持清晰。 5. 光圈:6 片叶片围绕一个六边形孔径。每片叶片由它的两个顶点、两条边的延长线以及两点之间较短的那段弧组成。 6. 文字标志挤压:每个字母都按同一个系数向句号靠拢,字形宽度随之变化(收窄 wdth 轴,其余部分缩放),这样字母始终挨在一起。 7. 素材视频:用全帧内编码重新编码(ffmpeg -g 1),以 blob URL 加载,每画一帧前 await 'seeked'。 8. 声音:每个事件都用一个下载的音效(Mixkit),绝不合成,每个都按它实测的峰值位置放置。歌曲从强拍开始:放大正好落在 drop 上,墙面段落放在安静间奏里,文字标志随节拍回归。响度标准化到 -14 LUFS。 9. 用 Playwright 渲染:每帧 4 个子帧,用 ffmpeg tmix 混合,60fps。每拍检查一帧,然后扫描单帧跳变(帧差达到相邻帧 3 倍的尖峰)。 </build> <gotchas> 在 Chromium 里 backdrop-filter: url() 会读错位移贴图,所以改为克隆场景。铺满动画必须放大到超出四角,并且用大约 0.3 秒,否则半个屏幕会在一帧之内突变。父元素隐藏时,设了 visibility: visible 的子元素仍会显示出来,所以要用 inherit。在变形形状里切换的文字需要它自己的遮罩。python http.server 不能按范围跳转视频,所以用 blob URL。 </gotchas> <start> 先问我要输入,然后在写完整短片之前,给我看节拍图和 4 张静帧(开场、玻璃、舞台、墙面)。 </start> 使用工具:svg, canvas, playwright, ffmpeg 需要输入:brand, images, music, footage 原始发布:https://x.com/twoclipping/status/2103835273813496100 来源许可/权利说明:CC BY 4.0(仓库采用 CC BY 4.0;社区 Prompt 与视频权利归原作者并受原帖条款约束,保留完整归属)
继续探索相似创作思路