Posts
avatar
opus 5.5 is insane for motion design it made every frame of this 14s UI loop in code from one prompt no editor. no hand-keyframes. i'm sharing the full prompt + every follow-up for free steal it and swap the beats for your product ↓ Give me: * canvas color * shape color * accent color * shape radius * fonts * the states the shape should morph through Use hex codes, seconds, damping ratios and pixel sizes instead of adjectives. Make a 14 second, 1440x1440, 60fps seamless UI motion loop. One shape, zero cuts. The shape morphs from state to state and is never replaced. Each state fills 50% of the frame. The camera starts on the beat and settles slower than the shape. Use closed-form springs. Shape damping 0.72, settle time 0.35s. Camera damping 1.0, settle time 0.6s. Content swaps use 12px blur and fade over 0.15s. The cursor tip stays locked to whatever it drags. Use a 0.5s beat grid. 0.0 - pixel mascot idles 1.0 - mascot squashes into play button 1.5 - loader 2.0 - check draws 2.5 - timeline scrub 4.0 - keyframe stretches past the end and snaps back 5.0 - bezier editor 7.0 - counter rolls F 000 to F 840 8.5 - render bar fills 10.0 - command palette types "export mp4" 11.0 - toast says "840 frames rendered" 12.0 - toast shrinks back into the mascot The last frame must be the first frame. Write one HTML file with Canvas 2D. window.renderAt(t) must be a pure function of time. No Math.random. No clock. No carried state. ?t= must freeze the exact moment. Render every frame from renderAt(frame / 60). Use 4 subframes for motion blur. Encode to H.264 at 60fps. Fix the cursor jump at the loop wrap with: t - 14*floor(t/14) Do not cross-fade orange into ink. Use a ripple from the center at 1.5s and from the click point at 12.0s. Roll word swaps vertically. Start draw-on after blur-in. Aim the cursor at where the target will be when it lands. Keep cursor speed under 65 px/frame. First show me the storyboard. Then write the code. After the first render, check 5 frames around every beat and fix the issues before the final render.

This content is for informational and educational purposes only. It may include third-party insights, sponsored content, or promotional material for which the creator may receive compensation. Nothing in this feed constitutes investment advice or a guarantee of returns. You are solely responsible for your own investment decisions. Always conduct your own research and exercise caution before trading. We do not guarantee the accuracy of third-party information and are not liable for any losses incurred. Past performance is not indicative of future results. Please refer to our Community Terms and Risk Disclosure Statement for details.

avatarPost your reply

Comment