Skip to main content
Glama
Hyperiux-Immersion-Labs

Hyperiux MCP Server

Official

Hyperiux Vault

npm version npm downloads Listed on mcpservers.org

A collection of high-quality animation and interaction effects for Next.js - designed by Hyperiux.

170+ effects in total - 80+ free and open source, 90+ pro effects available with a Pro subscription. The CLI installs source code directly into your project - you own what you install.


Quick Start

1. Initialize

npx hyperiux init

2. Sign in (free account)

npx hyperiux login

3. Add a free effect

npx hyperiux add rectangular-text-reveal

4. Use it

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

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

Related MCP server: MCP Three

CLI Commands

Command

Description

npx hyperiux init

Initialize config in your project

npx hyperiux add <effect>

Add an effect to your project

npx hyperiux list

List all available effects

npx hyperiux outdated

Check installed effects for available updates

npx hyperiux versions

List installed effects and their versions

npx hyperiux diff [effect]

Show what changed upstream for an installed effect (all installed effects if omitted)

npx hyperiux login

Sign in (needed for every install, free effects too)

npx hyperiux logout

Remove saved credentials

npx hyperiux whoami

Show login status

Options for add

  • -o, --overwrite - overwrite existing files

  • -y, --yes - skip confirmation prompts

  • --dry-run - preview without writing files


Free vs Pro

Every install needs a Hyperiux account - create a free one, then sign in once:

npx hyperiux login

80+ free effects - any account (3 a day on Free):

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

90+ pro effects - require a Pro subscription:

npx hyperiux add grid-tunnel

Browse all effects →


Effects

Effects marked (Pro) need a Pro subscription; the rest are free.

Text

Letter-level and line-level reveal animations - blur, scramble, stagger, perspective flip, mask wipe.

rectangular-text-reveal · blur-text (Pro) · text-fill-animation (Pro) · scramble-text (Pro) · +more

Backgrounds

Ambient canvas and particle backgrounds that sit behind content without competing for attention.

dot-transition · dotted-grid · spider-particles

Buttons

Interactive button treatments - fill sweeps, metallic sheens, shiny highlights, and scramble-on-hover text.

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

Carousels

Slider and carousel patterns beyond a plain swipe - arc paths, 3D flips, parallax strips, and zoom transitions.

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

Scroll

Scroll-driven animations built on GSAP ScrollTrigger - parallax galleries, pinned sequences, horizontal storytelling, and stacking cards.

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

Components

Small, self-contained UI pieces - accordions, counters, timelines, and hover-driven lists.

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

Navigation

Menus and navbars with desktop and mobile interaction patterns.

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

Cursor

Canvas 2D and Three.js cursor effects - image trails, rope followers, liquid glass, character grids.

phantom-image-trail · pixelated-image-effect · liquid-glass-cursor · magnetic-image-trail (Pro) · character-trail (Pro) · rope-cursor (Pro) · +more

Transitions

Page and section transitions built from animated grids and block-based motion.

block-transition · chess-grid-transition

Loaders

Animated loading indicators for numeric, stacked, and motion-heavy states.

numeric-tunnel · stack-loader

WebGL

Three.js and R3F scenes with custom GLSL shaders - image carousels, pixel grids, frosted glass, GPU particle galaxies, and 3D heroes.

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

Browse all →


Configuration

hyperiux.json is created at your project root by 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"
  }
}

Environment Variables

Variable

Purpose

HYPERIUX_TOKEN

Use a CLI token without saving it locally (useful in CI)

HYPERIUX_APP_URL

Override the Hyperiux app URL for self-hosting or testing

HYPERIUX_API_URL

Override the API URL independently of the app URL

HYPERIUX_REGISTRY_URL

Override the registry URL for local development

HYPERIUX_DEBUG

Set to 1 to enable verbose request logs - do not use in shared CI

HYPERIUX_TELEMETRY_DISABLED

Set to 1 (or true) to turn off anonymous usage telemetry

DO_NOT_TRACK

Set to 1 to turn off anonymous usage telemetry (standard opt-out)

HYPERIUX_TELEMETRY_URL

Override the telemetry endpoint

Telemetry

