Skip to main content
Glama
VanguardiaAI

motionprompts MCP

by VanguardiaAI

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault

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

CapabilityDetails
tools
{
  "listChanged": true
}
resources
{
  "listChanged": true
}

Tools

Functions exposed to the LLM to take actions

NameDescription
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 why for each hit. Combine the free-text query with facet filters to narrow. Then call get_component on the chosen slug. Leave query empty to browse purely by filters.

get_componentA

Fetch one component by slug. include controls the payload: 'meta' (full catalog record), 'preview' (thumbnail + live demo URL), 'prompt' (a self-contained brief to REBUILD it faithfully), 'source' (the actual index.html/styles.css/script.js to copy, plus an integration note). Default: meta + preview + prompt. Add 'source' when you want the real code.

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: category describes how a component LOOKS, trigger/cluster describe how it MOVES, and they disagree — the slider label alone splits across 3 opposite physics.

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 reference contributes STATIC art direction and biases the motion system — motion is NEVER derived from the reference.

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 none, write the section from the motion system tokens; that is a legitimate outcome, not a failure.

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 sections — which is why a page could be planned end to end and still butt every section together with a straight line. A treatment does NOT consume a section and does NOT count toward motion_coverage; it adds on top. Some kinds are decisions rather than components (scroll-suave) and come back with verdict not-a-component instead of a fake candidate list. Still pass whatever you adopt to get_integration_contract: treatments compete for the same capabilities (scroll owner, document height) as any other component.

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 end, recompute the whole set, never a lone value. Replaces render_prompt, which substituted mechanically and produced prompts whose prose contradicted their code (11/30 in judged evaluation). See DECISIONS.md D15 and D18.

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 system to use the component's native one.

Prompts

Interactive templates invoked by user choice

NameDescription

No prompts

Resources

Contextual data attached and managed by the client

NameDescription
catalogFull 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 BubblesCuando hay reseñas o citas de terceros y no quieres un carrusel con flechas que nadie pulsa.
Arch Portal RevealCuando quieres que entrar en una sección se sienta como cruzar una puerta y no como que aparezca un bloque.
Aristide Benoist SliderCuando 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 ORBCuando 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 ProgressCuando 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 MenuCuando 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 CorridorCuando 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 SliderCuando 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 ArchiveCuando 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 SliderCuando quieras un slider de imagenes inmersivo en WebGL con transicion de barrido y distorsion por scroll, sin depender de GSAP.
Circular Image GalleryCuando 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 TravellerCuando 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 ScrollCuando 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 MenuCuando 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 LabelsCuando 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 ArcCuando 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 SliderCuando 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 SequenceCuando 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 RebuildCuando 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 PhysicsCuando 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 TrailCuando 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 SectionCuando 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 BoardCuando 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

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