GPT 6 Astra for Computer Use

「Midnight Letterpress Accident Laboratory」というタイトルの、完全な単一ファイルのインタラクティブHTMLウェブページを作成してください。完成したHTMLドキュメントのみを出力し、CSSとJavaScriptはすべてインラインにしてください。外部依存関係、CDN、ライブラリ、フォント、画像リンク、SVGファイル、その他のアセットなしで、モダンブラウザから直接開いて動作する必要があります。これは固定された16:9画像やキャンバス構成ではなく、デスクトップ、タブレット、モバイル画面に自然に適応するレスポンシブウェブページです。 ユーザーが個々の活字ブロックを中央の用紙へドラッグして配置し、回転・位置調整を行った後、インク量、プレス圧、紙の湿度を調整して巨大な機械式印圧レバーを引く、触覚的な実験用活版印刷シミュレーターを構築してください。印刷結果はこれらのパラメータに手続き的に反応する必要があります。過剰なインクではにじみやカウンターの目詰まりが発生し、インク不足では乾いた途切れたエッジになり、圧力によってへこみと変形が変化し、湿度が高いほど毛羽立ちや紙繊維の損傷が増え、不完全な活字配置では見当ずれが生じ、繰り返し印刷ではオフセットされた影やゴースト画像が現れます。朱赤、ウルトラマリンブルー、アシッドイエローのみを使った複数の色刷りに対応し、リアルな重ね刷りの混色、明確なレイヤー順、レイヤーごとの表示切り替え、段階的なUndo/Redo、さらに紙の角を持ち上げて変化していく印刷結果を下から覗ける機能を実装してください。 プレスローラーがちょうど上昇し、完成した印刷物が姿を現す直前の瞬間を中心に、メインビジュアルのドラマを凍結させてください。中央の紙は劇場の舞台のように感じられる必要があります。その周囲を、活字ブロック、インクローラー、ピンセット、見当ピン、紙片、ゲージ、コントロールが非対称なリング状に取り囲む構成にしてください。オフホワイトの骨紙と鉛灰色を基盤に、左上から斜めに差し込む暖白色の作業灯で照らしてください。すべてをCSS、HTML要素、Canvas、手続き的テクスチャで、粗い物理スクリーンプリントと手作りコラージュのスタイルに仕上げてください。破れたエッジ、繊維質の紙目、不均一な顔料、ハーフトーンの斑点、傷ついた金属、インクの汚れ、テープの断片、わずかな遠近感、不完全な見当合わせ、重なり合う影を取り入れてください。光沢のあるグラデーション、無菌的なSaaS風スタイル、一般的なカード、ネオン・サイバーパンク色、フォトリアルな画像、絵文字、ストックイラスト、完全に整ったベクター形状は避けてください。 文字、句読点、数字、複数の装飾ブロックを含む、十分な量の活字インベントリを用意してください。ユーザーがインベントリから作業エリアへブロックをドラッグし、複数のブロックを選択し、ハンドルまたはキーボードショートカットで回転させ、矢印キーで微調整し、削除や複製を行い、物理ブロックの見た目を失わずにテキスト内容を編集できるようにしてください。オン・オフを切り替えられるスナップガイドを追加しつつ、小さな手動の不規則性は残してください。明確なホバー、アクティブ、選択、無効、フォーカス状態を用意してください。ポインターとタッチ操作、適切なキーボード操作、アクセシブルなラベル、視認可能なフォーカスインジケーターに対応してください。 インク量、圧力、湿度の3つの触覚的なコントロールを作成し、それらの値が紙のプレビュー、テクスチャシミュレーション、ゲージ、警告ラベル、周囲の機械挙動をリアルタイムで更新するようにしてください。極端な組み合わせでは、激しいインクの膨張、二重文字、ずれた活字、ぼろぼろの繊維亀裂、ローラーのチャタリング、飛び散った見当マークなど、遊び心のある事故状態を見せつつ、構成の可読性は維持してください。各印刷とそのパラメータを記録するコンパクトな実験ログを追加してください。ユーザーは刷り色を選択し、レバーを説得力のある弧を描くようにドラッグして押し下げ、短いながら詳細なプレスサイクルを見届け、その後で紙をめくれる必要があります。アニメーションには、レバーの抵抗、機械の振動、ローラーの動き、紙の圧縮、浮遊する塵、わずかなランプのちらつき、公開前のサスペンスに満ちた間を含めてください。prefers-reduced-motionを尊重してください。 配置、回転、パラメータ変更、印刷、色刷り、公開操作のすべてにわたってUndoとRedoを本当に機能させてください。Reset、Random Accident、Re-ink、Add Pass、Undo、Redoの各コントロールに加え、操作後に消える簡潔なオンボーディングヒントを含めてください。興味を引く、部分的に構成済みのポスターを初期状態として用意し、最初の画面を視覚的に豊かにしながら、重要な要素はすべて編集可能にしてください。音声アセットを使わず、音のように感じられるさりげない視覚フィードバックを追加してください。可能な範囲で手続き的テクスチャを決定論的にし、Undoで同じ見た目が復元されるようにしてください。 この体験は、単なる装飾ではなく、儀式的で手作り感があり、緊張感を伴い、いたずらっぽく制御不能に感じられる必要があります。洗練されたインタラクションの細部、説得力のあるパラメータ連動、層状の手続き的印刷痕跡、練られたアニメーションのタイミング、優れたレスポンシブ構成を優先してください。セマンティックHTMLと、整理された読みやすいバニラJavaScriptを使用してください。最終回答には、実行可能な完全なHTMLドキュメントのみを含めてください。

