From a UI animation preview to a usable Claude prompt: what to check first

tianshuo zhou — Sat, 10 Oct 2026 05:40:07 +0000

A polished animation preview is useful inspiration. To turn it into your own project, you also need the prompt, the inputs, and the rendering setup.

Our team maintains a visual collection of Claude Opus 5.5 examples. One entry is a looping UI animation shared by @twoclipping. The attached GIF is an excerpt of the creator's result, not a reproduction by our team.

The prompt starts by asking for 8–12 UI states, a black-and-white palette or one accent color, and a royalty-free track around 120 BPM. It then describes a continuous shape that morphs between those states, rather than cutting between unrelated screens.

If you adapt this example, decide on those inputs first. A button, loader, player, slider, and chart are a starting point; add enough states to meet the prompt's requested range. Then read the full prompt for the production constraints and supply the remaining inputs before asking the agent to render it.

That is the browsing workflow we want the library to support: inspect the result, read the public prompt, check the setup, and adapt it. The collection spans seven categories, and we keep adding examples with links to their original creators.

Library: https://github.com/LeaddeOpenLab/awesome-opus-5-5-video-prompts
Original example and prompt source: https://x.com/twoclipping/status/2103273003555402193

We have not independently reproduced every entry. What setup information do you usually find missing when trying a shared creative-coding prompt?

Disclosure: I help maintain this collection. This post was drafted with AI assistance.

DEV Community: tianshuo zhou

From a UI animation preview to a usable Claude prompt: what to check first