Animate with Opus 5.5: describe the movement, open the HTML, adjust the timing

Play with the orbits first

Move the slider above to the right. The dots speed up. Click pause and the chosen frame stays put. The whole scene fits in one HTML file that you can download, open offline and modify. Another color, a larger orbit, a gentler pace. You do not have to build an entire website to make something your own.

We prepared this editorial demo; it is not a recording of an Opus 5.5 session. We will use it as a starting point for a similar exercise. This time, instead of orbits, we will animate documents being organized. That is what the prompt below describes, so do not expect a copy of the cookie.

What should happen in those six seconds?

Imagine three sheets falling into a box. A moment later, an organized list appears with the word “Done.” The scene can show how document automation works before anyone reads the description. You can see what went in and what came out.

Let’s put those moments in order. Six seconds, two colors and a fixed camera are enough to start. It is easier to notice a sheet disappearing too early or a list appearing before we have seen the box. Shadows and rotations can wait.

You can ask Claude Opus 5.5 to write the code if it is available in your tool. We are requesting SVG and CSS animation: graphics and movement written into the page’s code. We will open it in a browser; this request does not produce a finished video.

One file, straight to the preview

Why a single HTML file? So you can go from the model’s answer to the animation without installing a project or libraries. Let’s also decide what someone with reduced motion enabled will see. In this exercise, it will be the finished document list.

Paste the description below. Keep the name of the model you used with the saved file. If the response contains only code, ask for instructions on saving and opening it. The first version may need correction. Start with your own sequence: do the sheets, box and list appear in the right order?

Create one index.html file with embedded SVG and CSS.
Scene: three sheets fall into a box, then a three-item list and the word “Done” appear.
Duration: 6 seconds. Cream background, dark shapes, one orange accent.
Add Replay and Pause buttons. Do not use external libraries.
For prefers-reduced-motion, show the final scene as a still image.
Make the layout work at 360 px wide. Explain where to change the text and animation duration.

“Half a second longer” is something to work with

“Make it more impressive” leaves the model plenty of guessing room. When the sheets move too quickly, say: “Hold them above the box for half a second longer.” If the title jumps in before the rest of the scene, specify when it should arrive. You will know what to compare in the next version.

Save a copy before changing the appearance. It would be a shame to lose good timing while trying a new palette. Once the scene behaves as you want, ask for colors, spacing and durations to be collected in one place in the code. The next color change will take one value.

Now try a phone and reduced motion

Look at the text and buttons on a phone, and work through the controls with a keyboard too. Then enable reduced motion in your system. The page should show a meaningful still frame. MDN explains how to read this preference with prefers-reduced-motion. An empty box says little about organized documents, which is why we chose the finished list.

If important information disappears without animation, add a plain caption. You now have editable HTML to embed on a page. For social platforms requiring MP4, you still need to record or export a file in that format.