mockup-device-3d

【テンプレート：デバイス 3D ショーケース（Device 3D Showcase / HTML-in-Canvas）】 【用途】製品の発表、アプリのデモ、デザイン稿の展示。ユーザーが提供した UI コンテンツを iPhone / MacBook の「画面」に実際にレンダリングし、周囲は CSS 3D transform で GLTF モデルのガラス／ハイライト／屈折を再現します。hyperframes vfx-iphone-device に着想を得ています。

【厳守する構図】

• キャンバス：1920×1080、暖色系のグレーのグラデーション背景 radial-gradient(#1a1a1f → #0a0a0f)、下部に反射する地面（mirror gradient）。
• iPhone 15 Pro モデル：左側／中央、transform: rotateY(-12deg) rotateX(4deg) translateZ(40px)；チタンシルバーのフレーム #a8a8ad（塗りつぶし 4px）＋角丸 56px の画面。画面内には iframe のような div を配置し、ユーザーの HTML コンテンツを実際にレンダリングします（モバイルのビューポート 375×812）。
• MacBook Pro 14"（2 台目として任意）：右側、やや小さく、rotateY(8deg)；上蓋の画面にデスクトップのビューポートコンテンツを埋め込みます（1440×900 に縮小）。ベースのキーボード＋トラックパッドは CSS の影と線で描画します（キーキャップの細部は描きません）。
• ガラス／レンズの光斑：上部に radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%) の楕円形ハイライトを 2～3 個追加し、モーフィングするガラスレンズを再現します。
• 地面の反射：デバイスの下に transform: scaleY(-1) と mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 70%) を適用します。

【画面コンテンツのソース】

• ユーザーが提供したものがテキスト／データの場合 → 自動でモックアプリの画面にレンダリングします（上部のステータスバー＋タイトル＋本文＋下部のタブバーまたはホームインジケーター）。
• ユーザーが提供したものが HTML の場合 → そのまま画面の div 内に埋め込みます（画面の幅と高さに合わせるため、transform で縮小することに注意してください）。
• 画面内の UI には Tailwind を使用し、フォントサイズは実際のモバイルサイズに合わせます（text-sm / text-base を使用し、text-9xl は使いません）。

【任意で追加できる要素】

• 右下隅の「product slug」バッジ：大きなロゴ＋1 行のタグライン＋細いサブタイトル。
• 上部の 1 行キャプション（英語のサンセリフ体、小さめの文字、透明度 0.6）：製品コードネーム／日付／バージョン。
• 8s の自動 CSS 回転台を追加：@keyframes turntable で rotateY -12 ↔ 12、ease-in-out infinite alternate。prefers-reduced-motion による無効化に対応できます。

【デザインの詳細】

• 絶対に避けること：外部のモックアップ画像 URL（unsplash / dribbble のリンクなど）は使わず、デバイスはすべて CSS / SVG で描画します。
• フォント：デバイス外のキャプション／ロゴには Inter Tight / SF Pro スタイルを使用し、デバイス内はユーザーのコンテンツに合わせます。
• 背景には 4 種類の配色を選択できます：charcoal / pearl / midnight blue / mocha。虹色のグラデーションは使いません。
• HTML は単一ファイルにします。iframe の入れ子に srcdoc は使用しません（問題が発生しやすいため）。<div class="screen"> と Tailwind を使用してコンテンツをレンダリングします。
• 画面のコンテンツには必ずユーザーの実データを使い、lorem ipsum や「Your text here」は厳禁です。