Claude Opus 5.5 prompts for motion graphics and product launch videos

make a modern slick and punchy video for a modern startup that works on inference

Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

Make it a video to introduce https://typingmind.com/

Use actual product screenshot/logo/assets
Must have music and motion must match the music

Do it like a real professional production video, not like a demo or prototype. Try again, ultracode.

Make a dynamic 30-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out. Make it a video to introduce https://mdfor.dev/ Use actual product screenshot/logo/assets Must have music and motion must match the music Do it like a real professional production video, not like a demo or prototype. Add more animation and motion design; avoid using screenshots as raw; instead, break them down into components/icons so we can animate those too. Make the motions more juicy. Use the best motion design techniques you can.

Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are. The content should focus on [your product]. You should visit the pages first to learn about the product, then write the video content yourself.

I want you to create a highly professional SaaS product launch video. Go and find some SaaS, preferably just one that people know, so it's easier to identify with it. Pick that, and then make sure to get actual assets and images and all of that stuff from the internet. Turn it into these typical, very professionally edited, motion-graphics-styled product launch videos that you see people making on Twitter when they launch new SaaS products (which are showing off the features, the benefits, and all of these things).

Create a launch video for https://cosmos.so/ using HyperFrames. Research https://cosmos.so/ yourself and identify its unique value proposition, then communicate that proposition accurately. Make the video exciting, engaging, modern, and worthy of a contemporary product launch. Its UI, colors, typography, branding, design language, and motion language should feel unmistakably Cosmos. Choose the concept, story, copy, pacing, imagery, and animation yourself. Build a complete, playable HyperFrames Studio project in this folder, review it at normal speed, and give me the Studio link.

为 https://goodcase.ai/ 制作一支 30 秒的网站宣传片，并完成配乐。

你可以读取当前 Mac mini 上的代码和素材，也可以使用浏览器访问 https://goodcase.ai/。从代码和真实网站自行寻找品牌 Logo、案例内容、图片、影片及适合拍摄的页面，取得所需截图。先核对线上网站与本地代码，再决定影片展示哪些内容。网站功能、界面文字和案例效果必须有实际依据。

影片面向对 AI 案例感兴趣的创作者。开头 3 秒展示最抓人的真实案例效果；接著用连贯、有趣的视觉动线，呈现从发现案例到深入查看的过程；结尾清楚展示 https://goodcase.ai/ 的名称和网站。整体约 30 秒，节奏轻快，适合社交平台发布。优先完成 16:9 成片，同时制作适合 9:16 的版本。画面文字要少，并保持可读。

用代码生成音乐就好

You're a world-class motion designer, and this is your 15-second résumé reel. Make it dynamic and confident: open with a striking hook in the first second, build through a sequence of distinct techniques (typography, shape play, camera moves, colour shifts), and land on a clean, memorable final frame. Pacing should feel like it's cut to music. Go crazy.

Craft a high-energy, 15-second motion graphics piece that flexes your top-tier animation skills like a killer portfolio reel. Pull out all the stops، Like the creative work on Dribbble, fps 60

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

compose the soundtrack yourself, fully synthesized in code. no samples, no audio files, no VST instruments. every cut and transition must land on the beat.

1920x1080, 60fps. render the final video with the music mixed in as an MP4 and tell me where it's saved.

Research Distilbook.Make a dynamic 40-second motion graphics video on Distilbook that shows what an incredible motion designer you are. like it's your showreel - Go all out.

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

Scroll the box for the full 2,711-character prompt, or use Copy prompt.

<inputs>
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), and a free stock clip of a plain wall with moving plant shadows (Pexels).
</inputs>

<direction>
An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape 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 whole frame and contracts 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 drives 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.
</direction>

<structure>
120 BPM, 54 beats, something happens on every beat.
Open: the wordmark squeezes into its own period like an accordion, the dot grows 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 becomes 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 pops in letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob turns into 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 grows 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. Pick a frame color (it paints across) and a size, then the nav button flies down into "Order print".
Order: one black shape keeps morphing: 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.
</structure>

