Footer logo easter egg: morph the logo apart & back on hover/tap (#1397)#1399
Merged
Conversation
Progressively enhances the static footer logo <img> into an interactive <canvas> driven by makeabilitylab/js (pinned @0.6.0). Desktop: cursor X across the logo maps to a linear "reverse explosion" — left = exploded, right = assembled — easing back to assembled on mouse-leave. Touch: a tap plays a one-shot explode -> reassemble (avoids fighting page scroll). The logo renders all-white (triangles, M/L outlines, and the MAKEABILITY LAB wordmark) to match the white PNG it replaces on the blue footer. Honors prefers-reduced-motion and missing-canvas: in those cases the static <img> is left untouched. The injected canvas carries role="img" + aria-label so its accessible name matches the logo. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… lines (#1397) Three fixes after live testing: - Explosion never fired. reset() snapshots the logo's *current* positions as the scatter origin, so calling it from the assembled resting state (which onPointerEnter/onTap both did) collapsed the morph to nothing. The single reset() in layout() is sufficient; update() interpolates against it. Removed the hover/tap resets (and the now-empty pointerenter handler). - Drive the morph from the cursor's X anywhere across the footer's first row (.makelab-footer-row), not just over the small logo, so the whole blue band is interactive. Falls back to the logo if the row isn't found. - Restore the canonical look at the assembled end state: white triangle fills with black facet/outline lines (was a flat white silhouette). The wordmark label stays white to keep AA contrast on the blue (#1565A7) background. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…1397) Explicitly disable areLTriangleStrokesVisible on both internal logos so the triangles inside the L never get facet strokes — the L stays a clean white shape while the M keeps its black facet lines. Set after setColors(), which would otherwise re-enable every triangle's stroke. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #1397. Split out from #1395.
What
Progressively enhances the static footer logo
<img>into an interactive<canvas>driven by makeabilitylab/js (pinned@0.6.0), usingMakeabilityLabLogoMorpher+linearPath().Accessibility
prefers-reduced-motion: when set (or if canvas is unsupported), the static<img>is left in place — no canvas, no animation.role="img"+aria-label="Makeability Lab"so its accessible name matches the logo.Notes
@0.6.0), not the moving@main.MakeabilityLabLogoMorpher.reset()snapshots the logo's current positions as the scatter origin, so it must be called once (in layout), never from the assembled resting state — otherwise the explosion is a no-op.Before / after
Testing
🤖 Generated with Claude Code