Kinetic motion design video built from one orange dot made with Claude Opus 5.5: Claude Opus launch video

opus 5.5 doing motion design. 0 keyframes. this 15-second video builds an entire motion system from one orange dot toggle → typography → spring graph → shape morph → kinetic type → halftone → end card here's the prompt to recreate it ↓ <inputs> Ask me for: a short label for the first toggle, one main word, a percentage for the graph, text for the final card, one accent color and a track with a clear beat. </inputs> <direction> A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold type and one vivid orange accent. The orange dot links every scene: it begins in the UI, becomes the dot above a letter, draws a spring graph, expands into a shape and reappears on the end card. A cursor makes the opening click feel real. Keep the movement crisp and controlled, with subtle spring overshoots and no empty pauses. Banned: stock footage, gradients, glows, particle bursts, arbitrary transitions and movement that doesn't grow from something already on screen. </direction> <structure> Around 15 seconds, with a visual change on every major beat. Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and shift into place until only "Motion" remains, with the orange dot above the "i". Spring: the dot leaps away from the word and lands on a graph. Its trajectory draws a spring response, passes the target and settles next to a "+22%" callout. Shape: the dot races along a line, expands into an orange circle and fills the frame. A black rounded square rotates inside it, then extends into a pill. Everything contracts into one orange dot on black. Type: words including "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" circle the dot. The ring of words spreads into a field of tiny dots. Reveal: the halftone field expands and turns black, uncovering the final card: "Opus 5.5", "Motion designer." and "0 keyframes". Return: the orange dot travels back through the halftone, graph and toggle. Make the last frame match the first for a seamless loop. </structure> <build> 1. Use one HTML file, 1920x1080 at 60fps. Calculate every visual from time inside seek(t): no CSS transitions, timers or state carried between frames. 2. Use closed-form springs for the toggle, moving dot and graph. Draw the graph with the same spring function that controls the dot. 3. Move the letters individually as "Reduce Motion" becomes "Motion". Keep the orange dot above the "i" until it jumps away. 4. Treat the orange circle, rotating square and pill as states of one shape. Carry its position and momentum through each change. 5. Arrange the words on a circular path, then send their letters outward to transition into the halftone grid. 6. Draw the halftone as a dot grid whose sizes react to the orange dot. Expand it beyond the frame before showing the end card. 7. Align the click, dot landing, graph peak, shape changes and final title with measured beats. Render one frame per beat to check timing before the full export. </build> <gotchas> The graph and dot must share the same motion or the spring will look wrong. Use the same orange accent throughout. Time outgoing and incoming text separately so letters never overlap. When a shape fills the screen, extend it beyond all four corners. Match the cursor, dot and typography in the opening and closing frames to prevent a loop stutter. </gotchas> <start> Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video. </start>

View post by @ultimaxbt on X