Hyperiux Vault

Hyperiux Vault

Una colección de efectos de animación de alta calidad y componentes interactivos para Next.js - diseñada por Hyperiux.

Más de 150 efectos en total - más de 50 gratuitos y de código abierto, más de 100 efectos Pro disponibles con una suscripción Pro. La CLI instala el código fuente directamente en tu proyecto - eres dueño de lo que instalas.

npx hyperiux add phantom-image-trail	npx hyperiux add milky-way
npx hyperiux add spider-particles	npx hyperiux add immersive-full-screen-nav

---

Inicio Rápido

1. Inicializar

npx hyperiux init

2. Añadir un efecto gratuito

npx hyperiux add rectangular-text-reveal

3. Usarlo

import RectangularTextReveal from "@/components/effects/rectangular-text-reveal";

export default function Page() {
  return <RectangularTextReveal>Hello, world.</RectangularTextReveal>;
}

---

Comandos de la CLI

Comando	Descripción
npx hyperiux init	Inicializa la configuración en tu proyecto
npx hyperiux add <effect>	Añade un efecto a tu proyecto
npx hyperiux list	Lista todos los efectos disponibles
npx hyperiux login	Conecta tu cuenta Pro
npx hyperiux logout	Elimina las credenciales guardadas
npx hyperiux whoami	Muestra el estado de inicio de sesión

Opciones para add

• --overwrite - sobrescribir archivos existentes
• --yes - omitir mensajes de confirmación
• --dry-run - vista previa sin escribir archivos

---

Gratis vs Pro

Más de 50 efectos gratuitos - instala sin ninguna cuenta:

npx hyperiux add rotation-slider
npx hyperiux add spider-particles
npx hyperiux add phantom-image-trail

Más de 100 efectos Pro - requieren una suscripción Pro:

npx hyperiux login       # authenticate once
npx hyperiux add grid-tunnel

Explorar todos los efectos →

---

Efectos

Texto

Animaciones de revelado a nivel de letra y línea - desenfoque, codificación, escalonado, giro en perspectiva, barrido con máscara.

rectangular-text-reveal · blur-text · text-fill-animation · scramble-text · +más

Fondos

Fondos ambientales de canvas y partículas que se sitúan detrás del contenido sin competir por la atención.

dot-transition · dotted-grid · spider-particles

Botones

Tratamientos interactivos para botones - barridos de relleno, brillos metálicos, destellos brillantes y texto que se codifica al pasar el cursor.

arrow-fill-button · link-button · metallic-button · scramble-link-button · shiny-button

Carruseles

Patrones de deslizadores y carruseles más allá de un simple gesto - trayectorias en arco, giros 3D, tiras con paralaje y transiciones de zoom.

arc-flow-carousel · dimensional-switch-slider · ellipse-carousel · orbit-flip-slider · +más

Scroll

Animaciones impulsadas por scroll basadas en GSAP ScrollTrigger - galerías con paralaje, secuencias fijadas, narrativa horizontal y tarjetas apiladas.

sticky-content-wrapper · horizontal-feature-reveal · infinite-perspective-slider · rotation-slider · circular-split-roll · split-canvas · +más

Componentes

Piezas de interfaz pequeñas y autónomas - acordeones, contadores, líneas de tiempo y listas interactivas al pasar el cursor.

animated-faq · border-beam · gooey-counter · gsap-flip-card · +más

Navegación

Menús y barras de navegación con patrones de interacción para escritorio y móvil.

directional-menu · elevate-navbar · immersive-full-screen-nav

Cursor

Efectos de cursor con Canvas 2D y Three.js - estelas de imágenes, seguidores de cuerda, cristal líquido, cuadrículas de caracteres.

phantom-image-trail · pixelated-image-effect · liquid-glass-cursor · magnetic-image-trail · character-trail · rope-cursor · +más

Transiciones

Transiciones de página y sección construidas a partir de cuadrículas animadas y movimiento basado en bloques.

block-transition · chess-grid-transition

Cargadores

Indicadores de carga animados para estados numéricos, apilados y con mucho movimiento.

numeric-tunnel · stack-loader

WebGL

Escenas de Three.js y R3F con shaders GLSL personalizados - carruseles de imágenes, cuadrículas de píxeles, cristal esmerilado, galaxias de partículas GPU y héroes 3D.

interactive-blur-reveal · mouse-pixelation · grid-tunnel · draggable-canvas · milky-way · fractal-glass

Explorar todo →

---

Configuración

hyperiux.json se crea en la raíz de tu proyecto mediante init:

{
  "$schema": "https://vault.hyperiux.com/schema.json",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "effects": "@/components/effects",
    "hooks": "@/hooks",
    "lib": "@/lib"
  }
}

---

Variables de Entorno

Variable	Propósito
HYPERIUX_TOKEN	Usar un token de CLI sin guardarlo localmente (útil en CI)
HYPERIUX_APP_URL	Sobrescribir la URL de la aplicación Hyperiux para autoalojamiento o pruebas
HYPERIUX_API_URL	Sobrescribir la URL de la API independientemente de la URL de la aplicación
HYPERIUX_REGISTRY_URL	Sobrescribir la URL del registro para desarrollo local
HYPERIUX_DEBUG	Establecer en 1 para habilitar registros de solicitudes detallados - no usar en CI compartido

---

Arquitectura

Este es un monorepo de pnpm con Turborepo:

• packages/cli - npx hyperiux herramienta CLI, publicada en npm como hyperiux
• packages/mcp-server - servidor MCP (Model Context Protocol) que permite a los clientes de IA (Claude, Cursor, etc.) explorar e instalar efectos de Vault; publicado en npm como hyperiux-mcp-server
• registry/effects - código fuente de efectos gratuitos, organizado por categoría

El código fuente de los efectos Pro vive en un repositorio privado y se sirve a través de una API protegida. El índice del registro (registry/index.json) lista todos los efectos con metadatos - los contenidos de los archivos Pro no son accesibles públicamente.

Ejecutar el servidor MCP

Añádelo a la configuración MCP de tu cliente mediante npx:

{
  "mcpServers": {
    "hyperiux": {
      "command": "npx",
      "args": ["-y", "hyperiux-mcp-server"]
    }
  }
}

¿Quieres contribuir al propio servidor? Apunta tu cliente MCP a una compilación local en su lugar - consulta packages/mcp-server.

Consulta packages/mcp-server/README.md para ver la lista completa de herramientas y el comportamiento de autenticación de efectos Pro.

---

Contribuciones

¿Encontraste un error o quieres contribuir con un efecto gratuito? Las solicitudes de extracción son bienvenidas.

git clone https://github.com/Hyperiux-Immersion-Labs/hyperiux-components
cd hyperiux-components
pnpm install
pnpm dev

Para añadir un nuevo efecto gratuito, sigue la lista de verificación Añadir un Nuevo Efecto en CLAUDE.md.

---

Requisitos

• Node.js 18+
• Next.js (App Router)
• Tailwind CSS

---

Conectar

🌐 Agencia	hyperiux.com
🎨 Biblioteca de UI	vault.hyperiux.com
💻 GitHub	github.com/Hyperiux-Immersion-Labs

---

Licencia

La CLI hyperiux y el hyperiux-mcp-server están licenciados bajo la Licencia MIT. Los efectos gratuitos instalados a través de la CLI se proporcionan bajo la Licencia de Efectos Hyperiux. Los efectos Pro requieren una suscripción Pro activa de Hyperiux y son propietarios - no son de código abierto ni redistribuibles.