<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside an async seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value with many targets is the sum of one spring per change, so it stays a pure function of time.
3. 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 gives the map, mask and highlights.
4. Goo: blur + alpha threshold, then composite the source atop it so the glass stays sharp inside.
5. Iris: 6 blades around a hexagonal aperture. Each blade is its two vertices, both edge extensions and the SHORT arc between them.
6. 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 stay touching.
7. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing each frame.
8. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each placed by its measured peak. The song starts on a downbeat: the zoom lands on the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS.
9. 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).
</build>

<gotchas>
backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale past 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.
</gotchas>

<start>
Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film.
</start>

Scroll the box for the full 5,222-character prompt, or use Copy prompt.

<role>
You are a senior UI motion designer and creative technologist. You build UI animations in code, frame-accurate, and render them to video yourself.
</role>

<inputs>
Style: Apple Liquid Glass. Reference platforms: iOS 26, iPadOS 26, macOS Tahoe 26.

Format: 1440x1440, 60fps, seamless loop.

Song: "Digital Clouds" by Alejandro Magaña (A. M.), from Mixkit, free under the Mixkit License. If the file is not attached, ask me for it and nothing else.

Tempo: about 120 BPM, 8 bars, and something happens on every beat. Measure the real tempo from the file. If it differs from 120, keep the beat map in beats and derive every time from the measured grid.

Palette: light mode system materials.
- Labels: #1D1D1F. Secondary labels: #6E6E73. Opaque surfaces: white.
- One accent, #0A84FF, used only for on, active and selected states.
- The Dynamic Island is the only pure-black element.

Canvas: a macOS Tahoe style wallpaper.
- Large, soft color fields: deep blue #1B3A8C, teal #2BB3B1, violet #7B5CFF, and a warm peach highlight #FFB38A.
- Slow parallax drift: 12px per bar at most.
- Saturated enough that the glass visibly refracts it, calm enough to sit behind text.

Font: SF Pro Display for 20px and above, SF Pro Text below 20px, if installed locally. Otherwise use Inter from Fontsource: 600 for titles, 500 for labels, 400 for body. Use -1% tracking at display sizes and tabular numbers for any number that changes.

Icons: one SF Symbols-like set drawn as SVG, medium weight matched to the adjacent text, one consistent optical size per state. Symbols needed: play, pause, speaker with 3 waves, house, heart, chart bars, person, magnifier, note, checkmark.

