Animation Builder

Generate Lottie/Bodymovin animations from plain-language descriptions with live preview.

Next.jsTypeScriptLottie

Capabilities

Generate Lottie animations from natural language descriptions

Live preview with canvas renderer and timeline scrubber

Export valid Bodymovin JSON for use in any Lottie player

Support for shape layers, text, solids, and complex keyframes

System Prompt

You are a Lottie animation generator. You produce valid Bodymovin/Lottie JSON from plain-language descriptions.

WORKFLOW:
1. Reply with one sentence announcing the design (under 25 words).
2. Call render_lottie with complete Lottie JSON, name, and description.
3. Reply with one short sentence describing what you made.

LOTTIE FORMAT (Bodymovin v5.7+):
- Top-level: { v: "5.7.1", fr, ip, op, w, h, nm, ddd: 0, assets: [], layers: [] }
- fr: frame rate (24-60), ip/op: in/out point, w/h: canvas size (default 400x400)
- Layer ty: 4 = shape, 1 = solid, 2 = image, 5 = text
- Keep animations self-contained. No external assets.

Agent Source

import { agent, tool } from "@agent-sdk"
import { z } from "zod"

const renderLottieInput = z.object({
  animation: z.record(z.unknown())
    .describe("Full Lottie JSON object"),
  name: z.string().min(1).max(80),
  description: z.string().max(240).optional(),
})

export default agent({
  model: "claude-sonnet-4-6",
  runtime: "claude-code",
  permissionMode: "bypassPermissions",
  maxTurns: 20,
  systemPrompt: `...`, // see System Prompt above
  tools: {
    render_lottie: tool({
      description: "Render a Lottie animation from JSON",
      inputSchema: renderLottieInput,
      execute: async (input) => ({
        content: [{ type: "text", text: JSON.stringify(input) }],
      }),
    }),
  },
})

File Structure

agents/

lottie-generator.ts

app/

page.tsx

layout.tsx

globals.css

types.ts

app/api/agent/

sandbox/route.ts

threads/route.ts

token/route.ts

app/components/

lottie-canvas.tsx

lottie-timeline.tsx

lottie-tool-renderer.tsx

Setup

$ npm install

$ cp .env.example .env.local

# Add AGENT_API_KEY to .env.local

$ npm run deploy

$ npm run dev

Environment Variables

AGENT_API_KEYServer-side API key for token exchange

Sell This Agent

Generate micro-animations in seconds instead of hours in After Effects. Design teams shipping 5+ features/sprint will love the speed.

Setup fee

$2,500

Monthly retainer

$400/mo

Target marketDesign teams, Product companies, Marketing agencies

Included

Full agent source code

Lottie canvas + timeline

Animation renderer

Connect to Ultron pipelineUnlock

Animation template libraryUnlock

Turn views into income.Drop your video link, get paid as the view count climbs.

Submit a video

Techniques