Skip to content

Switch landing-page logo morph to spiral path #1396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonfroehlich merged 1 commit into from
Jun 24, 2026
Merged

Switch landing-page logo morph to spiral path #1396

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion website/static/website/js/makelab-logo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
* As the user scrolls down the page, the logo morphs from its start state into
* the assembled logo; scrolling back up returns to the start state.
*
* Default mode: triangles scatter from random positions and assemble on scroll.
* Default mode: triangles scatter from random positions and spiral inward to
* assemble on scroll (see SPIRAL_TURNS / spiralPath).
*
* Easter egg: within the window of certain holidays, triangles morph from
* holiday artwork (e.g., Santa, shamrock) into the logo instead.
Expand Down Expand Up @@ -38,6 +39,7 @@ import {
MakeabilityLabLogo,
MakeabilityLabLogoMorpher,
TriangleArt,
spiralPath,
} from 'https://cdn.jsdelivr.net/gh/makeabilitylab/js@main/dist/makelab.logo.js';

// =============================================================================
Expand All @@ -50,6 +52,10 @@ const TRIANGLE_SIZE = 70;
// runs off-screen on narrow (mobile) viewports. See issue #1281.
const LOGO_WIDTH_FRACTION = 0.9;
const SCROLL_DISTANCE = 300;
// Trajectory the scattered triangles follow as they assemble into the logo.
// `turns` is the number of extra full revolutions each triangle sweeps around the
// logo centroid — higher = more swirl. See spiralPath() in the makelab js lib.
const SPIRAL_TURNS = 1;
const DPR = window.devicePixelRatio || 1;
const BG_FILL_COLOR = "rgba(255, 255, 255, 1)"; // Solid white for website clean look
const START_FILL_COLOR = "rgba(255, 255, 255, 0.5)";
Expand Down Expand Up @@ -134,6 +140,11 @@ async function initOrResize() {
// Initialize Morpher if it doesn't exist
if (!morpher) {
morpher = new MakeabilityLabLogoMorpher(0, 0, TRIANGLE_SIZE, START_FILL_COLOR);
// Swap the default straight-line (reverse-explosion) trajectory for a spiral
// so the triangles swirl inward into place. pathFunction persists, and each
// reset()/resetFromArt() below re-prepares per-triangle path data, so this
// only needs to be set once at creation. See spiralPath() in the makelab lib.
morpher.setPath(spiralPath({ turns: SPIRAL_TURNS }));
}

// Size the assembled logo so it always fits within the canvas width. On wide
Expand Down
Loading