@walrosproject/ui 0.3.4 → 0.4.1

package/dist/index.js

@@ -1,359 +1,273 @@
 // src/components/WalrosPortalTransition.tsx
-import {
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useRef,
-  useState
-} from "react";
-import { gsap } from "gsap";
+import { useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+
+// src/assets.ts
+var walrosPortalSilhouetteUrl = new URL(
+  "./assets/walros-portal-silhouette.svg",
+  import.meta.url
+).href;
+var walrosLogoChromeUrl = new URL(
+  "./assets/walros-logo-chrome.png",
+  import.meta.url
+).href;
+var walrosWordmarkLightUrl = new URL(
+  "./assets/walros-wordmark-light.png",
+  import.meta.url
+).href;
+var walrosWordmarkDarkUrl = new URL(
+  "./assets/walros-wordmark-dark.png",
+  import.meta.url
+).href;
+var walrosThemeGlitchSoundUrl = new URL(
+  "./assets/walros-theme-glitch.mp3",
+  import.meta.url
+).href;
+
+// src/components/Walros3DPortalTransition.tsx
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import gsap from "gsap";
+
+// src/portalSilhouette.ts
+var walrosPortalPaths = [
+  "M 244.00 354.00 C 240.50 377.67, 240.17 413.67, 242.00 434.00 C 243.83 454.33, 249.50 464.50, 255.00 476.00 C 260.50 487.50, 268.50 496.00, 275.00 503.00 C 281.50 510.00, 287.17 513.67, 294.00 518.00 C 300.83 522.33, 306.00 525.67, 316.00 529.00 C 326.00 532.33, 336.33 536.67, 354.00 538.00 C 371.67 539.33, 397.83 540.83, 422.00 537.00 C 446.17 533.17, 474.17 525.33, 499.00 515.00 C 523.83 504.67, 550.00 489.33, 571.00 475.00 C 592.00 460.67, 615.00 436.50, 625.00 429.00 C 635.00 421.50, 623.67 424.00, 631.00 430.00 C 638.33 436.00, 656.67 454.83, 669.00 465.00 C 681.33 475.17, 690.00 482.17, 705.00 491.00 C 720.00 499.83, 743.67 511.50, 759.00 518.00 C 774.33 524.50, 784.00 526.83, 797.00 530.00 C 810.00 533.17, 820.00 535.83, 837.00 537.00 C 854.00 538.17, 881.17 539.00, 899.00 537.00 C 916.83 535.00, 932.00 530.00, 944.00 525.00 C 956.00 520.00, 962.00 516.17, 971.00 507.00 C 980.00 497.83, 991.67 482.83, 998.00 470.00 C 1004.33 457.17, 1007.17 446.33, 1009.00 430.00 C 1010.83 413.67, 1010.83 390.50, 1009.00 372.00 C 1007.17 353.50, 1003.83 337.17, 998.00 319.00 C 992.17 300.83, 983.67 280.17, 974.00 263.00 C 964.33 245.83, 952.00 229.67, 940.00 216.00 C 928.00 202.33, 917.17 192.00, 902.00 181.00 C 886.83 170.00, 866.50 158.17, 849.00 150.00 C 831.50 141.83, 816.67 137.00, 797.00 132.00 C 777.33 127.00, 756.67 122.83, 731.00 120.00 C 705.33 117.17, 673.67 115.33, 643.00 115.00 C 612.33 114.67, 575.67 115.67, 547.00 118.00 C 518.33 120.33, 496.17 123.00, 471.00 129.00 C 445.83 135.00, 418.33 143.50, 396.00 154.00 C 373.67 164.50, 353.50 178.50, 337.00 192.00 C 320.50 205.50, 309.33 218.33, 297.00 235.00 C 284.67 251.67, 271.83 272.17, 263.00 292.00 C 254.17 311.83, 247.50 330.33, 244.00 354.00 Z",
+  "M 289.00 536.00 C 283.17 535.50, 284.83 533.00, 284.00 544.00 C 283.17 555.00, 282.67 578.67, 284.00 602.00 C 285.33 625.33, 287.00 651.83, 292.00 684.00 C 297.00 716.17, 306.33 763.50, 314.00 795.00 C 321.67 826.50, 328.67 847.17, 338.00 873.00 C 347.33 898.83, 357.00 923.67, 370.00 950.00 C 383.00 976.33, 399.67 1006.00, 416.00 1031.00 C 432.33 1056.00, 455.33 1084.50, 468.00 1100.00 C 480.67 1115.50, 486.17 1119.33, 492.00 1124.00 C 497.83 1128.67, 500.67 1127.67, 503.00 1128.00 C 505.33 1128.33, 505.50 1127.50, 506.00 1126.00 C 506.50 1124.50, 510.33 1132.00, 506.00 1119.00 C 501.67 1106.00, 488.17 1073.83, 480.00 1048.00 C 471.83 1022.17, 462.67 987.67, 457.00 964.00 C 451.33 940.33, 449.17 927.33, 446.00 906.00 C 442.83 884.67, 439.50 865.00, 438.00 836.00 C 436.50 807.00, 436.50 758.33, 437.00 732.00 C 437.50 705.67, 439.00 696.33, 441.00 678.00 C 443.00 659.67, 444.83 644.00, 449.00 622.00 C 453.17 600.00, 464.50 559.00, 466.00 546.00 C 467.50 533.00, 468.67 542.50, 458.00 544.00 C 447.33 545.50, 418.33 553.17, 402.00 555.00 C 385.67 556.83, 373.83 556.33, 360.00 555.00 C 346.17 553.67, 330.83 550.17, 319.00 547.00 C 307.17 543.83, 294.83 536.50, 289.00 536.00 Z",
+  "M 961.00 537.00 C 948.50 539.17, 907.83 552.00, 889.00 555.00 C 870.17 558.00, 864.17 557.00, 848.00 555.00 C 831.83 553.00, 802.83 545.00, 792.00 543.00 C 781.17 541.00, 784.83 542.50, 783.00 543.00 C 781.17 543.50, 778.67 533.83, 781.00 546.00 C 783.33 558.17, 792.67 592.33, 797.00 616.00 C 801.33 639.67, 804.83 668.83, 807.00 688.00 C 809.17 707.17, 809.67 709.00, 810.00 731.00 C 810.33 753.00, 810.50 792.83, 809.00 820.00 C 807.50 847.17, 804.50 870.50, 801.00 894.00 C 797.50 917.50, 794.00 936.17, 788.00 961.00 C 782.00 985.83, 773.50 1016.67, 765.00 1043.00 C 756.50 1069.33, 741.33 1104.83, 737.00 1119.00 C 732.67 1133.17, 736.67 1127.17, 739.00 1128.00 C 741.33 1128.83, 745.83 1127.83, 751.00 1124.00 C 756.17 1120.17, 757.33 1120.50, 770.00 1105.00 C 782.67 1089.50, 811.33 1053.50, 827.00 1031.00 C 842.67 1008.50, 851.17 995.00, 864.00 970.00 C 876.83 945.00, 892.83 910.00, 904.00 881.00 C 915.17 852.00, 923.00 826.67, 931.00 796.00 C 939.00 765.33, 946.67 728.67, 952.00 697.00 C 957.33 665.33, 961.00 631.83, 963.00 606.00 C 965.00 580.17, 964.33 553.50, 964.00 542.00 C 963.67 530.50, 973.50 534.83, 961.00 537.00 Z"
+];
+
+// src/components/Walros3DPortalTransition.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var SILHOUETTE_VIEWBOX = 1254;
 var FOCUS_X = 626;
 var FOCUS_Y = 333;
+var VISIBLE_LEFT = 244;
+var VISIBLE_RIGHT = 1010;
+var VISIBLE_TOP = 115;
+var VISIBLE_BOTTOM = 1128;
 var PORTAL_RADIUS = 190;
-var WALROS_PORTAL_SILHOUETTE_URL = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgdmlld0JveD0iMCAwIDEyNTQgMTI1NCIKICAgICB3aWR0aD0iMTI1NCIgaGVpZ2h0PSIxMjU0IgogICAgIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iU2lsdWV0YSBXYWxyT1MiPgogIDxnIGZpbGw9IiMwMDAwMDAiPgogICAgPHBhdGggZD0iTSAyNDQuMDAgMzU0LjAwIEMgMjQwLjUwIDM3Ny42NywgMjQwLjE3IDQxMy42NywgMjQyLjAwIDQzNC4wMCBDIDI0My44MyA0NTQuMzMsIDI0OS41MCA0NjQuNTAsIDI1NS4wMCA0NzYuMDAgQyAyNjAuNTAgNDg3LjUwLCAyNjguNTAgNDk2LjAwLCAyNzUuMDAgNTAzLjAwIEMgMjgxLjUwIDUxMC4wMCwgMjg3LjE3IDUxMy42NywgMjk0LjAwIDUxOC4wMCBDIDMwMC44MyA1MjIuMzMsIDMwNi4wMCA1MjUuNjcsIDMxNi4wMCA1MjkuMDAgQyAzMjYuMDAgNTMyLjMzLCAzMzYuMzMgNTM2LjY3LCAzNTQuMDAgNTM4LjAwIEMgMzcxLjY3IDUzOS4zMywgMzk3LjgzIDU0MC44MywgNDIyLjAwIDUzNy4wMCBDIDQ0Ni4xNyA1MzMuMTcsIDQ3NC4xNyA1MjUuMzMsIDQ5OS4wMCA1MTUuMDAgQyA1MjMuODMgNTA0LjY3LCA1NTAuMDAgNDg5LjMzLCA1NzEuMDAgNDc1LjAwIEMgNTkyLjAwIDQ2MC42NywgNjE1LjAwIDQzNi41MCwgNjI1LjAwIDQyOS4wMCBDIDYzNS4wMCA0MjEuNTAsIDYyMy42NyA0MjQuMDAsIDYzMS4wMCA0MzAuMDAgQyA2MzguMzMgNDM2LjAwLCA2NTYuNjcgNDU0LjgzLCA2NjkuMDAgNDY1LjAwIEMgNjgxLjMzIDQ3NS4xNywgNjkwLjAwIDQ4Mi4xNywgNzA1LjAwIDQ5MS4wMCBDIDcyMC4wMCA0OTkuODMsIDc0My42NyA1MTEuNTAsIDc1OS4wMCA1MTguMDAgQyA3NzQuMzMgNTI0LjUwLCA3ODQuMDAgNTI2LjgzLCA3OTcuMDAgNTMwLjAwIEMgODEwLjAwIDUzMy4xNywgODIwLjAwIDUzNS44MywgODM3LjAwIDUzNy4wMCBDIDg1NC4wMCA1MzguMTcsIDg4MS4xNyA1MzkuMDAsIDg5OS4wMCA1MzcuMDAgQyA5MTYuODMgNTM1LjAwLCA5MzIuMDAgNTMwLjAwLCA5NDQuMDAgNTI1LjAwIEMgOTU2LjAwIDUyMC4wMCwgOTYyLjAwIDUxNi4xNywgOTcxLjAwIDUwNy4wMCBDIDk4MC4wMCA0OTcuODMsIDk5MS42NyA0ODIuODMsIDk5OC4wMCA0NzAuMDAgQyAxMDA0LjMzIDQ1Ny4xNywgMTAwNy4xNyA0NDYuMzMsIDEwMDkuMDAgNDMwLjAwIEMgMTAxMC44MyA0MTMuNjcsIDEwMTAuODMgMzkwLjUwLCAxMDA5LjAwIDM3Mi4wMCBDIDEwMDcuMTcgMzUzLjUwLCAxMDAzLjgzIDMzNy4xNywgOTk4LjAwIDMxOS4wMCBDIDk5Mi4xNyAzMDAuODMsIDk4My42NyAyODAuMTcsIDk3NC4wMCAyNjMuMDAgQyA5NjQuMzMgMjQ1LjgzLCA5NTIuMDAgMjI5LjY3LCA5NDAuMDAgMjE2LjAwIEMgOTI4LjAwIDIwMi4zMywgOTE3LjE3IDE5Mi4wMCwgOTAyLjAwIDE4MS4wMCBDIDg4Ni44MyAxNzAuMDAsIDg2Ni41MCAxNTguMTcsIDg0OS4wMCAxNTAuMDAgQyA4MzEuNTAgMTQxLjgzLCA4MTYuNjcgMTM3LjAwLCA3OTcuMDAgMTMyLjAwIEMgNzc3LjMzIDEyNy4wMCwgNzU2LjY3IDEyMi44MywgNzMxLjAwIDEyMC4wMCBDIDcwNS4zMyAxMTcuMTcsIDY3My42NyAxMTUuMzMsIDY0My4wMCAxMTUuMDAgQyA2MTIuMzMgMTE0LjY3LCA1NzUuNjcgMTE1LjY3LCA1NDcuMDAgMTE4LjAwIEMgNTE4LjMzIDEyMC4zMywgNDk2LjE3IDEyMy4wMCwgNDcxLjAwIDEyOS4wMCBDIDQ0NS44MyAxMzUuMDAsIDQxOC4zMyAxNDMuNTAsIDM5Ni4wMCAxNTQuMDAgQyAzNzMuNjcgMTY0LjUwLCAzNTMuNTAgMTc4LjUwLCAzMzcuMDAgMTkyLjAwIEMgMzIwLjUwIDIwNS41MCwgMzA5LjMzIDIxOC4zMywgMjk3LjAwIDIzNS4wMCBDIDI4NC42NyAyNTEuNjcsIDI3MS44MyAyNzIuMTcsIDI2My4wMCAyOTIuMDAgQyAyNTQuMTcgMzExLjgzLCAyNDcuNTAgMzMwLjMzLCAyNDQuMDAgMzU0LjAwIFoiLz48cGF0aCBkPSJNIDI4OS4wMCA1MzYuMDAgQyAyODMuMTcgNTM1LjUwLCAyODQuODMgNTMzLjAwLCAyODQuMDAgNTQ0LjAwIEMgMjgzLjE3IDU1NS4wMCwgMjgyLjY3IDU3OC42NywgMjg0LjAwIDYwMi4wMCBDIDI4NS4zMyA2MjUuMzMsIDI4Ny4wMCA2NTEuODMsIDI5Mi4wMCA2ODQuMDAgQyAyOTcuMDAgNzE2LjE3LCAzMDYuMzMgNzYzLjUwLCAzMTQuMDAgNzk1LjAwIEMgMzIxLjY3IDgyNi41MCwgMzI4LjY3IDg0Ny4xNywgMzM4LjAwIDg3My4wMCBDIDM0Ny4zMyA4OTguODMsIDM1Ny4wMCA5MjMuNjcsIDM3MC4wMCA5NTAuMDAgQyAzODMuMDAgOTc2LjMzLCAzOTkuNjcgMTAwNi4wMCwgNDE2LjAwIDEwMzEuMDAgQyA0MzIuMzMgMTA1Ni4wMCwgNDU1LjMzIDEwODQuNTAsIDQ2OC4wMCAxMTAwLjAwIEMgNDgwLjY3IDExMTUuNTAsIDQ4Ni4xNyAxMTE5LjMzLCA0OTIuMDAgMTEyNC4wMCBDIDQ5Ny44MyAxMTI4LjY3LCA1MDAuNjcgMTEyNy42NywgNTAzLjAwIDExMjguMDAgQyA1MDUuMzMgMTEyOC4zMywgNTA1LjUwIDExMjcuNTAsIDUwNi4wMCAxMTI2LjAwIEMgNTA2LjUwIDExMjQuNTAsIDUxMC4zMyAxMTMyLjAwLCA1MDYuMDAgMTExOS4wMCBDIDUwMS42NyAxMTA2LjAwLCA0ODguMTcgMTA3My44MywgNDgwLjAwIDEwNDguMDAgQyA0NzEuODMgMTAyMi4xNywgNDYyLjY3IDk4Ny42NywgNDU3LjAwIDk2NC4wMCBDIDQ1MS4zMyA5NDAuMzMsIDQ0OS4xNyA5MjcuMzMsIDQ0Ni4wMCA5MDYuMDAgQyA0NDIuODMgODg0LjY3LCA0MzkuNTAgODY1LjAwLCA0MzguMDAgODM2LjAwIEMgNDM2LjUwIDgwNy4wMCwgNDM2LjUwIDc1OC4zMywgNDM3LjAwIDczMi4wMCBDIDQzNy41MCA3MDUuNjcsIDQzOS4wMCA2OTYuMzMsIDQ0MS4wMCA2NzguMDAgQyA0NDMuMDAgNjU5LjY3LCA0NDQuODMgNjQ0LjAwLCA0NDkuMDAgNjIyLjAwIEMgNDUzLjE3IDYwMC4wMCwgNDY0LjUwIDU1OS4wMCwgNDY2LjAwIDU0Ni4wMCBDIDQ2Ny41MCA1MzMuMDAsIDQ2OC42NyA1NDIuNTAsIDQ1OC4wMCA1NDQuMDAgQyA0NDcuMzMgNTQ1LjUwLCA0MTguMzMgNTUzLjE3LCA0MDIuMDAgNTU1LjAwIEMgMzg1LjY3IDU1Ni44MywgMzczLjgzIDU1Ni4zMywgMzYwLjAwIDU1NS4wMCBDIDM0Ni4xNyA1NTMuNjcsIDMzMC44MyA1NTAuMTcsIDMxOS4wMCA1NDcuMDAgQyAzMDcuMTcgNTQzLjgzLCAyOTQuODMgNTM2LjUwLCAyODkuMDAgNTM2LjAwIFoiLz48cGF0aCBkPSJNIDk2MS4wMCA1MzcuMDAgQyA5NDguNTAgNTM5LjE3LCA5MDcuODMgNTUyLjAwLCA4ODkuMDAgNTU1LjAwIEMgODcwLjE3IDU1OC4wMCwgODY0LjE3IDU1Ny4wMCwgODQ4LjAwIDU1NS4wMCBDIDgzMS44MyA1NTMuMDAsIDgwMi44MyA1NDUuMDAsIDc5Mi4wMCA1NDMuMDAgQyA3ODEuMTcgNTQxLjAwLCA3ODQuODMgNTQyLjUwLCA3ODMuMDAgNTQzLjAwIEMgNzgxLjE3IDU0My41MCwgNzc4LjY3IDUzMy44MywgNzgxLjAwIDU0Ni4wMCBDIDc4My4zMyA1NTguMTcsIDc5Mi42NyA1OTIuMzMsIDc5Ny4wMCA2MTYuMDAgQyA4MDEuMzMgNjM5LjY3LCA4MDQuODMgNjY4LjgzLCA4MDcuMDAgNjg4LjAwIEMgODA5LjE3IDcwNy4xNywgODA5LjY3IDcwOS4wMCwgODEwLjAwIDczMS4wMCBDIDgxMC4zMyA3NTMuMDAsIDgxMC41MCA3OTIuODMsIDgwOS4wMCA4MjAuMDAgQyA4MDcuNTAgODQ3LjE3LCA4MDQuNTAgODcwLjUwLCA4MDEuMDAgODk0LjAwIEMgNzk3LjUwIDkxNy41MCwgNzk0LjAwIDkzNi4xNywgNzg4LjAwIDk2MS4wMCBDIDc4Mi4wMCA5ODUuODMsIDc3My41MCAxMDE2LjY3LCA3NjUuMDAgMTA0My4wMCBDIDc1Ni41MCAxMDY5LjMzLCA3NDEuMzMgMTEwNC44MywgNzM3LjAwIDExMTkuMDAgQyA3MzIuNjcgMTEzMy4xNywgNzM2LjY3IDExMjcuMTcsIDczOS4wMCAxMTI4LjAwIEMgNzQxLjMzIDExMjguODMsIDc0NS44MyAxMTI3LjgzLCA3NTEuMDAgMTEyNC4wMCBDIDc1Ni4xNyAxMTIwLjE3LCA3NTcuMzMgMTEyMC41MCwgNzcwLjAwIDExMDUuMDAgQyA3ODIuNjcgMTA4OS41MCwgODExLjMzIDEwNTMuNTAsIDgyNy4wMCAxMDMxLjAwIEMgODQyLjY3IDEwMDguNTAsIDg1MS4xNyA5OTUuMDAsIDg2NC4wMCA5NzAuMDAgQyA4NzYuODMgOTQ1LjAwLCA4OTIuODMgOTEwLjAwLCA5MDQuMDAgODgxLjAwIEMgOTE1LjE3IDg1Mi4wMCwgOTIzLjAwIDgyNi42NywgOTMxLjAwIDc5Ni4wMCBDIDkzOS4wMCA3NjUuMzMsIDk0Ni42NyA3MjguNjcsIDk1Mi4wMCA2OTcuMDAgQyA5NTcuMzMgNjY1LjMzLCA5NjEuMDAgNjMxLjgzLCA5NjMuMDAgNjA2LjAwIEMgOTY1LjAwIDU4MC4xNywgOTY0LjMzIDU1My41MCwgOTY0LjAwIDU0Mi4wMCBDIDk2My42NyA1MzAuNTAsIDk3My41MCA1MzQuODMsIDk2MS4wMCA1MzcuMDAgWiIvPgogIDwvZz4KPC9zdmc+Cg==";
-function getStorage(mode) {
-  if (typeof window === "undefined") return null;
-  try {
-    const storage = mode === "session" ? window.sessionStorage : window.localStorage;
-    const testKey = "__walros_portal_test__";
-    storage.setItem(testKey, "1");
-    storage.removeItem(testKey);
-    return storage;
-  } catch {
-    return null;
-  }
-}
-function shouldRunTransition(enabled, storageMode, storageKey) {
-  if (!enabled) return false;
-  if (storageMode === "always") return true;
-  if (typeof window === "undefined") return false;
-  const storage = getStorage(storageMode);
-  if (!storage) return true;
-  try {
-    return storage.getItem(storageKey) == null;
-  } catch {
-    return true;
-  }
-}
-function WalrosPortalTransition({
-  duration = 900,
+function Walros3DPortalTransition({
+  origin,
   onComplete,
-  backgroundColor = "#000000",
-  enabled = true,
-  storageMode = "always",
-  storageKey = "walros-portal-seen",
-  zIndex = 9999
+  duration = 900,
+  backgroundColor = "#000",
+  zIndex = 10001,
+  lockScroll = true,
+  logoUrl = false
 }) {
-  const [shouldRun] = useState(
-    () => shouldRunTransition(enabled, storageMode, storageKey)
-  );
-  const [visible, setVisible] = useState(shouldRun);
-  const [size, setSize] = useState({ w: 0, h: 0 });
-  const overlayRef = useRef(null);
-  const maskScaleRef = useRef(null);
-  const completedRef = useRef(false);
-  const startedRef = useRef(false);
-  const rafRef = useRef(null);
-  const timelineRef = useRef(null);
-  const previousOverflowRef = useRef("");
-  const uid = useId().replace(/[:]/g, "_");
-  const maskId = `walros-portal-mask-${uid}`;
+  const [visible, setVisible] = useState(true);
+  const [viewport, setViewport] = useState(() => ({
+    width: typeof window === "undefined" ? 0 : window.innerWidth,
+    height: typeof window === "undefined" ? 0 : window.innerHeight
+  }));
+  const overlay = useRef(null);
+  const portal = useRef(null);
+  const logo = useRef(null);
+  const completeRef = useRef(onComplete);
+  completeRef.current = onComplete;
+  const maskId = `walros-3d-portal-${useId().replace(/:/g, "_")}`;
   useEffect(() => {
-    if (!visible) return;
-    const element = overlayRef.current;
-    if (!element) return;
-    const measure = () => {
-      const rect = element.getBoundingClientRect();
-      setSize(
-        (previous) => previous.w === rect.width && previous.h === rect.height ? previous : { w: rect.width, h: rect.height }
-      );
-    };
-    measure();
-    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
-    observer?.observe(element);
-    window.addEventListener("resize", measure);
-    return () => {
-      observer?.disconnect();
-      window.removeEventListener("resize", measure);
-    };
-  }, [visible]);
+    const updateViewport = () => setViewport({ width: window.innerWidth, height: window.innerHeight });
+    window.addEventListener("resize", updateViewport);
+    return () => window.removeEventListener("resize", updateViewport);
+  }, []);
   useLayoutEffect(() => {
-    if (!enabled) {
-      setVisible(false);
-      return;
+    if (!visible || viewport.width <= 0 || viewport.height <= 0 || !overlay.current || !portal.current) return;
+    const previousOverflow = document.body.style.overflow;
+    if (lockScroll) document.body.style.overflow = "hidden";
+    const visibleWidth = VISIBLE_RIGHT - VISIBLE_LEFT;
+    const visibleHeight = VISIBLE_BOTTOM - VISIBLE_TOP;
+    const visualCenterX = (VISIBLE_LEFT + VISIBLE_RIGHT) / 2;
+    const visualCenterY = (VISIBLE_TOP + VISIBLE_BOTTOM) / 2;
+    const initialScale = Math.min(origin.width / visibleWidth, origin.height / visibleHeight) * 0.985;
+    const initialX = origin.centerX - (visualCenterX - FOCUS_X) * initialScale;
+    const initialY = origin.centerY - (visualCenterY - FOCUS_Y) * initialScale;
+    const diagonal = Math.hypot(viewport.width, viewport.height) / 2;
+    const finalScale = (diagonal + 80) / PORTAL_RADIUS * 1.15;
+    const targetX = viewport.width / 2 - (visualCenterX - FOCUS_X) * finalScale;
+    const targetY = viewport.height / 2 - (visualCenterY - FOCUS_Y) * finalScale;
+    const total = duration / 1e3;
+    gsap.set(portal.current, {
+      x: initialX,
+      y: initialY,
+      scale: initialScale,
+      svgOrigin: "0 0"
+    });
+    if (logo.current) {
+      gsap.set(logo.current, {
+        x: initialX,
+        y: initialY,
+        scale: initialScale,
+        opacity: 1,
+        svgOrigin: "0 0"
+      });
     }
-    if (!visible) return;
-    if (completedRef.current || startedRef.current) return;
-    if (size.w <= 0 || size.h <= 0) return;
-    const overlay = overlayRef.current;
-    const maskScale = maskScaleRef.current;
-    if (!overlay || !maskScale) return;
-    startedRef.current = true;
-    previousOverflowRef.current = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    gsap.set(overlay.current, { opacity: 1 });
     const finish = () => {
-      if (completedRef.current) return;
-      completedRef.current = true;
-      document.body.style.overflow = previousOverflowRef.current;
-      if (storageMode !== "always") {
-        const storage = getStorage(storageMode);
-        try {
-          storage?.setItem(storageKey, "1");
-        } catch {
-        }
-      }
+      if (lockScroll) document.body.style.overflow = previousOverflow;
       setVisible(false);
-      onComplete?.();
+      completeRef.current?.();
     };
-    const reducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)"
-    ).matches;
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const timeline = gsap.timeline({ onComplete: finish });
     if (reducedMotion) {
-      const timeline = gsap.timeline({ onComplete: finish });
-      timelineRef.current = timeline;
-      timeline.to(overlay, {
-        opacity: 0,
-        duration: 0.15,
-        ease: "power1.out"
-      });
-      return;
-    }
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      const halfDiagonal = Math.sqrt(size.w * size.w + size.h * size.h) / 2;
-      const initialPixels2 = Math.min(
-        180,
-        Math.max(120, size.w * 0.12)
-      );
-      const initialScale2 = initialPixels2 / SILHOUETTE_VIEWBOX;
-      const finalScale = (halfDiagonal + 80) / PORTAL_RADIUS * 1.15;
-      gsap.set(maskScale, {
-        svgOrigin: "0 0",
-        scale: initialScale2
+      timeline.to(overlay.current, { opacity: 0, duration: 0.15, ease: "power1.out" });
+    } else {
+      timeline.to([portal.current, logo.current].filter(Boolean), {
+        x: targetX,
+        y: targetY,
+        scale: finalScale,
+        duration: total,
+        ease: "power2.in"
       });
-      gsap.set(overlay, { opacity: 1 });
-      const totalSeconds = duration / 1e3;
-      const timeline = gsap.timeline({ onComplete: finish });
-      timelineRef.current = timeline;
-      timeline.to(
-        maskScale,
-        {
-          scale: initialScale2 * 1.4,
-          duration: totalSeconds * 0.15,
-          ease: "power2.out"
-        },
-        0
-      );
-      timeline.to(
-        maskScale,
-        {
-          scale: finalScale,
-          duration: totalSeconds * 0.85,
-          ease: "power2.in"
-        },
-        totalSeconds * 0.15
-      );
-      timeline.to(
-        overlay,
-        {
+      if (logo.current) {
+        timeline.to(logo.current, {
           opacity: 0,
-          duration: totalSeconds * 0.1,
-          ease: "power2.out"
-        },
-        totalSeconds * 0.9
-      );
-    });
-  }, [
-    duration,
-    enabled,
-    onComplete,
-    size,
-    storageKey,
-    storageMode,
-    visible
-  ]);
-  useEffect(() => {
-    return () => {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      timelineRef.current?.kill();
-      if (startedRef.current && !completedRef.current) {
-        document.body.style.overflow = previousOverflowRef.current;
+          duration: total * 0.18,
+          ease: "power1.out"
+        }, total * 0.7);
       }
+      timeline.to(overlay.current, {
+        opacity: 0,
+        duration: total * 0.1,
+        ease: "power2.out"
+      }, total * 0.9);
+    }
+    return () => {
+      timeline.kill();
+      if (lockScroll) document.body.style.overflow = previousOverflow;
     };
-  }, []);
-  if (!shouldRun || !visible) return null;
-  const { w, h } = size;
-  const ready = w > 0 && h > 0;
-  const viewportCenterX = w / 2;
-  const viewportCenterY = h / 2;
-  const initialPixels = Math.min(
-    180,
-    Math.max(120, w * 0.12)
-  );
-  const initialScale = initialPixels / SILHOUETTE_VIEWBOX;
-  const visualCenter = SILHOUETTE_VIEWBOX / 2;
-  const initialOffsetX = (visualCenter - FOCUS_X) * initialScale;
-  const initialOffsetY = (visualCenter - FOCUS_Y) * initialScale;
-  const portalCenterX = viewportCenterX - initialOffsetX;
-  const portalCenterY = viewportCenterY - initialOffsetY;
+  }, [duration, lockScroll, origin, viewport, visible]);
+  if (!visible) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: overlayRef,
-      "aria-hidden": "true",
+      ref: overlay,
+      className: "walros-3d-portal",
       style: {
         position: "fixed",
         inset: 0,
         width: "100vw",
         height: "100dvh",
-        zIndex,
-        pointerEvents: "none",
         overflow: "hidden",
-        backgroundColor: ready ? "transparent" : backgroundColor
+        pointerEvents: "none",
+        zIndex,
+        backgroundColor: viewport.width > 0 && viewport.height > 0 ? "transparent" : backgroundColor
       },
