Prompts
Featured
Models
Submit
Blog

AhaPrompt

AI Prompts for Images, Video & Audio — Every Model, One Library

Explore

All Prompts
Featured Prompts
Image Prompts
Video Prompts
Audio Prompts
AI Models
Submit a Prompt
Blog

Languages

English
中文
日本語
한국어

Copyright © 2026 AhaPrompt All rights reserved.

Privacy Policy Terms of Service

HomeAI Prompt LibraryAI Video PromptsSIGNAL NOISE experimental digital magazine website

SIGNAL NOISE experimental digital magazine website

AClaude Opus 5.5Anthropicvideo

### Your mission Design and develop an experimental digital publication called **SIGNAL / NOISE**. It is an independent magazine about technology, artificial intelligence, digital culture, and the future of the internet. We want a website that can compete visually with the best digital editorial design projects. An experience with personality, not another generic SaaS landing page. You have creative freedom to decide the art direction, typography, composition, color palette, animations, and visual system. I don't want you to explain how you would design the website. **I want you to build it.** ### Product The website will have four main components: **1. Editorial cover** A first screen that immediately establishes the publication's identity. It must include the name SIGNAL / NOISE, the issue number (ISSUE 001), a featured editorial piece, and a visual composition that is memorable. **2. Article index** A selection of six fictional but believable articles about technology and digital culture. Don't use six identical cards. Design an editorial composition that allows you to distinguish lead stories, secondary articles, and short content. **3. Reading experience** Develop at least one full article, accessible from the cover. Article title: "The Internet Is Becoming a Place Without People". Include a standfirst, several sections, pull quotes, and some visual resource integrated into the content. It should be a pleasant and carefully crafted reading experience. **4. Navigation and interactions** Implement functional navigation, transitions, hover states, visual indicators, and small interaction details. Animations should add something to the experience, not be gratuitous decoration. ### Technical requirements - React, TypeScript, and Tailwind CSS. - You may use animation and icon libraries. - Responsive design for desktop and mobile. - Basic accessibility, keyboard navigation, and support for `prefers-reduced-motion`. - No static interfaces that only appear to work. - Don't use screenshots of other websites as a substitute for design. - You may use photographs or external visual resources, but integrate them into a coherent art direction. - The project must be able to run locally. ### Design criteria We are looking for: - A distinctive and recognizable visual identity. - Excellent typographic hierarchy. - Compositions that use space with intention. - A good balance between experimentation and usability. - Carefully crafted microinteractions. - Consistency between cover, index, and article. - A designed mobile version, not simply compressed. Avoid: - The generic look of a template. - Six perfectly aligned cards. - Decorative gradients with no function. - Flashy effects that hinder reading. - Unnecessary UI components. - The typical appearance of an AI product landing page. ### Creative freedom You don't have to follow any specific visual reference. You decide what SIGNAL / NOISE means as an editorial identity and how it should be expressed visually. You can be experimental, minimalist, brutalist, sophisticated, or adopt a completely different direction. What matters is that your decisions make sense as a whole. ### Deliverable Build the complete project. When finished, make sure it works and provide a brief explanation (maximum 200 words) of the main art direction decisions. **Don't ask me questions or request approval of the visual direction. Make the decisions and execute.**

Details

Type: AI Video Prompts
Aspect Ratio: 16:9
Duration: 0:35
Updated: Oct 20, 2026

Category

Digital Art Advertising Minimalist

How to use this prompt

1Copy the full prompt with the copy button above.
2Open Claude Opus 5.5 by Anthropic, or your preferred AI video generator.
3Paste the prompt and keep the camera and motion terms — they steer the cinematography.
4Match the example's settings (16:9 · 0:35 · Digital Art · Advertising · Minimalist), then iterate — small wording changes shift the output a lot.

Frequently asked questions

Which AI model generated this video?

This clip was generated with Claude Opus 5.5 by Anthropic. The prompt on this page is the exact text used to create it.

