{
  "id": "three-underwater",
  "theme": "three-shaders",
  "type": "code",
  "sourceCategory": "ocean",
  "kind": "shader",
  "genre": "water-shader",
  "title": "水中の光と浮遊粒子",
  "description": "水中らしい奥行きと光の揺らぎを作る",
  "prompt": "Build a Three.js underwater ambience component for {{service}}. Use {{palette}} depth fog, a simple ocean floor or abstract submerged forms, slow suspended particles and subtle moving caustic-like light patterns. Keep shafts of light and caustics as deliberate stylized approximations unless the existing pipeline supports a justified volumetric method. Expose water clarity, particle density, drift speed, caustic contrast and light direction. Avoid full-screen brightness pulses and distracting rapid camera motion. Provide a calm composition with {{quiet}} left uncluttered for HTML content. Reuse geometry or instancing for particles instead of creating one mesh per particle.\n\nImplementation constraints:\nFirst inspect the existing repository and installed versions. Reuse its routing, styling, build tools and dependency conventions. Use React Three Fiber only if the project already uses it or the integration is clearly justified; otherwise use the existing Three.js integration or a minimal isolated component. Do not assume version-specific APIs: check the installed package documentation and types. Do not change unrelated pages or silently replace the application architecture. Explain any required new dependency before adding it. Dispose GPU resources, remove event listeners and stop rendering when the component is not visible. Respect prefers-reduced-motion and provide a readable non-WebGL fallback. Keep links and controls in accessible HTML above the canvas. Return the changed files, configuration knobs, tests performed and known limitations.\n\nAcceptance criteria:\n- Particles remain subtle and do not block text or intercept pointer input.\n- Reduced-motion mode stops particle drift and light animation.\n- A low-quality preset lowers particle count and removes optional postprocessing.\n- There are no visible flashes, abrupt camera jumps or unbounded particle allocations.\n- The scene remains understandable with postprocessing disabled.",
  "variables": [
    {
      "key": "service",
      "label": "サービス用途",
      "default": "a calm focus app",
      "required": true
    },
    {
      "key": "palette",
      "label": "配色",
      "default": "deep blue, muted teal and soft cyan",
      "required": true
    },
    {
      "key": "quiet",
      "label": "文字用領域",
      "default": "the central headline area",
      "required": true
    }
  ],
  "notes": [
    "画像ではなく、既存コードベースで実装を行う開発エージェント向けプロンプト。"
  ],
  "outputArtifact": "既存リポジトリに組み込んだ再利用可能なコンポーネントと設定、必要なスタイルまたはシェーダー、実行可能なデモ、変更ファイル一覧、検証結果と既知の制約",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "Particles remain subtle and do not block text or intercept pointer input.",
    "Reduced-motion mode stops particle drift and light animation.",
    "A low-quality preset lowers particle count and removes optional postprocessing.",
    "There are no visible flashes, abrupt camera jumps or unbounded particle allocations.",
    "The scene remains understandable with postprocessing disabled."
  ],
  "keywords": [
    "Three.js",
    "水中",
    "光",
    "粒子"
  ],
  "defaultPrompt": "Build a Three.js underwater ambience component for a calm focus app. Use deep blue, muted teal and soft cyan depth fog, a simple ocean floor or abstract submerged forms, slow suspended particles and subtle moving caustic-like light patterns. Keep shafts of light and caustics as deliberate stylized approximations unless the existing pipeline supports a justified volumetric method. Expose water clarity, particle density, drift speed, caustic contrast and light direction. Avoid full-screen brightness pulses and distracting rapid camera motion. Provide a calm composition with the central headline area left uncluttered for HTML content. Reuse geometry or instancing for particles instead of creating one mesh per particle.\n\nImplementation constraints:\nFirst inspect the existing repository and installed versions. Reuse its routing, styling, build tools and dependency conventions. Use React Three Fiber only if the project already uses it or the integration is clearly justified; otherwise use the existing Three.js integration or a minimal isolated component. Do not assume version-specific APIs: check the installed package documentation and types. Do not change unrelated pages or silently replace the application architecture. Explain any required new dependency before adding it. Dispose GPU resources, remove event listeners and stop rendering when the component is not visible. Respect prefers-reduced-motion and provide a readable non-WebGL fallback. Keep links and controls in accessible HTML above the canvas. Return the changed files, configuration knobs, tests performed and known limitations.\n\nAcceptance criteria:\n- Particles remain subtle and do not block text or intercept pointer input.\n- Reduced-motion mode stops particle drift and light animation.\n- A low-quality preset lowers particle count and removes optional postprocessing.\n- There are no visible flashes, abrupt camera jumps or unbounded particle allocations.\n- The scene remains understandable with postprocessing disabled.",
  "execution": {
    "status": "not-run",
    "actualModel": null,
    "modelVersion": null,
    "executionDate": null,
    "tokens": null,
    "cost": null,
    "elapsedSeconds": null,
    "output": null
  },
  "provenance": {
    "source": "Kumyu Academy creative templates",
    "sourceFile": "apps/academy/content/creative/templates/ja/three-shaders.json",
    "sourceCommit": "33a0ac4473d64ec443e809d754051109d9324435",
    "sourceBlob": "39aae49bee2cf43daac0246347d6477a4fa413ba",
    "sourceSha256": "9859ab312c09fce16edf53cb5c9a63465f01f48b08c544afc65dee2c754bf442",
    "originalJsonPointer": "/templates/3",
    "originalPromptSha256": "f999a775468b73c80205d8d01c1517c62b79408c4405fdec2504e63b8f6da3ef",
    "publicPromptSha256": "f999a775468b73c80205d8d01c1517c62b79408c4405fdec2504e63b8f6da3ef",
    "originalDefaultPromptSha256": "46355b1bf86f34512fd2ae8216e8fdcab9f83c322e15a9e18c1752212df61062",
    "publicDefaultPromptSha256": "46355b1bf86f34512fd2ae8216e8fdcab9f83c322e15a9e18c1752212df61062",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}