Sprites.ai One-Shape UI Promo
Claude Opus 5.5 video example. The collected frames show research-status bars and channel-metric cards on warm gray. The stored brief specifies continuous shape changes, cursor actions, a loop and time-addressable rendering. This guide borrows that brief structure without asserting that every requested property appears in the finished film. Includes an asset-replacement and staged production guide.
Overview
What you get
- Make a looping UI interaction film where one shape carries several states.
- A product-specific asset list, replacement table and staged AI requests.
Case study
Make a similar video
The collected frames show research-status bars and channel-metric cards on warm gray. The stored brief specifies continuous shape changes, cursor actions, a loop and time-addressable rendering. This guide borrows that brief structure without asserting that every requested property appears in the finished film.
Your goal: Make a looping UI interaction film where one shape carries several states. This work belongs to the Claude Opus 5.5 video collection. Select Claude Opus 5.5 in an AI coding tool that supports it and submit the assets and requests below in stages. The model plans, writes and edits code; the actual project handles preview/export. Voice and music need suitable tools or supplied audio.
The post describes one HTML file, Playwright rendering and code-generated UI sounds; the stored request makes seek(t) control every state. Start with a shorter three-state version instead of the full interaction chain.
Prepare your assets
- Three to five actual UI states and the click or drag connecting each pair.
- Brand color, font, icons and demo-safe metrics.
- Matching first/last composition including cursor position, output ratio and beat sheet.
Put files in a directory AI can read, such as assets/, and explain each filename and purpose. Specify ratio, duration and publishing destination. If you supply only a URL, ask what content is accessible before assuming any functionality.
Replace elements for your product
| Element in the sample or creator brief | Your replacement |
|---|---|
| Research-status bar | Your loading or processing state |
| Channel-metric card | Your result card |
| 42 competitors and ROAS | Accurate demo content for your product |
| #FD9543 accent | Your brand accent |
An upload product can use button→progress→file card→button; an approval tool can use pending→details→approved→pending. Do not retain advertising capabilities your product lacks.
Morph the same element rather than cutting. Export must not rely on accumulated timers or CSS-transition history; match the cursor at the loop boundary too.
Start with this shot plan
This is an editorial draft, not a frame-by-frame reconstruction. Approve assets and copy for each scene, adjusting durations to the information load.
- 0–3s: a button enters the processing state.
- 3–7s: the same shape expands into a result card.
- 7–11s: the cursor performs one action.
- 11–14s: return to the initial shape and cursor position.
Make it with AI in four steps
Editorial suggestion; not reproduction-tested. Fill in brackets and approve each preview before continuing. The creator’s film is not a downloadable project template.
- Check assets and plan shots.
I am using Claude Opus 5.5 to make a video for [my product].
Goal: Make a looping UI interaction film where one shape carries several states.
Audience: [people]. Ratio and duration: [requirements]. Assets: [directory].
Read my product brief, identity and assets. List confirmed features and missing files.
Use the draft above to plan visuals, short headings, asset files, durations and transitions.
Morph the same element rather than cutting. Export must not rely on accumulated timers or CSS-transition history; match the cursor at the loop boundary too.
Provide the shot list before producing the full film.- Make one sample. After approving the plan and file paths, send:
The shot list is approved. Preview button→status bar→result card and verify that seeking to an arbitrary time produces the correct frame.
Production approach: The post describes one HTML file, Playwright rendering and code-generated UI sounds; the stored request makes seek(t) control every state. Start with a shorter three-state version instead of the full interaction chain.
Check dependencies and assets in this environment and provide the actual preview method.
Identify missing tools, models or audio rather than presenting placeholders as finished work.
Deliver this sample preview first, then list the files needed for the full film.- Complete the remaining scenes. Approve type, colors, asset proportions and pacing first:
Complete the other shots using the approved sample's visual rules.
Morph the same element rather than cutting. Export must not rely on accumulated timers or CSS-transition history; match the cursor at the loop boundary too.
Match headings, actions and audio cues. If audio is unavailable, provide a silent preview first.
Keep product name, logo, screen assets, colors and final action in easily editable configuration.
Provide full playback and key transition stills, identifying unfinished parts.- Review and export. Check copy and assets on a phone, then send:
Apply the approved changes and export, retaining editable source and asset references.
Provide this project's actual export command, prerequisites and output file location.
Check final MP4 duration, ratio, text clipping and audio instead of relying only on browser preview.
Deliver a contact sheet and list remaining limitations.Revise the film and fix problems
Name the shot and change instead of requesting vague improvements that reset approved pacing:
Fix only the loop seam: match shape, copy, cursor position and movement direction between first and last frames; do not merely add a fade-out.For a 9:16 version, recompose headings, the main subject and final action. Preview the new layout rather than cropping the sides. To shorten the film, remove secondary shots or sentences before retiming.
- Seeking gives wrong frames: check timers, accumulated physics or unreinitialized CSS animation.
- Text overlaps during morphs: schedule outgoing and incoming copy separately.
Creator source and reproduction limits
The post names Opus 5.5, a single HTML file and Playwright. The long request is retained, but its HTML and audio project are not supplied. View the original post.
Visual descriptions come from the collected video; production details come from the stored request and post. They do not constitute testing of the current product. Shot plans, adaptations and expanded requests are editorial suggestions and have not been generated or tested. Supply your own assets and production environment when the original project is unavailable.