animation_preview
Generate previews of animation sequences in GIF, MP4, or WebM formats to visualize and validate motion designs during UI/UX development workflows.
Instructions
Generate preview of animation sequence
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| timeline | Yes | ||
| format | No | gif |
Implementation Reference
- src/tools/animation.ts:60-98 (handler)The handler function that implements the core logic of the 'animation_preview' tool. It validates the input using AnimationPreviewSchema, simulates generating a preview video/GIF from the animation timeline, computes duration using helper, and returns structured JSON response with preview metadata.
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 schema defining the input structure for the animation_preview tool: requires a timeline object and optional format (gif/mp4/webm). Used for validation in the handler.
const AnimationPreviewSchema = z.object({ timeline: z.any(), format: z.enum(['gif', 'mp4', 'webm']).default('gif') }); - src/index.ts:316-317 (registration)Switch case in tool execution handler that routes calls to 'animation_preview' to the AnimationTools.preview method.
case 'animation_preview': return await this.animationTools.preview(args); - src/index.ts:148-163 (registration)Static registration of the 'animation_preview' tool in the listTools response, including name, description, and input schema matching the Zod 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/tools/animation.ts:241-248 (helper)Helper method used by the preview handler to calculate the total duration of the animation timeline based on library type.
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; }