-      children: ready && /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "100%",
-          height: "100%",
-          viewBox: `0 0 ${w} ${h}`,
-          preserveAspectRatio: "none",
-          style: {
-            position: "absolute",
-            inset: 0,
-            display: "block"
-          },
-          children: [
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-              "mask",
-              {
-                id: maskId,
-                maskUnits: "userSpaceOnUse",
-                x: "0",
-                y: "0",
-                width: w,
-                height: h,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "rect",
-                    {
-                      x: "0",
-                      y: "0",
-                      width: w,
-                      height: h,
-                      fill: "white"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "g",
-                    {
-                      transform: `translate(${portalCenterX} ${portalCenterY})`,
-                      children: /* @__PURE__ */ jsx(
-                        "g",
-                        {
-                          ref: maskScaleRef,
-                          transform: `scale(${initialScale})`,
-                          children: /* @__PURE__ */ jsx(
-                            "image",
-                            {
-                              href: WALROS_PORTAL_SILHOUETTE_URL,
-                              x: -FOCUS_X,
-                              y: -FOCUS_Y,
-                              width: SILHOUETTE_VIEWBOX,
-                              height: SILHOUETTE_VIEWBOX
-                            }
-                          )
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: "0",
-                y: "0",
-                width: w,
-                height: h,
-                fill: backgroundColor,
-                mask: `url(#${maskId})`
-              }
-            )
-          ]
-        }
-      )
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", style: { display: "block" }, children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: viewport.width, height: viewport.height, children: [
+          /* @__PURE__ */ jsx("rect", { width: viewport.width, height: viewport.height, fill: "white" }),
+          /* @__PURE__ */ jsx("g", { ref: portal, children: /* @__PURE__ */ jsx("g", { transform: `translate(${-FOCUS_X} ${-FOCUS_Y})`, fill: "black", children: walrosPortalPaths.map((path, index) => /* @__PURE__ */ jsx("path", { d: path }, index)) }) })
+        ] }) }),
+        logoUrl && /* @__PURE__ */ jsx("g", { ref: logo, children: /* @__PURE__ */ jsx("image", { href: logoUrl, x: -FOCUS_X, y: -FOCUS_Y, width: "1254", height: "1254" }) }),
+        /* @__PURE__ */ jsx("rect", { width: viewport.width, height: viewport.height, fill: backgroundColor, mask: `url(#${maskId})` })
+      ] })
     }
   );
 }
 
