@walrosproject/ui 0.3.3 → 0.4.0

package/dist/index.js

@@ -1,397 +1,229 @@
-import { useState, useRef, useId, useEffect, useLayoutEffect, useCallback } from 'react';
-import { gsap } from 'gsap';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
 // src/components/WalrosPortalTransition.tsx
-var SILHOUETTE_VIEWBOX = 1254;
+import { useState as useState4 } from "react";
+import { createPortal as createPortal2 } 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/WalrosThemeTransition.tsx
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+
+// 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 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
 }) {
-  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 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) 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";
+    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 targetX = viewport.width / 2 - (visualCenterX - FOCUS_X) * initialScale;
+    const targetY = viewport.height / 2 - (visualCenterY - FOCUS_Y) * initialScale;
+    const diagonal = Math.hypot(viewport.width, viewport.height) / 2;
+    const finalScale = (diagonal + 80) / PORTAL_RADIUS * 1.15;
+    const total = duration / 1e3;
+    gsap.set(portal.current, {
+      x: initialX,
+      y: initialY,
+      scale: initialScale,
+      svgOrigin: "0 0"
+    });
+    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, {
+      timeline.to(overlay.current, { opacity: 0, duration: 0.15, ease: "power1.out" });
+    } else {
+      timeline.to(portal.current, {
+        x: targetX,
+        y: targetY,
+        scale: finalScale,
+        duration: total,
+        ease: "power2.in"
+      }).to(overlay.current, {
         opacity: 0,
-        duration: 0.15,
-        ease: "power1.out"
-      });
-      return;
+        duration: total * 0.1,
+        ease: "power2.out"
+      }, total * 0.9);
     }