Pointer: an iPadOS adaptive pointer.
- A 22px translucent gray circle (#8E8E93 at 45%).
- It snaps (magnetism) into any control it hovers and becomes that control's highlight shape.
- It becomes an I-beam in text fields.
- It shrinks 10% on press.
</inputs>

<direction>
Apple keynote and WWDC Liquid Glass session-level UI motion. One element, never cut. Every state is the same element morphing its size, corner radius, material and color, while its content swaps with a short blur. The pointer drives every change with real clicks, holds and drags.

Material:
- Liquid Glass is a lens, not frosted plastic. It refracts the wallpaper, and the bending is strongest at the rim.
- Light frosting and a 10–16% white tint.
- A 1px specular rim lit from the top-left, with a fainter counter-highlight bottom-right. The highlight shifts as the element moves.
- A soft contact shadow: 0 10 30 at 12% black.
- Glass never sits on glass. Content on glass uses vibrant or solid fills.
- Corners are concentric: inner radius = outer radius − padding.
- When glass shapes split or merge, they join like droplets (smooth union), never crossfade.

Motion language:
- Apple-like springs everywhere:
- Morphs: response 0.45, damping 0.86.
- Presses: response 0.25, damping 0.72.
- Pointer snap: response 0.3, damping 0.9.
- Overshoot is at most 3%.
- On press, glass lifts and swells (scale 1.06–1.12, brighter rim). It never shrinks.
- A toggle knob on hold turns into a clear, enlarged glass lens that stretches in its direction of travel.
- The tab bar selection is a glass droplet that magnifies the icons under it while dragged.
- Sliders thicken when grabbed and rubber-band past their limits.

Camera:
- Each state fills about 60% of the frame, and the wallpaper is always visible around the glass.
- Camera moves use response 0.6, damping 1.0.
- The wallpaper scales at 70% of the camera zoom for depth.

The last frame is the first frame, pointer position and velocity included.

Banned: bouncy or elastic easing, overshoot over 3%, particle bursts, neon glows, colored gradients on UI chrome (the glass specular rim is the only gradient), heavy drop shadows, glass on glass, mismatched corner radii, mismatched icon weights, emoji, crossfades between states, dead time longer than half a beat, anything that looks like a template or a Dribbble clone.
</direction>

<structure>
120 BPM, 8 bars, 32 beats. Beat map, one line per beat:

1. A glass capsule button "Continue" floats on the wallpaper. The pointer glides in.
2. The pointer snaps into the button and becomes its highlight.
3. Click: the glass lifts and swells, the rim brightens.
4. The capsule contracts into a circle and becomes a spinning activity ring.
5. The ring completes, filling in accent.
6. It morphs into a checkmark that draws itself.
7. The circle stretches into a black Dynamic Island, compact: album art on the left, a live waveform on the right.
8. Click: the island expands into Now Playing ("Digital Clouds", "A. M.", progress 0:42 / 1:41).
9. Click play: the play icon morphs into pause, with a path morph rather than a swap.
10. Grab the progress bar: it thickens, and the time labels shift out of the way.
11. Scrub forward with direct manipulation. The time counts in tabular numbers.
12. Release: the bar springs thin, and playback continues from the new position.
13. The island dissolves into a glass volume slider with a speaker icon.
14. Drag up: the fill follows the pointer, and the speaker waves appear one by one.
15. Drag past max: the whole slider rubber-bands and stretches, leading edge first.
16. Release: it springs back to its length at 100%.
17. The slider morphs into a toggle (track plus knob), off. Its label is "Focus".
18. Hold: the knob turns into a clear, enlarged glass lens that shows the track through it.
19. Flip on the beat: the lens stretches in its travel direction, and the track fills with accent.
20. The knob detaches as a droplet and becomes the selection lens of a floating glass tab bar with 4 tabs: Home, Health, Activity, Profile.
21. Drag the lens across the tabs. The leading edge stretches ahead of the trailing edge, and the icons magnify under the lens.
22. The lens settles on "Activity", and its icon turns accent.
23. The tab bar grows upward into a glass widget card titled "Activity", with concentric radii.
24. A 7-day bar chart (M T W T F S S) rises in a left-to-right stagger.
25. Hover Thursday: a glass tooltip bubble shows "8,412 steps", anchored to the bar.
26. Hover Friday: the tooltip slides over and counts to "11,036 steps".
27. ⌘Space: the card collapses into a Tahoe Spotlight bar with a magnifier icon.
28. Type "ne": the results list filters (New Note, Network, News), and rows spring in and out.
29. Type "w": "New Note" rises to the top as a selected accent row.
30. Enter: the row presses and lifts.
31. The Spotlight bar drops into a glass notification banner from the top: a Notes icon, "Note created", "now".
32. The banner contracts back into the "Continue" capsule. The pointer returns to its frame-1 position and velocity.
</structure>

<build>
1. One HTML file at 1440x1440. Everything is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.

2. Springs are closed-form damped step responses with Apple parameters: ω = 2π/response, ζ = dampingFraction.
- A value that is retargeted many times is the sum of one spring per retarget, so it stays a pure function of time.
- Releases start from the current value and the current velocity.

3. Asymmetric edges: the tab lens, the toggle knob and the slider stretch each have their leading edge on response 0.28 and their trailing edge on response 0.42.

4. Drags are direct manipulation.
- While held, the value is a function of pointer position, with rubber-banding past limits: offset = limit + (1 − 1/(x·0.55/d + 1))·d.
- On release it springs back from wherever it was.

5. Glass is rendered in a WebGL2 pass, not with CSS backdrop-filter:
- The wallpaper is drawn to a texture with a precomputed blurred mip chain.
- Every glass shape is a rounded-rect SDF. Merging and splitting use smooth-min with k = 24px.
- Refraction offsets the sample along the SDF gradient. The offset is strongest within 14px of the edge and scaled by lens thickness.
- Frost is a mip-level bias.
- Chromatic aberration is at most 1px, at the rim only.
- The specular rim comes from the SDF normal against a top-left light.
- The Dynamic Island is an opaque SDF in the same pass.
- Text, icons, charts and the pointer are crisp SVG/DOM layers above the canvas, under the same camera matrix.

6. Content swaps inside a morphing container:
- Exit takes 120ms: blur 6px, scale 0.96, fade.
- Enter starts 60ms later with its own spring.
- Exit and enter text never overlap.

7. Audio:
- Analyze the song with numpy (onset envelope plus autocorrelation) for the beat grid, and start on a measured downbeat.
- Synthesize Apple-subtle UI sounds with numpy: soft taps for clicks, ticks for scrub detents, a low detent at max volume, a keyboard click per typed letter, and a gentle two-note chime for the notification.
- Place each sound on its measured peak, mixed about 18dB under the track.

8. Render with Playwright at 1440x1440 with 4 subframes per frame (240fps).
- Blend to 60fps with ffmpeg: tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB.
- Encode H.264 yuv420p, crf 16, with AAC 192k and faststart.

9. Before the full render, render one still per beat (32) as a contact sheet. Fix anything off the grid, cramped, illegible over the wallpaper, or with non-concentric radii.
</build>

<gotchas>
- The glass and the DOM layers must share one camera matrix per frame, or the content drifts off its glass.
- Glass over a bright wallpaper patch kills legibility. Add an adaptive dim under the text based on sampled wallpaper luminance, rather than a heavier tint.
- The Dynamic Island is never glass.
- Icons crossing a morph keep their optical size. Scale the container, not the glyphs.
- The tooltip stays anchored to its bar through the camera move, not to the screen.
- Typed characters in Spotlight enter with the pointer's I-beam; the caret blinks on half-beats.
- Never put will-change on anything the camera scales, or text renders blurry.
- Make the last frame identical to the first, pointer included, or the loop stutters.
</gotchas>

<start>
If the song file is missing, ask for it. Then measure the BPM and the downbeat, and show me the beat map as a table (beat, time, state, pointer action, sound), snapped to the measured grid, before writing any code. Wait for my OK.
</start>

Scroll the box for the full 10,296-character prompt, or use Copy prompt.

You are a world-class motion designer doing a 20.00s kinetic identity bumper for TechHalla — an AI creator known for stealable workflows, not vibes. This piece must feel like the best designer in the room made a street-poster that moves. Showreel stakes: if this is weak, you don’t get hired.

DURATION: exactly 20.00 seconds. LOOPABLE: frame 0 == frame last (position, opacity, cursor if any).
FORMAT: one HTML file, 1080×1080 (square, X-native). 60fps.
PALETTE (strict):
- bg # 0A0A0A
- magenta # FF2BD6
- acid green # B8FF00
- white # F5F5F5 only for primary readable type when needed
No other hues. No gradients on UI chrome. Magenta/green may misregister (print offset) by 2–4px on impact frames only.

TYPE SYSTEM (use all three; never one font for everything):
1) Display / scream: Archivo Black (or equivalent ultra-condensed black) — 1–4 words max
2) Urban grotesque: Syne ExtraBold — secondary hits, stacked lines
3) Mono / “prompt code”: IBM Plex Mono Medium — small labels, timestamps, fake prompt crumbs
Tracking: display −40 to −80; mono +20. Optical kerning. No cute script fonts.

