@walrosproject/ui

Transición, cambio de tema y cursor oficiales de WalrOS para proyectos React.

npm install @walrosproject/ui

Cambio de tema completo

WalrosThemeTransition muestra exclusivamente el glitch visual de walros.org: bandas, destellos y sacudida de la página, sin silueta ni logo. El glitch dura 1.500 ms; el tema cambia a los 610 ms y el audio se detiene al concluir los 1.500 ms. La entrada de la página es un componente independiente.

import {
  WalrosThemeTransition,
  DirectionalCursor,
  useWalrosTheme,
} from "@walrosproject/ui";

export function App() {
  const { theme, glitching, toggleTheme } = useWalrosTheme();

  return (
    <>
      <button type="button" onClick={toggleTheme} disabled={glitching}>
        Tema: {theme}
      </button>
      <WalrosThemeTransition active={glitching} />
      <DirectionalCursor />
    </>
  );
}

El hook guarda walros-theme en localStorage y aplica la clase dark al elemento raíz. Usa applyTheme si tu proyecto utiliza otra convención. El sonido oficial está incluido, a volumen 0.52. Puedes desactivarlo o sustituirlo con soundUrl: false o una URL propia. La reproducción debe iniciarse con toggleTheme() desde una interacción del usuario para respetar las restricciones de audio de los navegadores.

Para escenas parallax o GSAP, utiliza mode: "viewport" y pasa un wrapper estable en shakeTargets. onAfterUnlock permite actualizar ScrollTrigger después de restaurar el scroll. En páginas convencionales, el modo predeterminado body reproduce el movimiento de WalrOS.

const theme = useWalrosTheme({
  mode: "viewport",
  shakeTargets: [sceneRef],
  onAfterUnlock: () => ScrollTrigger.update(),
});

WalrosThemeGlitch sigue disponible como componente individual para proyectos que solo necesiten ese efecto.

Portal de entrada

WalrosPortalTransition abre la página mediante la silueta de la morsa sobre negro, sin mostrar un logo cromado adicional. La silueta crece hacia el centro durante 900 ms y empieza inmediatamente, sin esperar imágenes.

<WalrosPortalTransition storageMode="always" />

storageMode acepta always, session y once. Para usar el modelo 3D real de walros.org como fondo, renderízalo en tu escena y pasa sus límites proyectados a Walros3DPortalTransition:

<Walros3DPortalTransition
  origin={{ centerX, centerY, width, height }}
  onComplete={() => setIntroComplete(true)}
/>

walrosLogo3DUrl se importa desde @walrosproject/ui/model y exporta el GLB oficial solo cuando un proyecto necesita cargarlo; walrosPortalSilhouetteUrl exporta la silueta. El componente ya incluye las tres rutas de la máscara, sin descargar ni analizar un SVG en tiempo de ejecución.

Cursor

DirectionalCursor copia el cursor ajustado de walros.org: 20 × 22 px, seguimiento suave, orientación según la dirección del ratón y estabilización al detenerse. Solo sustituye el cursor nativo con puntero preciso, hover, pantalla de al menos 1024 px y movimiento permitido. En controles y campos de texto conserva el cursor adecuado.

<DirectionalCursor />

Decoración estacional

WalrosSeasonalBackground envuelve la interfaz y coloca sus decoraciones SVG en una capa de fondo: nunca se superponen al contenido, no ocupan espacio, no capturan interacción y respetan prefers-reduced-motion. El calendario automático se resuelve en Europe/Madrid y se actualiza al siguiente cambio de día.

• Halloween: desde el 30 de septiembre a las 00:00 hasta el 1 de noviembre a las 00:00.
• Navidad: desde el 30 de noviembre a las 00:00 hasta el 11 de enero a las 00:00.
• San Valentín: desde el 14 de febrero a las 00:00 hasta el 15 de febrero a las 00:00.

import { WalrosSeasonalBackground } from "@walrosproject/ui";

export function App() {
  return (
    <WalrosSeasonalBackground density={20} style={{ background: "var(--page-background)" }}>
      <YourApp />
    </WalrosSeasonalBackground>
  );
}

Para que las decoraciones se vean, el fondo global de la web debe estar aplicado al wrapper (mediante style o className), y no en una capa fija situada dentro de YourApp. Los fondos opacos de tarjetas y secciones seguirán ocultando correctamente las decoraciones que pasen por detrás. El componente pausa las animaciones al cambiar a otra pestaña y evita filtros de sombra para reducir el trabajo de la GPU.

Para previsualizar una temporada sin esperar a la fecha, utiliza season="halloween", season="winter" o season="valentine". season="none" desactiva la capa. Una vez integrado y desplegado, las campañas se activan cada año sin actualizar los repositorios.

Otros recursos

El paquete conserva WalrosLogo, WalrosWordmark y sus URLs de imagen. Todos los componentes funcionan con React 18 y 19. El portal y el glitch respetan prefers-reduced-motion.

Desarrollo y publicación

npm install
npm run check
npm run build
npm run pack:check

El código y los recursos se distribuyen bajo los términos de LICENSE. WalrOS y sus elementos visuales pertenecen a Alexander Calle.