What settings does this prompt use?

The example was generated with Claude Opus 5.5 using: 16:9 · 0:35 · Digital Art · Advertising · Minimalist. Reusing these settings gives the closest match.

How do I get similar results?

Copy the prompt as-is first, then change the subject while keeping the camera, motion, and lighting terms. Video models are sensitive to wording, so expect a few runs.

Can I modify this prompt?

Yes. Prompts work best as starting points — swap scenes, adjust pacing terms, or change the aspect ratio to fit your project.

More Claude Opus 5.5 prompts

AClaude Opus 5.5

Ask me for: a one-word brand name for the wordmark (a verb is ideal), 9 to 12 high-resolution photos, a royalty-free track close to 120 BPM with a clear drop and a quiet breakdown (Mixkit, free for commercial projects), and a free stock shot of a blank wall with moving plant shadows (Pexels). Create an Apple-keynote-style product launch film in pure 2D, presented as one uninterrupted take. Every scene must evolve directly from the previous one: no fades, blur transitions or cuts. Elements morph into their successors. Typography rises through a mask edge, icons pop from zero scale, progress bars extend across the canvas, pages push into frame, and a black form expands to cover the screen before contracting into the following scene. Use a warm off-white background, black interface elements and iOS 26-style liquid glass layered over the photography. Set the wordmark in Archivo (wdth 125, weight 800) and the UI in Geist. A cursor must initiate every interaction through real clicks, drags and long-presses. Move the camera with a screen-studio feel so each beat fills the square composition, and scale the cursor together with the camera. Banned: crossfades, blur-ins, brightness "reveals", 3D flips, particles, glows, static holds longer than 1 second, and anything that looks remotely like a template. 120 BPM, 54 beats, with a visible change on every beat. Open: the wordmark contracts toward its own period like an accordion. The dot grows into a black pill and a label emerges inside it. On click, six iris blades close around the label, then spring open onto a photograph. The circular shape becomes a square and scales down. Behind it, a grid unfolds like a sheet of paper - center, plus, corners - then reorganizes itself into a bento layout. A click dives into one tile and lands exactly on the drop. Glass: a glass word builds one character at a time, then liquefies into a droplet. The droplet stretches sideways into a glass toolbar. The adjustment icon transforms into a slider. Dragging the slider shifts the photo from daylight into golden hour using two perfectly aligned shots. The held knob turns into a glass lens, rises upward and becomes a glass orb. The next photo appears inside the orb as a circle. The orb expands into a lock screen containing glass clock digits, the date and a home bar. The home bar stretches outward into a glass music player. Stage: the lock screen pulls away and reveals the phone around it, with the bezel growing directly from the screen boundary. The Dynamic Island stretches like liquid, pinches away from the phone, flies across the canvas and expands into a Mac window. The window rolls upward like a blind. Long-press the wallpaper and drag it onto a Safari tab. The browser page pushes forward. When the image is released, it becomes the hero image of a landing page. Scroll: the hero image transforms into a framed print inside a product card, with the mat and molding growing organically from the photo edge. Pick a frame color and let it paint across the frame. Choose a size. The navigation button flies downward and transforms into "Order print". Order: one black shape continuously changes state: Ordered ✓ → Printing % → On its way (van following a route) → Delivered ✓. Wall: the delivered circle expands until black takes over the entire frame. Hold for exactly one beat, then contract into the framed print hanging inside the real wall footage. The same six-blade iris opens onto the artwork and closes again. The frame expands until it fills the screen, contracts back into the pill, becomes the dot, and finally lets the letters spring outward on the returning beat. The final frame must be identical to the opening frame. 1. Keep everything inside a single HTML file at 1440×1440. Every visual property must be derived from time inside an async seek(t) function. No CSS transitions, timers or persistent state between frames. Use closed-form step responses for all spring motion. Whenever a property changes targets more than once, add a separate spring for each target change so the entire animation remains a pure function of time. Build the liquid glass by giving every glass component its own copy of the scene underneath it. Process that clone with an SVG feImage displacement map based on a rounded-rectangle distance field. Pass it through three feDisplacementMaps at slightly different scales to create subtle chromatic edge separation, then add a rim-light layer. For glass typography, generate a canvas distance field for every glyph and use it for displacement, masking and highlights. For goo effects, blur the source and run it through an alpha threshold, then composite the original source back over the result so the interior remains perfectly sharp. Construct the iris from six blades positioned around a hexagonal opening. Each blade should use its two vertices, the corresponding edge extensions and the SHORT arc connecting them. For the wordmark squeeze, move every character toward the period using the same compression factor. Adjust the drawn width accordingly: narrow the wdth axis first, then scale the remaining geometry so all letters stay touching. Re-encode every piece of footage as all-intra with ffmpeg (-g 1). Load the resulting media through a blob URL and await "seeked" before drawing every frame. For audio, use downloaded SFX for each interaction event (Mixkit), never generated sounds. Position every SFX using its measured peak. Start the music exactly on a downbeat, align the camera landing with the drop, place the wall sequence inside the breakdown and bring the wordmark back on

