{
  "id": "three-shore-foam",
  "theme": "three-shaders",
  "type": "code",
  "sourceCategory": "ocean",
  "kind": "shader",
  "genre": "water-shader",
  "title": "浅瀬と泡のある海岸シェーダー",
  "description": "海岸線に沿った泡と深さによる色の変化を作る",
  "prompt": "Implement a reusable stylized shoreline water scene with Three.js for {{use}}. Use {{palette}} colors. Show a simple beach or rock geometry and a water surface whose shallow and deep regions have visibly different color and transparency. Generate a narrow animated foam band at the shoreline using a depth-based method where the existing rendering pipeline supports it, or an explicit shore-distance mask for a lighter implementation. Explain the chosen technique. Keep foam attached to the shoreline rather than floating randomly across the whole plane. Add restrained scrolling noise and small wave displacement, with configurable foam width, speed, water level and depth tint. Avoid z-fighting and handle the renderer's actual depth and color conventions.\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- Foam is visible where water meets land and is controllable through a named configuration value.\n- The water does not disappear or flicker when the camera or viewport changes.\n- Depth resources resize and are disposed correctly if a depth pass is used.\n- Low-quality mode keeps the shoreline readable with fewer shader samples or a simpler mask.\n- Document visual approximations and test the actual page with transparency and nearby HTML overlays.",
  "variables": [
    {
      "key": "use",
      "label": "利用場面",
      "default": "an interactive travel landing page",
      "required": true
    },
    {
      "key": "palette",
      "label": "配色",
      "default": "turquoise shallows, blue-green deeper water and warm white foam",
      "required": true
    }
  ],
  "notes": [
    "画像ではなく、既存コードベースで実装を行う開発エージェント向けプロンプト。"
  ],
  "outputArtifact": "既存リポジトリに組み込んだ再利用可能なコンポーネントと設定、必要なスタイルまたはシェーダー、実行可能なデモ、変更ファイル一覧、検証結果と既知の制約",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "Foam is visible where water meets land and is controllable through a named configuration value.",
    "The water does not disappear or flicker when the camera or viewport changes.",
    "Depth resources resize and are disposed correctly if a depth pass is used.",
    "Low-quality mode keeps the shoreline readable with fewer shader samples or a simpler mask.",
    "Document visual approximations and test the actual page with transparency and nearby HTML overlays."
  ],
  "keywords": [
    "Three.js",
    "海岸",
    "泡",
    "深度"
  ],
  "defaultPrompt": "Implement a reusable stylized shoreline water scene with Three.js for an interactive travel landing page. Use turquoise shallows, blue-green deeper water and warm white foam colors. Show a simple beach or rock geometry and a water surface whose shallow and deep regions have visibly different color and transparency. Generate a narrow animated foam band at the shoreline using a depth-based method where the existing rendering pipeline supports it, or an explicit shore-distance mask for a lighter implementation. Explain the chosen technique. Keep foam attached to the shoreline rather than floating randomly across the whole plane. Add restrained scrolling noise and small wave displacement, with configurable foam width, speed, water level and depth tint. Avoid z-fighting and handle the renderer's actual depth and color conventions.\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- Foam is visible where water meets land and is controllable through a named configuration value.\n- The water does not disappear or flicker when the camera or viewport changes.\n- Depth resources resize and are disposed correctly if a depth pass is used.\n- Low-quality mode keeps the shoreline readable with fewer shader samples or a simpler mask.\n- Document visual approximations and test the actual page with transparency and nearby HTML overlays.",
  "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/1",
    "originalPromptSha256": "3867a44afb4f4a8545db1950c25818c4f6fbf6acf0c46d515095d8b60f737b8a",
    "publicPromptSha256": "3867a44afb4f4a8545db1950c25818c4f6fbf6acf0c46d515095d8b60f737b8a",
    "originalDefaultPromptSha256": "84d945b3890979e930d7fe885cc9895335c27b82ada7330542dd1c02cfdae827",
    "publicDefaultPromptSha256": "84d945b3890979e930d7fe885cc9895335c27b82ada7330542dd1c02cfdae827",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}