Project Detail
Digital Agency Workflow Animation
Create a premium animated Lottie JSON, not a static image, showing how a digital agency works from idea to business growth. Style: clean vector animation, modern SaaS/digital agency look, dark navy background, cyan/blue/purple glow accents, smooth easing, soft gradients, rounded UI cards, lightweight web-friendly design, seamless loop. Scene flow: Start with a glowing client idea/lightbulb on the left, with small floating icons for message, briefcase, target, and checklist. The idea moves into a strategy board showing wireframes, sticky notes, research lines, and checkmarks appearing one by one. Then transition into a central website browser mockup. Build the website step by step: navbar, hero section, service cards, image block, CTA button, and footer. Each part should slide or fade in smoothly as separate vector layers. Next, show development: code brackets, HTML/CSS blocks, database nodes, gears, and connecting lines animating around the website to show the design becoming functional. Then show marketing and automation: SEO search bar, analytics chart, social media card, email envelope, chatbot bubble, and automation nodes orbiting around the website. Connect them with glowing animated lines. Final scene: the completed website becomes the center of a digital growth system. Show lead messages, rising analytics bars, small glowing particles, and an upward growth arrow or small rocket launch. End with all elements connected: strategy, design, development, marketing, automation, and analytics. Requirements: Use editable vector shapes only. No photos, no 3D renders, no static illustration. Avoid too much text. Avoid clutter. Keep it premium, minimal, cinematic, and professional. Canvas: 16:9 horizontal, suitable for a website hero section. Loop smoothly with no hard cut. The animation should communicate: “A digital agency turns ideas into strategy, websites, automation, marketing, and measurable business growth.” Output must be an animated Lottie JSON file.
Versions
Generation History
Version 1
Success
2026-06-06 13:16:18
AI Blueprint
Motion Plan
{
"mode": "ai_scene_graph",
"title": "Digital Agency Workflow Animation",
"prompt": "Create a premium animated Lottie JSON, not a static image, showing how a digital agency works from idea to business growth.\r\n\r\nStyle: clean vector animation, modern SaaS/digital agency look, dark navy background, cyan/blue/purple glow accents, smooth easing, soft gradients, rounded UI cards, lightweight web-friendly design, seamless loop.\r\n\r\nScene flow:\r\nStart with a glowing client idea/lightbulb on the left, with small floating icons for message, briefcase, target, and checklist. The idea moves into a strategy board showing wireframes, sticky notes, research lines, and checkmarks appearing one by one.\r\n\r\nThen transition into a central website browser mockup. Build the website step by step: navbar, hero section, service cards, image block, CTA button, and footer. Each part should slide or fade in smoothly as separate vector layers.\r\n\r\nNext, show development: code brackets, HTML/CSS blocks, database nodes, gears, and connecting lines animating around the website to show the design becoming functional.\r\n\r\nThen show marketing and automation: SEO search bar, analytics chart, social media card, email envelope, chatbot bubble, and automation nodes orbiting around the website. Connect them with glowing animated lines.\r\n\r\nFinal scene: the completed website becomes the center of a digital growth system. Show lead messages, rising analytics bars, small glowing particles, and an upward growth arrow or small rocket launch. End with all elements connected: strategy, design, development, marketing, automation, and analytics.\r\n\r\nRequirements:\r\nUse editable vector shapes only.\r\nNo photos, no 3D renders, no static illustration.\r\nAvoid too much text.\r\nAvoid clutter.\r\nKeep it premium, minimal, cinematic, and professional.\r\nCanvas: 16:9 horizontal, suitable for a website hero section.\r\nLoop smoothly with no hard cut.\r\n\r\nThe animation should communicate:\r\n\u201cA digital agency turns ideas into strategy, websites, automation, marketing, and measurable business growth.\u201d\r\n\r\nOutput must be an animated Lottie JSON file.",
"duration_seconds": 6,
"canvas": {
"width": 1200,
"height": 800,
"fps": 30,
"duration_seconds": 6
},
"style": {
"background": "#050B0A",
"primary": "#D71D1D",
"secondary": "#111827",
"accent": "#22D3EE",
"text": "#FFFFFF"
},
"summary": "A smooth, looping animation illustrating a digital agency's workflow from idea to business growth, using clean vector shapes and glowing accents on a dark navy background.",
"layers": [
{
"name": "background",
"type": "rect",
"x": 0,
"y": 0,
"width": 1200,
"height": 800,
"radius": 0,
"points": [],
"text": "",
"fill": "background",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"animation": "none",
"start_frame": 0,
"end_frame": 180,
"z_index": -100
},
{
"name": "idea_lightbulb_body",
"type": "circle",
"x": 150,
"y": 400,
"width": 80,
"height": 80,
"radius": 40,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 90,
"animation": "pulse_loop",
"start_frame": 0,
"end_frame": 180,
"z_index": 20
},
{
"name": "idea_lightbulb_glow",
"type": "ring",
"x": 150,
"y": 400,
"width": 120,
"height": 120,
"radius": 60,
"points": [],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 6,
"opacity": 70,
"animation": "pulse_loop",
"start_frame": 0,
"end_frame": 180,
"z_index": 15
},
{
"name": "icon_message",
"type": "polygon",
"x": 80,
"y": 330,
"width": 30,
"height": 24,
"radius": 0,
"points": [
[
80,
330
],
[
110,
330
],
[
110,
354
],
[
95,
342
],
[
80,
354
]
],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 80,
"animation": "float_loop",
"start_frame": 0,
"end_frame": 180,
"z_index": 25
},
{
"name": "icon_briefcase",
"type": "rect",
"x": 190,
"y": 320,
"width": 30,
"height": 20,
"radius": 5,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 80,
"animation": "float_loop",
"start_frame": 10,
"end_frame": 180,
"z_index": 25
},
{
"name": "icon_target_outer",
"type": "ring",
"x": 150,
"y": 460,
"width": 40,
"height": 40,
"radius": 20,
"points": [],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 3,
"opacity": 80,
"animation": "float_loop",
"start_frame": 20,
"end_frame": 180,
"z_index": 25
},
{
"name": "icon_target_inner",
"type": "circle",
"x": 150,
"y": 460,
"width": 20,
"height": 20,
"radius": 10,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 80,
"animation": "float_loop",
"start_frame": 20,
"end_frame": 180,
"z_index": 26
},
{
"name": "icon_checklist",
"type": "rect",
"x": 110,
"y": 470,
"width": 40,
"height": 50,
"radius": 8,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 80,
"animation": "float_loop",
"start_frame": 30,
"end_frame": 180,
"z_index": 25
},
{
"name": "strategy_board",
"type": "rounded_rect",
"x": 300,
"y": 250,
"width": 300,
"height": 300,
"radius": 20,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "accent",
"stroke_width": 2,
"opacity": 90,
"animation": "slide_in_right",
"start_frame": 15,
"end_frame": 75,
"z_index": 30
},
{
"name": "wireframe_rect1",
"type": "rounded_rect",
"x": 320,
"y": 280,
"width": 80,
"height": 50,
"radius": 10,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 20,
"end_frame": 40,
"z_index": 35
},
{
"name": "wireframe_rect2",
"type": "rounded_rect",
"x": 420,
"y": 280,
"width": 80,
"height": 50,
"radius": 10,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 30,
"end_frame": 50,
"z_index": 35
},
{
"name": "sticky_note1",
"type": "rounded_rect",
"x": 320,
"y": 350,
"width": 60,
"height": 40,
"radius": 8,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 40,
"end_frame": 60,
"z_index": 35
},
{
"name": "sticky_note2",
"type": "rounded_rect",
"x": 400,
"y": 350,
"width": 60,
"height": 40,
"radius": 8,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 50,
"end_frame": 70,
"z_index": 35
},
{
"name": "research_line1",
"type": "line",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
350,
400
],
[
450,
400
]
],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 2,
"opacity": 0,
"animation": "fade_in",
"start_frame": 55,
"end_frame": 75,
"z_index": 36
},
{
"name": "checkmark1",
"type": "polygon",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
440,
390
],
[
445,
395
],
[
455,
380
]
],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 65,
"end_frame": 85,
"z_index": 37
},
{
"name": "browser_mockup",
"type": "rounded_rect",
"x": 650,
"y": 200,
"width": 500,
"height": 400,
"radius": 25,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "accent",
"stroke_width": 3,
"opacity": 100,
"animation": "slide_in_up",
"start_frame": 70,
"end_frame": 130,
"z_index": 40
},
{
"name": "navbar",
"type": "rect",
"x": 660,
"y": 210,
"width": 480,
"height": 40,
"radius": 12,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_left",
"start_frame": 80,
"end_frame": 100,
"z_index": 41
},
{
"name": "hero_section",
"type": "rounded_rect",
"x": 660,
"y": 260,
"width": 480,
"height": 120,
"radius": 20,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 90,
"end_frame": 110,
"z_index": 42
},
{
"name": "service_card1",
"type": "rounded_rect",
"x": 670,
"y": 390,
"width": 140,
"height": 100,
"radius": 15,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_right",
"start_frame": 100,
"end_frame": 120,
"z_index": 43
},
{
"name": "service_card2",
"type": "rounded_rect",
"x": 830,
"y": 390,
"width": 140,
"height": 100,
"radius": 15,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_right",
"start_frame": 110,
"end_frame": 130,
"z_index": 43
},
{
"name": "service_card3",
"type": "rounded_rect",
"x": 990,
"y": 390,
"width": 140,
"height": 100,
"radius": 15,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_right",
"start_frame": 120,
"end_frame": 140,
"z_index": 43
},
{
"name": "image_block",
"type": "rect",
"x": 670,
"y": 510,
"width": 460,
"height": 120,
"radius": 20,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 130,
"end_frame": 150,
"z_index": 44
},
{
"name": "cta_button",
"type": "rounded_rect",
"x": 850,
"y": 650,
"width": 120,
"height": 50,
"radius": 25,
"points": [],
"text": "",
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "pop_in",
"start_frame": 140,
"end_frame": 160,
"z_index": 45
},
{
"name": "footer",
"type": "rect",
"x": 650,
"y": 710,
"width": 500,
"height": 50,
"radius": 15,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_up",
"start_frame": 150,
"end_frame": 170,
"z_index": 40
},
{
"name": "code_brackets",
"type": "polygon",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
600,
350
],
[
620,
370
],
[
600,
390
],
[
610,
400
],
[
630,
380
],
[
610,
360
]
],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 160,
"end_frame": 180,
"z_index": 50
},
{
"name": "html_block",
"type": "rect",
"x": 580,
"y": 420,
"width": 60,
"height": 40,
"radius": 10,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_left",
"start_frame": 165,
"end_frame": 180,
"z_index": 50
},
{
"name": "css_block",
"type": "rect",
"x": 650,
"y": 420,
"width": 60,
"height": 40,
"radius": 10,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_right",
"start_frame": 165,
"end_frame": 180,
"z_index": 50
},
{
"name": "database_node1",
"type": "circle",
"x": 600,
"y": 480,
"width": 30,
"height": 30,
"radius": 15,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 170,
"end_frame": 180,
"z_index": 51
},
{
"name": "database_node2",
"type": "circle",
"x": 670,
"y": 480,
"width": 30,
"height": 30,
"radius": 15,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 170,
"end_frame": 180,
"z_index": 51
},
{
"name": "gear1",
"type": "circle",
"x": 720,
"y": 350,
"width": 50,
"height": 50,
"radius": 25,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "accent",
"stroke_width": 3,
"opacity": 0,
"animation": "float_loop",
"start_frame": 175,
"end_frame": 180,
"z_index": 52
},
{
"name": "gear2",
"type": "circle",
"x": 780,
"y": 350,
"width": 40,
"height": 40,
"radius": 20,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "accent",
"stroke_width": 3,
"opacity": 0,
"animation": "float_loop",
"start_frame": 175,
"end_frame": 180,
"z_index": 52
},
{
"name": "connecting_line1",
"type": "line",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
630,
440
],
[
630,
480
]
],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 2,
"opacity": 0,
"animation": "fade_in",
"start_frame": 175,
"end_frame": 180,
"z_index": 53
}
],
"_model_used": "gpt-4.1-mini",
"_raw_response_id": "resp_06e6fb224ef0e717006a241d889640819e820bee8b5a1f05db",
"_tokens_used": 3902,
"_prompt_tokens": 1470,
"_completion_tokens": 2432,
"transparent_background": false
}
Rendered Project
Ready
Live Lottie Preview
Loading preview
The saved JSON animation will render here.