by Anthropic

Claude Opus 5.5 Prompts

With Opus 5.5, a motion graphics prompt is a design brief — it writes the animation as code, so every parameter stays negotiable.

video

Claude 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

Claude 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.

Claude 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.

Claude 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.

Claude Opus 5.5

Use huashu-art-motion to make me a 15-second animation. The skill's docs are in Chinese; read them and talk to me in English. 1. First check for uv, ffmpeg and Playwright Chromium, and tell me how to install anything that's missing. 2. Ask me what it's about, who it's for, and whether it's landscape or portrait. From the material layer in references/风格配方/INDEX.md, pick 3 styles that fit, three-star ones first. Redesign the composition for my subject in all three, each different from the others, and don't copy the room from the samples. Show me one still frame of each to choose from. 3. Once I pick, give each scene one main action plus two motif loops from that style's card. For Van Gogh, that's the starry sky curling into swirls and the lamp's halo spreading outward. If there's music, use the skill's BPM synthesis and put the motion on the beat. 4. If people need to appear, ask me first: my own character art, frames from an image model, or only hands and figures seen from behind. 5. After rendering, follow the skill's own QA steps: run its QA script first, then send a subagent that took no part in making it to watch only the finished film and find problems, have it write its findings into the 审片/ folder, and deliver with its delivery script. If anything comes up red, fix it and re-render before giving it to me.

Claude 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 song around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use) a free stock clip of a plain wall with moving plant shadows (Pexels) An Apple-keynote-style launch film, 2D only, one continuous take. Every scene grows out of the previous one: nothing fades, blurs or cuts. Objects transform instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, pages push, and a black shape floods the entire frame before contracting into the next scene. Warm off-white canvas, black UI, iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for UI. A cursor controls every change with real clicks, drags and long-presses. The camera zooms screen-studio style so each moment fills the square, and the cursor scales with it. Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template. 120 BPM, 54 beats, something happens on every beat. Open: The wordmark squeezes into its own period like an accordion, the dot expands into a black pill, a label rises inside it. Click: six iris blades close over the label and snap open onto a photo. The circle turns into a square, shrinks, the grid unfolds from behind it like a paper map (center, plus, corners), reflows into a bento, and a click zooms into one tile, landing exactly on the drop. Glass: A glass word appears letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon transforms it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob becomes a glass lens while held. It lifts into a glass orb, the next photo opens inside it as a circle, and the orb expands into a lock screen: glass clock digits, date, and a home bar that stretches into a glass music player. Stage: The lock screen pulls back into a phone (the bezel grows out of the screen edge). The Dynamic Island stretches like liquid, pinches off, flies over and expands into a Mac window that rolls up like a blind. Long-press the wallpaper, drag it onto a Safari tab, the page pushes in, drop it and it becomes the hero of a landing page. Scroll: the hero morphs into a framed print on a product card, with the mat and molding growing out of the photo's edge. Choose a frame color (it paints across) and a size, then the nav button flies down into "Order print". Order: One black shape continuously morphs: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓ Wall: The delivered circle floods the frame edge to edge, holds black for a beat, and contracts into the framed print hanging on the real wall footage. The same iris opens onto the print, closes again, the frame floods the screen and contracts into the pill → the dot → the letters spring back out, landing on the beat return. Last frame = first frame. One HTML file, square 1440x1440. Every style is calculated from time inside an async seek(t): no CSS transitions, no timers, no state between frames. Springs use closed-form step responses. A value with multiple targets is the sum of one spring per change, so it remains a pure function of time. Liquid glass: each glass element holds its own clone of the scene behind it, filtered with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, plus a rim light. Glass letters: a canvas distance field per glyph generates the map, mask and highlights. Goo: blur + alpha threshold, then composite the source on top so the glass stays sharp inside. Iris: 6 blades around a hexagonal aperture. Each blade uses its two vertices, both edge extensions and the SHORT arc between them. Wordmark squeeze: every letter moves toward the dot by the same factor and its drawn width follows (narrow the wdth axis, scale the rest), so the letters remain touching. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing every frame. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each positioned by its measured peak. The song starts on a downbeat: the zoom hits the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS. Render with Playwright: 4 subframes per frame blended with ffmpeg tmix, 60fps. Check one frame per beat, then scan for single-frame pops (frame-difference spikes 3x their neighbours). backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale beyond the corners and take about 0.3s, or half the screen changes in one frame. A child with visibility: visible shows through a hidden parent, so use inherit. Text that swaps 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.

Claude Opus 5.5

you are a principal motion designer and real-time graphics engineer. you make product launch films entirely in three.js, every frame code, to the standard of the brand's own films. you prove quality with measurements and independent critics, not adjectives. - the product, and the 3-5 facts the film may state (verbatim, nothing invented) - the reference film to beat - length, aspect and resolution - never show: [logos, people, footage you don't own] read the reference frame by frame and turn it into numbers: cut rhythm, camera speeds, the hero motion curve, type size and timing, stage colour. those numbers are the bar. measure it, never copy it. - storyboard first: one table of time, shot, what it proves and the cut out. 2-3 s per shot, and frame 0 is already the money shot - one seek clock: every pixel is a pure function of time - build every element (the device, its screen ui, each shot, the type) alone in its own lab before it joins the film - the screen ui is code, the type is drawn on canvas, and every threshold is a crossfade (hard ones flash for a frame) - builder and critic are always separate agents. the critic starts fresh every round, judges the rendered frames against the reference, scores them and names the single biggest gap. the builder fixes only that - blind test: mix your frames with the reference's. if a judge can tell which is which, it isn't done - wow gate: split the film into 3 s windows. every one must be a yes - one real track, lined up so its own final hit lands on the end card and played as one continuous piece. cut on its beat - a clean, real sound on every small move, with the hero moments clearly audible - music quiet (about -34 lufs), and always a music-only version render at 60fps and measure frozen frames, one-frame pops, black frames and loudness. then watch it like the client would: empty space, text over text, labels that lie, shots that linger.

