Claude Opus 5.5: Dribbble-Level UI Motion From a Prompt

What happened

A new Claude model has picked up a skill most people don't expect from a chatbot: it can generate short clips of interface animation that look like the shots designers post on Dribbble — the portfolio site where product and motion designers show off their sharpest work. The model is called Opus 5.5, and what it makes is one shape that never cuts away. It morphs from a button into a loader, a checkmark, a music player, a chart, a search box, and back to the button again.

The interesting part isn't the video. It's the prompt — four blocks of written rules that pin down exactly what the model is allowed to do, and what it isn't.

Inside the four-block prompt

The first block is ``. The model asks you for 8 to 12 UI states you want the shape to become — button, loader, player, slider, toggle, tabs, chart, command palette, toast — plus a choice of pure black and white or one accent color, and a royalty-free track around 120 BPM from a library like Mixkit, which is free for commercial use.

The second block is ``, the visual law: one shape, never cut. Every state is the same element changing its size, corner radius and color while its contents swap out through a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black-and-white components, one clean typeface (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame matches the first, so the clip loops.

The third block is ``, the running order timed to music: 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.

The fourth block is ``: one HTML file, square 1440×1440, every style computed from time inside a single `seek(t)` function — no CSS transitions, no timers, no state carried between frames.

Why the bans do more work than the wishes

The `` block has a kill list: no bouncy easing, no particle bursts, no glows, no gradients on UI chrome, no mismatched icon strokes, no dead time, nothing that looks like a template. That's what separates this from the usual “make me a cool animation” request. Telling a model what to avoid is often more useful than telling it what you want — it's the difference between “cook something nice” and “no sugar, no frying.”

How far the post traveled

It went out on the Telegram channel @gptpublic, where it drew 1,666 views, 50 reposts and 16 reactions. That's small by viral standards, but 50 shares from 1,666 readers works out to roughly one in 33 people passing it on — a strong ratio for a post that is mostly a prompt.

What it means for you

You don't have to be a designer to get something out of this. The real shift is that describing motion in words now actually works.

At work: pitching an interaction before it's built

Say you're in a product meeting and you want to show how a checkout button should turn into a loading state, then a receipt. A year ago you'd either draw six static screens or book a motion designer for a week. Now you can describe the sequence, hand over your 10 states and get a loopable square video you can drop into a slide deck before the meeting ends. It's a sketch, not the shipped product — but it's a moving sketch, and that settles arguments faster than any static mockup ever will.

Running a small business: demo clips without a studio

If you sell software, a course or an app, short square motion clips are what stop the scroll. You don't need After Effects or a freelancer on retainer. Pick the five moments your product does well — the toggle, the chart, the save confirmation — and ask for a 7-bar loop. The 120 BPM constraint matters here: it keeps the clip in step with music, so it works as a background loop on a landing page or as a teaser with a licensed track under it. If you want to sketch those states as static screens first, MyKreaTool has free AI tools that'll get you there without a subscription.

For students and teachers: motion principles you can read

Springs, overshoot, easing, dead time — these are motion-design terms that normally take a semester of bouncing between software and theory. Here they're written out in plain English as rules you can check. A student can read the prompt, watch the clip and see exactly what “a tiny overshoot at most” looks like next to “bouncy easing,” which is banned. That's a fast feedback loop for a skill usually learned by trial and error.

For creators and side income: one portfolio piece per evening

The sequence is deliberately built so each beat sets up the next: a toggle becomes a tab indicator, tabs become a chart, the chart collapses into a search box. If you can write that kind of cause-and-effect chain, you can produce a different loop every night and post it. Freelance motion gigs and template shops both run on volume plus consistency, and this hands you both — as long as you're honest that the model drafted the frames and you directed them.

At home: a party trick that teaches you something

The lowest-stakes use is also the most fun. Ask for a shape that turns into a coffee-cup counter, or a toggle that flips on your kid's bedtime. You'll learn in an hour what a state, a transition and a loop actually are, and you'll never look at a well-made app the same way again.

How to try it right now

Start with the free pieces — a font and a music track — then bring in the model.

Step 1: Pick your 8 to 12 states (10 minutes)

Write them as verbs, not nouns: “button becomes loader,” “toggle flips,” “progress bar scrubs.” Stick to the examples the prompt lists — button, loader, player, slider, toggle, tabs, chart, command palette, toast — because those are the shapes a single element can plausibly morph into.

Step 2: Make one color decision (1 minute)

Pure black and white, or black and white plus one accent. That's it. The prompt bans gradients on UI chrome, so piling on more colors just fights the rules.

Step 3: Grab free assets (5 minutes)

Use Geist, the free typeface the prompt names. For music, pull a royalty-free track around 120 BPM from Mixkit, which is free for commercial use — read the license page yourself before you publish anything with a brand attached.

Step 4: Paste the four blocks into Claude Opus 5.5 (2 minutes)

Open Claude, select the Opus 5.5 model and paste all four blocks — ``, ``, ``, `` — with your own states filled in. Don't paraphrase the bans; copy them word for word. Then ask for the single HTML file.

Step 5: Render, check the loop, iterate (20 minutes)

Open the HTML file in a browser, record a square 1440×1440 screen capture and watch the last second against the first. If there's a jump, say so and ask for the first and last frames to be identical. Then change one variable at a time — one color, one beat, one state.

Upsides and what changes

Taste becomes portable

Most of the quality here comes from the banned list, not the model. Once you've written down what you refuse to accept — no glows, no dead time, no mismatched icon strokes — you can hand that spec to a person, a model or your future self and get the same aesthetic back. That's a real asset.

The dull grind disappears

Setting a timeline, timing beats to a 120 BPM track, matching the first and last frame — that's the grind of motion work, and it's the part nobody enjoys. If the model handles it, you spend your time on the idea instead of the busywork.

The bar for prompts just moved

“Make a cool animation” now looks as lazy as “write me a good email.” The post is effectively a free lesson in how to brief creative work: inputs, direction, structure, build.

Limitations

Be clear-eyed about this. What's shared is a prompt and a result, not a product with a support page — the build block was still being spelled out when the post circulated, so you'll have to fill in the last details yourself. The output is a square 1440×1440 loop with one accent color, not a working interface: it won't ship, won't handle real data, and won't survive a design review on its own. Every run will differ, so expect to regenerate a few times to get springs that feel right, and expect to fix timing by hand. And “Dribbble-level” is the poster's judgment, not a certification — the honest test is whether you'd put the loop in your own portfolio. One more thing: clips like this still need a licensed track, and “free for commercial use” is a promise made by the music library, not by the model.

Conclusion

The takeaway is simple: a well-written spec now buys you motion design that used to take a specialist and a week. One action for today: open Claude Opus 5.5, paste the four blocks, and swap the state list for five states from your own product or project — five is enough to see whether the shape holds together. Twenty minutes, one loop, and you'll know if this belongs in your workflow.