Hyperiux Vault

Servidor MCP para o registro de efeitos do Hyperiux Vault — navegue, pesquise e instale efeitos de animação React/Next.js para clientes de codificação com IA.

GitHub
38

Documentação

Hyperiux Vault

npm version npm downloads

Uma coleção de efeitos de animação de alta qualidade e componentes interativos para Next.js - projetada pela Hyperiux.

Mais de 150 efeitos no total - 50+ gratuitos e de código aberto, 100+ efeitos Pro disponíveis com uma assinatura Pro. A CLI instala o código-fonte diretamente no seu projeto - você é dono do que instala.

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

Início Rápido

1. Inicialize

npx hyperiux init

2. Adicione um efeito gratuito

npx hyperiux add rectangular-text-reveal

3. Use-o

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

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

Comandos da CLI

ComandoDescrição
npx hyperiux initInicializa a configuração no seu projeto
npx hyperiux add <effect>Adiciona um efeito ao seu projeto
npx hyperiux listLista todos os efeitos disponíveis
npx hyperiux loginConecta sua conta Pro
npx hyperiux logoutRemove credenciais salvas
npx hyperiux whoamiMostra o status de login

Opções para add

  • --overwrite - sobrescreve arquivos existentes
  • --yes - pula prompts de confirmação
  • --dry-run - visualiza sem gravar arquivos

Gratuito vs Pro

50+ efeitos gratuitos - instale sem precisar de conta:

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

100+ efeitos Pro - exigem uma assinatura Pro:

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

Explorar todos os efeitos →

Efeitos

Texto

Animações de revelação em nível de letra e linha - desfoque, embaralhamento, escalonamento, giro em perspectiva, limpeza com máscara.

rectangular-text-reveal · blur-text · text-fill-animation · scramble-text · +mais

Fundos

Fundos ambientais com canvas e partículas que ficam atrás do conteúdo sem competir por atenção.

dot-transition · dotted-grid · spider-particles

Botões

Tratamentos interativos para botões - preenchimento com varredura, brilho metálico, realces brilhantes e texto embaralhado ao passar o mouse.

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

Carrosséis

Padrões de slider e carrossel além do simples deslizar - trajetórias em arco, giros 3D, faixas com parallax e transições com zoom.

arc-flow-carousel · dimensional-switch-slider · ellipse-carousel · orbit-flip-slider · +mais

Scroll

Animações conduzidas por scroll construídas com GSAP ScrollTrigger - galerias com parallax, sequências fixadas, narrativas horizontais e cartões empilhados.

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

Componentes

Pequenas peças de UI autocontidas - acordeões, contadores, linhas do tempo e listas com interação ao passar o mouse.

animated-faq · border-beam · gooey-counter · gsap-flip-card · +mais

Navegação

Menus e barras de navegação com padrões de interação para desktop e mobile.

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

Cursor

Efeitos de cursor com Canvas 2D e Three.js - rastros de imagem, seguidores de corda, vidro líquido, grades de caracteres.

phantom-image-trail · pixelated-image-effect · liquid-glass-cursor · magnetic-image-trail · character-trail · rope-cursor · +mais

Transições

Transições de página e seção construídas com grades animadas e movimento baseado em blocos.

block-transition · chess-grid-transition

Carregadores

Indicadores de carregamento animados para estados numéricos, empilhados e com muito movimento.

numeric-tunnel · stack-loader

WebGL

Cenas com Three.js e R3F usando shaders GLSL personalizados - carrosséis de imagem, grades de pixels, vidro fosco, galáxias de partículas com GPU e heróis 3D.

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

Explorar todos →

Configuração

hyperiux.json é criado na raiz do seu projeto pelo 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"
  }
}

Variáveis de Ambiente

VariávelFinalidade
HYPERIUX_TOKENUsa um token da CLI sem salvá-lo localmente (útil em CI)
HYPERIUX_APP_URLSubstitui a URL do aplicativo Hyperiux para self-hosting ou testes
HYPERIUX_API_URLSubstitui a URL da API independentemente da URL do aplicativo
HYPERIUX_REGISTRY_URLSubstitui a URL do registro para desenvolvimento local
HYPERIUX_DEBUGDefina como 1 para habilitar logs detalhados de requisições - não use em CI compartilhado

Arquitetura

Este é um monorepo pnpm com Turborepo:

  • packages/cli - npx hyperiux ferramenta CLI, publicada no npm como hyperiux
  • packages/mcp-server - servidor MCP (Model Context Protocol) que permite que clientes de IA (Claude, Cursor, etc.) naveguem e instalem efeitos do Vault; publicado no npm como hyperiux-mcp-server
  • registry/effects - código-fonte dos efeitos gratuitos, organizado por categoria

O código-fonte dos efeitos Pro vive em um repositório privado e é servido por meio de uma API protegida. O índice do registro (registry/index.json) lista todos os efeitos com metadados - os conteúdos dos arquivos Pro não são publicamente acessíveis.

Executando o servidor MCP

Adicione-o à configuração MCP do seu cliente via npx:

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

Quer contribuir com o próprio servidor? Aponte seu cliente MCP para uma build local - veja packages/mcp-server.

Consulte packages/mcp-server/README.md para a lista completa de ferramentas e o comportamento de autenticação de efeitos Pro.

Contribuindo

Encontrou um bug ou quer contribuir com um efeito gratuito? Pull requests são bem-vindos.

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

Para adicionar um novo efeito gratuito, siga a lista de verificação Adicionando um Novo Efeito no CLAUDE.md.

Requisitos

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

Conecte-se

🌐 Agênciahyperiux.com
🎨 Biblioteca de UIvault.hyperiux.com
💻 GitHubgithub.com/Hyperiux-Immersion-Labs

Licença

A CLI hyperiux e o hyperiux-mcp-server são licenciados sob a Licença MIT. Os efeitos gratuitos instalados pela CLI são fornecidos sob a Licença de Efeitos Hyperiux. Os efeitos Pro exigem uma assinatura Hyperiux Pro ativa e são proprietários - não são código aberto e não podem ser redistribuídos.