AClaude Opus 5.5

Ask me for: the product name and a one-line promise, 3 to 5 UI moments to show, one accent color, 10 to 20 real vertical clips I own, and a royalty-free song with a clear drop (e.g. Mixkit, free for commercial use). High-end minimal. One idea per shot, plenty of empty space, one accent color, one clean sans (Geist or Inter) with tight tracking. Masked type reveals, match cuts, one consistent camera language. Real footage only, never placeholder cards. No full stops in on-screen text. Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing. 10 bars at 120 BPM, 2 seconds each. Bar 1: the hook appears word by word on the beats. Bar 2: one hook word morphs into the product UI. A cursor types and clicks. The drop: a circle expands out of the button into a dark scene. Then one move per bar: a wall of real clips with a scan line and 3 winners the key output revealed as big type a 3D carousel of real videos with floor reflections and a motion-blurred whip onto one hero clip the hero inside a phone next to a panel that flips into results big stats on push cuts a 3-word ticker a logo reveal a fade to black One HTML file at 1920x1080. Every style is calculated from time inside https://t.co/knoJJfMFI5(t): no CSS animations, no timers, no state between frames. Real video: extract clips into 30fps JPEG sequences with ffmpeg and swap img sources per frame. seek awaits the image decodes. Analyze the song with numpy: tempo, beat grid, energy per bar, and the drop. Calibrate the grid to the actual kick hits. Every cut lands on a downbeat, every UI hit on a beat. Render with Playwright: 3 subframes per frame at t minus, at, and plus 1/240s, then blend with ffmpeg tmix for real motion blur at 60fps. Place every sound effect so its measured peak, not its file start, lands on the event. Keep the effects quiet beneath the music. Loudnorm to -14 LUFS. Check 20 or more frames before the full render. Fix anything cluttered, overlapping, or difficult to read. Never set opacity or filter on a preserve-3d element, because it flattens and both faces become visible. Fade its wrapper instead. Measure element positions at runtime for accurate match cuts. Only use music and sound effects with licenses that allow commercial use. Ask me for the inputs, then show me a storyboard with every timing mapped to the beat grid before writing any code.

