motionprompts MCP
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| search_componentsA | Find the components that best fit a natural-language brief (e.g. "un hero elegante para una marca de lujo", "cartas apiladas al hacer scroll") or a name/alias. Returns a ranked, compact list with a |
| get_componentA | Fetch one component by slug. |
| list_facetsA | Return the filter vocabulary (mood, useCase, level, perfCost, category, deps) with how many components carry each value. Call this first to learn the exact values search_components accepts. |
| list_componentsA | Browse the whole catalog as a compact list (slug, title, useWhen, mood, useCase, level, perfCost). Use for an overview or when a brief is vague; use search_components when you have a specific brief. |
| list_motion_systemsA | The 8 motion systems of the library: token sets (ease/duration/stagger/lenis) derived from the measured inventory, not invented. Use this FIRST when composing a page: pick one system and render every component's prompt with it so the page moves coherently. |
| get_motion_systemB | Full token set of a motion system plus the components that are native to it. |
| search_components_motionA | Filters by the CAPA-1 motion block (trigger, libs, complexity, motion system) rather than by prose. Prefer this over search_components when composing a page: |
| get_integration_contractA | Given the slugs you intend to put on ONE page, returns: rule violations (hard, invalidate the page), warnings, the measured budget (JS gzip / assets / scroll corridor), and an ordered init plan — single Lenis instance, CustomEase registration, entry veil first, one ScrollTrigger.refresh() at the end, WebGL loop gating. Every step cites the evidence it comes from. |
| plan_imageryA | Qué imagen necesita cada sección, CON QUÉ MODELO se hace y cómo se redacta el prompt. Con la arquitectura y el movimiento resueltos, lo que sigue delatando una página generada son las imágenes: genéricas del sector en vez de específicas de la sección, sin una sola persona, y todas rectángulos con fondo. Esta tool devuelve el enrutado por modelo (personas ≠ objetos ≠ paisaje: no son intercambiables), la receta de transparencia (fondo magenta plano y quitado después, porque ningún modelo devuelve alfa), la de las hojas de seis recortes por generación, y de dónde salen los logotipos reales (Wikimedia, nunca generados). NO genera imágenes, no usa ninguna clave y no hace ninguna llamada de red: devuelve texto. Llámala DESPUÉS de plan_page y ANTES de escribir un solo prompt de imagen. |
| plan_pageA | Returns the SECTIONS a page of this kind needs — 10 to 14 of them, each with a role, what it has to accomplish, what content it needs, and whether it should move — plus a motion system and its tokens. It returns NO components on purpose: a page can only be as rich as the list it is composed from, and composing from animation mechanics caps every page at five sections. Ask for mechanics afterwards, one section at a time, with suggest_mechanics. It also names the roles the catalog cannot cover, so you write those from the system tokens instead of adopting the least-bad search hit. An optional |
| suggest_mechanicsA | Given a section role from plan_page and what that section has to do, returns ranked candidate components — filtered first by the catalog facets that actually correspond to the role, then ranked by the free-text need. Prefer this over search_components when building a planned page. Crucially, it can answer that the catalog has NOTHING for a role (counters, progress bars, pricing tables, FAQ accordions, data tables) instead of returning the least-bad hit dressed up as an answer — search_components cannot tell you that, and its top result for 'accordion' is a horizontal image gallery. When the verdict is |
| suggest_page_treatmentsA | The twin of suggest_mechanics for the family that does not fill a section slot: smooth scroll, the shaped edge BETWEEN two stacked sections, a background that runs behind the whole page, a custom cursor, route transitions. These were unreachable from the planner because the whole model assumed a mechanic occupies one slot in |
| get_component_promptA | THE way to get a build prompt. Returns three blocks: (a) the standalone prompt VERBATIM, untouched; (b) the tokens of the requested motion system; (c) an explicit instruction telling you to adapt (a) to (b) YOURSELF, preserving arithmetic relationships — if a duration holds up a sum, a chained sequence or a ScrollTrigger |
| render_promptA | DEPRECATED in favour of get_component_prompt. Mechanical substitution does not fit this corpus: the prompts narrate their own numbers in prose, so replacing only the code values makes prose and code specify different components (judged 11/30). Coverage is deliberately narrow: 164 of 219 components have ZERO substitutable values because their prompts narrate their own numbers in prose ('over 4s', 'durations are 1'), and substituting those would make prose and code contradict each other. For those components this returns the prompt unchanged. See DECISIONS.md D15. Returns the component's build prompt with its motion tokens (ease/duration/stagger) replaced by the chosen motion system's values, so several components share one timing language. Values that are STRUCTURAL to the effect (elastic overshoot, loop cadence, scrub linearity, shader/physics constants) are never substituted — they come back listed under 'Valores no parametrizables'. Omit |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| catalog | Full component index with facets. |
| 24/7 Artists Image Trail | Úsalo en un hero cuando quieras una estela de imágenes editoriales que aparezcan siguiendo el cursor con reveal por franjas clip-path. |
| 3D Circular Image Gallery | Úsalo como galería inmersiva donde decenas de miniaturas forman un anillo 3D que gira con el scroll, se inclina con el ratón y muestra una previsualización al hacer hover. |
| 3D CRT Display | Úsalo cuando quieras un hero impactante que muestre proyectos dentro de un monitor CRT 3D con glitch y estética neón cyberpunk al pasar el cursor. |
| 3D Parallax Reveal Footer | Úsalo cuando quieras cerrar la página con un footer que revela un modelo 3D en parallax al hacer scroll y reacciona sutilmente al mouse. |
| 3D Scroll Tunnel | Úsalo cuando quieras una galería inmersiva de portfolio o moda donde las imágenes viajan en un túnel 3D infinito controlado por la rueda del ratón. |
| ThreeJS 3D Slider | Úsalo para una galería o portfolio inmersivo donde las imágenes con títulos avanzan en bucle sobre un plano 3D curvado al hacer scroll. |
| ScrollTrigger 404 Horizontal Scroll + Parallax | Úsalo para una página 404 (o sección hero) que se recorre en horizontal al scrollear, con tarjetas de imagen que se desplazan y giran en parallax. |
| Accordion Frames Spotlight Row | Úsalo cuando quieras una galería editorial de retratos en franjas verticales que se expanden al pasar el cursor o tocar, con un foco tipo spotlight. |
| Adaline Scroll Animation | Úsalo para un hero cinematográfico donde el scroll reproduce un video/secuencia de imágenes en canvas mientras el título y un mockup entran en 3D. |
| Advanced Infinite Scroll | Úsalo para un menú o índice vertical que gira infinitamente con arrastre y rueda, con inercia suave y filas que escalan y rotan según la velocidad. |
| AlaDesign Landing Page Reveal | Úsalo para la entrada de una landing de moda o portfolio donde un preloader con contador desemboca en un nombre gigante y foto editorial. |
| Sci-Fi Preloader Button Hero Reveal | Úsalo cuando quieras una intro sci-fi tipo terminal que carga sola y, al pulsar un botón, revela el hero con el titular apareciendo palabra a palabra. |
| Anchored Headline with Speech Bubbles | Cuando hay reseñas o citas de terceros y no quieres un carrusel con flechas que nadie pulsa. |
| Arch Portal Reveal | Cuando quieres que entrar en una sección se sienta como cruzar una puerta y no como que aparezca un bloque. |
| Aristide Benoist Slider | Cuando quieras un carrusel horizontal a pantalla completa con navegación por segmentos, cambio de color y títulos tipográficos animados al hacer clic. |
| Responsive Fullscreen Menu | Úsalo cuando quieras un menú overlay a pantalla completa con revelado de enlaces escalonado y una pila de imágenes con parallax y tilt 3D siguiendo el ratón. |
| Art Tech Overlay Navigation | Úsalo cuando quieras un menú overlay a pantalla completa que se despliega con bloques verticales en clip-path escalonado y enlaces que aparecen tras un botón burger. |
| ASCII Image Reveal Effect | Úsalo cuando quieras una galería editorial en blanco y negro que se revele al cargar, con cada foto formándose desde arte ASCII antes de aparecer nítida. |
| Ashfall 3D Cylinder Gallery | Úsalo como galería o portfolio inmersivo en 3D donde las imágenes giran en un cilindro y el scroll mueve la cámara verticalmente. |
| Cursor Smudge Revealer | Úsalo cuando quieras un hero interactivo donde el visitante frota con el cursor o el dedo para borrar la capa oscura y descubrir el texto oculto. |
| Asset ORB | Cuando quieras una galeria de imagenes en 3D como esfera navegable, arrastrable y con zoom, para portfolios o archivos visuales. |
| Audemars Piguet Overlay Menu | Úsalo cuando quieras un menú overlay a pantalla completa de lujo, con tipografía serif refinada y enlaces que se revelan al abrir el hamburguesa. |
| Autoplay Hero with Progress | Cuando la portada tiene que enseñar cuatro cosas y ninguna manda sobre las otras: programación, temporada, cartel. |
| BarbaJS Page Transitions | Úsalo para transicionar entre páginas o rutas con una cortina blanca que sube y baja, revelando el título de la nueva página desde una máscara. |
| Barrett & Hale Scroll Animation | Úsalo para una lista de logos o clientes donde un título fijo se mantiene centrado y las filas se separan y agrandan al hacer scroll. |
| Circular Futuristic Navigation Menu | Cuando quieras un menú de navegación fullscreen distinto: segmentos en disposición circular con joystick arrastrable y estética glitch futurista. |
| Block Reveal Page Transition | Úsalo para transicionar entre páginas o secciones a pantalla completa con una cortina de bloques pixelados que tapa y revela el nuevo contenido. |
| BrandAppart Sticky Cards | Úsalo cuando quieras presentar 3-5 proyectos o features apilados que se revelan uno a uno al hacer scroll, con estilo llamativo y tipografía grande. |
| Brutalist Sci-fi Corridor | Cuando quieres un hero inmersivo en 3D con preloader de contador y una escena WebGL que se revela al cargar, para marcas futuristas o brutalistas. |
| Burocratik Image Trail | Úsalo en un hero o sección editorial cuando quieras que fotos aparezcan y desaparezcan siguiendo el cursor con rotaciones y escalado suaves. |
| Camille Mormal Slider | Cuando necesitas un slider de imágenes a pantalla completa con transiciones clip-path y navegación por clic o miniaturas. |
| Cappen Fluid Simulation | Úsalo cuando quieras un hero impactante donde el cursor arrastra tinta líquida que fluye e invierte un titular tipográfico gigante en blanco. |
| Capsules Animated Sticky Columns | Úsalo para una sección de scroll fijada donde columnas tipo cápsula (texto e imágenes) se intercambian por fases con clip-path y SplitText. |
| Capsules Animated Sticky Cards | Úsalo para presentar 3-5 proyectos o features a pantalla completa que se revelan uno a uno al hacer scroll, con una carta inicial que crece desde una cápsula redondeada. |
| Interactive Calendar Cards | Úsalo para una lista de tarjetas mensuales tipo calendario donde cada celda de una cuadrícula abre, al hacer clic, una ficha con imagen, texto y enlace con rebote elástico. |
| Halide — Chromatic Aberration Lens Archive | Cuando quieras una galería inmersiva a pantalla completa con una lente de aberración cromática que magnifica y distorsiona las imágenes bajo el cursor. |
| Cielrose Inspired ThreeJS Slider | Cuando quieras un slider de imagenes inmersivo en WebGL con transicion de barrido y distorsion por scroll, sin depender de GSAP. |
| Circular Image Gallery | Cuando quieras mostrar una coleccion de imagenes en un anillo circular animado, con foco al hacer clic en cada tile. |
| Clayboan Scroll Animation | Úsalo para un portfolio o galería a pantalla completa donde cada proyecto se revela con scroll suave, clip-path angular y títulos que suben letra a letra. |
| Contact Form Reveal | Úsalo cuando quieras un hero con título gigante revelado carácter a carácter y un formulario de contacto que aparece en overlay a pantalla completa al pulsar un botón. |
| Creative Clutter Flip Layouts | Úsalo cuando quieras un hero tipo collage de escritorio con objetos recortados que saltan entre caos y cuadrícula al pulsar botones. |
| CriticalDanger Scroll Cards | Úsalo para presentar features o productos con scroll horizontal y un titular gigante, mientras tarjetas entran volando y rotando al hacer scroll. |
| Cursor-Driven Material Spotlight | Úsalo cuando quieras un hero 3D donde el cursor revela un foco brillante sobre una escultura o producto, con aire de galería interactiva. |
| DetroitParis Infinite Slider | Úsalo cuando quieras una galería de imágenes de scroll infinito y arrastrable con efecto de perspectiva, ideal para portfolios de arquitectura, diseño o moda. |
| Direction-Aware Hover Effect (JavaScript) | Cuando quieras un resaltado que sigue el cursor por una rejilla de celdas, con color por celda y transiciones suaves sin librerias. |
| Dotted Path Traveller | Cuando hay un recorrido con paradas —origen de los materiales, una ruta, una cronología— y el orden espacial es la información. |
| Draggable Pill Menu | Úsalo cuando quieras un menú de navegación flotante y lúdico que se pueda arrastrar por la pantalla y se expanda al pulsar la hamburguesa. |
| Eduardbodak Animated Cards | Úsalo cuando quieras que unas tarjetas se separen, se apilen y se volteen en 3D a medida que el usuario hace scroll, con scroll suave tipo Lenis. |
| Epic Scroll Animations | Úsalo para una historia de scroll larga donde una forma se transforma con clip-path, rota y escala para revelar el contenido final. |
| ESEAgency Scroll-Powered Carousel | Úsalo para mostrar 5 proyectos a pantalla completa que se suceden con transiciones clip-path al hacer scroll, con marquee de título y barras de progreso. |
| Méridien Arc Card Scroll | Cuando quieras presentar pasos o features en tarjetas que giran sobre un arco al hacer scroll, con contador sincronizado. |
| Exo Ape Infinite Carousel | Úsalo para un portfolio o showcase a pantalla completa donde cada scroll revela una imagen nueva con un wipe de clip-path y texto enmascarado. |
| ExoApe-Inspired Overlay Menu | Cuando quieras un menú overlay fullscreen elegante estilo ExoApe: apertura con clip-path, contenido que se asienta y enlaces con preview de imagen al hover. |
| Explode Text On Scroll (Matter.js) | Cuando quieres un momento sorpresa en scroll: palabras clave que se colorean y luego estallan en letras con física real. |
| Exploded Product with Leader Labels | Cuando el producto tiene partes y el argumento es de qué está hecho: un despiece nombrado se lee mejor que una lista de características. |
| FameEstate Scroll Animation | Úsalo cuando la home de una marca premium (inmobiliaria, estudio, hotel) necesita un hero cinemático que se revela con scroll suave y cascada de imágenes. |
| Fanned Steps on an Arc | Cuando hay una secuencia con orden real —pasos, fases, un calendario— y quieres que se lea como una secuencia y no como una rejilla. |
| Fiddle Digital Scramble Hover Effect | Úsalo cuando quieras que una imagen reaccione al cursor con un rastro de ruido digital y símbolos que se descomponen al pasar el ratón. |
| Fiddle Digital Scroll Animation | Úsalo para una galería editorial donde las imágenes crecen desde cero al entrar en pantalla y se encogen al salir, con scroll suave y pin por fila. |
| Field Day Sound — Filter Gallery | Úsalo para una galería filtrable por categorías con titulares gigantes que crecen letra a letra al seleccionar un filtro. |
| Meridian — Flowing Menu Curtain | Úsalo para un índice o un menú de pocas filas grandes: al pasar el puntero cada fila se cubre con una lámina que entra por el borde por el que entraste. |
| Nocturne Baths — Fluid Splash Cursor | Úsalo cuando quieras que el puntero arrastre tinta líquida por ENCIMA de toda la página, no sólo dentro de un hero, sin tocar el contenido. |
| FollowArt Scroll Animation | Úsalo cuando quieras un recorrido de secciones a pantalla completa que entran inclinadas y se apilan una sobre otra al hacer scroll. |
| Fractal Glass Parallax Effect | Úsalo en un hero de portada que refracta una imagen tras láminas de cristal fractal y reacciona al ratón, ideal para marcas de moda, arte o diseño. |
| Full Screen Slider | Cuando quieras un slider a pantalla completa controlado con la rueda del ratón, con revelado por clip-path y tipografía numerada animada. |
| Scroll Image Reveal Sequence | Cuando quieras una historia de scroll con headers gigantes y una pila de imagenes que se revelan y escalan por clip-path a medida que bajas. |
| Water Ripple Text Simulation | Úsalo cuando quieras un hero donde el cursor deja ondas de agua que distorsionan un titular tipográfico gigante en tiempo real. |
| Kiln Seven — Gradual Blur Edges | Úsalo cuando un borde deba disolverse en vez de cortarse: una lista larga que se pierde por abajo o una cabecera fija sobre fotografía. |
| Gregory Lalle Awwwards Rebuild | Cuando quieras un portfolio vertical con scroll suave donde el numero de proyecto se fija y se anima mientras una preview sigue la imagen centrada. |
| Grid Deformation Effect | Úsalo cuando quieras un hero de video a pantalla completa que se deforme con una rejilla glitch y aberración cromática RGB al mover el cursor. |
| Grid Shutter Page Transition | Úsalo cuando quieras que al navegar entre páginas una rejilla de bloques cierre y reabra la pantalla como una persiana, con estética cinematográfica. |
| Griflan Hover Effect | Úsalo cuando una sección de servicios deba expandir cada fila al pasar el cursor, mostrando imágenes en abanico y etiquetas que caen y rebotan. |
| GSAP Clip Carousel | Úsalo como carrusel de productos a pantalla completa que avanza al hacer clic, con revelado de imagen por clip-path y nombres animados letra a letra. |
| GTA VI Landing Page Scroll | Úsalo para un hero de lanzamiento donde el scroll encoge una máscara SVG con forma de logo para revelar la escena, al estilo del reveal de GTA VI. |
| Guiding Light Cursor Spotlight | Úsalo cuando quieras que el visitante descubra texto en una sección oscura moviendo el cursor como una linterna, con ambiente íntimo y misterioso. |
| Vanguardia Award List Hover | Úsalo para una lista de premios o proyectos donde al pasar el cursor cada fila cambia de panel y aparece una imagen de vista previa en la esquina. |
| HeureBleue Scroll Animation | Úsalo cuando quieras una intro o galería inmersiva donde el scroll haga volar a través de una rejilla de imágenes con zoom continuo. |
| Hypnotic Image Gallery (GSAP Flip) | Úsalo cuando quieras una galería que reorganice las mismas imágenes entre varios layouts con una transición Flip fluida al hacer clic. |
| Image Explosion Scroll Animation | Úsalo en un footer para un cierre impactante: al hacer scroll hasta el pie, una ráfaga de imágenes sale disparada hacia arriba con física de gravedad. |
| Image Explosion with JS Physics | Cuando quieres un final de página impactante: al llegar al footer, un montón de imágenes explotan hacia arriba con física real. |
| Image Reveal On Scroll | Úsalo para una galería editorial donde cada imagen se revela con clip-path al hacer scroll y el fondo cambia de color por item. |
| Mouse Image Trail | Cuando quieres una interacción de cursor llamativa que deje un rastro de imágenes al mover el ratón sobre un hero o galería. |
| Infinite Draggable Image Gallery | Úsalo para una galería o portfolio explorable en un lienzo infinito que se arrastra con inercia, con thumbnails que se expanden al hacer clic y muestran su título. |
| Infinite Horizontal Scroll | Úsalo cuando quieras una galería horizontal que hace loop infinito y convierte el scroll vertical en desplazamiento lateral suave, con barra de progreso. |
| Infinite Horizontal Parallax Slider | Úsalo para una galería o portfolio con un carrusel horizontal infinito, arrastrable, con parallax en cada imagen y estética editorial. |
| Infinite Parallax Scroll with Minimap | Úsalo cuando quieras un portfolio a pantalla completa con scroll infinito de proyectos y un minimapa central que refleja la posición actual. |
| Ingamana Scroll Animation | Úsalo cuando quieras una galería de portfolio o proyectos que haga zoom continuo sobre las imágenes al bajar, con scroll suave estilo Lenis. |
| Inkfish Inspired Horizontal Scroll | Úsalo para una galería o lookbook horizontal donde el usuario arrastra una barra/timeline inferior para desplazar las imágenes en pantalla completa. |
| Inkwell-Inspired Image Gallery | Úsalo cuando quieras una galería circular donde las cartas giran y se acercan al cursor y al hacer clic una imagen se despliega a pantalla completa con su título. |
| Interactive Fluid Particle Logo | Úsalo cuando quieras un hero de marca oscuro donde el logo se forma con partículas WebGL que se dispersan al pasar el cursor y regresan con física de resorte. |
| Interactive Team Section | Cuando quieras presentar un equipo con miniaturas que al pasar el cursor amplían la foto y revelan el nombre en tipografía gigante con stagger. |
| Inversa Scroll Animation | Úsalo cuando quieras un hero cinematográfico donde el scroll revele una imagen aérea tras una máscara de barras, con texto y marcadores que avanzan por fases. |
| IronHill Scroll Animation | Úsalo cuando quieras un hero con scroll donde una capa crema de borde orgánico disuelve la imagen y revela el texto palabra por palabra al bajar. |
| Jam Area Overlay Menu | Úsalo cuando quieras un menú overlay a pantalla completa que se abre con clip-path y despliega enlaces gigantes tipo editorial con hover. |
| JavaScript Responsive Minimap | Úsalo cuando quieras navegar una galería de imágenes con un minimapa de miniaturas y una vista previa grande, controlado por scroll, arrastre o clic. |
| Scroll-Synced Image Minimap | Úsalo para una galería vertical de imágenes con un minimapa lateral fijo que se desplaza sincronizado con el scroll e indica la imagen activa. |
| JS Page Transitions | Úsalo para transiciones entre páginas con una cortina de bloques que sube para tapar la pantalla y baja para revelar el nuevo contenido. |
| Junni Tile Flip Board | Cuando quieres un hero llamativo de imagen troceada en cuadricula 3D que gira al pasar el raton y voltea todo el tablero con un boton. |
| Kaitonote 3D Gallery Showcase | Úsalo para una galería o portfolio inmersivo donde las imágenes emergen del fondo y se dispersan en 3D con scroll, con titulares que se revelan palabra a palabra. |
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/VanguardiaAI/motionprompts-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server