{
  "id": "three-ocean-hero",
  "theme": "three-shaders",
  "type": "code",
  "sourceCategory": "ocean",
  "kind": "shader",
  "genre": "water-shader",
  "title": "Animated ocean hero background",
  "description": "Animate the ocean surface while keeping landing-page content readable.",
  "prompt": "Implement a reusable Three.js ocean hero background for {{service}}. Build layered directional waves using an appropriate wave model such as Gerstner waves, with coherent displaced normals, restrained Fresnel highlights and {{palette}} colors. The mood is {{mood}}. Expose wave height, speed, direction, camera angle, sunlight and color as a small configuration object. Keep the {{quiet}} region visually quiet for existing HTML headlines and calls to action. Use a procedural sky or a local permitted environment asset, without depending on an external asset URL. Fit the component to its container and handle resizing. Prefer a convincing lightweight treatment over expensive physically exact simulation.\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- The existing headline and CTA remain legible and clickable on mobile and desktop.\n- Wave motion loops continuously without sudden time resets, and normals follow the waves.\n- Reduced-motion mode shows a still attractive frame.\n- Measure performance on one stated desktop and one stated mobile profile; report FPS and quality settings rather than claiming an untested target.\n- Unmounting and remounting do not duplicate canvases, animation loops or resize listeners.",
  "variables": [
    {
      "key": "service",
      "label": "Service use case",
      "default": "a creative tools landing page",
      "required": true
    },
    {
      "key": "palette",
      "label": "Color palette",
      "default": "deep navy, teal and pale cyan",
      "required": true
    },
    {
      "key": "mood",
      "label": "Mood",
      "default": "calm morning water",
      "required": true
    },
    {
      "key": "quiet",
      "label": "Area reserved for text",
      "default": "left half",
      "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": [
    "The existing headline and CTA remain legible and clickable on mobile and desktop.",
    "Wave motion loops continuously without sudden time resets, and normals follow the waves.",
    "Reduced-motion mode shows a still attractive frame.",
    "Measure performance on one stated desktop and one stated mobile profile; report FPS and quality settings rather than claiming an untested target.",
    "Unmounting and remounting do not duplicate canvases, animation loops or resize listeners."
  ],
  "keywords": [
    "Three.js",
    "Ocean surface",
    "LP"
  ],
  "defaultPrompt": "Implement a reusable Three.js ocean hero background for a creative tools landing page. Build layered directional waves using an appropriate wave model such as Gerstner waves, with coherent displaced normals, restrained Fresnel highlights and deep navy, teal and pale cyan colors. The mood is calm morning water. Expose wave height, speed, direction, camera angle, sunlight and color as a small configuration object. Keep the left half region visually quiet for existing HTML headlines and calls to action. Use a procedural sky or a local permitted environment asset, without depending on an external asset URL. Fit the component to its container and handle resizing. Prefer a convincing lightweight treatment over expensive physically exact simulation.\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- The existing headline and CTA remain legible and clickable on mobile and desktop.\n- Wave motion loops continuously without sudden time resets, and normals follow the waves.\n- Reduced-motion mode shows a still attractive frame.\n- Measure performance on one stated desktop and one stated mobile profile; report FPS and quality settings rather than claiming an untested target.\n- Unmounting and remounting do not duplicate canvases, animation loops or resize listeners.",
  "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/three-shaders.json",
    "sourceCommit": "33a0ac4473d64ec443e809d754051109d9324435",
    "sourceBlob": "63133a94f8f80ae74418bb869a122276a793f5bf",
    "sourceSha256": "0f842b83757f873f3f8838ee4d77509570d99cce1290a523a6e0ec1b9903f1fb",
    "originalJsonPointer": "/templates/0",
    "originalPromptSha256": "8f0ff2656a808d5cfa52218d10a01562f19a9cb5d0d2c3d69c77ecf6bc453ed9",
    "publicPromptSha256": "8f0ff2656a808d5cfa52218d10a01562f19a9cb5d0d2c3d69c77ecf6bc453ed9",
    "originalDefaultPromptSha256": "70dcc44645a117d7ca3855c409309794c679a0db883bc306b015bbfb8cc37ba2",
    "publicDefaultPromptSha256": "70dcc44645a117d7ca3855c409309794c679a0db883bc306b015bbfb8cc37ba2",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}