3Dテンプレート

three.jsを使用してPrompt Motionギャラリーは、湾曲した壁にビデオカードを配置した3D空間として再構想され、自己完結型のHTMLページとして構築します。
スタイル: Prompt Motion独自の作品における柔らかな自然光と白い空間：白黒、 Geist、オレンジのアクセント。
決め手となるショットはカードの列が上空から見ると「PROMPT MOTION」という文字に収束する引き戻しです。すべてはこのショットに向けて構築してください。
カメラ：フィルムカメラを使用し、軌道制御装置は使用しない。すべてのショットは、ドリー、クレーン、軌道、プッシュイン、ラックフォーカスといった、それぞれ固有の動きを1つずつ用い、ゆっくりとイン・アウトさせ、カメラが幾何学的形状を通過することはない。
光と素材：柔らかな影を伴うキーライト、フィルライト、リムライト、反射のための環境マップ、奥行きを表現するための霧、粗さの異なる物理ベースマテリアル、 ACESトーンマッピング。どれもデフォルトのマテリアルと似ていないようにする。
動き：物体同士が互いに反応し合い（当たったものが動き、近くにあるものが点灯する）、バネや単純な物理法則によって駆動され、線形トゥイーンは決して使用されない。
禁止事項：デフォルトのマテリアルとライティング、浮遊するテキストラベル、あらゆるものに光るエフェクト、ゆっくりと回転するオブジェクトを全体のアイデアとする、技術デモのように見えるものすべて。

各ショットは約3秒です。
1. 柔らかな光の中でカードの端をマクロ撮影し、次に再生中のビデオ（サイトの実際のポスター）にフォーカスを合わせます。 2. ドリーバック：緩やかに湾曲した壁に何百枚ものカードが貼られており、すべて再生されています。オレンジ色の光の波が壁に沿って流れ、カードは通過するたびにわずかに傾きます。 3. クレーンで壁の上まで移動：その背後には、廊下を形成する壁がさらにあります。 4. カードの1枚がヒンジを外し、重みでカメラに向かって揺れ、落ち着きます。カードの裏面にプロンプトが印刷されており、3Dタイプとして1行ずつ浮き上がります。 5. 特徴的なショット：オレンジ色の光がOをなぞる間、カメラを大きく引いて上に移動します。 6. ワードマークとprompt-motion.comに焦点を合わせます。

1. HTMLファイルは1つ、CDNからthree.jsダウンロード、ビルド手順は不要。すべてコードでモデリング。ダウンロードしたモデルやテクスチャは使用せず、カードにはサイト独自のビデオポスターのみを使用。
2. RoomEnvironment の PMREM 環境である MeshPhysicalMaterial、ソフトシャドウ、 ACESトーンマッピング、アンチエイリアシングを使用します。被写界深度は必要なショットにのみ追加します。
3. ノートパソコンで60fpsを維持する。
4. すべてのフレームが時間から計算されるレンダリング モード (シード付き乱数、クロックなし) を追加し、 Playwrightを使用して1920x1080のMP4にキャプチャできるようにします。
5. ショットごとに1フレームをキャプチャし、それを見て、平坦、エイリアシング、クリッピング、または読みにくい部分を修正します。

影のバイアスを設定しないと、表面に縞模様のニキビが発生します。近景と遠景の平面を密着させないと、遠景の表面がちらつきます。すべての乱数にシード値を設定しないと、レンダリング結果がプレビューと一致しません。

特徴的なショットとショットリストを数行で説明し、その後は何も聞かずに作成してください。HTMLファイルと、?renderモードでキャプチャした20秒のMP4ファイルHTML提供してください。

Build the Prompt Motion gallery, reimagined as a 3D space of video cards on curved walls, as one self-contained HTML page with three.js.
Style: soft daylight and white space in Prompt Motion's own: black and white, Geist, one orange accent.
The signature shot is the pull back where the corridors of cards resolve into the letters PROMPT MOTION seen from above. Build everything toward it.
Camera: a film camera, not orbit controls. Every shot uses one named move (dolly, crane, orbit, push-in, rack focus), eased in and out, and the camera never passes through geometry.
Light and materials: a key, fill and rim light with soft shadows, an environment map for reflections, fog for depth, physically based materials with varied roughness, ACES tone mapping. Nothing should look like a default material.
Motion: things react to each other (what's hit moves, what's near lights up), driven by springs or simple physics, never linear tweens.
Banned: default materials and lighting, floating text labels, glows on everything, a slowly spinning object as the whole idea, anything that looks like a tech demo.

Shots, about three seconds each:
1. Macro on the edge of one card in soft light, then rack focus onto its playing video (a real poster from the site). 2. Dolly back: it's one of hundreds of cards on a gently curved wall, all playing; a wave of orange light runs along the wall and each card tilts slightly as it passes. 3. Crane up and over the wall: behind it, more walls form corridors. 4. One card unhinges, swings toward the camera with weight and settles; its prompt is printed on its back and lifts off as 3D type, line by line. 5. The signature shot: pull far back and up while the orange light traces the O. 6. Settle on the wordmark and prompt-motion.com.

1. One HTML file, three.js from a CDN, no build step. Model everything in code; no downloaded models, and no textures except the site's own video posters for the cards.
2. Use MeshPhysicalMaterial, a PMREM environment from RoomEnvironment, soft shadows, ACES tone mapping and antialiasing. Add depth of field only on shots that need it.
3. Hold 60fps on a laptop.
4. Add a ?render mode where every frame is computed from time (seeded randomness, no clock), so it can be captured with Playwright into an MP4 at 1920x1080.
5. Capture one frame per shot, look at it, and fix anything flat, aliased, clipping or hard to read.

Set shadow bias, or surfaces get striped acne. Keep near and far planes tight, or distant surfaces flicker. Seed every random number, or the render won't match the preview.

Describe the signature shot and the shot list in a few lines, then build it without asking me anything else. Give me the HTML file and a 20-second MP4 captured with the ?render mode.