-    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
-      });
-      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,
-        {
-          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;
-      }
+      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)) }) })
+        ] }) }),
+        /* @__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;
-function WalrosLogo({
-  alt = "WalrOS",
-  draggable = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: walrosLogoChromeUrl,
-      alt,
-      draggable,
-      ...props
-    }
-  );
-}
-function WalrosWordmark({
-  variant = "light",
-  alt = "WalrOS",
-  draggable = false,
-  ...props
-}) {
-  const src = variant === "dark" ? walrosWordmarkDarkUrl : walrosWordmarkLightUrl;
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt,
-      draggable,
-      ...props
-    }
-  );
-}
+// src/components/WalrosThemeGlitch.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var GLITCH_STYLES = `
 .walros-theme-glitch-root {
   position: fixed;
   inset: 0;
+  z-index: 9998;
   pointer-events: none;
   overflow: hidden;
+  visibility: hidden;
+}
+.walros-theme-glitch-root.is-active {
+  visibility: visible;
 }
 .walros-theme-glitch-root::before,
 .walros-theme-glitch-root::after {
   content: "";
   position: absolute;
   inset: 0;
-  mix-blend-mode: screen;
 }
 .walros-theme-glitch-root::before {
-  background:
-    repeating-linear-gradient(
-      0deg,
-      transparent 0 2px,
-      rgba(59, 130, 246, 0.35) 2px 3px,
-      transparent 3px 5px,
-      rgba(236, 72, 153, 0.28) 5px 6px
-    );
-  animation: walros-glitch-scan 700ms steps(14) forwards;
+  background: rgba(0, 0, 0, .82);
+  mix-blend-mode: normal;
+  animation: walros-glitch-flash 1500ms steps(1, end) both;
 }
 .walros-theme-glitch-root::after {
-  background:
-    linear-gradient(
-      90deg,
-      rgba(6, 182, 212, 0.5),
-      transparent 40%,
-      transparent 60%,
-      rgba(236, 72, 153, 0.5)
-    );
-  animation: walros-glitch-slice 700ms steps(10) forwards;
+  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.09) 3px 4px);
+  animation: walros-glitch-scan 90ms steps(2, end) 16 both;
+}
+.walros-theme-glitch-band {
+  position: absolute;
+  left: -12%;
+  width: 124%;
+  opacity: 0;
 }
+.walros-theme-glitch-band:nth-child(1) { top: 12%; height: 4%; background: #eaf6ff; animation: walros-glitch-band-a 1500ms steps(1, end) both; }
+.walros-theme-glitch-band:nth-child(2) { top: 36%; height: 11%; background: #020407; animation: walros-glitch-band-b 1500ms steps(1, end) both; }
+.walros-theme-glitch-band:nth-child(3) { top: 62%; height: 2%; background: #7faddb; animation: walros-glitch-band-c 1500ms steps(1, end) both; }
+.walros-theme-glitch-band:nth-child(4) { top: 79%; height: 8%; background: #f4f6f5; animation: walros-glitch-band-d 1500ms steps(1, end) both; }
 
 @keyframes walros-glitch-scan {
-  0%   { transform: translate(0, 0); opacity: 1; }
-  15%  { transform: translate(-10px, 6px); opacity: 0.9; }
-  30%  { transform: translate(8px, -4px); opacity: 1; }
-  45%  { transform: translate(-6px, 3px); opacity: 0.85; }
-  60%  { transform: translate(4px, -8px); opacity: 1; }
-  80%  { transform: translate(-3px, 4px); opacity: 0.6; }
-  100% { transform: translate(0, 0); opacity: 0; }
+  0% { transform: translateY(-2px); opacity: .25; }
+  50% { transform: translateY(2px); opacity: .08; }
+  100% { transform: translateY(0); opacity: .2; }
 }
-
-@keyframes walros-glitch-slice {
-  0%   { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; }
-  15%  { clip-path: inset(20% 0 55% 0); transform: translate(-12px, 0); }
-  30%  { clip-path: inset(60% 0 12% 0); transform: translate(14px, 0); }
-  45%  { clip-path: inset(35% 0 40% 0); transform: translate(-10px, 0); }
-  60%  { clip-path: inset(10% 0 75% 0); transform: translate(8px, 0); }
-  75%  { clip-path: inset(72% 0 5% 0); transform: translate(-6px, 0); }
-  90%  { clip-path: inset(25% 0 60% 0); transform: translate(4px, 0); opacity: 0.7; }
-  100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }
+@keyframes walros-glitch-flash {
+  0%, 17%, 22%, 34%, 39%, 54%, 59%, 73%, 78%, 100% { opacity: 0; }
+  18%, 21% { opacity: .18; }
+  35%, 38% { opacity: .48; }
+  55%, 58% { opacity: .82; }
+  74%, 77% { opacity: .22; }
+}
+@keyframes walros-glitch-band-a {
+  0%, 8%, 18%, 42%, 51%, 73%, 82%, 100% { opacity: 0; transform: translateX(0); }
+  9%, 17% { opacity: .55; transform: translateX(-7%); }
+  43%, 50% { opacity: .82; transform: translateX(10%); }
+  74%, 81% { opacity: .32; transform: translateX(-4%); }
+}
+@keyframes walros-glitch-band-b {
+  0%, 20%, 27%, 46%, 55%, 64%, 71%, 100% { opacity: 0; transform: translateX(0); }
+  21%, 26% { opacity: .72; transform: translateX(9%); }
+  47%, 54% { opacity: .9; transform: translateX(-6%); }
+  65%, 70% { opacity: .5; transform: translateX(4%); }
+}
+@keyframes walros-glitch-band-c {
+  0%, 13%, 23%, 39%, 48%, 67%, 76%, 100% { opacity: 0; transform: translateX(0); }
+  14%, 22% { opacity: .9; transform: translateX(5%); }
+  40%, 47% { opacity: .65; transform: translateX(-11%); }
+  68%, 75% { opacity: .75; transform: translateX(8%); }
+}
+@keyframes walros-glitch-band-d {
+  0%, 29%, 38%, 57%, 65%, 85%, 93%, 100% { opacity: 0; transform: translateX(0); }
+  30%, 37% { opacity: .42; transform: translateX(-8%); }
+  58%, 64% { opacity: .7; transform: translateX(7%); }
+  86%, 92% { opacity: .25; transform: translateX(-3%); }
 }
 
 .walros-theme-glitch-lock {
@@ -404,16 +236,17 @@ var GLITCH_STYLES = `
 
 /* Comportamiento original de WalrOS Forum para p\xE1ginas normales. */
 .walros-theme-glitch-page--body {
-  animation: walros-glitch-page-body 500ms steps(8) both;
+  animation: walros-glitch-page-body 1500ms steps(1, end) both;
 }
 
 @keyframes walros-glitch-page-body {
-  0%   { transform: translate(0, 0); filter: none; }
-  20%  { transform: translate(-4px, 2px); filter: hue-rotate(40deg) contrast(1.15); }
-  40%  { transform: translate(5px, -3px); filter: hue-rotate(-30deg) saturate(1.4); }
-  60%  { transform: translate(-3px, 4px); filter: hue-rotate(90deg) contrast(1.1); }
-  80%  { transform: translate(2px, -2px); filter: hue-rotate(-60deg) saturate(1.2); }
-  100% { transform: translate(0, 0); filter: none; }
+  0%, 6%, 18%, 31%, 49%, 68%, 82%, 100% { transform: translate3d(0,0,0) scale(1); filter: none; }
+  7% { transform: translate3d(-18px,4px,0) scale(1.012); filter: contrast(1.5) saturate(.45); }
+  19% { transform: translate3d(26px,-7px,0) scale(1.02) skewX(-1.2deg); filter: contrast(1.9) saturate(1.6); }
+  32% { transform: translate3d(-9px,11px,0) scale(1.03); filter: invert(.12) contrast(2); }
+  50%, 57% { transform: translate3d(34px,-3px,0) scale(1.025); filter: grayscale(1) contrast(2.3); }
+  69% { transform: translate3d(-24px,5px,0) scale(1.016); filter: contrast(1.7) saturate(.2); }
+  83% { transform: translate3d(8px,-2px,0) scale(1.006); filter: contrast(1.35); }
 }
 
 /*
@@ -423,16 +256,17 @@ var GLITCH_STYLES = `
  */
 .walros-theme-glitch-page--viewport {
   transform-origin: 50% var(--walros-glitch-origin-y, 50%);
-  animation: walros-glitch-page-viewport 500ms steps(8) both;
+  animation: walros-glitch-page-viewport 1500ms steps(1, end) both;
 }
 
 @keyframes walros-glitch-page-viewport {
-  0%   { transform: translate3d(0, 0, 0) scale(1.012); filter: none; }
-  20%  { transform: translate3d(-4px, 2px, 0) scale(1.012); filter: hue-rotate(40deg) contrast(1.15); }
-  40%  { transform: translate3d(5px, -3px, 0) scale(1.012); filter: hue-rotate(-30deg) saturate(1.4); }
-  60%  { transform: translate3d(-3px, 4px, 0) scale(1.012); filter: hue-rotate(90deg) contrast(1.1); }
-  80%  { transform: translate3d(2px, -2px, 0) scale(1.012); filter: hue-rotate(-60deg) saturate(1.2); }
-  100% { transform: translate3d(0, 0, 0) scale(1); filter: none; }
+  0%, 6%, 18%, 31%, 49%, 68%, 82%, 100% { transform: translate3d(0,0,0) scale(1.012); filter: none; }
+  7% { transform: translate3d(-18px,4px,0) scale(1.012); filter: contrast(1.5) saturate(.45); }
+  19% { transform: translate3d(26px,-7px,0) scale(1.02) skewX(-1.2deg); filter: contrast(1.9) saturate(1.6); }
+  32% { transform: translate3d(-9px,11px,0) scale(1.03); filter: invert(.12) contrast(2); }
+  50%, 57% { transform: translate3d(34px,-3px,0) scale(1.025); filter: grayscale(1) contrast(2.3); }
+  69% { transform: translate3d(-24px,5px,0) scale(1.016); filter: contrast(1.7) saturate(.2); }
+  83% { transform: translate3d(8px,-2px,0) scale(1.006); filter: contrast(1.35); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -441,6 +275,10 @@ var GLITCH_STYLES = `
     animation: walros-glitch-reduced 150ms ease-out forwards;
   }
 
+  .walros-theme-glitch-band {
+    animation: none !important;
+  }
+
   .walros-theme-glitch-page--body,
   .walros-theme-glitch-page--viewport {
     animation: none;
@@ -458,18 +296,384 @@ function WalrosThemeGlitch({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: GLITCH_STYLES }),
-    active ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("style", { children: GLITCH_STYLES }),
+    active ? /* @__PURE__ */ jsxs2(
       "div",
       {
-        className: ["walros-theme-glitch-root", className].filter(Boolean).join(" "),
+        className: ["walros-theme-glitch-root", "is-active", className].filter(Boolean).join(" "),
         style: { zIndex, ...style },
-        "aria-hidden": "true"
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "walros-theme-glitch-band" }),
+          /* @__PURE__ */ jsx2("span", { className: "walros-theme-glitch-band" }),
+          /* @__PURE__ */ jsx2("span", { className: "walros-theme-glitch-band" }),
+          /* @__PURE__ */ jsx2("span", { className: "walros-theme-glitch-band" })
+        ]
       }
     ) : null
   ] });
 }
+
+// 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/WalrosThemeTransition.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var IMAGE_SIZE = "clamp(90px, 11vw, 150px)";
+var IMAGE_WIDTH = 1254;
+var VISIBLE_LEFT2 = 244;
+var VISIBLE_RIGHT2 = 1010;
+var VISIBLE_TOP2 = 115;
+var VISIBLE_BOTTOM2 = 1128;
+function WalrosPortalScene({
+  logoUrl,
+  portalDuration,
+  zIndex,
+  backgroundColor = "#000",
+  onComplete,
+  lockScroll = false
+}) {
+  const logoRef = useRef2(null);
+  const [origin, setOrigin] = useState3(null);
+  const [portalComplete, setPortalComplete] = useState3(false);
+  const measureLogo = () => {
+    const image = logoRef.current;
+    if (!image) return;
+    const rect = image.getBoundingClientRect();
+    const scale = rect.width / IMAGE_WIDTH;
+    setOrigin({
+      centerX: rect.left + (VISIBLE_LEFT2 + VISIBLE_RIGHT2) / 2 * scale,
+      centerY: rect.top + (VISIBLE_TOP2 + VISIBLE_BOTTOM2) / 2 * scale,
+      width: (VISIBLE_RIGHT2 - VISIBLE_LEFT2) * scale,
+      height: (VISIBLE_BOTTOM2 - VISIBLE_TOP2) * scale
+    });
+  };
+  useLayoutEffect3(() => {
+    const image = logoRef.current;
+    if (image?.complete) measureLogo();
+  }, []);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    !portalComplete && /* @__PURE__ */ jsx3(
+      "img",
+      {
+        ref: logoRef,
+        src: logoUrl,
+        onLoad: measureLogo,
+        onError: measureLogo,
+        alt: "",
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          left: "50%",
+          top: "45%",
+          width: IMAGE_SIZE,
+          height: IMAGE_SIZE,
+          transform: "translate(-50%, -50%)",
+          objectFit: "contain",
+          zIndex,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    !portalComplete && !origin && /* @__PURE__ */ jsx3("div", { style: { position: "fixed", inset: 0, zIndex: zIndex + 1, background: backgroundColor, pointerEvents: "none" }, "aria-hidden": "true" }),
+    !portalComplete && origin && /* @__PURE__ */ jsx3(
+      Walros3DPortalTransition,
+      {
+        origin,
+        duration: portalDuration,
+        zIndex: zIndex + 1,
+        backgroundColor,
+        lockScroll,
+        onComplete: () => {
+          setPortalComplete(true);
+          onComplete?.();
+        }
+      }
+    )
+  ] });
+}
+function WalrosThemeTransition({
+  active,
+  portalDuration = 900,
+  logoUrl = walrosLogoChromeUrl,
+  zIndex = 1e4
+}) {
+  const host = useOverlayHost(zIndex);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const logo = new Image();
+    logo.src = logoUrl;
+  }, [logoUrl]);
+  if (!host) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      active && /* @__PURE__ */ jsx3(WalrosPortalScene, { logoUrl, portalDuration, zIndex }),
+      /* @__PURE__ */ jsx3(WalrosThemeGlitch, { active, zIndex: zIndex + 2 })
+    ] }),
+    host
+  );
+}
+
+// src/components/WalrosPortalTransition.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+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
+}) {
+  const [run] = useState4(() => shouldRun(enabled, storageMode, storageKey));
+  const [complete, setComplete] = useState4(false);
+  const host = useOverlayHost(zIndex);
+  if (!host || !enabled || !run || complete) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx4(
+      WalrosPortalScene,
+      {
+        logoUrl: walrosLogoChromeUrl,
+        portalDuration: duration,
+        backgroundColor,
+        zIndex,
+        lockScroll: true,
+        onComplete: () => {
+          if (storageMode !== "always") {
+            try {
+              getStorage(storageMode)?.setItem(storageKey, "1");
+            } catch {
+            }
+          }
+          setComplete(true);
+          onComplete?.();
+        }
+      }
+    ),
+    host
+  );
+}
+
+// src/components/DirectionalCursor.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } 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 = useRef3(null);
+  const directionLayer = useRef3(null);
+  useEffect3(() => {
+    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__ */ jsxs4(Fragment3, { 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__ */ jsxs4("svg", { width: "50", height: "54", viewBox: "0 0 50 54", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsxs4("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__ */ jsxs4("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 useEffect4,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
 var GLITCH_BASE_CLASS = "walros-theme-glitch-page";
 var GLITCH_BODY_CLASS = "walros-theme-glitch-page--body";
 var GLITCH_VIEWPORT_CLASS = "walros-theme-glitch-page--viewport";
@@ -505,36 +709,59 @@ function useWalrosTheme({
   storageKey = "walros-theme",
   defaultTheme = "light",
   useSystemPreference = false,
-  swapDelay = 220,
-  totalDuration = 720,
+  swapDelay = 610,
+  totalDuration = 1500,
+  soundUrl = walrosThemeGlitchSoundUrl,
+  soundVolume = 0.52,
   applyTheme = defaultApplyTheme,
   mode = "body",
   shakeTargets = [],
   lockScroll,
   onAfterUnlock
 } = {}) {
-  const [theme, setThemeState] = useState(
+  const [theme, setThemeState] = useState5(
     () => readInitialTheme(storageKey, defaultTheme, useSystemPreference)
   );
-  const [mounted, setMounted] = useState(false);
-  const [glitching, setGlitching] = useState(false);
-  const themeRef = useRef(theme);
-  const glitchingRef = useRef(false);
-  const swapTimerRef = useRef(null);
-  const cleanupTimerRef = useRef(null);
-  const applyThemeRef = useRef(applyTheme);
-  const modeRef = useRef(mode);
-  const shakeTargetsRef = useRef(shakeTargets);
-  const lockScrollRef = useRef(lockScroll);
-  const onAfterUnlockRef = useRef(onAfterUnlock);
-  const activeTargetsRef = useRef([]);
-  const viewportLockRef = useRef(null);
+  const [mounted, setMounted] = useState5(false);
+  const [glitching, setGlitching] = useState5(false);
+  const themeRef = useRef4(theme);
+  const glitchingRef = useRef4(false);
+  const swapTimerRef = useRef4(null);
+  const cleanupTimerRef = useRef4(null);
+  const applyThemeRef = useRef4(applyTheme);
+  const modeRef = useRef4(mode);
+  const shakeTargetsRef = useRef4(shakeTargets);
+  const lockScrollRef = useRef4(lockScroll);
+  const onAfterUnlockRef = useRef4(onAfterUnlock);
+  const activeTargetsRef = useRef4([]);
+  const viewportLockRef = useRef4(null);
+  const soundRef = useRef4(null);
+  const soundUrlRef = useRef4(soundUrl);
+  const soundVolumeRef = useRef4(soundVolume);
   themeRef.current = theme;
   applyThemeRef.current = applyTheme;
   modeRef.current = mode;
   shakeTargetsRef.current = shakeTargets;
   lockScrollRef.current = lockScroll;
   onAfterUnlockRef.current = onAfterUnlock;
+  soundUrlRef.current = soundUrl;
+  soundVolumeRef.current = soundVolume;
+  const playThemeSound = useCallback(() => {
+    if (typeof window === "undefined" || !soundUrlRef.current) return;
+    try {
+      if (!soundRef.current || soundRef.current.src !== new URL(soundUrlRef.current, document.baseURI).href) {
+        soundRef.current?.pause();
+        soundRef.current = new Audio(soundUrlRef.current);
+        soundRef.current.preload = "auto";
+      }
+      const audio = soundRef.current;
+      audio.volume = Math.max(0, Math.min(1, soundVolumeRef.current));
+      audio.currentTime = 0;
+      void audio.play().catch(() => {
+      });
+    } catch {
+    }
+  }, []);
   const persistTheme = useCallback(
     (nextTheme) => {
       applyThemeRef.current(nextTheme);
@@ -547,7 +774,7 @@ function useWalrosTheme({
     },
     [storageKey]
   );
-  useEffect(() => {
+  useEffect4(() => {
     const initialTheme = readInitialTheme(
       storageKey,
       defaultTheme,
@@ -629,6 +856,10 @@ function useWalrosTheme({
     activeTargetsRef.current = [];
   }, []);
   const finishGlitch = useCallback(() => {
+    if (soundRef.current) {
+      soundRef.current.pause();
+      soundRef.current.currentTime = 0;
+    }
     removeShakeClasses();
     unlockViewport(true);
     glitchingRef.current = false;
@@ -645,6 +876,7 @@ function useWalrosTheme({
     if (typeof window === "undefined" || typeof document === "undefined" || glitchingRef.current) {
       return;
     }
+    playThemeSound();
     const currentMode = modeRef.current;
     const shouldLockScroll = lockScrollRef.current ?? currentMode === "viewport";
     if (currentMode === "viewport" && shouldLockScroll) {
@@ -676,12 +908,15 @@ function useWalrosTheme({
       cleanupTimerRef.current = null;
       finishGlitch();
     }, effectiveDuration);
-  }, [finishGlitch, lockViewport, persistTheme, swapDelay, totalDuration]);
-  useEffect(() => {
+  }, [finishGlitch, lockViewport, persistTheme, playThemeSound, swapDelay, totalDuration]);
+  useEffect4(() => {
     return () => {
       clearTimers();
       removeShakeClasses();
       unlockViewport(false);
+      soundRef.current?.pause();
+      if (soundRef.current) soundRef.current.currentTime = 0;
+      soundRef.current = null;
     };
   }, [clearTimers, removeShakeClasses, unlockViewport]);
   return {
@@ -693,7 +928,19 @@ function useWalrosTheme({
     setTheme
   };
 }
-
-export { WalrosLogo, WalrosPortalTransition, WalrosThemeGlitch, WalrosWordmark, useWalrosTheme, walrosLogoChromeUrl, walrosPortalSilhouetteUrl, walrosWordmarkDarkUrl, walrosWordmarkLightUrl };
-//# sourceMappingURL=index.js.map
+export {
+  DirectionalCursor,
+  Walros3DPortalTransition,
+  WalrosLogo,
+  WalrosPortalTransition,
+  WalrosThemeGlitch,
+  WalrosThemeTransition,
+  WalrosWordmark,
+  useWalrosTheme,
+  walrosLogoChromeUrl,
+  walrosPortalSilhouetteUrl,
+  walrosThemeGlitchSoundUrl,
+  walrosWordmarkDarkUrl,
+  walrosWordmarkLightUrl
+};
 //# sourceMappingURL=index.js.map