{"api":{"name":"Bannerify Public API","version":"1.0.0","description":"Machine-readable discovery endpoints for Bannerify animation presets, prompt generation, and agent tooling.","authentication":"public","endpoints":{"docs":"https://bannerify.hypermatic.com/api/docs","openapi":"https://bannerify.hypermatic.com/api/openapi.json","status":"https://bannerify.hypermatic.com/api/status.json","animations":"https://bannerify.hypermatic.com/api/animations.json","promptTemplate":"https://bannerify.hypermatic.com/api/prompt-template.json","apiCatalog":"https://bannerify.hypermatic.com/.well-known/api-catalog","agentSkillsIndex":"https://bannerify.hypermatic.com/.well-known/agent-skills/index.json","mcpServerCard":"https://bannerify.hypermatic.com/.well-known/mcp/server-card.json","mcpEndpoint":"https://bannerify.hypermatic.com/mcp"}},"templateName":"Bannerify animation JSON prompt","description":"A reusable prompt template for generating Bannerify-compatible JSON animation objects.","placeholder":"[Please describe your animation]","promptTemplate":"You are an expert at creating CSS keyframe animations. I need you to generate a JSON animation object for the Bannerify Figma plugin.\n\nThe JSON structure must follow this exact format:\n\n{\n  \"name\": \"Human-readable name\",\n  \"key\": \"llm-kebab-case-key\",\n  \"transformOriginX\": \"center|left|right\",\n  \"transformOriginY\": \"center|top|bottom\",\n  \"easing\": \"ease|ease-in|ease-out|ease-in-out|linear\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nIMPORTANT RULES:\n- The \"name\" field should be short and concise (1-4 words max, like \"Fade In\", \"Bounce In\", \"Slide Left\")\n- The \"key\" field MUST start with \"llm-\" prefix (e.g., \"llm-glitch-animation\", \"llm-bounce-in\", \"llm-slide-fade\")\n- keyframes array must have at least 2 keyframes (usually starting at percent: 0 and ending at percent: 100)\n- percent values range from 0 to 100\n- opacity ranges from 0 to 1\n- x and y are pixel values (can be negative)\n- xPercent and yPercent are percentage values (can be negative)\n- scale, scaleX, scaleY are multipliers (1 = 100%, 2 = 200%, 0.5 = 50%)\n- rotate is in degrees (can be negative)\n- transformOriginX must be one of: \"center\", \"left\", \"right\"\n- transformOriginY must be one of: \"center\", \"top\", \"bottom\"\n- easing must be one of: \"ease\", \"ease-in\", \"ease-out\", \"ease-in-out\", \"linear\"\n\nEXAMPLES:\n\nExample 1 - Fade In:\n{\n  \"name\": \"Fade In\",\n  \"key\": \"llm-fade-in\",\n  \"transformOriginX\": \"center\",\n  \"transformOriginY\": \"center\",\n  \"easing\": \"ease-in\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 0,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 100,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nExample 2 - Slide In From Left:\n{\n  \"name\": \"Slide In From Left\",\n  \"key\": \"llm-slide-in-left\",\n  \"transformOriginX\": \"center\",\n  \"transformOriginY\": \"center\",\n  \"easing\": \"ease-out\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": -100,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 0,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 100,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nExample 3 - Bounce In:\n{\n  \"name\": \"Bounce In\",\n  \"key\": \"llm-bounce-in\",\n  \"transformOriginX\": \"center\",\n  \"transformOriginY\": \"center\",\n  \"easing\": \"ease-out\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 0,\n      \"scale\": 0.3,\n      \"scaleX\": 0.3,\n      \"scaleY\": 0.3,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 50,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1.05,\n      \"scaleX\": 1.05,\n      \"scaleY\": 1.05,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 70,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 0.9,\n      \"scaleX\": 0.9,\n      \"scaleY\": 0.9,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 100,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nNow, please create an animation based on this description:\n\nIMPORTANT FORMATTING INSTRUCTIONS:\n1. Output the complete JSON animation object in a properly formatted code block\n2. Make sure the JSON is valid and ready to copy directly\n3. After the code block, provide these instructions to the user:\n\n\"To use this animation in Bannerify:\n1. Copy the JSON code above (use the copy button in the code block)\n2. Open Figma and launch the Bannerify plugin\n3. Go to the Custom Animations panel (instructions: https://docs.hypermatic.com/bannerify/animation/opening-custom-panel)\n4. Paste the JSON into the text area labeled 'Paste generated JSON code here'\n5. The animation auto-saves on paste and appears in all timeline animation preset dropdown menus throughout Bannerify\"","promptWithPlaceholder":"You are an expert at creating CSS keyframe animations. I need you to generate a JSON animation object for the Bannerify Figma plugin.\n\nThe JSON structure must follow this exact format:\n\n{\n  \"name\": \"Human-readable name\",\n  \"key\": \"llm-kebab-case-key\",\n  \"transformOriginX\": \"center|left|right\",\n  \"transformOriginY\": \"center|top|bottom\",\n  \"easing\": \"ease|ease-in|ease-out|ease-in-out|linear\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nIMPORTANT RULES:\n- The \"name\" field should be short and concise (1-4 words max, like \"Fade In\", \"Bounce In\", \"Slide Left\")\n- The \"key\" field MUST start with \"llm-\" prefix (e.g., \"llm-glitch-animation\", \"llm-bounce-in\", \"llm-slide-fade\")\n- keyframes array must have at least 2 keyframes (usually starting at percent: 0 and ending at percent: 100)\n- percent values range from 0 to 100\n- opacity ranges from 0 to 1\n- x and y are pixel values (can be negative)\n- xPercent and yPercent are percentage values (can be negative)\n- scale, scaleX, scaleY are multipliers (1 = 100%, 2 = 200%, 0.5 = 50%)\n- rotate is in degrees (can be negative)\n- transformOriginX must be one of: \"center\", \"left\", \"right\"\n- transformOriginY must be one of: \"center\", \"top\", \"bottom\"\n- easing must be one of: \"ease\", \"ease-in\", \"ease-out\", \"ease-in-out\", \"linear\"\n\nEXAMPLES:\n\nExample 1 - Fade In:\n{\n  \"name\": \"Fade In\",\n  \"key\": \"llm-fade-in\",\n  \"transformOriginX\": \"center\",\n  \"transformOriginY\": \"center\",\n  \"easing\": \"ease-in\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 0,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 100,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nExample 2 - Slide In From Left:\n{\n  \"name\": \"Slide In From Left\",\n  \"key\": \"llm-slide-in-left\",\n  \"transformOriginX\": \"center\",\n  \"transformOriginY\": \"center\",\n  \"easing\": \"ease-out\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": -100,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 0,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 100,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nExample 3 - Bounce In:\n{\n  \"name\": \"Bounce In\",\n  \"key\": \"llm-bounce-in\",\n  \"transformOriginX\": \"center\",\n  \"transformOriginY\": \"center\",\n  \"easing\": \"ease-out\",\n  \"cubic\": \"\",\n  \"splitScale\": false,\n  \"usePercentage\": false,\n  \"keyframes\": [\n    {\n      \"percent\": 0,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 0,\n      \"scale\": 0.3,\n      \"scaleX\": 0.3,\n      \"scaleY\": 0.3,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 50,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1.05,\n      \"scaleX\": 1.05,\n      \"scaleY\": 1.05,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 70,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 0.9,\n      \"scaleX\": 0.9,\n      \"scaleY\": 0.9,\n      \"rotate\": 0\n    },\n    {\n      \"percent\": 100,\n      \"x\": 0,\n      \"y\": 0,\n      \"xPercent\": 0,\n      \"yPercent\": 0,\n      \"opacity\": 1,\n      \"scale\": 1,\n      \"scaleX\": 1,\n      \"scaleY\": 1,\n      \"rotate\": 0\n    }\n  ]\n}\n\nNow, please create an animation based on this description:\n\nIMPORTANT FORMATTING INSTRUCTIONS:\n1. Output the complete JSON animation object in a properly formatted code block\n2. Make sure the JSON is valid and ready to copy directly\n3. After the code block, provide these instructions to the user:\n\n\"To use this animation in Bannerify:\n1. Copy the JSON code above (use the copy button in the code block)\n2. Open Figma and launch the Bannerify plugin\n3. Go to the Custom Animations panel (instructions: https://docs.hypermatic.com/bannerify/animation/opening-custom-panel)\n4. Paste the JSON into the text area labeled 'Paste generated JSON code here'\n5. The animation auto-saves on paste and appears in all timeline animation preset dropdown menus throughout Bannerify\"\n\n[Please describe your animation]","usageSteps":["Copy the JSON code from your AI assistant.","Open Figma and launch the Bannerify plugin.","Go to the Custom Animations panel.","Paste the JSON into the text area labeled 'Paste generated JSON code here'.","Bannerify auto-saves the animation and makes it available in timeline animation preset dropdowns."],"docs":{"customAnimationsPanel":"https://docs.hypermatic.com/bannerify/animation/opening-custom-panel","customKeyframes":"https://docs.hypermatic.com/bannerify/animation/custom-keyframes","animationSelection":"https://docs.hypermatic.com/bannerify/animation/selecting-animations","pluginListing":"https://www.figma.com/community/plugin/796124491692147799/bannerify-banner-studio"}}