Shape morphing through UI states

<inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 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. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

make a dynamic 20s motion graphics video that shows what an incredible motion designer you are, like it's your showreel for this app commotion, highlighting tiling layout, auto model classifer and other features you deem fit to be in video. Go all out.

create a self contained aesthetically pleasing, breathtaking animation of the Sahi Trading Terminal. it should start with a single dot on a black screen and then have multiple windows show up on the screen such as Charts, Positons , Option Chain, Watchlist. And zoom into and out at multiple scales. Finally the camera zooms out to make the desktop look like a point in space. And then it zooms back in to reveal a mobile screen in landscape mode with a chart in one half and an option chain in another. The video ends in Sjngle Screen Trading on SAHI use javascript for it. be detailed and accurate. it should be visually stunning

make a dynamic 20-second motion graphics and animation video that shows what an incredible motion designer and animator you are, like it's your showreel for a résumé. make it about the cycle of life showing the same individual going from childhood to adolescence to the 9-5 cycle, to family life to elder life and death, then cutting ready to loop to the beginning. go all out , use whatever you need.

I Want you to make a modern slick and punchy video for https://t.co/a3zrq7DV3N with an example of a user creating a chatgpt ads campaign, then connecting their metrics, understanding attribution, then connecting a voice agent to it, the agent responding, then doing follow up, adding humans in the loop and then providing analytics.

make a 1-min promo for this product from the codebase.

Analyze my frontend project, use the actual components from the product, and create a dynamic motion graphics video that showcases and sells my SaaS. Make it feel like a high-end product launch. Go all out.

