{
  "id": "animation-scroll-reveal",
  "theme": "animations",
  "type": "code",
  "sourceCategory": "motion",
  "kind": "motion",
  "genre": "web-interaction",
  "title": "Section reveals on scroll",
  "description": "Reveal a service introduction in readable stages.",
  "prompt": "Implement restrained scroll-reveal animations for {{target}} in the existing site. Desired motion: {{effect}}. Use a reusable component or utility with configurable duration, distance and stagger. Trigger when a section enters the viewport; use a one-time reveal by default. Content must remain readable if JavaScript fails, hydration is delayed or observers are unavailable. Avoid scroll hijacking and do not change native scrolling speed. 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- Reduced-motion users see the final visible state immediately.\n- Content is never left at opacity zero after navigation, interrupted animation or failed initialization.\n- Keyboard navigation and anchor links continue to work.\n- The implementation avoids per-frame getBoundingClientRect loops and unnecessary React state updates.\n- Verify desktop, touch viewport, back navigation and repeated route entry.",
  "variables": [
    {
      "key": "target",
      "label": "Target elements",
      "default": "feature cards and section headings",
      "required": true
    },
    {
      "key": "effect",
      "label": "Motion",
      "default": "a short upward fade with a small stagger between nearby cards",
      "required": true
    }
  ],
  "notes": [
    "A prompt for a development agent implementing changes in an existing codebase; the requested output is code."
  ],
  "outputArtifact": "A reusable component and configuration integrated into the existing repository, required styles or shaders, a runnable demo, a list of changed files, validation results and known limitations.",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "Reduced-motion users see the final visible state immediately.",
    "Content is never left at opacity zero after navigation, interrupted animation or failed initialization.",
    "Keyboard navigation and anchor links continue to work.",
    "The implementation avoids per-frame getBoundingClientRect loops and unnecessary React state updates.",
    "Verify desktop, touch viewport, back navigation and repeated route entry."
  ],
  "keywords": [
    "Web animations",
    "Scroll",
    "LP"
  ],
  "defaultPrompt": "Implement restrained scroll-reveal animations for feature cards and section headings in the existing site. Desired motion: a short upward fade with a small stagger between nearby cards. Use a reusable component or utility with configurable duration, distance and stagger. Trigger when a section enters the viewport; use a one-time reveal by default. Content must remain readable if JavaScript fails, hydration is delayed or observers are unavailable. Avoid scroll hijacking and do not change native scrolling speed. 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- Reduced-motion users see the final visible state immediately.\n- Content is never left at opacity zero after navigation, interrupted animation or failed initialization.\n- Keyboard navigation and anchor links continue to work.\n- The implementation avoids per-frame getBoundingClientRect loops and unnecessary React state updates.\n- Verify desktop, touch viewport, back navigation and repeated route entry.",
  "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/en/animations.json",
    "sourceCommit": "33a0ac4473d64ec443e809d754051109d9324435",
    "sourceBlob": "5b40e5322bb62104c3cabd756e5083dea6f7dd59",
    "sourceSha256": "db1f40bbcf929c57478d95de9821f25f4a0c1f9e471991186dedaf27a1637ae7",
    "originalJsonPointer": "/templates/0",
    "originalPromptSha256": "ada7e5e4c254d4ced44952ed7eb43e6b6f297ffd5008a7faa05b4beb6f48678d",
    "publicPromptSha256": "ada7e5e4c254d4ced44952ed7eb43e6b6f297ffd5008a7faa05b4beb6f48678d",
    "originalDefaultPromptSha256": "d2463f0dbf742c64c2c7b1cb30f9c5367e486ffc8588ee3982412e9b4fafa615",
    "publicDefaultPromptSha256": "d2463f0dbf742c64c2c7b1cb30f9c5367e486ffc8588ee3982412e9b4fafa615",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}