The CLI sends anonymous usage telemetry by default (init and add events, CLI version, platform, Node version and a hashed per-project ID - never your project path; if you're signed in, your saved token is attached so installs are credited to your account). It is non-blocking and never interrupts an install. Opt out with HYPERIUX_TELEMETRY_DISABLED=1 or DO_NOT_TRACK=1.


Architecture

This is a pnpm monorepo with Turborepo:

  • packages/cli - npx hyperiux CLI tool, published to npm as hyperiux

  • packages/mcp-server - MCP (Model Context Protocol) server that lets AI clients (Claude, Cursor, etc.) browse, inspect and fetch installable source for Vault effects (read-only - your AI client writes the files); published to npm as hyperiux-mcp-server

  • registry/effects - Free effect source, organized by category

The registry index (registry/index.json) lists the free effects in this repo. The full catalogue, free and Pro, is served from https://vault.hyperiux.com/r. Pro effect source lives in a private repository and is served via a protected API - pro file contents are not publicly accessible.

Running the MCP server

Add it to your client's MCP config via npx:

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

Contributing to the server itself? Point your MCP client at a local build instead - see packages/mcp-server.

See packages/mcp-server/README.md for the full tool list and auth behavior.


Contributing

Found a bug or want to contribute a free effect? Pull requests are welcome.

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

To add a new free effect, follow Adding a free effect in CONTRIBUTING.md.


Requirements

  • React 18+ or Next.js 14+ (App Router or Pages Router). Vite + React projects work too.

  • WebGL / 3D effects use React Three Fiber 9, which needs React 19 (Next.js 15+).

  • Page transitions built on next-transition-router need the Next.js App Router.

  • Tailwind CSS v3 or v4

  • Node.js 18.17+ (20+ recommended)

  • Package manager: npm, pnpm, yarn or bun


Connect


License

  • The hyperiux CLI and the hyperiux-mcp-server are licensed under the MIT License.

  • Free effects in registry/ are licensed under the Mozilla Public License 2.0 (MPL 2.0). No attribution is required.

  • Pro effects are proprietary, licensed under the Hyperiux Pro License, and not included in this repo. They require an active Pro or Pro+ subscription - not open source, not redistributable.

Available Tools

3 tools
hyperiux_get_effectGet Hyperiux Effect DetailsA
Read-onlyIdempotent

Get full details for one Hyperiux Vault effect by its exact slug - description, tier (free/pro), npm dependencies, version, changelog, and install instructions. Optionally includes full source code.

Args:

  • name (string): exact effect slug

  • include_source (boolean, default false): also return component source. Needs a signed-in account for every effect (see below) and counts as one of the day's installs; details-only lookups (false) don't.

Returns JSON: { name, title, description, tier, version, dependencies, changelog, install_command, preview_url, import_path, target, main, import_statement, files: [{ path, content? }] }

  • changelog: array of { version, date, summary, breaking }, newest first

  • files[].content is omitted unless include_source=true AND the caller is signed in (and on Pro, for a Pro effect)

  • import_statement is the exact import line to use after installing (e.g. import DottedGrid from "@/components/effects/dotted-grid";), built from exportKind/exportName/import_path the same way the CLI's own hyperiux add output does - omitted if the registry entry has no import_path

  • install_limit/install_remaining: present on a normal (non-rate-limited) lookup, telling you how many more distinct effects this identity can fetch today - mention this to the user when remaining is low, same as the website's copy toast and the CLI's own "N of M daily installs left" line

No token (or an invalid one) with include_source=true: the response still includes metadata, but files have no content and sign_in_required/sign_in_required_reason tell the user to run npx hyperiux login - every install needs a free account. Don't retry; ask the user to sign in.

Pro effects without a Pro subscription: metadata only, and source_locked explains the effect needs Hyperiux Pro - expected, not an error.

Free effects past the caller's daily install cap: the response still includes metadata but files have no content, and rate_limited/rate_limit_reason explain the daily limit and when to retry - also not an error, it's expected once the cap is hit.

Examples:

  • "What does the dotted-grid effect need?" -> name="dotted-grid" (dependencies field)

  • "Show me the code for dotted-grid" -> name="dotted-grid", include_source=true

  • Don't use when: you don't have an exact slug yet - use hyperiux_list_effects first.

Error Handling:

  • Returns "Effect '' not found" if the slug doesn't exist - check hyperiux_list_effects for the correct spelling.

NameRequiredDescriptionDefault
nameYesExact effect slug, e.g. 'dotted-grid', 'rectangular-text-reveal'. Get this from hyperiux_list_effects.
include_sourceNoInclude full component source in the response. Needs a signed-in Hyperiux account for every effect, free ones included (HYPERIUX_TOKEN env var, or a saved `hyperiux login` session); Pro effects also need a Pro subscription. Fetching source counts as one of the day's installs; leave it false for a details-only lookup.

TDQS

A4.8/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Goes well beyond the readOnly/idempotent annotations: it discloses that source fetches require a signed-in account, count against a daily install cap, that Pro effects need a subscription, and that locked/rate-limited responses are expected rather than errors ('Don't retry'). It also names the sentinel response fields (sign_in_required, source_locked, rate_limited, install_remaining) so the agent can interpret outcomes.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the purpose sentence and organized under clear Args/Returns/Examples/Error Handling headers, so it scans well. However, the sign-in and rate-limit explanation is restated across three paragraphs and duplicates part of the schema's include_source description, so it runs longer than strictly necessary.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

There is no output schema, and the description fully documents the JSON return shape including nested changelog entries and conditional files[].content. Auth, quota, Pro gating, and the not-found error are all covered, so an agent has everything needed to call and interpret it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline would be 3, but the description adds real meaning: include_source's default of false, the quota cost implication, and the auth gating, plus a worked example for each value. Marginal redundancy with the schema's own include_source description keeps it from a 5.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Opens with a specific verb and resource ('Get full details for one Hyperiux Vault effect by its exact slug') and enumerates exactly what is returned. It is clearly differentiated from hyperiux_list_effects, which is named both as the alternative and in the error-handling section.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly states when to use it (you have an exact slug), when not to ('Don't use when: you don't have an exact slug yet - use hyperiux_list_effects first'), and gives three concrete usage examples including the include_source=true variant. The alternative and the condition selecting it are both named.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

hyperiux_list_categoriesList Hyperiux Effect CategoriesA
Read-onlyIdempotent

List every effect category in the Hyperiux Vault catalog with how many effects are in each - useful before calling hyperiux_list_effects with a category filter, to confirm the exact category slug and see relative size.

Returns JSON: { categories: [{ category, count }] }, sorted by count descending.

Examples:

  • "What kinds of effects does Hyperiux have?" -> call with no args

  • Don't use when: you already know the category slug and just want its effects - call hyperiux_list_effects directly.

NameRequiredDescriptionDefault

No parameters

TDQS

A4.7/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnly, idempotent, non-destructive, and openWorld, so the safety profile is covered. The description adds non-redundant behavioral details: the exact JSON return format, the sort order (count descending), and that it takes no arguments. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Every sentence earns its place: purpose, return shape, sort order, usage example, and a clear don't-use-when rule. The structure front-loads the core behavior and uses compact examples instead of verbose prose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a zero-parameter, read-only listing tool with no output schema, the description fully covers what an agent needs: what it returns, in what order, when to call it, and when to choose a sibling instead. Nothing essential is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

There are zero parameters, so the schema and context signals already make parameter usage trivial. The description still explicitly confirms invocation with no args, aligning with the baseline for param-free tools.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('List'), a clear resource ('every effect category in the Hyperiux Vault catalog'), and the key detail of per-category effect counts. The differentiation from siblings is explicit by focusing on categories as distinct from effects and individual effect retrieval.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides explicit guidance: use before hyperiux_list_effects with a category filter to confirm slugs and sizes, and explicitly says not to use it when the slug is already known and effects are wanted. It names the exact alternative tool and the condition under which to switch.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

hyperiux_list_effectsList Hyperiux Vault EffectsA
Read-onlyIdempotent

Browse or search the Hyperiux Vault catalog of React/Next.js interaction effects (scroll systems, cursor trails, WebGL scenes, animated buttons, page transitions, etc).

Each result includes tier ("free" or "pro") - use this to answer "how many free/pro effects are there" or "which of these are free" directly from one call, by filtering/counting the returned list yourself. Don't estimate or guess these counts, and don't call hyperiux_get_effect per-item just to total them up - it's unnecessary here. hyperiux_get_effect is still the right call for one specific effect's full description/props/changelog.

Args:

  • query (string, optional): substring match against effect name

  • category (string, optional): filter to one category slug

  • limit (number, default 30, max 100)

  • offset (number, default 0)

Returns JSON: { total, count, offset, effects: [{ name, category, categories, dependencies, version, tier }], has_more, next_offset? }

Examples:

  • "What cursor effects are available?" -> category="cursor"

  • "Is there anything with 'particles' in the name?" -> query="particles"

  • "How many free effects are there?" -> call with a limit high enough to cover total (check total/has_more first), then count tier === "free" yourself.

  • Don't use when: you need one effect's full description/props/changelog - use hyperiux_get_effect instead.

NameRequiredDescriptionDefault
limitNoMaximum results to return.
queryNoCase-insensitive substring match against effect name (e.g. 'cursor', 'text-reveal'). Omit to list all.
offsetNoNumber of results to skip for pagination.
categoryNoFilter to one category, e.g. 'text', 'cursor', 'scroll', 'webgl', 'buttons', 'carousels', 'components', 'navigation', 'backgrounds', 'loaders', 'transitions'. Use hyperiux_list_categories to see all valid values with counts.

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint, idempotentHint and openWorldHint, so the safety profile is covered; the description adds the return payload shape (total/count/has_more/next_offset) and pagination behavior, which is valuable since no output schema exists. It stops short of noting catalog freshness or rate limits, so it is strong but not exhaustive.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded purpose followed by labeled Args/Returns/Examples blocks, which is easy for an agent to parse. Slightly verbose in the repeated warnings about not calling hyperiux_get_effect to count, but each block is functional.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a read-only list tool with no output schema, the description supplies the return field list, pagination semantics, and the tier-based counting caveat an agent needs to answer aggregate questions correctly. Nothing required to call it or interpret results is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3, but the description goes beyond it by pairing each parameter with a real intent example (category='cursor', query='particles') and explaining the limit/has_more interaction needed for counting. It does not restate defaults or bounds already in the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Opens with a specific verb+resource pair ('Browse or search the Hyperiux Vault catalog of React/Next.js interaction effects') and enumerates the effect types covered. It clearly separates this list/search operation from hyperiux_get_effect, so an agent can route without reading schemas.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides explicit routing guidance: use this for aggregate counts and tier filtering, do not call hyperiux_get_effect per-item to total them, and 'Don't use when' names the sibling that handles single-effect detail. The three intent-to-argument examples make the mapping concrete.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv1.2.0
    • Changedhyperiux_get_effect2 fields changed
      • changedInput schema / properties / include_source / description
        Previous value: -"Include full component source in the response. Free-tier effects always include it; Pro-tier effects only include it if a Hyperiux token is available (HYPERIUX_TOKEN env var, or a saved `hyperiux login` session)."New value: +"Include full component source in the response. Needs a signed-in Hyperiux account for every effect, free ones included (HYPERIUX_TOKEN env var, or a saved `hyperiux login` session); Pro effects also need a Pro subscription. Fetching source counts as one of the day's installs; leave it false for a details-only lookup."
      • changedInput schema / properties / name / description
        Previous value: -"Exact effect slug, e.g. 'dotted-grid', 'circle-text-reveal'. Get this from hyperiux_list_effects."New value: +"Exact effect slug, e.g. 'dotted-grid', 'rectangular-text-reveal'. Get this from hyperiux_list_effects."
    • Changedhyperiux_list_effects1 field changed
      • changedInput schema / properties / category / description
        Previous value: -"Filter to one category, e.g. 'text', 'cursor', 'webgl', 'buttons', 'carousels', 'components', 'navigation', 'backgrounds', 'loaders', 'transitions'. Use hyperiux_list_categories to see all valid values with counts."New value: +"Filter to one category, e.g. 'text', 'cursor', 'scroll', 'webgl', 'buttons', 'carousels', 'components', 'navigation', 'backgrounds', 'loaders', 'transitions'. Use hyperiux_list_categories to see all valid values with counts."
  2. 3 tool updatesv0.1.0
    • First observedhyperiux_get_effect
    • First observedhyperiux_list_categories
    • First observedhyperiux_list_effects

TDQS

A4.6/5.0

Scored across 3 tools

Disambiguation5/5

Each tool targets a distinct operation: browse/search the catalog, fetch one effect's full detail, and enumerate category slugs with counts. Descriptions go further than most servers by including explicit 'Don't use when' guidance pointing at the sibling tool to use instead, eliminating the list-vs-get overlap.

Naming Consistency5/5

All three tools follow a strict `hyperiux_verb_noun` pattern (list_effects, get_effect, list_categories) with a uniform server prefix. No mixing of camelCase, vague verbs, or divergent conventions.

Tool Count4/5

Three tools is on the lean side of the 3-15 sweet spot, but each earns its place for a read-only catalog browser: discovery, drill-down, and taxonomy. Nothing feels padded or redundant.

Completeness4/5

List + get + categories covers catalog discovery and detail well, including source retrieval, install metadata, and clear error/rate-limit paths. Minor gaps: no tier or dependency filter (agents must over-fetch and count client-side, as the description itself admits) and no dedicated install/setup tool, leaving that to the CLI.

Maintenance

ActivityActive
ResponsivenessSlow

Related MCP Connectors

Related MCP Servers