feat(ADBLABS-182): Chromatic effect on hover

[luisSilvaEs]

Summary of changes

• Add a cursor-driven chromatic aberration effect on hero and grid-item hover, ported from Randy's CodePen demo approved by Clement
• Add lazy WebGL mount/unmount via IntersectionObserver so a long content grid never holds more live WebGL contexts than are near the viewport
• Add a fine-pointer + WebGL feature gate so the effect never runs on touch/mobile devices and degrades to the plain image when unsupported (progressive enhancement)
• Add a decorative canvas that crossfades over the real <img> on hover instead of replacing it, so alt text and the accessibility tree stay untouched
• Apply the effect to video cards as well as standard cards; the existing play-icon z-index already keeps it above the canvas, so no extra layout work was needed

Relevant Links

• Story: ADBLABS-182
• Approved CodePen reference: https://codepen.io/editor/Randy-Oest/pen/01a0a16e-b465-7f99-98f1-b8e02c2bcd8f
• Clement's Framer example: https://social-expectations-699939.framer.app/
• Milo shader source referenced in the ticket: https://github.com/adobecom/milo/blob/stage/libs/mep/ace1209/globe-gallery/src/shaders.js#L185

Test URLs:

• Before: https://main--adobe-labs-website--adobe.aem.live/
• After: https://feat-chromatic-effect-on-hover--adobe-labs-website--adobe.aem.live/

Checklist

• This PR has visual changes, and has been reviewed by a designer.
• This PR has code changes, and our linters still pass.
• This PR has new code, so new tests were added or updated, and they pass.
• This PR affects production code, so it was browser tested (see below).

Validation

1. Make sure all PR checks have passed.
2. Pull down the branch and run locally or view on the PR testing link.
3. Verify the implementation against the design and story requirements.

Validation steps

• When hovering over a hero block or grid item, the image has a chromatic distortion that follows the cursor.
• The chromatic distortion is not loaded if the device doesn't have a pointer.
• Performance with a full grid of items has been tested.
• Never runs on mobile.
• Browser support investigated and considered. Should be considered a progressive enhancement and grid functions without the effect if it is not supported.
• Content grid items maintain their accessibility and semantics, including how they appear in the accessibility tree.
• Video cards (play-icon overlay) still show the play icon clearly above the hover effect.
• Effect respects prefers-reduced-motion (dampened, not fully disabled) — confirm this matches expectations.
• Effect intensity on low-detail/smooth thumbnails reads as acceptable (it's noticeably subtler there than on high-contrast images).

---

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Blocks and pages should undergo comprehensive testing to ensure they work as expected in real-use scenarios. Standard testing during pre-production should include at least these browsers.

• Firefox
• Chrome
• Safari

Dark mode and light mode

Most pages support both dark and light mode, based on prefers-color-scheme.
Changes that affect the frontend should support both color schemes.

• Frontend changes have been tested in both light mode and dark mode.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 28193c6 ✅ (latest)
• a76f6af ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/