{
  "id": "animation-particle-background",
  "theme": "animations",
  "type": "code",
  "sourceCategory": "motion",
  "kind": "motion",
  "genre": "web-interaction",
  "title": "軽量なインタラクティブ粒子背景",
  "description": "背景に控えめな奥行きとポインター反応を加える",
  "prompt": "Implement a reusable ambient particle background for {{service}} with a {{style}} visual style. Choose Canvas 2D for simple flat particles or reuse the existing Three.js stack when true depth is needed; explain the choice. Use slow coherent motion and a subtle attraction or repulsion response to a pointer, with a touch-safe behavior that does not block scrolling. Expose particle count, speed, interaction radius and {{palette}} colors. Keep the main content legible and all decorative rendering pointer-transparent. Adapt particle count and device pixel ratio to an explicit quality preset, with reasonable upper bounds.\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- Pointer effects do not consume touch scroll gestures or block links.\n- No animation loop runs when the component is unmounted or the page is hidden.\n- Reduced-motion mode uses a static background and no pointer-driven movement.\n- Particle buffers are reused rather than allocated every frame.\n- Provide a static fallback and report measured performance at the selected maximum particle count.",
  "variables": [
    {
      "key": "service",
      "label": "サービス用途",
      "default": "a developer platform landing page",
      "required": true
    },
    {
      "key": "style",
      "label": "見た目",
      "default": "sparse glowing points with gentle depth",
      "required": true
    },
    {
      "key": "palette",
      "label": "配色",
      "default": "teal and pale blue",
      "required": true
    }
  ],
  "notes": [
    "画像ではなく、既存コードベースで実装を行う開発エージェント向けプロンプト。"
  ],
  "outputArtifact": "既存リポジトリに組み込んだ再利用可能なコンポーネントと設定、必要なスタイルまたはシェーダー、実行可能なデモ、変更ファイル一覧、検証結果と既知の制約",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "Pointer effects do not consume touch scroll gestures or block links.",
    "No animation loop runs when the component is unmounted or the page is hidden.",
    "Reduced-motion mode uses a static background and no pointer-driven movement.",
    "Particle buffers are reused rather than allocated every frame.",
    "Provide a static fallback and report measured performance at the selected maximum particle count."
  ],
  "keywords": [
    "アニメーション",
    "粒子",
    "背景"
  ],
  "defaultPrompt": "Implement a reusable ambient particle background for a developer platform landing page with a sparse glowing points with gentle depth visual style. Choose Canvas 2D for simple flat particles or reuse the existing Three.js stack when true depth is needed; explain the choice. Use slow coherent motion and a subtle attraction or repulsion response to a pointer, with a touch-safe behavior that does not block scrolling. Expose particle count, speed, interaction radius and teal and pale blue colors. Keep the main content legible and all decorative rendering pointer-transparent. Adapt particle count and device pixel ratio to an explicit quality preset, with reasonable upper bounds.\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- Pointer effects do not consume touch scroll gestures or block links.\n- No animation loop runs when the component is unmounted or the page is hidden.\n- Reduced-motion mode uses a static background and no pointer-driven movement.\n- Particle buffers are reused rather than allocated every frame.\n- Provide a static fallback and report measured performance at the selected maximum particle count.",
  "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/animations.json",
    "sourceCommit": "33a0ac4473d64ec443e809d754051109d9324435",
    "sourceBlob": "502e10eb3be268edb033415c536bf21d9626812c",
    "sourceSha256": "e0d6f861d18b0fb8cb4615ad412d369c2c4d0211f8bd92e9b578ee8f776ba9d6",
    "originalJsonPointer": "/templates/2",
    "originalPromptSha256": "31ddfb153eb31e7ca526f99b8fad1ae71f0ed7945d85285a19bf7da0fdbc4673",
    "publicPromptSha256": "31ddfb153eb31e7ca526f99b8fad1ae71f0ed7945d85285a19bf7da0fdbc4673",
    "originalDefaultPromptSha256": "b64091240113cd9c4201a1184a67c2b59f55a59f1b6d6120b6d51b4e3d5a0719",
    "publicDefaultPromptSha256": "b64091240113cd9c4201a1184a67c2b59f55a59f1b6d6120b6d51b4e3d5a0719",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}