AClaude Opus 5.5

Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free track around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels). An Apple-keynote-style launch film, 2D only, shot as one continuous take. Each scene grows out of the previous one: no fades, blurs or cuts. Objects transform instead. Text rises from a mask line, icons spring up from zero, bars draw across the screen, pages push forward, and a black shape fills the frame before shrinking into the next scene. Use a warm off-white canvas, black UI and iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for the UI. A cursor triggers every change with real clicks, drags and long-presses. Zoom the camera screen-studio style so each moment fills the square, and scale the cursor along with it. Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that feels like a template. 120 BPM, 54 beats, with something happening on every beat. Open: the wordmark compresses into its own period like an accordion. The dot expands into a black pill, and a label rises inside it. Click: six iris blades close over the label, then snap open onto a photo. The circle turns into a square and shrinks. A grid unfolds behind it like a paper map (center, plus, corners), rearranges into a bento, and a click zooms into one tile, landing right on the drop. Glass: a glass word appears letter by letter, then melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging shifts the photo lighting from day to golden hour (two aligned shots), while the held knob becomes a glass lens. It rises into a glass orb, the next photo opens inside it as a circle, and the orb grows into a lock screen with glass clock digits, a date and a home bar that stretches into a glass music player. Stage: the lock screen pulls back to reveal a phone, with the bezel growing out from the screen edge. The Dynamic Island stretches like liquid, pinches off, flies across and expands into a Mac window that rolls up like a blind. Long-press the wallpaper and drag it onto a Safari tab. The page pushes in; when you drop the image, it becomes the hero of a landing page. Scroll: the hero transforms into a framed print on a product card, with the mat and molding growing from the photo's edge. Pick a frame color (it paints across) and a size, then the nav button flies down and becomes "Order print". Order: one black shape keeps changing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓. Wall: the delivered circle expands until black fills the frame, holds for one beat, then shrinks into the framed print hanging on the real wall footage. The same iris opens onto the print and closes again. The frame fills the screen, contracts into the pill → the dot → the letters spring back out on the returning beat. Last frame = first frame. 1. One HTML file, square 1440x1440. Compute every style from time inside an async seek(t): no CSS transitions, timers or state carried between frames. 2. Use closed-form step responses for springs. When a value has several targets, add one spring per change so it stays a pure function of time. 3. Liquid glass: each glass element keeps its own clone of the scene behind it. Filter that clone with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, then add a rim light. For glass letters, use a canvas distance field per glyph to build the map, mask and highlights. 4. Goo: apply blur and an alpha threshold, then composite the source on top so the glass stays sharp inside. 5. Iris: place 6 blades around a hexagonal aperture. Each blade uses its two vertices, both edge extensions and the SHORT arc between them. 6. Wordmark squeeze: move every letter toward the dot by the same factor and adjust its drawn width to match (narrow the wdth axis, scale the rest), keeping the letters in contact. 7. Footage: re-encode it all-intra (ffmpeg -g 1), load it as a blob URL and await "seeked" before drawing each frame. 8. Sound: use a downloaded SFX for every event (Mixkit), never synthesized, and place each one by its measured peak. Start the song on a downbeat: land the zoom on the drop, put the wall in the breakdown and bring the wordmark back with the beat. Loudnorm to -14 LUFS. 9. Render with Playwright: blend 4 subframes per frame using ffmpeg tmix at 60fps. Check one frame per beat, then look for single-frame pops (frame-difference spikes 3x higher than their neighbours). backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood needs to extend past the corners and take about 0.3s; otherwise, half the screen changes in a single frame. A child set to visibility: visible can show through a hidden parent, so use inherit. Text swapping inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL. Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before writing the full film.

AClaude Opus 5.5

Ask me for: 8 to 12 UI states I want the shape to transform into (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). Dribbble-level UI motion. One shape, no cuts: every state is the same element morphing its size, radius and color while its content swaps with a quick blur. A cursor controls every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, with only a tiny overshoot. The camera zooms so each state fills the entire frame. The last frame matches the first frame, so it loops perfectly. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. 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 expand into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. One HTML file, square 1440x1440. Every style is calculated from time inside seek(t): no CSS transitions, no timers, no state carried between frames. Springs use closed-form step responses. A value that changes targets multiple times is the sum of one spring per change, so it remains a pure function of time. The tab indicator's two edges follow different springs, so the leading edge stretches ahead of the trailing one. Use the same trick for the toggle knob. Drags use direct manipulation: while the cursor is held, the value is calculated from its position. On release it springs back from wherever it was. Analyze the song with numpy to find the beat grid and start on a downbeat. Position every UI sound by its measured peak. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. Render one frame per beat before the full render. Fix anything off the grid, cramped or difficult to read. Never put will-change on anything the camera scales or the text becomes blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the final frame identical to the first, including cursor position and speed, or the loop stutters. Ask me for the inputs, then show me the state list on the beat grid before writing any code.

