Prompt Style Atlas

代码动效参考 · 3D 场景

<inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.…

Created by

原始 Prompt

原文已收录 · 未独立复现

<inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

查看 X 原帖

视频信息

时长: 0:15
画幅: 1280 × 1280

技术栈

svg

如何使用这条 Prompt

这些案例通过代码制作动效或交互 HTML，不是 Sora、Runway 等文生视频模型的生成配方。来源 Prompt 和预览不保证同样输出，复现前请检查依赖及原帖说明。

使用流程

用来源需求重建代码动效

预览用于参考，来源文字可能省略后续修改、素材或依赖；本站未独立复现这些案例。

阅读代码动效使用指南

01
先看完整/部分原文标识，再到原帖检查缺失指令与素材。
02
向编程助手说明输出格式、库版本和素材要求，先完成一个可运行场景。
03
运行生成的项目，先检查浏览器控制台，再增加效果。
04
对照预览检查时序和交互，并检查缩放、移动端和减少动态效果模式。

结果不符合预期？先检查这些

场景黑屏？依次检查加载错误、画布尺寸、相机取景和渲染循环。
代码动效需求不能直接当作文生视频配方使用。

同类更多 Prompt

opus5.5有点强，我让它自由选题做交互页面和视频，提示词：用你最强的思维和能力，根据对我的了解，自行寻找我可能喜欢的主题，制作一个3…

@DemitiyaGeekzen

我让 @claudeai Opus 5.5 制讲一只机械寄居蟹在深海追一束光，追到最后发现，发现那束光其实一直在自己手里的动画视频。没用…

@gmgmgm1545

刷到很多用opus 5.5生成的酷炫视频为啥我用opus 生成的视频满满的像素感大家都是怎么生成的？

@jarvis11x