Hyperiux MCP Server
OfficialThis MCP server provides read-only access to the Hyperiux Vault catalog for browsing, searching, inspecting, and fetching installable React/Next.js effects.
List or search effects by name and category, with pagination.
List all effect categories with effect counts.
Get full metadata for one effect, including description, tier, dependencies, version, changelog, install command, and import path.
Optionally fetch effect source code when authenticated, subject to free/pro access and daily install limits.
Filter/count returned effects by tier to determine free vs. pro availability.
Hyperiux Vault
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 init2. Sign in (free account)
npx hyperiux login3. Add a free effect
npx hyperiux add rectangular-text-reveal4. 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 |
| Initialize config in your project |
| Add an effect to your project |
| List all available effects |
| Check installed effects for available updates |
| List installed effects and their versions |
| Show what changed upstream for an installed effect (all installed effects if omitted) |
| Sign in (needed for every install, free effects too) |
| Remove saved credentials |
| 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 login80+ free effects - any account (3 a day on Free):
npx hyperiux add rotation-slider
npx hyperiux add spider-particles
npx hyperiux add phantom-image-trail90+ pro effects - require a Pro subscription:
npx hyperiux add grid-tunnelEffects
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
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 |
| Use a CLI token without saving it locally (useful in CI) |
| Override the Hyperiux app URL for self-hosting or testing |
| Override the API URL independently of the app URL |
| Override the registry URL for local development |
| Set to |
| Set to |
| Set to |
| 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 hyperiuxCLI tool, published to npm ashyperiuxpackages/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 ashyperiux-mcp-serverregistry/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 testTo 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-routerneed the Next.js App Router.Tailwind CSS v3 or v4
Node.js 18.17+ (20+ recommended)
Package manager: npm, pnpm, yarn or bun
Connect
🌐 Agency | |
🎨 UI Library | |
💻 GitHub |
License
The
hyperiuxCLI and thehyperiux-mcp-serverare 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 toolshyperiux_get_effectGet Hyperiux Effect DetailsARead-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 ownhyperiux addoutput does - omitted if the registry entry has no import_pathinstall_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.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Exact effect slug, e.g. 'dotted-grid', 'rectangular-text-reveal'. Get this from hyperiux_list_effects. | |
| include_source | No | 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. |
TDQS
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.
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.
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.
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.
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.
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 CategoriesARead-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.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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 EffectsARead-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.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | Maximum results to return. | |
| query | No | Case-insensitive substring match against effect name (e.g. 'cursor', 'text-reveal'). Omit to list all. | |
| offset | No | Number of results to skip for pagination. | |
| category | No | 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. |
TDQS
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.
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.
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.
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.
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.
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.
2 tool updates
v1.2.0- Changed
hyperiux_get_effect2 fields changed- changed
Input schema / properties / include_source / descriptionPrevious 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." - changed
Input schema / properties / name / descriptionPrevious 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."
- Changed
hyperiux_list_effects1 field changed- changed
Input schema / properties / category / descriptionPrevious 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."
3 tool updates
v0.1.0- First observed
hyperiux_get_effect - First observed
hyperiux_list_categories - First observed
hyperiux_list_effects
TDQS
Scored across 3 tools
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.
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.
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.
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
Related MCP Connectors
Search attributed motion recipes and prepare prompts for your coding agent. No API key required.
React components and blocks with motion. Search docs, props and shadcn install commands.
Connect AI assistants to your GitHub-hosted Obsidian vault to seamlessly access, search, and analy…
React + Tailwind UI components and recipes your AI coding tool can search and install.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceProvides AI assistants with comprehensive access to Motion.dev animation library documentation and code generation tools. Enables LLMs to generate Motion animations for React, JavaScript, and Vue with proper documentation backing and framework conversion capabilities.14MIT
- FlicenseAqualityDmaintenanceEnables working with 3D models by converting GLTF/GLB files into React Three Fiber JSX components and analyzing model structures, hierarchies, and properties for debugging and optimization.26 npm26-
- FlicenseAqualityDmaintenanceProvides AI assistants with direct access to shadcn/ui components and blocks, enabling real-time fetching of component source code, documentation, and implementation examples.419 npm4-
- AlicenseBqualityAmaintenanceEnables AI assistants to create, animate, and export ASCII art using natural language, with live browser sync.9652 npm12MIT