Create a complete, polished Spotify-themed motion graphics video from the following brief. This prompt is self-contained: no reference video or supplied assets are required. <deliverables> An 18-second MP4 at 1920×1080 and true 60 fps, with music and subtle sound effects Complete editable source Build, render, inspect, and refine the animation before delivering it Do not stop at a storyboard, still images, or an implementation plan </deliverables> <art_direction> A premium music-product film presented inside a large, nearly black rounded rectangular stage The stage occupies roughly 80% of the canvas width and 75% of its height, centered horizontally and slightly below the vertical center Outside the stage, use a soft atmospheric green background: luminous emerald near the upper-left corner, deeper forest green toward the sides, fading to near-black at the bottom Inside the stage: Near-black background White primary typography Muted gray secondary text Spotify green # 1ED760 for emphasis and controls One clean sans-serif font, such as Geist or Inter Consistent icon strokes and restrained shadows Keep compositions compact and centered, with substantial negative space Text should feel like music-product advertising, not oversized presentation headings Do not add an outer caption, creator watermark, decorative footer, or progress counter </art_direction> <artwork> Create original square album artwork for a fictional track called “Glass Tides” by “AURA” The hero cover is an abstract macro image of flowing pearlescent liquid silk and molten glass Use pastel lavender, powder cyan, blush pink, champagne gold, and subtle mint Include broad three-dimensional folds, realistic reflective highlights, delicate striations, and a prominent sweeping S-shaped fold Fill the square edge to edge No text, logo, or border on this hero artwork Use this same artwork consistently throughout the film Create additional designed playlist sleeves: “Late Nights” in mustard yellow “Good Energy” in pink “Deep Focus” in blue “Daily Mix 1”, “Daily Mix 2”, and “Daily Mix 3” in complementary colors These should look like finished graphic-design covers, with bold typography and simple geometric motifs </artwork> <timeline> 0.0–0.6 seconds: A green Spotify icon grows smoothly into the center of the dark stage Give it a confident arrival with minimal overshoot 0.6–1.5 seconds: The icon transitions into a small Spotify identity above two centered lines: “Discover” “new music” The first line is white; the second is green Reveal them with short masked vertical movements 1.5–2.4 seconds: A stylized Spotify desktop interface rises into view Show a slim sidebar, “Made for you”, three album cards, and small supporting rows Use a subtle perspective tilt during the entrance, settling toward a frontal view 2.4–3.2 seconds: Move closer to the three featured covers Show “New for you” above them Keep the artwork crisp, with short album titles beneath A narrow rounded player bar now anchors the bottom of the stage 3.2–4.0 seconds: The featured cards withdraw into a compact “Fresh finds” list Reveal four song rows with a slight stagger Each row contains a thumbnail, short track title, artist, and a small menu icon 4.0–4.9 seconds: Transition into a horizontal strip of colorful playlist covers Heading: “Every mood” Supporting line: “Find what moves you” The strip slides smoothly sideways, with edge cards partially cropped by the stage 4.9–5.8 seconds: A compact search field appears Type “Glass Tides” Reveal one selected result beneath it, with the iridescent artwork, “AURA”, and a green play icon 5.8–6.6 seconds: The selected artwork expands into a large centered cover Reveal “Glass Tides” underneath, followed by “AURA” in green Keep the player bar visible 6.6–7.5 seconds: The same cover slides left Track information appears on the right: “Glass Tides” “AURA” “A new frequency” Add a rounded green Play button Coordinate the cover movement and text reveals 7.5–8.3 seconds: A brief brand-color transformation fills the inner stage with green The artwork contracts into a smaller centered tile Place a small dark Spotify identity underneath The player briefly recedes 8.3–9.8 seconds: Return to the dark stage The same artwork expands dramatically toward the camera, becoming oversized and cropped by the rounded stage Restore the player at the bottom Use controlled motion blur during the fastest part of the zoom 9.8–11.2 seconds: The artwork clears into a centered typographic statement: “Find your” “rhythm” Use white for the first line and green for the second The player remains visible and stable beneath it 11.2–12.5 seconds: Show “Made for your every day” Three playlist sleeves enter with gentle perspective and small opposing tilts They spread into six smaller sleeves across the stage Supporting line: “Your sound, always evolving” 12.5–14.0 seconds: The playlist layout transitions into four floating album covers Include the iridescent hero artwork Use restrained rotation, perspective, depth ordering, and overlap Keep their movement coordinated rather than randomly floating 14.0–15.2 seconds: The covers converge toward the center and fold around a green Spotify icon The artwork withdraws as the icon becomes the focal point Fade the player away The Spotify icon must emerge from the same central position as the converging covers 15.2–18.0 seconds: The icon moves slightly left and settles beside a large white “Spotify” wordmark Keep the icon and letters separated throughout the movement Reveal: “Discover new music” “every day” The first line is white; the second is green Hold the finished composition cleanly through the end </timeline> <persistent_player> For most of the middle sequence, keep one narrow rounded player bar near the bottom of the inner stage Include: Small hero-art thumbnail “Glass Tides” and “AURA” Play and skip controls A thin progress track A small volume icon Subdued dark translucent styling with a fine border This recurring player connects the changing shots It must remain visually secondary to the artwork </persistent_player> <motion_quality> Match the energy of a tightly edited premium product film Most visual ideas last approximately one second, but transitions remain smooth Use continuous acceleration and deceleration Favor critically damped springs or carefully tuned smooth easing No repeated bouncing or large elastic overshoots Preserve the hero artwork’s identity and position relationships through search, album detail, brand tile, and zoom Use match-position transitions, coordinated scaling, masked reveals, and perspective Outgoing titles must disappear before incoming titles occupy the same space Avoid overlapping text, sudden camera resets, long blank intervals, and arbitrary full-frame crossfades Clip every oversized cover and camera move cleanly to the rounded stage No particles, shockwave rings, lens flares, camera shake, or unrelated stock footage </motion_quality> <audio> Create or select commercially usable electronic music around 120 BPM Use a clean pulse, warm bass, restrained melodic elements, and subtle transition accents Align important entrances, selections, zooms, and the logo reveal with musical events Keep effects quieter than the music No voiceover Do not use copyrighted commercial tracks without permission </audio> <implementation_and_validation> Build a deterministic animation driven by absolute time through an async window. seek(t) function Every transform, opacity, mask, and UI state must be reproducible when seeking frames in any order Do not depend on live timers, accumulated physics, or CSS transition state during export Render true 60 fps with spatial antialiasing Use 3–5 temporal subframe samples per output frame for restrained motion blur Keep stationary text and artwork sharp Inspect contact sheets and moving playback Check the fast heading changes, artwork handoffs, zoom, cover convergence, and final wordmark spacing Verify evenly spaced frame timestamps and the full 18-second duration Fix visual defects before delivering the final MP4 and editable source </implementation_and_validation>