「Midnight Ramen Soundscape Theater」というタイトルの、完全に洗練された単一ファイルのインタラクティブHTMLウェブページを作成してください。すべてのCSSとJavaScriptをインラインにした最終HTMLドキュメントのみを出力してください。ビルド手順なしでモダンブラウザから直接動作し、外部依存関係、ライブラリ、フォント、画像、音声ファイル、CDNリソース、ネットワークリクエスト、リンクされたアセットを一切使用しないでください。 シュールな真夜中のラーメン店を舞台にした、表現力豊かなインタラクティブシーンを構築してください。中心となるオブジェクトは、Canvas、SVG、または両者を慎重に組み合わせて描画する、1本の連続した弾力のある麺の束です。麺の束は前景を斜めに横切り、物理的な存在感を持つ必要があります。ユーザーはマウスまたはタッチで任意の場所をつかみ、ドラッグ、伸長、振り回し、自分自身に折り重ね、離せるようにしてください。慣性、減衰、重力、複数の接続セグメント、衝突応答、目に見える二次運動を備えた説得力のあるばね物理を実装してください。激しいドラッグ、急激な方向転換、ビューポートのリサイズ、繰り返し操作中もシミュレーションが安定するようにしてください。 少なくとも3つの特徴的なラーメン丼と複数の具材を構図内の大きな弧に沿って配置し、斜めの麺の周囲に強い視覚的リズムを生み出してください。各丼には固有の図案化されたスープ模様、カラーアイデンティティ、ラベル、音のキャラクターを持たせてください。麺が丼に触れる、または入り込むと、同期した視聴覚反応を発生させてください。Web Audio APIで合成した丼ごとに異なる打楽器ビート、立ち上る湯気のバースト、ネギ色のパーティクルスプレー、スープの波紋、小さな水滴、スクリーンプリントの見当ずれの揺れ、そして「ZURU!」「PON!」「JUU!」「BASHAN!」のような手書きの日本語風オノマトペを、外部フォントではなくスタイル付きテキストでアニメーション表示してください。衝突の強さによって、音量、ピッチ、パーティクル数、波紋の大きさ、文字のスケール、アニメーションの勢いが変化する必要があります。音声はユーザーの最初の操作後にのみ開始し、明確なミュート／ミュート解除コントロールを用意してください。 クライマックスの視覚状態では、麺が空中を劇的に伸び、スープが跳ねる直前の状態で浮遊しているフリーズフレームを想起させてください。「FREEZE THE SPLASH」コントロールとSpaceキーでこの状態を支えます。フリーズモードに入ると、短く力強いトランジションを適用し、状態を失わずに物理シーンを停止し、空中の水滴と伸びた麺の張力を強調し、大胆なポスター風のキネティックタイポグラフィを表示し、ページが生きているように感じられるさりげない手続き的な線の揺らめきを維持してください。Spaceキーまたはコントロールをもう一度押すと、シームレスに再開してください。リセットコントロール、コンパクトなサウンド状態インジケーター、最近の衝突を基にした控えめなライブ「テンポ／インパクト」表示を追加してください。キーボード操作は、小さく統合されたヘルプパネルで見つけられるようにしてください。Spaceでフリーズ切り替え、Rでリセット、Mでミュート、矢印キーで麺に方向性のあるインパルスを加えます。 ヴィンテージのシルクスクリーンポスターデザインと手続き的なラインアニメーションを洗練された形で融合してください。深いインディゴの背景を主役にし、丼や衝突地点の周囲には局所的なかまどの火の暖かさを差し込ませてください。朱赤、ショウガイエロー、ネギグリーン、暖色系クリーム、ほぼ黒のレイヤー化されたスポットカラーを使い、ハーフトーンテクスチャ、粗いインクエッジ、わずかな色ずれ、太いグラフィックシャドウ、アニメーションする輪郭線を加えてください。光沢的またはフォトリアルではなく、手作りで劇場的な雰囲気に仕上げてください。さりげない環境の湯気、ちらつくかまどの光、漂う粒子、動く線画を含めつつ、十分なコントラストと読みやすいコントロールを維持してください。一般的なネオン・サイバーパンク風のスタイルは避けてください。 横長のデスクトップ、タブレット、モバイル画面に対応するレスポンシブ構成にしてください。これはウェブページであるため、固定された16:9のアスペクト比を強制しないでください。重要なコンテンツを切り取らず、丼の配置、タイポグラフィ、コントロール、シミュレーション境界、タッチターゲットを画面に応じて柔軟に適応させてください。マウス、ペン、タッチを統一して処理するためにポインターイベントを使用してください。麺を実際に操作している間だけページスクロールを防止してください。prefers-reduced-motionを尊重し、コアとなる操作性を維持しながら環境アニメーションを減らしてください。効率的なパーティクルプーリングまたは厳格なパーティクル制限、requestAnimationFrame、適切な解像度上限を設けたdevice-pixel-ratio対応の描画、リサイズに安全な座標処理によって、滑らかなパフォーマンスを維持してください。 コンテンツと仕上げの要件として、雰囲気のあるタイトル処理、操作を促す短い1行の案内、3つ以上のラベル付きの丼、見た目の異なる複数のトッピング、文脈に応じた手書き風の音声語、洗練されたコントロール状態、明確なフォーカススタイル、アクセシブルなボタンラベル、初回操作後に消える控えめな操作ヒントを含めてください。開始シーンは操作前から完成したコレクターズポスターのように見え、アクティブ状態では、層状のフィードバックと予想外に生まれる動きを備えた、生き生きとしたリズム玩具へ変化する必要があります。 ネガティブ制約：外部アセットや依存関係を使用しないこと。画像URLを使用しないこと。録音済み音声を使用しないこと。フレームワークを使用しないこと。未完成のプレースホルダーを残さないこと。TODOコメントを含めないこと。壊れたコントロールを作らないこと。固定16:9キャンバスにしないこと。素のデフォルトUIを使用しないこと。一般的なグラデーションだけの背景にしないこと。主要なアートワークとして絵文字を使用しないこと。説明文を過剰に含めないこと。音声を自動再生しないこと。パーティクルを制御なく増殖させないこと。爆発したりNaN値を生成したりする脆弱な物理にしないこと。マウスでしか動作しないインタラクションにしないこと。単一の完全なHTMLドキュメント以外の出力を含めないこと。