AClaude Opus 5.5

You are a computational geometry engineer, creative technologist, technical artist, typographic designer, and WebGL engineer. Build SHADOW FOUNDRY. An interactive, museum-quality digital art installation where abstract three-dimensional sculptures cast perfectly composed typographic shadows. The user can: - Generate a sculpture from a phrase. - Examine the sculpture from any angle. - Move the light and destroy the readable shadow. - Watch the sculpture reorganize to restore the message. - Change the material and lighting. - Reveal the geometric construction. - Export high-resolution artwork. - Record the complete interaction. This is not a landing page. It is not a typography animation. It is not a 3D text model. It is a real-time computational shadow sculpture. The fundamental artistic idea: THE OBJECT IS CHAOS. THE SHADOW IS ORDER. Everything must be generated through actual geometry, lighting, and rendering. No AI-generated images. No prerecorded videos. No projected text textures. No fake shadow overlays. The visible message must emerge from the shadows cast by actual three-dimensional objects. Do not ask the user for inputs. Open directly into a complete installation. The default message is: LOOK CLOSER. The message is displayed on a large architectural wall. It must be produced entirely by the sculpture's shadow. The sculpture consists of approximately 80 independent metallic fragments. Each fragment has a unique: - Three-dimensional position - Depth - Orientation - Silhouette - Surface treatment - Motion path The fragments occupy a volume approximately: 2.2m wide 1.5m high 1.8m deep They are suspended in front of the wall. The fragments should look like an intentionally designed kinetic sculpture. From an oblique angle, they appear abstract. From the light's perspective, their projected silhouettes combine into the desired typography. A single architectural spotlight illuminates the sculpture. The resulting shadow reads: LOOK CLOSER. The shadow must be sharp enough to read immediately. The initial composition should look like an editorial photograph of an extraordinary contemporary art installation. It should be beautiful before the user interacts with it. ARTISTIC REFERENCE Think: Contemporary sculpture gallery. Experimental light installation. Brutalist architectural photography. Precision-machined kinetic sculpture. Museum exhibition design. The visual quality should feel like an expensive commission for an international design institution. COLOR PALETTE Background: #E9E6DE Architectural wall: #EAE7E0 Floor: #D7D3CB Metal fragments: #252724 Secondary metal: #6D716E Shadow: #181A18 Interface: #20221F Accent: #E8FF6A The accent color is used sparingly for selected controls. No colorful gradients. No purple lighting. No decorative glow. No particles. No floating glass spheres. No generic futuristic interface. ARCHITECTURE The installation exists inside a minimalist gallery. One enormous plaster wall. One seamless concrete floor. A very subtle wall-floor junction. A single visible spotlight. The spotlight is mounted on a slender mechanical arm. The sculpture floats approximately 1.2m above the floor. Use a subtle structural frame if necessary. The installation should feel architecturally believable. MATERIALS Fragments are brushed dark titanium or anodized aluminum. Metalness: Approximately 0.75-0.95. Roughness: Approximately 0.25-0.38. Use anisotropic-looking brushed highlights where supported. The fragments should have visible thickness. Their edges catch narrow highlights. Avoid perfectly flat black pieces. Add tiny variations in surface roughness. Do not add excessive scratches or grunge. WALL The wall has an almost imperceptible plaster texture. Its surface should not be perfectly computer-generated white. Use procedural low-frequency surface variation. The texture must not compete with the shadow. The shadow is the hero. Use one perspective camera. Reference viewport: 1440x900. Camera focal-length equivalent: Approximately 65mm. Initial camera position: Slightly to the right of the sculpture. Approximately 24 degrees away from the wall normal. Camera height: Approximately 1.6m. The composition should reveal both: 1. The physical sculpture. 2. Its shadow on the wall. The sculpture occupies the left half of the composition. The readable shadow occupies the right half. Do not overlap the sculpture and shadow so heavily that the illusion becomes difficult to understand. The user must be able to orbit the camera. Orbit limits: Horizontal: -55 to +55 degrees from the default view. Vertical: -20 to +30 degrees. Keep the camera target near the center of the installation. Use smooth, critically damped camera movement. No exaggerated inertia. No continuous automatic rotation. No cinematic camera shake. Provide three camera presets: SCULPTURE: An oblique view emphasizing the physical fragments. SHADOW: A nearly frontal view emphasizing the readable message. STUDIO: The original balanced composition. Camera transitions should take approximately 1.1 seconds. Use a smooth quintic ease. Never cut between camera positions. The default phrase uses an extremely heavy grotesk typeface. Prefer a suitable openly licensed typeface. Use a font with: - Strong uppercase geometry - Clear counters - Heavy strokes - Minimal decorative details - Excellent readability The typography should feel architectural. Default layout: LOOK CLOSER. Two lines. The second line is slightly wider. Both lines are optically centered. Total shadow width: Approximately 2.1m. Total shadow height: Approximately 1.1m. Tracking: Tight but not overlapping. Line spacing: Approximately 0.95 times cap height. The period is oversized. It should feel lik

