Easter egg: footer logo morphs/explodes on hover & tap (makeabilitylab/js)

[jonfroehlich]

Idea

Turn the footer Makeability Lab logo into a fun, accessible easter egg that morphs the triangle logo apart and back together, using our own makeabilitylab/js library (the same lib that powers the landing-page logo and the 404 leaf-fall).

Reference demo: https://makeabilitylab.github.io/js/src/apps/makelogo/MakeabilityLabLogoMorphPaths/

Behavior

• Desktop (hover): moving the cursor across the logo maps horizontal position to the morph amount — left edge = fully exploded, right edge = fully assembled (linearPath(), the "reverse explosion" trajectory). On mouse-leave it animates back to assembled.
• Mobile (tap): a tap plays a one-shot explode → reassemble animation (tracking a finger horizontally would fight page scroll near the footer).
• Reduced motion: fully respect the OS prefers-reduced-motion: reduce setting — leave the existing static logo in place, no canvas, no animation.

Implementation notes

• Progressive enhancement: keep the static <img> as the no-JS / reduced-motion fallback; a small module swaps in a <canvas> and drives MakeabilityLabLogoMorpher + linearPath.
• Pin the library to a released tag (@0.6.0 already ships the morpher + linearPath/setPath API), not @main.
• Keep an accessible name on the canvas (role="img", aria-label="Makeability Lab").

Related

• Split out from Mobile footer Makeability Lab logo needs to shrink down #1395 (mobile footer logo shrink), which ships separately.