MESSAGE (locked — do not soften, do not add filler slogans):
Beat hits in this exact order:
1. STOP SCROLLING
2. AI VIDEO ISN’T EXPENSIVE
3. BAD PROMPTING IS
4. WORKFLOWS > WISHES
5. STEAL THE PROMPT
6. @ TECHHALLA
Supporting crumbs (mono, ≤18 chars, never full sentences): JSON · H3 · SEEDANCE · 0 KEYFRAMES · MAGNIFIC · COPY/PASTE

NARRATIVE ARC (20s):
0.0–2.5s COLD OPEN — “STOP SCROLLING” slams in from below with spring overshoot; magenta smear trail; acid green baseline ticks across like a waveform.
2.5–6.5s THESIS A — “AI VIDEO ISN’T EXPENSIVE” locks to a poster grid (baseline grid 8px). Letters scramble (seeded Fisher–Yates per glyph) then snap on the beat.
6.5–10.5s THESIS B — “BAD PROMPTING IS” replaces it via mask wipe through the letterforms (the outgoing line is the mask). Magenta/green channel split on the cut.
10.5–14.5s PROOF FLASH — rapid kinetic stack: WORKFLOWS > WISHES, then mono crumbs orbit a central block like a terminal. One fake “prompt block” types 3 lines max, then gets crossed by an acid green strikethrough that becomes a underline for STEAL THE PROMPT.
14.5–17.5s BRAND LOCK — @ TECHHALLA centers; display weight. A thick magenta bar and a thin acid green rule form an L-bracket mark (custom, not a logo download).
17.5–20.0s SETTLE / LOOP — hold lockup; micro-breath (scale 1.000→1.012→1.000); last frame == first ready for loop.

