{
  "id": "animation-page-transition",
  "theme": "animations",
  "type": "code",
  "sourceCategory": "motion",
  "kind": "motion",
  "genre": "web-interaction",
  "title": "ページ遷移とモーダルの動き",
  "description": "別ページ間の連続性を保ちつつ操作を妨げない",
  "prompt": "Implement an accessible transition pattern for {{target}} using the project's current router and component system. Desired motion: {{effect}}. Keep route state, browser history, deep links and scroll restoration correct. For dialogs, preserve focus trapping, Escape handling, labelled semantics and focus return to the trigger. Make enter and exit transitions interruptible, and handle rapid repeated navigation without stranded overlays or hidden content. Feature-detect optional browser transition APIs and provide a simple fallback. For this UI task, prefer CSS and the Web Animations API or an animation library already installed. Do not introduce Three.js or a new animation dependency unless this specific effect requires it. Animate transform and opacity where possible, avoid layout thrashing, and preserve existing semantic HTML, focus order and interaction behavior.\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- Back and forward navigation, direct URLs and rapid navigation all reach the correct content.\n- Keyboard focus lands in a sensible place after route changes and returns after dialog close.\n- Reduced-motion mode changes content without spatial animation.\n- No invisible overlay blocks clicks after an interrupted transition.\n- Test Escape, Tab navigation, touch close controls and repeated open-close cycles.",
  "variables": [
    {
      "key": "target",
      "label": "対象",
      "default": "template detail pages and the prompt preview dialog",
      "required": true
    },
    {
      "key": "effect",
      "label": "動き",
      "default": "a brief crossfade with a very small vertical shift",
      "required": true
    }
  ],
  "notes": [
    "画像ではなく、既存コードベースで実装を行う開発エージェント向けプロンプト。"
  ],
  "outputArtifact": "既存リポジトリに組み込んだ再利用可能なコンポーネントと設定、必要なスタイルまたはシェーダー、実行可能なデモ、変更ファイル一覧、検証結果と既知の制約",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "Back and forward navigation, direct URLs and rapid navigation all reach the correct content.",
    "Keyboard focus lands in a sensible place after route changes and returns after dialog close.",
    "Reduced-motion mode changes content without spatial animation.",
    "No invisible overlay blocks clicks after an interrupted transition.",
    "Test Escape, Tab navigation, touch close controls and repeated open-close cycles."
  ],
  "keywords": [
    "アニメーション",
    "画面遷移",
    "モーダル"
  ],
  "defaultPrompt": "Implement an accessible transition pattern for template detail pages and the prompt preview dialog using the project's current router and component system. Desired motion: a brief crossfade with a very small vertical shift. Keep route state, browser history, deep links and scroll restoration correct. For dialogs, preserve focus trapping, Escape handling, labelled semantics and focus return to the trigger. Make enter and exit transitions interruptible, and handle rapid repeated navigation without stranded overlays or hidden content. Feature-detect optional browser transition APIs and provide a simple fallback. For this UI task, prefer CSS and the Web Animations API or an animation library already installed. Do not introduce Three.js or a new animation dependency unless this specific effect requires it. Animate transform and opacity where possible, avoid layout thrashing, and preserve existing semantic HTML, focus order and interaction behavior.\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- Back and forward navigation, direct URLs and rapid navigation all reach the correct content.\n- Keyboard focus lands in a sensible place after route changes and returns after dialog close.\n- Reduced-motion mode changes content without spatial animation.\n- No invisible overlay blocks clicks after an interrupted transition.\n- Test Escape, Tab navigation, touch close controls and repeated open-close cycles.",
  "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/3",
    "originalPromptSha256": "d4dbeddc70e0402258465f30cc60fb7bf54a9c927f78b32db33be239d8a9a942",
    "publicPromptSha256": "d4dbeddc70e0402258465f30cc60fb7bf54a9c927f78b32db33be239d8a9a942",
    "originalDefaultPromptSha256": "525330f93a1132c7e95b306f0fca9242088b53c22e4493f779a8f9d72ffff898",
    "publicDefaultPromptSha256": "525330f93a1132c7e95b306f0fca9242088b53c22e4493f779a8f9d72ffff898",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}