animation_preview
Generate animation sequence previews in GIF, MP4, or WebM formats for streamlined UI/UX development workflows. Simplify visual testing and design iterations.
Instructions
Generate preview of animation sequence
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| format | No | gif | |
| timeline | Yes |
Implementation Reference
- src/tools/animation.ts:60-98 (handler)Main execution logic for the 'animation_preview' tool: parses input with Zod schema, simulates preview generation (format, duration, frames, size, URL), returns structured content or error.async preview(args: any) { const params = AnimationPreviewSchema.parse(args); try { // Simulate animation preview generation const previewData = { format: params.format, duration: this.getTimelineDuration(params.timeline), frames: params.format === 'gif' ? 30 : 60, size: { width: 800, height: 600 }, preview: { url: `preview_${Date.now()}.${params.format}`, message: 'Preview generated successfully (simulated)' } }; return { content: [ { type: 'text', text: JSON.stringify(previewData, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error generating preview: ${error.message}` } ], isError: true }; } }
- src/tools/animation.ts:14-17 (schema)Zod input schema validation for 'animation_preview' tool parameters.const AnimationPreviewSchema = z.object({ timeline: z.any(), format: z.enum(['gif', 'mp4', 'webm']).default('gif') });
- src/index.ts:148-163 (registration)MCP tool registration in listTools handler, defining name, description, and JSON input schema.{ name: 'animation_preview', description: 'Generate preview of animation sequence', inputSchema: { type: 'object', properties: { timeline: { type: 'object' }, format: { type: 'string', enum: ['gif', 'mp4', 'webm'], default: 'gif' } }, required: ['timeline'] } },
- src/index.ts:316-317 (registration)Dispatch case in callToolRequest handler that routes 'animation_preview' calls to the AnimationTools.preview method.case 'animation_preview': return await this.animationTools.preview(args);
- src/tools/animation.ts:241-248 (helper)Helper method used by preview handler to calculate animation duration based on timeline type (framer-motion or gsap).private getTimelineDuration(timeline: any): number { if (timeline?.type === 'framer-motion') { return Object.keys(timeline.variants || {}).length * 0.3; } else if (timeline?.type === 'gsap') { return (timeline.timeline || []).length * 0.3; } return 1; }