<inputs> Ask me for: the gallery URL (default www.prompt-motion.com/), one entry whose prompt gets shown on screen, and a royalty-free track around 120 BPM with a clear drop (e.g. Mixkit). </inputs> <direction> A 23-second 16:9 promo for a gallery of Claude-made motion videos, built only from the site itself: its real header, its real grid of autoplaying previews, its real entry page and prompt. Use the site's skin: near-white page, black pills, one UI font (Geist), and Geist Mono for prompt text. One accent (red-orange #F0442C), used only for the highlighter, the cursor halo and the dot on the URL. One continuous camera over a single "world" layer. Never two camera moves at once. Every clip on screen carries its creator's @handle, exactly as the site shows it. Banned: a "Generate" button or any feature the site doesn't have, invented numbers, paraphrased taglines, fades on everything, glass cards, gradients, bouncy type, dead holds. </direction> <structure> 120 BPM, 46 beats. b0–2: frame 0 is one real reel, full-bleed. The camera pulls back until it is just the first card on the site's home page. The header, then the tagline's first half, land on b1. b2–9: hold on the live page: header plus a 3-column masonry of playing previews. b9–13: the grid scrolls, then the camera whips into one tile until it is full-bleed. b13–16: the music drops. Three full-res reels from the gallery, one beat each, hard cuts, each with a dark handle chip inside the safe area. b16–21: the last reel shrinks back into its own tile (a match cut). A cursor with an accent halo hovers a tile and clicks. b21–26: that tile blooms into its entry page: the video on the left; author, title, Model / Stack / Posted and the prompt on the right. b26–32: the camera pushes 1.5× into the prompt while the video slides out. A solid accent highlighter sweeps one phrase. The cursor presses Copy, which turns into "Copied". b32–46: the page slides off left. The "Copied" pill lifts, relabels to the URL and docks. Then "Prompt Motion" and both verbatim halves of the tagline land, and a rail of real tiles rises on the right. The last frame is the poster: two whole tiles, both handles visible. </structure> <build> 1. Remotion, 1920x1080, 30 fps. Every cue lives in timeline.ts (in beats) and every string in copy.ts. Scenes contain no magic numbers. 2. Scrape the site first: tagline, handles, avatars, preview MP4s and full-res videos, plus one entry's prompt. Quote all of it verbatim. 3. Lay out the gallery once in world coordinates. Drive the camera as (focus x, focus y, log-scale) tracks. Tile corner radius goes to 0 as a tile reaches full-bleed, so the pull-back, the whip-in and the match-cut back are all exact. 4. A tile that plays before the burst uses the same full-res file with an offset startFrom, so the whip lands on the burst's first frame. 5. The preview MP4s don't loop cleanly, and many contain hard cuts. Run scdet on every clip. Loop only windows with no cut inside them, with a 12-frame dissolve at the seam, and stagger each tile's phase so neighbouring tiles never change on the same frame. 6. Use one cursor that homes on the live button position, because the camera keeps creeping during holds. 7. Conform the track to 120 BPM with its drop on the burst. Place SFX by their measured peaks. Fill the track's own breaks with reversed whooshes into the hits. Mix to −14 LUFS. 8. Render stills at every cut before a full render. Run QA for frozen time and one-frame snaps. Then have a fresh critic who didn't build it review the render, and fix what it finds. </build> <gotchas> Real gallery clips carry their own HUDs, cursors and cuts. Keep overlays (handle chips, our cursor) clear of them, and don't put a cut-heavy clip anywhere the frame should feel calm. If the page color matches a clip's background, the tile disappears; give tiles a 1px hairline. On a camera push, check the last frame: the header and meta rows can drift into the edge bands. </gotchas>

Make a showreel-style motion graphics video for my portfolio website, https://t.co/xZFGCqi73s, using Remotion. It should show what I do as a developer relations engineer, like a showreel for my résumé. - Use as much of the real website as possible: capture the pages and sections in a browser (home, Ask, package pages, Hire, mobile view, dark mode) and animate them inside browser and phone frames. - Show the site's chat answering real questions about my work, with the questions and answers large and bold. Use only facts and numbers that are on the site. - Follow premium brand rules: three colours and the site's own fonts, one idea per shot, key objects centred, space to breathe, eased motion only, smooth transitions instead of hard cuts, and a rhythm that speeds up and slows down with the story. - Add music at about 120 BPM (elite, kinetic, sophisticated) and cut every scene on the beat. No extra sound effects. - 1920×1080, about 90 to 100 seconds, ending on the website and my contact email.

Using the linked Figma frame build a badge unlock screen. Match the design exactly. Use the file's assets, lighting, type and layout and add only the motion. Animate the badge so it feels premium and celebratory. Build its scene and then celebrate with gold particles. Treat the badge as a solid 3D object that tilts toward the cursor following the rules of physics. Keep it fast and smooth, it should not be bouncy.

Build 5 completely different scroll-based sections, decide the context & layout yourself.