{
  "generatedAt": "2026-08-05T09:18:08.978Z",
  "browser": "Google Chrome via Playwright channel=chrome",
  "sourceUrl": "https://lusion.co/",
  "origin": "http://127.0.0.1:4334/output/playwright",
  "pathname": "/lusion-depth-parallax-field-2026-08-05/index.html",
  "verdict": "PASS",
  "matrix": [
    {
      "viewport": {
        "name": "desktop",
        "width": 1280,
        "height": 900
      },
      "loading": {
        "state": "loading"
      },
      "initial": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectHover": 0,
        "effectRipple": 0.0019,
        "effectPointerX": null,
        "effectPointerY": null,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 17,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 2,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "hoverLeft": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "pointer",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 0.859,
        "effectRipple": 0,
        "effectPointerX": 0.18,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 40,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 2,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "hoverRight": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "pointer",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 1,
        "effectRipple": 0,
        "effectPointerX": 0.82,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 79,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 2,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "beforeRect": {
        "x": 64,
        "y": 204.09375,
        "width": 563.203125,
        "height": 491.28125
      },
      "afterRect": {
        "x": 64,
        "y": 204.09375,
        "width": 563.203125,
        "height": 491.28125
      },
      "visualDelta": {
        "leftRight": 0.0872412356701301,
        "idleLeft": 0.05074099840463108
      },
      "scrollRipple": {
        "state": "interacting",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 0.031,
        "effectRipple": 0.0078,
        "effectPointerX": 0.82,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 102,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 2,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "idleDemandRender": {
        "before": 123,
        "after": 123,
        "delta": 0
      },
      "errors": [],
      "screenshot": "/output/playwright/lusion-depth-parallax-field-2026-08-05/verification/desktop-depth-parallax.png"
    },
    {
      "viewport": {
        "name": "tablet",
        "width": 768,
        "height": 900
      },
      "loading": {
        "state": "loading"
      },
      "initial": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectHover": 0,
        "effectRipple": 0.0019,
        "effectPointerX": null,
        "effectPointerY": null,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 5,
        "requestedCount": 5,
        "maxResident": 6,
        "frameCount": 17,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1.5,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "hoverLeft": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "pointer",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 0.859,
        "effectRipple": 0,
        "effectPointerX": 0.18,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 5,
        "requestedCount": 5,
        "maxResident": 6,
        "frameCount": 39,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1.5,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "hoverRight": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "pointer",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 1,
        "effectRipple": 0,
        "effectPointerX": 0.82,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 5,
        "requestedCount": 5,
        "maxResident": 6,
        "frameCount": 77,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1.5,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "beforeRect": {
        "x": 38.390625,
        "y": 193.9375,
        "width": 691.21875,
        "height": 511.28125
      },
      "afterRect": {
        "x": 38.390625,
        "y": 193.9375,
        "width": 691.21875,
        "height": 511.28125
      },
      "visualDelta": {
        "leftRight": 0.0928034753285,
        "idleLeft": 0.05036584653812907
      },
      "scrollRipple": {
        "state": "interacting",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 0.027,
        "effectRipple": 0.0078,
        "effectPointerX": 0.82,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 4,
        "requestedCount": 4,
        "maxResident": 6,
        "frameCount": 101,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1.5,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "idleDemandRender": {
        "before": 122,
        "after": 122,
        "delta": 0
      },
      "errors": [],
      "screenshot": "/output/playwright/lusion-depth-parallax-field-2026-08-05/verification/tablet-depth-parallax.png"
    },
    {
      "viewport": {
        "name": "mobile",
        "width": 390,
        "height": 844
      },
      "loading": {
        "state": "loading"
      },
      "initial": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectHover": 0,
        "effectRipple": 0.0019,
        "effectPointerX": null,
        "effectPointerY": null,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 17,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "hoverLeft": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "pointer",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 0.859,
        "effectRipple": 0,
        "effectPointerX": 0.18,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 38,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "hoverRight": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "devin_ai",
        "domActiveId": "devin_ai",
        "activeTriggerId": "devin_ai",
        "inputOwner": "pointer",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 1,
        "effectRipple": 0,
        "effectPointerX": 0.82,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 76,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "beforeRect": {
        "x": 15,
        "y": 274,
        "width": 360,
        "height": 295.984375
      },
      "afterRect": {
        "x": 15,
        "y": 274,
        "width": 360,
        "height": 295.984375
      },
      "visualDelta": {
        "leftRight": 0.07571225071225071,
        "idleLeft": 0.039561570117125675
      },
      "scrollRipple": {
        "state": "interacting",
        "readiness": "ready",
        "activeId": "porsche_dream_machine",
        "domActiveId": "porsche_dream_machine",
        "activeTriggerId": "porsche_dream_machine",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectActiveId": "devin_ai",
        "effectHover": 0.027,
        "effectRipple": 0.0083,
        "effectPointerX": 0.82,
        "effectPointerY": 0.5,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 100,
        "pauseReason": "none",
        "contextState": "active",
        "dpr": 1,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      },
      "idleDemandRender": {
        "before": 122,
        "after": 122,
        "delta": 0
      },
      "errors": [],
      "screenshot": "/output/playwright/lusion-depth-parallax-field-2026-08-05/verification/mobile-depth-parallax.png"
    }
  ],
  "states": {
    "context": {
      "lost": {
        "state": "fallback",
        "readiness": "fallback",
        "activeId": "synthetic_human",
        "domActiveId": "synthetic_human",
        "activeTriggerId": "synthetic_human",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectHover": 0,
        "effectRipple": 0.0068,
        "effectPointerX": null,
        "effectPointerY": null,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 13,
        "pauseReason": "context-lost",
        "contextState": "lost",
        "dpr": 1,
        "itemCount": 10,
        "fallbackImages": 10,
        "canvasOwnerViolation": true,
        "documentOverflow": 0
      },
      "restored": {
        "state": "ready",
        "readiness": "ready",
        "activeId": "synthetic_human",
        "domActiveId": "synthetic_human",
        "activeTriggerId": "synthetic_human",
        "inputOwner": "scroll",
        "effectMode": "depth-parallax",
        "effectHover": 0,
        "effectRipple": 0.0004,
        "effectPointerX": null,
        "effectPointerY": null,
        "effectMotion": "full",
        "parallaxSamples": 12,
        "blurSamples": 6,
        "residentCount": 6,
        "requestedCount": 6,
        "maxResident": 6,
        "frameCount": 33,
        "pauseReason": "none",
        "contextState": "restored",
        "dpr": 1,
        "itemCount": 10,
        "fallbackImages": 0,
        "canvasOwnerViolation": false,
        "documentOverflow": 0
      }
    },
    "reducedMotion": {
      "state": "ready",
      "readiness": "ready",
      "activeId": "devin_ai",
      "domActiveId": "devin_ai",
      "activeTriggerId": "devin_ai",
      "inputOwner": "pointer",
      "effectMode": "depth-parallax",
      "effectActiveId": "devin_ai",
      "effectHover": 0,
      "effectRipple": 0,
      "effectPointerX": null,
      "effectPointerY": null,
      "effectMotion": "reduced",
      "parallaxSamples": 12,
      "blurSamples": 6,
      "residentCount": 6,
      "requestedCount": 6,
      "maxResident": 6,
      "frameCount": 9,
      "pauseReason": "reduced-motion",
      "contextState": "active",
      "dpr": 1,
      "itemCount": 10,
      "fallbackImages": 0,
      "canvasOwnerViolation": false,
      "documentOverflow": 0
    },
    "failure": {
      "no-webgl": {
        "snapshot": {
          "state": "fallback",
          "readiness": "fallback",
          "effectMode": "depth-parallax",
          "effectHover": 0,
          "effectRipple": 0,
          "effectPointerX": null,
          "effectPointerY": null,
          "effectMotion": "full",
          "parallaxSamples": 12,
          "blurSamples": 6,
          "residentCount": 0,
          "requestedCount": null,
          "maxResident": null,
          "frameCount": null,
          "dpr": null,
          "itemCount": 10,
          "fallbackImages": 10,
          "canvasOwnerViolation": true,
          "documentOverflow": 0
        },
        "failureErrors": [],
        "screenshot": "/output/playwright/lusion-depth-parallax-field-2026-08-05/verification/no-webgl-fallback.png"
      },
      "broken": {
        "snapshot": {
          "state": "error",
          "readiness": "fallback",
          "activeId": "oryzo_ai",
          "domActiveId": "oryzo_ai",
          "activeTriggerId": "oryzo_ai",
          "inputOwner": "scroll",
          "effectMode": "depth-parallax",
          "effectHover": 0,
          "effectRipple": 0,
          "effectPointerX": null,
          "effectPointerY": null,
          "effectMotion": "full",
          "parallaxSamples": 12,
          "blurSamples": 6,
          "residentCount": 0,
          "requestedCount": 4,
          "maxResident": 6,
          "frameCount": 3,
          "pauseReason": "not-ready",
          "contextState": "active",
          "dpr": 1,
          "itemCount": 10,
          "fallbackImages": 10,
          "canvasOwnerViolation": true,
          "documentOverflow": 0
        },
        "failureErrors": [],
        "screenshot": "/output/playwright/lusion-depth-parallax-field-2026-08-05/verification/broken-fallback.png"
      },
      "stalled": {
        "snapshot": {
          "state": "fallback",
          "readiness": "fallback",
          "activeId": "oryzo_ai",
          "domActiveId": "oryzo_ai",
          "activeTriggerId": "oryzo_ai",
          "inputOwner": "scroll",
          "effectMode": "depth-parallax",
          "effectHover": 0,
          "effectRipple": 0,
          "effectPointerX": null,
          "effectPointerY": null,
          "effectMotion": "full",
          "parallaxSamples": 12,
          "blurSamples": 6,
          "residentCount": 0,
          "requestedCount": 4,
          "maxResident": 6,
          "frameCount": 3,
          "pauseReason": "not-ready",
          "contextState": "active",
          "dpr": 1,
          "itemCount": 10,
          "fallbackImages": 10,
          "canvasOwnerViolation": true,
          "documentOverflow": 0
        },
        "failureErrors": [],
        "screenshot": "/output/playwright/lusion-depth-parallax-field-2026-08-05/verification/stalled-fallback.png"
      }
    }
  },
  "assertions": {
    "runtimeErrors": 0,
    "documentOverflow": 0,
    "canvasOwnerViolations": 0,
    "identityDivergence": 0,
    "hoverGeometryShift": 0,
    "effectVisualDeltaFailures": 0
  },
  "responsiveRoundTrip": {
    "sequence": [
      1280,
      390,
      1280
    ],
    "beforeRoundTrip": {
      "state": "ready",
      "readiness": "ready",
      "activeId": "oryzo_ai",
      "domActiveId": "oryzo_ai",
      "activeTriggerId": "oryzo_ai",
      "inputOwner": "scroll",
      "effectMode": "depth-parallax",
      "effectHover": 0,
      "effectRipple": 0,
      "effectPointerX": null,
      "effectPointerY": null,
      "effectMotion": "full",
      "parallaxSamples": 12,
      "blurSamples": 6,
      "residentCount": 4,
      "requestedCount": 4,
      "maxResident": 6,
      "frameCount": 4,
      "pauseReason": "none",
      "contextState": "active",
      "dpr": 1,
      "itemCount": 10,
      "fallbackImages": 0,
      "canvasOwnerViolation": false,
      "documentOverflow": 0
    },
    "mobileRoundTrip": {
      "state": "interacting",
      "readiness": "ready",
      "activeId": "porsche_dream_machine",
      "domActiveId": "porsche_dream_machine",
      "activeTriggerId": "porsche_dream_machine",
      "inputOwner": "scroll",
      "effectMode": "depth-parallax",
      "effectHover": 0,
      "effectRipple": 0.0127,
      "effectPointerX": null,
      "effectPointerY": null,
      "effectMotion": "full",
      "parallaxSamples": 12,
      "blurSamples": 6,
      "residentCount": 3,
      "requestedCount": 6,
      "maxResident": 6,
      "frameCount": 6,
      "pauseReason": "none",
      "contextState": "active",
      "dpr": 1,
      "itemCount": 10,
      "fallbackImages": 0,
      "canvasOwnerViolation": false,
      "documentOverflow": 0
    },
    "desktopRoundTrip": {
      "state": "interacting",
      "readiness": "ready",
      "activeId": "synthetic_human",
      "domActiveId": "synthetic_human",
      "activeTriggerId": "synthetic_human",
      "inputOwner": "scroll",
      "effectMode": "depth-parallax",
      "effectHover": 0,
      "effectRipple": 0.0063,
      "effectPointerX": null,
      "effectPointerY": null,
      "effectMotion": "full",
      "parallaxSamples": 12,
      "blurSamples": 6,
      "residentCount": 5,
      "requestedCount": 6,
      "maxResident": 6,
      "frameCount": 10,
      "pauseReason": "none",
      "contextState": "active",
      "dpr": 1,
      "itemCount": 10,
      "fallbackImages": 0,
      "canvasOwnerViolation": false,
      "documentOverflow": 0
    }
  }
}