Claude 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

Claude 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.

Claude Opus 5.5

### 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.**

Claude 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.

Claude Opus 5.5

make a thinklet that displays a new kind of animation born from SVG and three.js and webgl and other effects and graphical techniques merged into a new form of animation that you can invent right now and I want animated 4 pelicans riding a single bike on top of the new tesla roadster (look it up online images of it) as the roadster is hovering with its compressed air jets. Each pelican must be dressed different according to various cultures.

Claude 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.

Claude Opus 5.5

Configure my Claude Code workspace as an autonomous high-craft motion studio: 1. Run the primary session on Sonnet 5.5 (effortLevel: high) with Opus 5.5 as advisor 2. Spawn four parallel Haiku 5.5 subagents: spring math, SVG cleaner, audio transients, asset parser 3. Enforce three rules in CLAUDE.md: ping advisor before locking storyboard timecodes, upon render diff failure or frame drops, and before final master export 4. Scope boundaries: subagents return structured easing tables and cleaned SVG nodes only without polluting main context Show every file update as a diff first, make zero changes without confirmation

About Claude Opus 5.5

Claude Opus 5.5 approaches motion graphics from the opposite direction of a video model: instead of diffusing pixels toward a scene, it authors the animation as code — HTML, Canvas, SVG, Remotion — that renders the motion deterministically. Text stays razor-sharp, timing is exact to the frame, and a brand color is a hex value, not a hope. Recording that render is the video.

That flips what a good prompt is. A diffusion video prompt paints a shot; an Opus 5.5 motion graphics prompt reads like the brief you would hand a motion designer: the assets it can use, the duration and beats, the copy that appears on each card, the reference style, the easing feel. Vague adjectives survive in pixel space but die in code space — "make it pop" becomes actionable only when the brief says what pops, when, and for how long.

The payoff is iterative precision. Because the output is code, every follow-up message is a surgical edit — "hold the logo two beats longer", "ease the third card in from the right instead" — and only that parameter changes. The gallery above collects tested Opus 5.5 motion graphics prompts with their real recorded outputs; notice how the strongest ones specify structure and timing rather than describing imagery.

How to write Claude Opus 5.5 prompts

1Open with the asset manifest: logo files, brand colors as hex, fonts, product screenshots, the folder they're in. Code can only draw what the brief hands it — an unlisted asset doesn't exist.
2Budget the timeline in beats, not vibes: "15 seconds — 2s logo reveal, 4s feature carousel of three cards, 3s price card, hold the end frame". A beat sheet is the single strongest constraint you can give.
3Write the on-screen copy verbatim in the brief. Unlike pixel models, code renders text exactly — so the headline, tagline, and CTA you write are the ones that ship, letter for letter.
4Anchor the style to a reference, not an adjective: "Apple keynote showreel energy, flat dark background, one accent color" beats "sleek and modern" every time.
5State the output shape explicitly — "a single self-contained HTML page that auto-plays the animation". It decides whether you get a demo scaffold or a deliverable you can record straight away.
6Refine in follow-up turns instead of rewriting the whole brief: "slow the intro by half a second", "swap the easing on the logo to spring". The code persists between turns, so edits compound instead of resetting.

Frequently asked questions

How is an Opus 5.5 motion graphics prompt different from a video model prompt?

A video model prompt describes a scene and hopes the pixels agree; an Opus 5.5 prompt is a design brief for code that renders the animation deterministically. You trade photographic texture for exact typography, exact timing, and the ability to revise any single parameter in a follow-up message.

Do I need to know how to code to make motion graphics with Claude Opus 5.5?

No. You describe the brief — assets, beats, copy, style — and Opus 5.5 writes and iterates the HTML/Canvas/SVG code itself. Reading code helps for deep customization, but the tested prompts in the gallery above are plain-language briefs.

How do I turn the generated animation into a video file?

The animation renders in a browser, so any screen-recording tool captures it as a video. For clean results, ask in the brief for a fixed duration and an auto-playing single-page output — then record one full playthrough from start to the held end frame.

What should I prepare before prompting for a product showreel?

Gather the brand assets first: logo, hex colors, product shots, and the exact marketing copy. Then decide the beat structure — what appears in which order for how long. A brief with real assets and a beat sheet outperforms a long aesthetic description every time.

Related models

Seedance 2.5

Seedance 2.5 is a next-gen AI video model that generates continuous, synchronized 30-second 4K clips from a single prompt.

MiniMax H3

MiniMax H3 is a powerful multimodal video generation model that creates up to 15-second 2K videos with native stereo sound from text, image, video, and audio inputs.

Seedance 2.0

ByteDance's #1-ranked video model — multi-shot direction with native lip-sync and spatial audio.

Grok Imagine 2

xAI's Grok Imagine 2 — instant photorealistic stills that animate into short video clips with native audio, built into Grok.

Browse AI Video Prompts All models