-// src/assets.ts
-var walrosPortalSilhouetteUrl = new URL(
-  "./assets/walros-portal-silhouette.svg",
-  import.meta.url
-).href;
-var walrosLogoChromeUrl = new URL(
-  "./assets/walros-logo-chrome.png",
-  import.meta.url
-).href;
-var walrosWordmarkLightUrl = new URL(
-  "./assets/walros-wordmark-light.png",
-  import.meta.url
-).href;
-var walrosWordmarkDarkUrl = new URL(
-  "./assets/walros-wordmark-dark.png",
-  import.meta.url
-).href;
-var walrosThemeGlitchSoundUrl = new URL(
-  "./assets/walros-theme-glitch.mp3",
-  import.meta.url
-).href;
-
-// src/components/WalrosLogo.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function WalrosLogo({
-  alt = "WalrOS",
-  draggable = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    "img",
-    {
-      src: walrosLogoChromeUrl,
-      alt,
-      draggable,
-      ...props
-    }
+// src/components/useOverlayHost.ts
+import { useLayoutEffect as useLayoutEffect2, useState as useState2 } from "react";
+function useOverlayHost(zIndex) {
+  const [host] = useState2(
+    () => typeof document === "undefined" ? null : document.createElement("div")
   );
+  useLayoutEffect2(() => {
+    if (!host) return;
+    host.dataset.walrosOverlayRoot = "";
+    host.style.position = "fixed";
+    host.style.inset = "0";
+    host.style.pointerEvents = "none";
+    document.documentElement.appendChild(host);
+    return () => host.remove();
+  }, [host]);
+  useLayoutEffect2(() => {
+    if (host) host.style.zIndex = String(zIndex);
+  }, [host, zIndex]);
+  return host;
 }
 
