返回分类Opus Video
无缝 UI 变形循环(Beat-synced Playwright + FFmpeg)
1440×1440 纯时间 HTML UI 循环:8–12 状态、闭式弹簧、光标驱动、NumPy 对拍、Playwright 子帧 + FFmpeg 运动模糊。
效果实例演示与视觉验证
60 FPS
Playwright + FFmpeg
渲染机制与动态特征
1440×1440 60fps 连续 UI 单形状形变循环,严格按音频节拍在 8 个状态间无缝切换。
渲染引擎 / 技术Playwright + FFmpeg
目标帧率60 FPS
画面比例 / 分辨率1440×1440 (1:1)
交互模式Seamless loop
参数配置
Duration:loop ~1 bar × 7
Aspect Ratio:1:1
Target Resolution:1440×1440 @ 60fps
Tools / Engine:HTML, Playwright, FFmpeg, NumPy
提示词正文
Use the full template for a beat-synced UI morph loop rendered from a single HTML scene with Playwright and FFmpeg. Inputs I will provide: 8–12 UI states, one accent color (or monochrome), and a royalty-free track near 120 BPM. Visual rules: - 1440×1440 warm-gray canvas, Geist typography. - ONE continuously morphing shell (never cut into separate layers); content swaps inside with short blur only. - Visible cursor causes EVERY click and drag; drags set values from cursor position while held, release springs from current state. - Restrained springs and camera zooms; NO bounce easing, particles, glow, chrome gradients, mismatched icon weights, dead air, or template SaaS look. Beat map (7 bars): button → loader → check → dynamic island → player play/pause → scrubber drag → overextended volume slider → toggle → liquid tab indicator → self-drawing chart + tooltips → command palette type/filter → Enter → toast → return to starting button. Engine: - Single HTML file; seek(t) computes ALL properties; no CSS transitions, no setInterval, no hidden frame state. - Closed-form spring step responses with superposition for multi-step targets; independent edge springs for tabs/toggles. Render: - Analyze audio in NumPy; start on downbeat; UI clicks on measured peaks. - Playwright: 4 subframes per output frame; FFmpeg tmix → 60fps motion blur. - Before full render: one still per beat; fix off-grid timing and legibility; avoid will-change on camera-scaled nodes; separate in/out text timing; last frame MUST match first (cursor pos + velocity).
实现步骤与运行指引
- Supply 8–12 UI states, monochrome or one accent, ~120 BPM royalty-free track.
- One morphing element on warm-gray canvas; Geist type; visible cursor for every click/drag.
- Seven-bar beat map: button → loader → check → dynamic island → player → scrubber → volume slider → toggle → tabs → chart → ⌘K → toast → loop.
- Compute all properties from seek(t); closed-form springs; no CSS transitions or timers.
- NumPy beat analysis; Playwright 4 subframes/frame; FFmpeg tmix; last frame identical to first including cursor velocity.
站内推荐生产力工具与进阶指南
相关推荐提示词
Opus VideoFeatured
15 秒动态设计师 Showreel
15 秒作品集级动效片;作者允许「尽情发挥」——视觉系统、转场与配乐由模型自主决定。

Code-driven Motion60 FPS
#Motion Graphics#Showreel#Typography
15s16:9
制作一段 15 秒的 dynamic motion-design showreel,用于设计师作品集。请尽情发挥(go all out):自主决定视觉系统、字体排印、转场语言和配乐(可用 Web Audio 生成或我提供的音轨)。 约束: - 前两秒必须有强钩子;全程避免超过 0.4s 的静止。 - 结尾 1 秒留 memorable logo/type moment。 - 优先用代码渲染(Canvas/SVG/HTML),单文件或可复现渲染脚本。 - 先给 480p 预览 + 分镜表(时间码 + 画面描述),我确认后再出 1080p 母版。
Stephan Livera
Opus VideoFeatured
推理初创公司发布宣传片
现代、精致、节奏鲜明的推理创业公司发布片:钩子—证明—转化,基于真实产品素材。

Remotion / Canvas60 FPS
#Launch#Product Demo#Motion Graphics+1
20–30s16:9
make a modern slick and punchy video for a modern startup that works on inference. I will supply: product name, logo SVG/PNG, 3 UI screenshots, one-sentence value prop, brand colors. Your tasks: 1. Turn this into hook (3s) → proof (latency/cost diagram, real UI) → payoff (CTA) for ~25s. 2. Do not invent customer logos, benchmarks, or compliance claims. 3. Render with Remotion or deterministic HTML/CSS animation; deliver MP4 + editable project if applicable. 4. Low-res preview first; list copy that legal must verify.
Deedy
Opus VideoFeatured
Manim 微积分教学视频
Manim + edge-tts 导数课;教育讲解路径,在七种制作路径中预览时长中位数最长。

Manim Community + LaTeX60 FPS
#Manim#Calculus#Education+2
3–5 min16:9
根据我提供的 [导数/积分] 课程提纲,做 3–5 分钟 Manim 微积分入门视频。 流程: 1. 列 3 项学习目标 + 引用来源;标注需确认的步骤。 2. 写逐镜讲稿:定义 → 几何直觉 → 极限式 → 求导法则示例 → 常见误区。 3. 用 Manim Community 渲染;旁白 edge-tts;生成 SRT 字幕与画面 lock。 4. 检查公式不被遮挡、字幕对齐、音轨不削波。 5. 交付:scene/*.py、render.sh、final.mp4、讲稿.md。若无法试听成片,标注「旁白需人工听审」。
LinearUncle