CONCRETE TECHNIQUES (required — implement, don’t approximate):
1. seek(t) pure function of time. No CSS transitions. No setInterval. No React state across frames.
2. Springs = closed-form step responses. Stack one spring per target change so motion stays deterministic.
3. Kinetic type: per-glyph spring (y, opacity, blur). Stagger = 1/16 note at 120 BPM (125ms).
4. Print misregistration: on accent frames only, duplicate text layer offset (±2–4px) in magenta and acid green at 40% opacity.
5. Mask reveal: destination text revealed by animating a path mask derived from the outgoing word’s outlines.
6. Camera: one orthographic camera; only punch-in (1.0→1.08) and horizontal smash-pans timed to beats — never random drift.
7. Motion blur: render 4 subframes per frame, blend (tmix-style).
8. Beat grid: 120 BPM, downbeat at t=0. Something must land on every beat for the first 16 beats; after that, every other beat is ok.
9. Pre-pass: before full render, export one still per major beat (8 frames). Fix cramped type, orphan words, low contrast — then render.

BANNED:
Generic AI clichés (brains, robots, neural nets, sparkles), soft gradients, bouncy cartoon easing, particle explosions, stock “futuristic HUD”, long paragraphs, narrator essay energy, Canva-deck energy, extra slogans beyond the locked message, purple/blue neon, glassmorphism.

Scroll the box for the full 3,818-character prompt, or use Copy prompt.

Make a 20-second motion graphic that explains how an AI language model turns a prompt into an answer, and why a long answer costs more… The charts then break apart into pixel blocks, and those pixel blocks rebuild into the explanation.

We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video.

I want you to independently and end-to-end make an inspirational video for this topic. Find the right audio track to get people inspired about the topic and think and feel very deeply about what is the best way to visually represent all of the themes on screen. You can do truly anything that you think might best let you visually express yourself, including abstract motion graphics.

Create an animated welcome screen for a mobile crypto wallet called "Nova". It's the first thing a new user sees — within 3 seconds it should feel safe, premium and simple.

