Customize this prompt for your product

UI shape-morph motion design video made with Claude Opus 5.5

Prompt from @demonugc on X · made with Claude Opus

Why it works

One element morphs through every state and is never cut, which keeps the piece visually continuous.
Every change is tied to the 120 BPM grid, with something happening on every beat across 7 bars.
Springs are closed-form and the tab and toggle edges use different springs, so the leading edge stretches ahead of the trailing one.
Drags are direct manipulation: the value follows the cursor and springs back on release.
Text swaps use their own enter and exit timing with a short blur so they do not overlap during morphs.

Reference prompt

Remix template

Create a square motion-design piece for [PRODUCT] using one shape that never cuts. It morphs its size, radius and color through these UI states, in order: [FEATURES]. Use a light warm-gray canvas, black and white components, and one clean UI font. Use springs with at most a tiny overshoot, and no bouncy easing, glows, gradients on UI chrome, or particle effects. Every change is driven by a cursor with real clicks and drags. Sync every change to a 120 BPM song with 7 bars, starting on a downbeat with something happening on every beat. Zoom the camera so each state fills the frame. The last frame must match the first, including cursor position and speed, so it loops.

Your brief

Only the product name is required. Blank fields become questions Claude asks you. Nothing here is uploaded.

Product

Product name

One-line promise

What does it do for the user, in one sentence?

UI moments or features

One per line, in the order they appear in the video. 3–5 work best.

Call to action

The last line of the video, for example: Try it free at acme.app

Assets

Logo

PNG, JPG, WebP or SVG. Up to 5 MB.

Font file

Optional. .woff2, .woff, .ttf or .otf, up to 5 MB.

Brand colors

For example: #0B5FFF and white

Font

Name of the font, for example: Inter

Files stay on your device. They are only put into the ZIP you download; nothing is uploaded.

Goal

Where will it be posted?

Length (seconds)

For example: 30

Aspect ratio

Any16:99:161:1

Key message

The one thing a viewer should remember.

AudioMusic or beatVoiceover

Constraints

Text that must appear exactly

One line per text, exactly as it should be spelled on screen.

Things to avoid

For example: stock footage, emojis

Style reference: this video (its 9 shots are included)

Asset paths in the copied text refer to the ZIP download. Copy brief gives you the text only.

Fill in the product name to see your brief here.

Run it in your terminal

Unzip the download, then start Claude Code in the folder:

unzip ui-shape-morph-motion-design-video-made-brief.zip && cd ui-shape-morph-motion-design-video-made-brief && claude "Read BRIEF.md and make the video"