-// src/components/WalrosWordmark.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function WalrosWordmark({
-  variant = "light",
-  alt = "WalrOS",
-  draggable = false,
-  ...props
+// src/components/WalrosPortalTransition.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IMAGE_SIZE = (width) => Math.min(150, Math.max(90, width * 0.11));
+var IMAGE_WIDTH = 1254;
+var VISIBLE_LEFT2 = 244;
+var VISIBLE_RIGHT2 = 1010;
+var VISIBLE_TOP2 = 115;
+var VISIBLE_BOTTOM2 = 1128;
+function defaultOrigin() {
+  if (typeof window === "undefined") return { centerX: 0, centerY: 0, width: 70, height: 90 };
+  const size = IMAGE_SIZE(window.innerWidth);
+  return {
+    centerX: window.innerWidth / 2,
+    centerY: window.innerHeight * 0.45 + ((VISIBLE_TOP2 + VISIBLE_BOTTOM2) / 2 - IMAGE_WIDTH / 2) / IMAGE_WIDTH * size,
+    width: (VISIBLE_RIGHT2 - VISIBLE_LEFT2) / IMAGE_WIDTH * size,
+    height: (VISIBLE_BOTTOM2 - VISIBLE_TOP2) / IMAGE_WIDTH * size
+  };
+}
+function getStorage(mode) {
+  if (typeof window === "undefined") return null;
+  try {
+    return mode === "session" ? window.sessionStorage : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function shouldRun(enabled, mode, key) {
+  if (!enabled) return false;
+  if (mode === "always") return true;
+  try {
+    return getStorage(mode)?.getItem(key) == null;
+  } catch {
+    return true;
+  }
+}
+function WalrosPortalTransition({
+  duration = 900,
+  onComplete,
+  backgroundColor = "#000",
+  enabled = true,
+  storageMode = "always",
+  storageKey = "walros-portal-seen",
+  zIndex = 1e4,
+  origin,
+  logoUrl = walrosLogoChromeUrl
 }) {
-  const src = variant === "dark" ? walrosWordmarkDarkUrl : walrosWordmarkLightUrl;
-  return /* @__PURE__ */ jsx3(
-    "img",
-    {
-      src,
-      alt,
-      draggable,
-      ...props
-    }
+  const [run] = useState3(() => shouldRun(enabled, storageMode, storageKey));
+  const [complete, setComplete] = useState3(false);
+  const [initialOrigin] = useState3(() => origin ?? defaultOrigin());
+  const host = useOverlayHost(zIndex);
+  if (!host || !enabled || !run || complete) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      Walros3DPortalTransition,
+      {
+        origin: initialOrigin,
+        logoUrl,
+        duration,
+        backgroundColor,
+        zIndex: 1,
+        lockScroll: true,
+        onComplete: () => {
+          if (storageMode !== "always") {
+            try {
+              getStorage(storageMode)?.setItem(storageKey, "1");
+            } catch {
+            }
+          }
+          setComplete(true);
+          onComplete?.();
+        }
+      }
+    ),
+    host
   );
 }
 
+// src/components/WalrosThemeTransition.tsx
+import { createPortal as createPortal2 } from "react-dom";
+
 // src/components/WalrosThemeGlitch.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var GLITCH_STYLES = `
 .walros-theme-glitch-root {
   position: fixed;
@@ -371,7 +285,6 @@ var GLITCH_STYLES = `
   content: "";
   position: absolute;
   inset: 0;
-  mix-blend-mode: screen;
 }
 .walros-theme-glitch-root::before {
   background: rgba(0, 0, 0, .82);
@@ -501,7 +414,7 @@ function WalrosThemeGlitch({
   style
 }) {
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx4("style", { children: GLITCH_STYLES }),
+    /* @__PURE__ */ jsx3("style", { children: GLITCH_STYLES }),
     active ? /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -509,22 +422,213 @@ function WalrosThemeGlitch({
         style: { zIndex, ...style },
         "aria-hidden": "true",
         children: [
-          /* @__PURE__ */ jsx4("span", { className: "walros-theme-glitch-band" }),
-          /* @__PURE__ */ jsx4("span", { className: "walros-theme-glitch-band" }),
-          /* @__PURE__ */ jsx4("span", { className: "walros-theme-glitch-band" }),
-          /* @__PURE__ */ jsx4("span", { className: "walros-theme-glitch-band" })
+          /* @__PURE__ */ jsx3("span", { className: "walros-theme-glitch-band" }),
+          /* @__PURE__ */ jsx3("span", { className: "walros-theme-glitch-band" }),
+          /* @__PURE__ */ jsx3("span", { className: "walros-theme-glitch-band" }),
+          /* @__PURE__ */ jsx3("span", { className: "walros-theme-glitch-band" })
         ]
       }
     ) : null
   ] });
 }
 
+// src/components/WalrosThemeTransition.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function WalrosThemeTransition({
+  active,
+  zIndex = 1e4
+}) {
+  const host = useOverlayHost(zIndex);
+  if (!host) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx4(WalrosThemeGlitch, { active, zIndex: 1 }),
+    host
+  );
+}
+
+// src/components/DirectionalCursor.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var DESKTOP_CURSOR_QUERY = "(min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)";
+var CURSOR_STYLES = `
+.directional-cursor { position: fixed; top: 0; left: 0; z-index: 9999; width: 20px; height: 22px; opacity: 0; pointer-events: none; contain: layout style; will-change: transform; transition: opacity 100ms linear; }
+.directional-cursor.is-visible { opacity: 1; }
+.directional-cursor-shape { width: 20px; height: 22px; transform-origin: center center; will-change: transform; }
+.directional-cursor svg { display: block; width: 20px; height: 22px; }
+@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  html.has-directional-cursor, html.has-directional-cursor body, html.has-directional-cursor body * { cursor: none !important; }
+  html.has-directional-cursor :is(a, button, [role="button"], [onclick], .clickable, [data-clickable], input[type="button"], input[type="submit"], input[type="reset"], label[for]),
+  html.has-directional-cursor :is(a, button, [role="button"], [onclick], .clickable, [data-clickable], input[type="button"], input[type="submit"], input[type="reset"], label[for]) * { cursor: pointer !important; }
+  html.has-directional-cursor :is(input, textarea, select, [contenteditable="true"]) { cursor: text !important; }
+}
+`;
+function DirectionalCursor() {
+  const positionLayer = useRef2(null);
+  const directionLayer = useRef2(null);
+  useEffect2(() => {
+    const position = positionLayer.current;
+    const direction = directionLayer.current;
+    if (!position || !direction) return;
+    const media = window.matchMedia(DESKTOP_CURSOR_QUERY);
+    let active = false;
+    let frame = 0;
+    let moveFrame = 0;
+    let scaleTimer = 0;
+    let latestEvent = null;
+    let currentX = window.innerWidth / 2;
+    let currentY = -60;
+    let targetX = currentX;
+    let targetY = currentY;
+    let currentAngle = 0;
+    let targetAngle = 0;
+    let hasAngle = false;
+    let currentScale = 1;
+    let targetScale = 1;
+    let lastX = currentX;
+    let lastY = 0;
+    const render = () => {
+      currentX += (targetX - currentX) * 0.4;
+      currentY += (targetY - currentY) * 0.4;
+      const angleDelta = (targetAngle - currentAngle + 540) % 360 - 180;
+      currentAngle += angleDelta * 0.24;
+      currentScale += (targetScale - currentScale) * 0.24;
+      position.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
+      direction.style.transform = `translate(-50%, -50%) rotate(${currentAngle}deg) scale(${currentScale})`;
+      const unsettled = Math.abs(targetX - currentX) > 0.08 || Math.abs(targetY - currentY) > 0.08 || Math.abs(angleDelta) > 0.08 || Math.abs(targetScale - currentScale) > 2e-3;
+      frame = unsettled ? window.requestAnimationFrame(render) : 0;
+    };
+    const requestRender = () => {
+      if (!frame) frame = window.requestAnimationFrame(render);
+    };
+    const processMove = () => {
+      moveFrame = 0;
+      const event = latestEvent;
+      if (!event) return;
+      const deltaX = event.clientX - lastX;
+      const deltaY = event.clientY - lastY;
+      const distance = Math.hypot(deltaX, deltaY);
+      targetX = event.clientX;
+      targetY = event.clientY;
+      position.classList.add("is-visible");
+      if (distance > 1.25) {
+        const rawAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 90;
+        const normalizedAngle = (rawAngle % 360 + 360) % 360;
+        if (!hasAngle) {
+          targetAngle = normalizedAngle;
+          currentAngle = normalizedAngle;
+          hasAngle = true;
+        } else {
+          targetAngle = normalizedAngle;
+        }
+        targetScale = 0.92;
+        window.clearTimeout(scaleTimer);
+        scaleTimer = window.setTimeout(() => {
+          targetScale = 1;
+          requestRender();
+        }, 130);
+      }
+      lastX = event.clientX;
+      lastY = event.clientY;
+      requestRender();
+    };
+    const handleMouseMove = (event) => {
+      latestEvent = event;
+      if (!moveFrame) moveFrame = window.requestAnimationFrame(processMove);
+    };
+    const activate = () => {
+      if (active) return;
+      active = true;
+      document.documentElement.classList.add("has-directional-cursor");
+      window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    };
+    const deactivate = () => {
+      if (!active) return;
+      active = false;
+      document.documentElement.classList.remove("has-directional-cursor");
+      position.classList.remove("is-visible");
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.cancelAnimationFrame(frame);
+      window.cancelAnimationFrame(moveFrame);
+      window.clearTimeout(scaleTimer);
+      frame = 0;
+      moveFrame = 0;
+    };
+    const sync = () => {
+      if (media.matches) activate();
+      else deactivate();
+    };
+    media.addEventListener("change", sync);
+    sync();
+    return () => {
+      media.removeEventListener("change", sync);
+      deactivate();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("style", { children: CURSOR_STYLES }),
+    /* @__PURE__ */ jsx5("div", { ref: positionLayer, className: "directional-cursor", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("div", { ref: directionLayer, className: "directional-cursor-shape", children: /* @__PURE__ */ jsxs3("svg", { width: "50", height: "54", viewBox: "0 0 50 54", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsxs3("g", { filter: "url(#walros-cursor-shadow)", children: [
+        /* @__PURE__ */ jsx5("path", { d: "M42.6817 41.1495L27.5103 6.79925C26.7269 5.02557 24.2082 5.02558 23.3927 6.79925L7.59814 41.1495C6.75833 42.9759 8.52712 44.8902 10.4125 44.1954L24.3757 39.0496C24.8829 38.8627 25.4385 38.8627 25.9422 39.0496L39.8121 44.1954C41.6849 44.8902 43.4884 42.9759 42.6817 41.1495Z", fill: "black" }),
+        /* @__PURE__ */ jsx5("path", { d: "M43.7146 40.6933L28.5431 6.34306C27.3556 3.65428 23.5772 3.69516 22.3668 6.32755L6.57226 40.6778C5.3134 43.4156 7.97238 46.298 10.803 45.2549L24.7662 40.109C25.0221 40.0147 25.2999 40.0156 25.5494 40.1082L39.4193 45.254C42.2261 46.2953 44.9254 43.4347 43.7146 40.6933Z", stroke: "white", strokeWidth: "2.25825" })
+      ] }),
+      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("filter", { id: "walros-cursor-shadow", x: "0.602397", y: "0.952444", width: "49.0584", height: "52.428", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+        /* @__PURE__ */ jsx5("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+        /* @__PURE__ */ jsx5("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+        /* @__PURE__ */ jsx5("feOffset", { dy: "2.25825" }),
+        /* @__PURE__ */ jsx5("feGaussianBlur", { stdDeviation: "2.25825" }),
+        /* @__PURE__ */ jsx5("feComposite", { in2: "hardAlpha", operator: "out" }),
+        /* @__PURE__ */ jsx5("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" }),
+        /* @__PURE__ */ jsx5("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }),
+        /* @__PURE__ */ jsx5("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })
+      ] }) })
+    ] }) }) })
+  ] });
+}
+
+// src/components/WalrosLogo.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function WalrosLogo({
+  alt = "WalrOS",
+  draggable = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    "img",
+    {
+      src: walrosLogoChromeUrl,
+      alt,
+      draggable,
+      ...props
+    }
+  );
+}
+
+// src/components/WalrosWordmark.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function WalrosWordmark({
+  variant = "light",
+  alt = "WalrOS",
+  draggable = false,
+  ...props
+}) {
+  const src = variant === "dark" ? walrosWordmarkDarkUrl : walrosWordmarkLightUrl;
+  return /* @__PURE__ */ jsx7(
+    "img",
+    {
+      src,
+      alt,
+      draggable,
+      ...props
+    }
+  );
+}
+
 // src/hooks/useWalrosTheme.ts
 import {
   useCallback,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState as useState2
+  useEffect as useEffect3,
+  useRef as useRef3,
+  useState as useState4
 } from "react";
 var GLITCH_BASE_CLASS = "walros-theme-glitch-page";
 var GLITCH_BODY_CLASS = "walros-theme-glitch-page--body";
@@ -571,25 +675,25 @@ function useWalrosTheme({
   lockScroll,
   onAfterUnlock
 } = {}) {
-  const [theme, setThemeState] = useState2(
+  const [theme, setThemeState] = useState4(
     () => readInitialTheme(storageKey, defaultTheme, useSystemPreference)
   );
-  const [mounted, setMounted] = useState2(false);
-  const [glitching, setGlitching] = useState2(false);
-  const themeRef = useRef2(theme);
-  const glitchingRef = useRef2(false);
-  const swapTimerRef = useRef2(null);
-  const cleanupTimerRef = useRef2(null);
-  const applyThemeRef = useRef2(applyTheme);
-  const modeRef = useRef2(mode);
-  const shakeTargetsRef = useRef2(shakeTargets);
-  const lockScrollRef = useRef2(lockScroll);
-  const onAfterUnlockRef = useRef2(onAfterUnlock);
-  const activeTargetsRef = useRef2([]);
-  const viewportLockRef = useRef2(null);
-  const soundRef = useRef2(null);
-  const soundUrlRef = useRef2(soundUrl);
-  const soundVolumeRef = useRef2(soundVolume);
+  const [mounted, setMounted] = useState4(false);
+  const [glitching, setGlitching] = useState4(false);
+  const themeRef = useRef3(theme);
+  const glitchingRef = useRef3(false);
+  const swapTimerRef = useRef3(null);
+  const cleanupTimerRef = useRef3(null);
+  const applyThemeRef = useRef3(applyTheme);
+  const modeRef = useRef3(mode);
+  const shakeTargetsRef = useRef3(shakeTargets);
+  const lockScrollRef = useRef3(lockScroll);
+  const onAfterUnlockRef = useRef3(onAfterUnlock);
+  const activeTargetsRef = useRef3([]);
+  const viewportLockRef = useRef3(null);
+  const soundRef = useRef3(null);
+  const soundUrlRef = useRef3(soundUrl);
+  const soundVolumeRef = useRef3(soundVolume);
   themeRef.current = theme;
   applyThemeRef.current = applyTheme;
   modeRef.current = mode;
@@ -626,7 +730,7 @@ function useWalrosTheme({
     },
     [storageKey]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const initialTheme = readInitialTheme(
       storageKey,
       defaultTheme,
@@ -708,6 +812,10 @@ function useWalrosTheme({
     activeTargetsRef.current = [];
   }, []);
   const finishGlitch = useCallback(() => {
+    if (soundRef.current) {
+      soundRef.current.pause();
+      soundRef.current.currentTime = 0;
+    }
     removeShakeClasses();
     unlockViewport(true);
     glitchingRef.current = false;
@@ -757,12 +865,13 @@ function useWalrosTheme({
       finishGlitch();
     }, effectiveDuration);
   }, [finishGlitch, lockViewport, persistTheme, playThemeSound, swapDelay, totalDuration]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       clearTimers();
       removeShakeClasses();
       unlockViewport(false);
       soundRef.current?.pause();
+      if (soundRef.current) soundRef.current.currentTime = 0;
       soundRef.current = null;
     };
   }, [clearTimers, removeShakeClasses, unlockViewport]);
@@ -776,9 +885,12 @@ function useWalrosTheme({
   };
 }
 export {
+  DirectionalCursor,
+  Walros3DPortalTransition,
   WalrosLogo,
   WalrosPortalTransition,
   WalrosThemeGlitch,
+  WalrosThemeTransition,
   WalrosWordmark,
   useWalrosTheme,
   walrosLogoChromeUrl,