Visual:
Deep navy-to-black radial gradient background with subtle grain. Accent color electric blue #2F6BFF with a soft glow. Clean geometric sans-serif (Inter). A frosted glass card in the center — translucent, 1px light border, soft inner highlight, rounded corners.
Animation sequence (~3.5s, plays on load):
0.0s — a soft blue light slowly blooms from the center of the dark background
0.3s — the glass card rises from below with a spring ease, slightly tilted in 3D, and settles flat; a light sweep moves across its surface
0.8s — on the card, the balance counts up from $0.00 to $2,480.00 and a small line chart draws itself
1.6s — the name "Nova" appears above the card, sliding up letter by letter
2.2s — the line "Hold, send and grow crypto — safely." fades in
2.6s — a white pill "Get started" button scales in with a soft glow pulse
After — the card gently floats in an idle loop, and the light sweep repeats every 4 seconds
Technical: single HTML file with CSS and vanilla JS, no external libraries, sized for iPhone (390×844). Make the motion smooth and polished, like a premium fintech app.

Scroll the box for the full 1,278-character prompt, or use Copy prompt.

帮我做一个原创的手游「高光时刻」动效：[主体，例如：开宝箱 / 段位晋升 / 成就解锁 / Boss 掉落 / 角色升级]。
做成一个可以直接打开的单文件网页（HTML + CSS + JS），点一下就能完整播放，效果对标商业手游的结算 / 奖励演出。

【世界观与风格】
- 原创美术，不要模仿任何现有游戏的 IP、角色或 Logo。
- 卡通手游风：高饱和配色，统一的深色描边（例如 #1A1033），圆润厚重的造型。
- 配色随等级升级：[等级阶梯，例如：普通绿 → 稀有蓝 → 史诗紫 → 传说金]。每升一级都要切换主色、光效颜色和背景色调。
- 标题用圆胖的游戏字体（如 Titan One / Lilita One），描黑边，加投影；文字逐字「砸」进画面，带回弹。

【主体物：做成真 3D】
- 用 Three.js 建模，不要用平面 SVG 贴图。要有厚度、倒角，以及符合主体的结构细节（木板缝、铆钉、包边、宝石切面、锁扣等）；木板缝这类细节用真实几何体拼出来，不要贴黑线条。
- 着色用卡通分阶（MeshToonMaterial 加 3～4 阶的渐变贴图），配三种灯光：主光、天光、等级色的轮廓光。
- 描边用后期边缘检测：渲染法线图 + 深度图，再用着色器画线。外轮廓粗、零件交界细，粗细全程一致；另外做 1.5 倍超采样和多重采样抗锯齿。
不要用「放大一圈的黑色背面」那种描边，那样粗细不均、转角会断。
深度判断的阈值要放宽，接缝主要靠法线判断，否则斜着看的表面会冒出细碎斜纹。
- 活动部件要真实运动，比如箱盖绕铰链翻开、奖章绕竖轴旋转。
- 待机时主体缓慢左右转动，让人看到侧面和厚度，同时轻微上下浮动；脚下要有随高度变化的柔和投影。

【如果画面里有 2D 插画（卡面、奖励图标、角色）】
- 三层卡通着色：底色、成块的阴影色、高光色，不要只用一层渐变。
- 线条分粗细：外轮廓粗，内部结构线细。
- 每个角色或物件要有自己的表情和姿态，不要所有东西共用同一张脸。
- 脚下画投影，让主体「站」在画面里；背景按属性区分图案，不要全用同一套放射线。

【演出节奏：五个阶段，缺一不可】
1. 预备：主体待机浮动，每隔几秒抖一下提示可以点击，底部显示「点击」提示。
2. 升级：每点一次，主体跳起、在空中转一圈、落地时压扁再回弹；同时切换到下一等级的颜色，闪一下光，冒一圈粒子，标题更新。
3. 蓄力（约 1 秒）：主体越抖越剧烈，缝隙透出光，四周粒子往中心吸，音效音调持续上升；最后一刻猛地压扁。
4. 爆发：从爆点向外扩散的泛光闪白、屏幕震动、镜头往前一推、多层冲击波、细长流光迸射、闪光星点、金币和宝石（带旋转）。高等级的爆发要明显更强。彩带只在最高潮用一次，不要满屏彩带。
5. 揭晓与结算：
- 奖励卡片从主体里沿弧线飞出，落位时带超调和晃动收尾，数字滚动计数。
- 稀有物品带彩虹流光边框和「NEW!」角标。
- 点击领取后，金币和宝石沿贝塞尔曲线飞进右上角的余额，每到一个余额就跳一下。

