Remotion 片头生成提示词

以下保留原始提示词，可直接复制。

Create a polished 15-second motion-design intro about Claude Sonnet 5.5 using Remotion, React, and TypeScript.

Build and render the actual video, including a complete soundtrack. Do not stop at a storyboard, implementation plan, or silent animation.

CONCEPT

“Ideas, in motion.”

A metronome becomes a cursor. The cursor turns an idea into a finished interface. Everything resolves into the title “Claude Sonnet 5.5”.

FORMAT

1920×1080, 16:9, 30 fps, exactly 450 frames.

No voiceover.

Deliver an MP4 with background music and synchronized sound effects.

VISUAL DIRECTION

Premium editorial motion design with Swiss-inspired typography.

Warm ivory background (#F4F0E8), near-black typography (#191919), and one terracotta-orange accent (#D97757).

Use large typography, generous negative space, precise grids, and simple geometric shapes.

Create visual continuity through transformations of the same orange line.

Avoid generic dashboard montages, neon circuitry, robots, particle explosions, and excessive decoration.

MUSIC-FIRST TIMING

Use a 120 BPM, 4/4 musical grid:

- One beat = 0.5 seconds = 15 frames.
- One bar = 2 seconds = 60 frames.
- Half-beat accents may alternate between 7 and 8 frames; calculate each position from absolute time to avoid cumulative drift.
  
Create or select the soundtrack FIRST, then choreograph the visuals to its actual audible transients.

Trim any leading silence and align the first downbeat with frame 0.

Do not merely declare a BPM while using music that does not match it.

Maintain one shared timing map for animation landmarks, music cues, and SFX.

Key movements should ARRIVE on the beat; anticipation and transitions should begin before it.

FRAME-ACCURATE STORYBOARD

Frames 0–59 | 0–2s | THE PULSE

Open immediately on a large abstract metronome pendulum.

Its orange tip swings across the ivory background.

Place dry wooden clicks at frames 0, 15, 30, and 45, synchronized with its turning points.

Use tight framing and confident negative space.

Introduce a quiet tonal pulse beneath the clicks.

Frames 60–119 | 2–4s | THE TRANSFORMATION

At frame 60, the pendulum locks upright and transforms into a text cursor.

Synchronize the locking moment with a precise mechanical click and a soft low-frequency pulse.

Reveal “An idea.” in two deliberate typographic gestures landing at frames 90 and 105.

The cursor extends an orange baseline, preparing the next scene.

Frames 120–239 | 4–8s | THE BUILD

At frame 120, the baseline becomes a modular construction grid.

Abstract code lines assemble into one elegant interface.

Stage the transformation clearly:

- Frame 120: the grid locks into place.
- Frame 150: code blocks align.
- Frame 180: those blocks transform into an interface layout.
- Frame 210: a chart draws and one orange action button settles.
  
Add restrained rhythmic subdivisions and warm bass to increase momentum.

Use small, varied clicks for minor arrivals and fuller accents for the four main landmarks.

This is an illustrative interface, not a literal Claude screenshot or a performance benchmark.

Frames 240–299 | 8–10s | THE PAYOFF

At frame 240, the interface resolves into a bold typographic composition:

“Ideas, in motion.”

Use a clean mask reveal and one satisfying, restrained impact.

Allow the viewer to read it.

Reduce percussion toward the end of this section to create anticipation.

Frames 300–359 | 10–12s | THE REVEAL

Begin a geometric wipe at frame 300.

Let a short, shaped whoosh lead into the title landing at frame 330:

“Claude”

“Sonnet 5.5”

Make “Sonnet 5.5” dominant.

At frame 330, synchronize the completed title with a warm musical resolution and a tasteful low impact.

At frame 345, the orange line settles into an underline with a small tactile click.

Frames 360–449 | 12–15s | THE HOLD

Hold the finished title cleanly.

Allow only a subtle cursor blink.

Let the resolved chord and reverb tail breathe, then fade smoothly to silence by the end.

Do not cut off the music or add a new visual event in the final second.

The final frame must support a direct cut to the presenter.

BACKGROUND MUSIC

Use an original or appropriately licensed instrumental cue with:

- A clear 120 BPM pulse.
- Warm plucked synth or muted keyboard tones.
- A restrained bass line.
- Crisp, understated percussion.
- A deliberate build from sparse to energetic.
- A composed resolution at 11 seconds, followed by a gentle tail.
  
It must feel like a complete miniature musical arrangement, not a stock loop abruptly chopped at 15 seconds.

No vocals, epic trailer drums, aggressive EDM drops, or recognizable copyrighted melodies.

SOUND EFFECTS

Include real, audible audio assets for:

- Dry wooden metronome ticks.
- The pendulum-to-cursor locking click.
- Soft typing or typographic clicks.
- Grid and interface snap accents.
- A short transition whoosh.
- The final title impact and underline click.
  
Keep one coherent sonic character: tactile, warm, precise.

Use stronger sounds selectively. Do not attach a loud whoosh to every movement.

A whoosh should lead into the landing; a click or impact should coincide with it.

Use licensed local assets or synthesize and save original WAV files.

Do not leave missing audio placeholders or depend on browser audio playback to generate the final soundtrack.

Keep all required audio files inside the project.

MIXING

Keep music present throughout the active sequence, with SFX clearly audible above it.

Briefly duck the music around the main transformation and title impact.

Avoid harsh transients and excessive sub-bass.

Target approximately -14 LUFS integrated with true peaks no higher than -1 dBTP.

Use smooth fades with no clicks or abruptly truncated tails.

REMOTION IMPLEMENTATION

Use deterministic, frame-driven animation.

Drive visual timing from useCurrentFrame() and the shared cue map.

Do not use wall-clock timers, uncontrolled randomness, or CSS animations that drift during rendering.

Use reusable React components and SVG where appropriate.

Load fonts before rendering.

Use frame-positioned audio sequences and volume envelopes supported by the installed Remotion version.

Preview and render with the exact same timing and audio assets.

VERIFICATION AND DELIVERY

Render the finished video and review it WITH SOUND.

Check key visual arrivals against the actual audio transients, within one frame.

Inspect transitions, text readability, audio clipping, missing assets, and the final music tail.

Confirm the exported MP4 contains an audible audio stream and is exactly 15 seconds long.

Deliver:

1. The finished MP4 with music and SFX.
2. The editable Remotion project and all required assets.
3. A separate mixed soundtrack WAV.
4. A short audio credits file identifying asset sources and licenses.
  
This is an independent editorial intro, not an official Anthropic advertisement.

Do not add unverified performance claims or extra slogans.

Make reasonable creative decisions and proceed through the final render without a storyboard approval pause.

# Immersive Product Website: NOCTURNE ONE Spatial Audio Headphones

## Your Task

Design and implement a working premium consumer electronics website directly in the current project. The product is **NOCTURNE ONE**, a flagship pair of over-ear headphones featuring spatial audio, transparent acoustic chambers, and 42-hour battery life.

This is not a standard SaaS landing page. The result should feel like a carefully choreographed digital product launch: visually striking at first glance, then revealing the product layer by layer as the user scrolls. Do not ask for design preferences. Make distinctive, cohesive, high-end design decisions and implement them.

## Visual Direction

- Use a palette of **deep graphite, ice silver, and a single muted amber accent**. Avoid pure black, purple-blue neon, and rainbow gradients.
- Aim for the feel of “a precision acoustic instrument in a dark room”: restrained, sharp, and expensive, without a gaming aesthetic.
- Use **Liquid Glass** with convincing material depth: translucent layers, a sense of background refraction, highlights within 1 px, subtle inner shadows, variable edge brightness, and depth of field. A white translucent layer with `backdrop-blur` alone is insufficient.
- Make the first screen an asymmetric split layout: concise, forceful Chinese copy and CTAs on the left; a visually dominant headphone installation on the right. Build the product with CSS, SVG, or Canvas if needed, without relying on fragile external images.
- Use Geist, Satoshi, Outfit, or another modern industrial sans-serif font, with sensible Chinese fallbacks. Do not use Inter or emoji.
- Subtle dark-area grain, soft volumetric light, and slight chromatic dispersion are welcome. Avoid cheap outer glows and a screen full of glass cards.
  
## Page Content

Implement all of the following without falling into a generic “hero + three feature cards + CTA” structure:

1. **Floating glass navigation:** Brand, Sound, Structure, Specifications, and Purchase. Its material and size should change subtly after scrolling.
2. **Launch scene above the fold:**
	- Heading: `听见空间，而不只是声音。`
	- Supporting copy: `NOCTURNE ONE 以透明双腔体、个性化 HRTF 与 42 小时续航，重新定义私人声场。`
	- Primary button: `预约试听`
	- Secondary button: `观看 90 秒设计故事`
	- The product installation on the right should feature slow levitation, a passing light sweep, foreground/background depth, and glass HUD elements displaying `42h`, `Spatial Engine`, and `38 mm`.
3. **Soundstage section:** Create an interactive circular soundstage or waveform visualization. Sound waves and spatial direction should respond subtly to pointer movement.
4. **Structure section:** Use an offset layout or sticky scrolling to progressively separate the earcups, acoustic chambers, and headband, accompanied by concise copy.
5. **Color selector:** Offer `Obsidian`, `Mist Silver`, and `Burnt Amber`. Switching options should smoothly transition the product color and ambient lighting without reloading the page.
6. **Specifications and purchase:** Present the details in a refined technical layout: weight `312 g`, Bluetooth `5.4`, battery life `42 h`, fast charging `10 min / 6 h`, and launch price `¥3,499`.
7. **Footer:** Make it feel like the back cover of a brand publication, rather than a conventional four-column link footer.
  
Keep the specified Chinese UI copy in Chinese.

## Interaction and Motion

- On first visit, play a complete choreographed entrance: navigation, copy, product, and HUD should appear in sequence.
- Give the primary CTA a restrained magnetic-follow or directional hover effect. Do not use React state to drive pointer animation on every frame.
- Limit scroll animation to `transform` and `opacity`. Avoid high-frequency calculations in native scroll listeners.
- Implement hover, active, focus-visible, and disabled states for every button. Clicking `预约试听` should open a glass reservation panel that appears to expand naturally from the button. Include a minimal form flow that users can close and submit.
- The form must support default, submitting, success, and validation-error states. Do not make it a static success screen.
- Support `prefers-reduced-motion` and full keyboard operation.
  
## Engineering Constraints

- Use React and TypeScript. Reuse the project’s existing stack where possible. Inspect `package.json` before installing missing dependencies; do not assume Framer Motion or an icon library is already available.
- Use icons only from `@phosphor-icons/react`, `@radix-ui/react-icons`, or simple custom SVGs, and keep their style consistent.
- Split the implementation into clear components. Isolate continuously animated components so they do not cause the entire page to rerender.
- Complete the design for desktop, tablet, and mobile. Use `min-h-[100dvh]` for the first screen. Below 768px, use a stable single-column layout with no horizontal scrolling.
- Do not use Unsplash. Leave no placeholders, TODOs, pseudocode, or primary buttons that cannot be clicked.
  
## Definition of Done

Deliver a page that runs directly, rather than a design description or screenshot. It must be visually impressive, have convincing glass materials, use motion with a clear hierarchy, contain meaningful content, provide complete interaction flows, work reliably on mobile, and avoid the look of a default component-library template.

# 3D Digital Twin Console: PELAGOS Offshore Wind Farm

## Your Task

Design and build a working **PELAGOS offshore wind farm digital twin console** from scratch in the current project. The user is an offshore wind farm operations engineer who needs to inspect turbines in a genuinely interactive 3D scene, monitor power output and alerts, replay weather conditions, and plan maintenance tasks.

This is the highest-difficulty case. The final result should feel like both a real command-center display and a cinematic product demo. It must include full-screen real-time 3D, a clearly layered Liquid Glass interface, cinematic camera direction, coordinated complex state, and a reliable performance strategy. Do not stop at a concept description. Do not ask me questions; complete the implementation directly.

## Core Visual Concept

- Set the scene in the North Sea 18 minutes after sunset: a dark slate-blue sea, fading daylight, low clouds, distant mist, and red aviation lights on the turbines. Use graphite gray and mist silver for the interface, with muted safety orange as the only accent color.
- No purple or blue-purple AI gradients, pure black, esports neon, cheap outer glows, gradient headlines, emoji, or Inter font.
- The 3D scene is the visual focus. Do not cover its edges with panels; float a small number of high-value instruments over it. Panels must have a convincing Liquid Glass appearance: layered transparency, background refraction, a 1px inner highlight, shifting light and shade along the edges, subtle inner shadows, and credible depth of field where panels overlap.
- Pair `Geist / Satoshi` with `Geist Mono / JetBrains Mono`. Use monospaced type consistently for numbers, coordinates, power readings, and time.
- Visual variation: 9/10. Motion intensity: 9/10. Information density: 7/10. Be bold, fluid, and sophisticated without sacrificing readability.
  
## Required Real 3D Scene

- Build a genuine WebGL scene with Three.js or React Three Fiber. Do not use 2D images, video, or CSS to fake 3D.
- Procedurally generate at least 24 offshore wind turbines, each with a tower, nacelle, and three rotor blades. Use `InstancedMesh` or an equivalent optimization. The scene must run without external GLB assets.
- The sea must have gentle motion and reflective or shader-based depth. Add fog, a sky gradient, a key light, and depth across the distant wind farm. Keep effects affordable; do not stack expensive post-processing.
- Give each turbine an independent state: normal, curtailed, offline, or awaiting maintenance. Rotor speed must respond to current wind speed and turbine state; instances must not all rotate in perfect sync.
- Support orbit, pan, and zoom. Hovering over a turbine should reveal a restrained outline and its ID. Clicking should smoothly fly the camera toward it. On arrival, show a floating glass data plate for that turbine. Exiting should return the camera to the wind farm overview.
- On entry, play a skippable 3–5 second camera sequence that skims the sea, passes through the first row of turbines, and settles into the operations view. Avoid abrupt cuts, and do not let the animation block interaction.
  
## Operating Interface

1. Top navigation: `PELAGOS / FIELD 07`, current time, wind speed, grid output, connection quality, and a dynamic island that morphs when an alert appears.
2. Left asset tree: arrays A, B, C, and D with 24 turbines. Support search, collapse, and status filters. Clicking an entry must stay synchronized with selection in the 3D scene in both directions.
3. Right context panel: show wind farm output, utilization, and today's energy production by default. When a turbine is selected, transition to its live power, nacelle temperature, vibration, yaw angle, and latest work order. Morph the panel content smoothly with a shared-layout transition instead of replacing the entire panel abruptly.
4. Bottom timeline: allow dragging to replay the last 12 hours of weather. Changes in time must simultaneously update wind speed, wave amplitude, sky brightness, rotor speed, total output, and alert history.
5. View modes: `Field`, `Power Heatmap`, and `Maintenance Risk`. In heatmap mode, turbines must form a readable spatial encoding based on actual values, with a legend.
6. Alert center: include natural data such as `T-18 gearbox vibration 8.7 mm/s`, `T-07 yaw error 11.4°`, and `T-22 SCADA signal lost 03:42`. Clicking an alert must locate the turbine, switch views, and open the context panel.
7. Maintenance workflow: clicking `Create maintenance task` in turbine details should naturally morph the button into a glass task panel. Let users choose a time, severity, and technician, then complete submitting, success, and error states.
8. Include a cinematic mode that hides most of the UI while the camera tours the wind farm on a preset path. Any user interaction must exit cinematic mode immediately and smoothly.
  
## Interaction, Motion, and Sound Design

- Use spring animations with a sense of weight for popovers, selection, filtering, and reordering. Use layout or shared-element transitions for related elements.
- A few ambient microinteractions are welcome, such as aviation lights, a pulsing connection indicator, waves, and data flow, but each persistent animation must have a clear purpose.
- Glass buttons need directional hover feedback, press-and-release motion, and a clear `focus-visible` state. The main desktop CTA may use subtle magnetic behavior, but do not drive continuous pointer animation through React state.
- Provide complete loading, empty, WebGL initialization failure, and data error states. If WebGL fails, show a fully designed fallback overview rather than a blank screen.
- Respect `prefers-reduced-motion`: disable automatic tours and strong parallax, and shorten camera movement without breaking functionality.
- Support keyboard selection, Escape to return to the overview, `F` to focus a turbine, and `M` to enter or exit cinematic mode. Hint at these shortcuts unobtrusively in the interface.
  
## Engineering and Performance Requirements

- Use React and TypeScript. Read `package.json` and verify dependencies first. Install Three.js, React Three Fiber, or an animation library only if missing, and explain any installation. Do not assume dependencies already exist.
- Do not mix GSAP and Framer Motion in the same component tree. Keep the 3D render loop, UI animation, and application state clearly separated.
- Use a single source of truth to keep the asset tree, 3D selection, alerts, timeline, detail panel, and maintenance form consistent. Avoid unnecessary global state.
- Cap device pixel ratio. Reduce sea and shadow quality on mobile devices. Pause nonessential animation when the tab is hidden. Properly clean up RAF callbacks, listeners, materials, geometry, and WebGL resources.
- Aim for a stable frame rate near 60 fps on mainstream laptops. Do not remove core 3D features or coordinated interactions just to improve performance.
- Desktop is the primary experience, but tablet and mobile must also be usable. On small screens, turn the asset tree and details into bottom glass drawers while preserving selection, timeline, and view switching. Use `min-h-[100dvh]` and prevent horizontal scrolling.
- Do not use fragile external resources, Unsplash, pseudocode, TODOs, or nonfunctional buttons.
  
## Definition of Done

Deliver a runnable, operable digital twin product with genuine 3D depth. Acceptance testing will include clicking turbines, dragging the timeline, switching to heatmap mode, locating an asset from an alert, and creating a maintenance task. It will also assess the glass treatment, camera direction, state consistency, mobile experience, and frame rate. A static dashboard appearance, an incomplete interaction loop, or images masquerading as 3D will not count as complete.

# Challenge 2: Multi-Robot Warehouse Scheduling System

Starting from the current empty directory, build a complete, runnable full-stack web application: **a multi-robot warehouse scheduling and simulation system**.

## Goal

Multiple robots must execute transport jobs simultaneously inside a warehouse made of aisles, shelves, pickup locations, and workstations. The system must plan routes, prevent collisions, and replan in real time when an aisle is unexpectedly blocked. The interface must make every robot's position, planned route, current job, and reason for waiting immediately understandable.

## Required functionality

1. Generate a deterministic warehouse grid containing at least 8 robots, 20 shelves, 4 workstations, and several one-cell-wide bottleneck aisles.
2. Allow users to create transport jobs by selecting a shelf, destination workstation, and priority. The scheduler must automatically assign an available robot.
3. Implement a real pathfinding algorithm on the backend. Planned routes must never cross shelves, walls, or blocked cells.
4. Implement time-step-based path reservations that prevent:
	- Two robots from occupying the same cell at the same time.
	- Two robots from swapping cells during the same time step.
	- Robots entering a permanent head-on deadlock inside a narrow aisle.
5. Robots may wait or replan to resolve conflicts, but the system must expose the reason. High-priority jobs must not starve indefinitely.
6. The backend must advance the simulation using fixed time steps and remain the authoritative state source. The frontend must not independently decide final robot positions.
7. Stream state updates through WebSocket or SSE with monotonically increasing sequence numbers. After reconnecting, the client must obtain a complete snapshot and then continue applying newer events without reverting to stale state.
8. Allow users to block or unblock any traversable grid cell while the simulation is running. Affected robots must stop before entering the new obstacle and replan immediately.
9. Support pause, resume, single-step execution, and reset with the same deterministic seed so scheduling behavior can be reproduced.
10. Persist jobs, map changes, and the current simulation state so that a page reload can continue observing the same run.
11. The interface must display the warehouse map, planned robot paths, job queue, robot states, and event log at the same time. Desktop is the primary target, but the layout must not visibly break on a small screen.
12. Provide clear setup and start commands in a README, and ensure the project can complete a production build.
  
## Acceptance scenario

I will create at least three simultaneous transport jobs and watch robots pass through narrow aisles without colliding. I will then block a cell directly ahead of an active robot and verify immediate replanning. Finally, I will disconnect and reconnect the page and confirm that the snapshot and subsequent event sequence remain consistent.

This is a **25-minute challenge**. Start implementing immediately. Prioritize scheduling correctness, space-time conflict avoidance, dynamic replanning, and real-time state consistency.

# Challenge 1: Reactive Spreadsheet Engine

Starting from the current empty directory, build a complete, runnable full-stack web application: **a compact spreadsheet with formula evaluation and dependency tracking**.

## Goal

Users should be able to edit cells much like they would in Excel. Whenever a cell changes, every formula that depends on it—directly or indirectly—must be recalculated in the correct order. The interface must make raw formulas, computed values, errors, and dependency relationships easy to inspect.

## Required functionality

1. Build an editable grid with at least 20 rows and 10 columns. Support keyboard selection, Enter to edit, arrow-key navigation, and copy/paste.
2. Cells must accept text, numbers, and formulas beginning with `=`.
3. Implement the formula parser and evaluator yourself. At minimum, support:
	- A1-style cell references.
	- `+`, `-`, `*`, `/`, parentheses, and correct operator precedence.
	- `SUM(A1:A5)` and `AVG(B1:B5)`.
	- Formulas that combine functions, ranges, references, and arithmetic expressions.
4. Maintain a real dependency graph and recalculate only affected cells. Multi-level indirect dependencies and forward references must work correctly.
5. Detect both direct and indirect circular references. Every cell participating in a cycle must display `#CYCLE!`; the application must never hang or crash.
6. Correctly produce and propagate `#DIV/0!`, `#REF!`, and `#VALUE!` errors.
7. When a cell is selected, clearly highlight both the cells it references and the cells that depend on it.
8. Implement undo and redo for at least the 20 most recent edits.
9. Persist the workbook through a backend. After a page reload, raw values, formulas, and computed results must remain correct.
10. Provide clear setup and start commands in a README, and ensure the project can complete a production build.
  
## Acceptance scenario

I will create a formula dependency chain at least three levels deep, change the root value, and observe the cascade recalculation. I will then create an indirect circular reference and inspect the resulting errors. Finally, I will test undo, redo, and persistence across a full page reload.

This is a **15-minute challenge**. Start implementing immediately. Prioritize the formula engine, dependency graph, error propagation, and a runnable end-to-end result.