Opus 5.5 一条提示词生成 SaaS 产品动效视频

Harish @Harish_521原推发布于 2026.09.30

在 X 上打开原推

Tested opus 5.5’s motion design capabilities on my SaaS http://repomail.online last night and this genuinely shocked me this entire video is code >0 after effects >0 premiere >0 manual keyframes opus created the motion system, cursor interactions, morphing UI, camera movement, motion blur and final render all from one prompt i’m dropping the full prompt template below <inputs> First inspect the existing product. Understand: brand logo colors typography dashboard screenshots UI components existing assets Use the real product UI wherever possible instead of inventing random interfaces. Then decide on 8 to 12 states the product can transform through. </inputs> <direction> Create Dribbble level product motion design entirely with code. The entire animation should feel like one continuous object transforming through different product states. Never make it feel like a slideshow. The same primary container should continuously morph its: size position radius layout color content Content swaps should use short blur, opacity and scale transitions. Every transition should feel intentional. Use restrained springs with a tiny amount of overshoot. No excessive bouncing. A cursor should drive important interactions with real clicks, hovers and drags. The camera should continuously reframe the UI so the active state fills the composition. Typography should stay crisp. Use the existing product font where possible. The animation should feel like something from Linear, Raycast, Vercel, Stripe or Framer. </direction> <structure> Build a 14 to 16 second animation around a 120 BPM beat grid. Something meaningful should happen on almost every beat. For RepoMail my sequence was: RepoMail logo → GitHub repository card → connect repository → repository scanning → commits and pull requests appear → contributor activity → graph draws itself → cursor hovers graph → weekly report → report morphs into email → inbox appears around it → new RepoMail email arrives → cursor opens email → weekly summary expands → Monday delivery notification → everything collapses back into the RepoMail logo The last frame must perfectly match the first frame so the video loops seamlessly. </structure> <motion> Use mathematical springs instead of random CSS easing. Important container edges should sometimes use separate springs. Example: when a pill expands horizontally, let the leading edge move slightly ahead of the trailing edge when a toggle moves, allow the knob edges to stretch differently when a card grows vertically, let one edge slightly lag behind This creates a subtle liquid motion without making the UI feel cartoonish. Keep the motion fast, clean and confident. </motion> <cursor> The cursor should behave like a real person using the product. Use smooth curved paths. The cursor can: hover click drag scroll type Important product changes should happen because of cursor interaction instead of randomly triggering. Clicks should have subtle feedback. No giant click circles. Return the cursor to its original position before the loop ends. </cursor> <camera> Use a virtual camera around the UI. When the component becomes small, gently zoom in. When the UI expands into a dashboard, report or email, gently pull back. The active interface should occupy most of the frame. Avoid huge empty areas around tiny components. Camera movement should remain smooth and subtle. </camera> <timing> Assume music around 120 BPM. At 120 BPM: 1 beat = 0.5 seconds Create the entire beat map before implementing the final animation. Example: Beat 1 logo appears Beat 2 container expands Beat 3 repository appears Beat 4 cursor enters Beat 5 cursor clicks connect Beat 6 analysis begins Continue this until every major action has an exact place on the beat grid. Major transitions should preferably land on strong beats. </timing> <build> Build the composition in HTML, CSS and JavaScript. Use a square 1440 x 1440 canvas. Create one master timeline function conceptually equivalent to: seek(t) Every visual state must be calculated entirely from the current timestamp. Never depend on the previous frame. Do not use timers for animation logic. Do not rely on CSS transitions for the main animation. Given the same timestamp, the page should always generate the exact same frame. Build reusable utilities for: spring motion interpolation blur transitions opacity transitions scale transitions number counters cursor movement camera movement If a value changes targets multiple times, compose the spring responses so the animation remains deterministic. When text changes inside a morphing container, outgoing and incoming text must have different timing so they never overlap. At least one chart should draw itself progressively. Let the cursor hover the chart and reveal a tooltip. Make the chart become part of the next transformation instead of simply fading away. </build> <audio> If a song exists, analyze it and align the timeline to its beats. Start the animation on a strong downbeat. UI sounds can include: mouse clicks keyboard taps email arrival soft confirmation sounds Keep them subtle. The music should remain dominant. </audio> <render> Render the animation at 60 FPS. Use Playwright to capture frames from the browser. Use multiple temporal samples for each output frame. Prefer 4 samples per frame. Blend those samples using FFmpeg to create natural motion blur. Also support rendering without motion blur for debugging. Before rendering the entire video: render one representative frame from every major beat inspect them fix anything that feels: cramped misaligned hard to read too empty off beat visually inconsistent Then render the full sequence. </render> <debug> Create a debug mode showing: current timestamp frame number beat number active scene cursor coordinates camera scale Allow jumping to any timestamp so individual transitions can be tuned quickly. </debug> <quality> Every frame should look good enough to use as a screenshot. Perfect spacing. Sharp typography. Consistent icon strokes. Strong hierarchy. Clean alignment. No random movement. Motion should guide attention. If an existing product component looks weak during animation, redesign a motion specific version while keeping the same product identity. </quality> <banned> No particle explosions No random floating objects No excessive glow No giant gradients everywhere No glassmorphism on everything No cartoon bouncing No meaningless rotations No template looking transitions No dead time No giant paragraphs of marketing text No hard cuts unless absolutely necessary No blurry typography No unrelated fake UI </banned> <workflow> First inspect the product. Then create the state list. Then create the beat grid. Then define how every state transforms into the next. Then build the deterministic motion engine. Then implement the animation. Then create a browser preview with timeline controls. Then render one frame per important beat. Inspect those frames yourself. Fix visual problems. Then render the final video. Do not stop at a prototype. Finish the entire system. </workflow> <goal> the final reaction should be: “wait, this entire video is just code?” </goal>