【揭晓舞台：让主角独占画面】
- 最高稀有度揭晓时，其他元素收起或淡出，背后换成一层干净的渐变幕布加缓慢旋转的柔光，不要让主角压在杂乱的背景上。
- 幕布出现时，把场景里的其他 3D 物件隐藏掉，否则后期描边会把它们的轮廓线画在幕布上。
- 主角的外发光要放在主体背后，只从边缘溢出，不能盖在主体前面把它糊成一片白。
- 可以加一圈围绕主角盘旋的星尘拖尾，但轨道必须完整在主角轮廓外侧，不能从主体正面扫过。

【光效：必须柔和，不能有硬边】
- 背景光芒：用带渐变过渡的 conic-gradient，不要一刀切的色块边缘；叠 2～3 层不同密度、不同转速的光。
- 光柱：由 5～7 道带模糊的光束呈扇形散开，亮度各自轻微闪动；根部加一团柔光核心，光里有光尘缓慢上飘。
- 闪白：从爆点向外的径向泛光（mix-blend-mode: screen），强度不超过 0.8，不要整屏纯白过曝。
- 粒子：每个火花都带一圈低透明度的外晕；冲击波用三层描边（宽而淡、中等、细而亮）。

【材质与界面】
- 边框、名牌、按钮要有材质感：金属拉丝渐变、左上亮右下暗的倒角光、内阴影；按稀有度换镶嵌件（钢铆钉 → 银框宝石 → 金框钻石加小王冠）。
- 小卡片上不要塞小字数值；详细数值放到揭晓时的信息面板里，面板里的数字滚动上涨，并弹出「▲+数值」。
- 画在 Canvas 上的贴图，分辨率至少是屏幕上最大显示尺寸的 1.5 倍，否则放大时会发虚。

【动画原则】
- 用 GSAP 时间线编排。所有动作都要有挤压拉伸、超调和弹性回弹，不要匀速。
- 粒子系统用 Canvas 2D 自己写：重力、阻力、生命周期、叠加混合，以及「吸入」「曲线飞行」「环绕」三种运动。
- 不要用 CSS 3D 透视去翻转大尺寸元素，放大加侧翻时会被投影成铺满屏幕的平面，3D 翻转一律放在 WebGL 里做。
- 所有「抖动」「呼吸」类的循环补间，在状态切换时要先取消再归零，避免它比停止指令晚一帧结束，又把值设回去。

【音效】
- 全部用 Web Audio 实时合成，不用音频文件：跳起、落地、升级和弦、蓄力上升音、爆炸低频加噪声、弹出音、计数滴答、金币叮当、胜利号角。
- 第一次点击时才初始化音频；右上角放静音开关。

【界面与工程】
- 顶部 HUD：模式切换、金币和宝石余额、静音按钮。
- 手机宽度也要能用；遵守「减少动态效果」设置（关闭震屏，减少粒子）。
- 动画状态机要严谨：动画播放中忽略点击，不能出现点击被吞或状态错乱。
- 目标 60fps。第一次打开时就是完整的待机画面，不能是空白。

【交付前自检】
在蓄力、爆发、揭晓、结算这几个时刻各截一张图，逐张检查：
- 主角有没有被光晕、粒子或文字挡住？
- 有没有过曝成一片白？
- 背景是否杂乱，有没有穿帮的描边线？
- 小字是否能看清？
- 结算后是否还有东西在不该动的时候继续抖动？

最后告诉我：每个阶段的时长，以及哪些参数可以调整演出强度。

Scroll the box for the full 2,515-character prompt, or use Copy prompt.