AClaude Opus 5.5

Record a smooth hover demo video of [PAGE URL / FILE]. Frame - 1440×900, the component centred. Use a contrasting background if it blends in. - No visible cursor, clicks or browser UI. Use real hover events, original animation speed. When to zoom - Measure the area that changes on hover (e.g. the menu items). - If it's at least half the frame wide and a quarter tall, don't zoom. - Otherwise zoom so it fills about 70% of the width, max 2.4×. Skip zooms under 1.4×. - Never zoom past an image's real resolution. Camera (Screen Studio-smooth) - Animate zoom and pan together with a critically damped spring (no bounce), about 1 s to settle, zooming in log scale. - Start at rest, glide in, follow each hovered item (about 1.2 s each), glide back out. - End on exactly the first frame so it loops seamlessly. - No more than 8% zoom change per frame. Output - MP4 (H.264), 30 fps, 5–8 s, no audio, under 2 MB, full resolution. - If it's too big, lower the bitrate only; never shrink, crop or speed it up.

AClaude Opus 5.5

Ask me for: 8 to 12 UI states I want the shape to morph into (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), black and white or a single accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). Dribbble-level UI motion. One shape, zero cuts: 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, with just a tiny overshoot. The camera zooms so each state fills the entire frame. The final frame matches the first frame, so it loops perfectly. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. 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 transforms into a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs expand into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. Springs use closed-form step responses. A value that changes targets multiple times is the sum of one spring per change, so it stays a pure function of time. The tab indicator's two edges follow separate springs, so the leading edge stretches ahead of the trailing one. Use the same trick for the toggle knob. Drags use direct manipulation: while the cursor is held, the value is calculated from its position. On release it springs back from wherever it was. Analyze the song with numpy to find the beat grid and start on a downbeat. Align every UI sound by its measured peak. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. 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, including cursor position and speed, or the loop stutters. Ask me for the inputs, then show me the state list on the beat grid before writing any code.

AClaude Opus 5.5

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). 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, with a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame matches the first, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that feels like a template. 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. 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. Use the 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 to get 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. 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. Ask me for the inputs, then show me the state list on the beat grid before you write any code.

Browse all Claude Opus 5.5 prompts Explore AI Video Prompts