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:19:45
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": "Animated scene showing a digital agency's workflow from idea to business growth with glowing idea, strategy board, website build, development, marketing automation, and final growth system in a clean vector style with smooth transitions and looping.",
"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_glow",
"type": "circle",
"x": 150,
"y": 400,
"width": 100,
"height": 100,
"radius": 50,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 80,
"animation": "pulse_loop",
"start_frame": 0,
"end_frame": 180,
"z_index": 30
},
{
"name": "idea_lightbulb_body",
"type": "ellipse",
"x": 150,
"y": 400,
"width": 60,
"height": 90,
"radius": 30,
"points": [],
"text": "",
"fill": "#33CFFF",
"stroke": "#22D3EE",
"stroke_width": 3,
"opacity": 100,
"animation": "scale_in",
"start_frame": 0,
"end_frame": 30,
"z_index": 40
},
{
"name": "icon_message",
"type": "circle",
"x": 80,
"y": 320,
"width": 24,
"height": 24,
"radius": 12,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 70,
"animation": "float_loop",
"start_frame": 0,
"end_frame": 180,
"z_index": 35
},
{
"name": "icon_briefcase",
"type": "rounded_rect",
"x": 90,
"y": 460,
"width": 30,
"height": 20,
"radius": 5,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 70,
"animation": "float_loop",
"start_frame": 10,
"end_frame": 180,
"z_index": 35
},
{
"name": "icon_target",
"type": "ring",
"x": 200,
"y": 320,
"width": 28,
"height": 28,
"radius": 14,
"points": [],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 3,
"opacity": 70,
"animation": "float_loop",
"start_frame": 20,
"end_frame": 180,
"z_index": 35
},
{
"name": "icon_checklist",
"type": "rect",
"x": 190,
"y": 460,
"width": 24,
"height": 30,
"radius": 4,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 70,
"animation": "float_loop",
"start_frame": 30,
"end_frame": 180,
"z_index": 35
},
{
"name": "idea_move_path",
"type": "line",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
150,
400
],
[
400,
400
]
],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 2,
"opacity": 50,
"animation": "none",
"start_frame": 0,
"end_frame": 180,
"z_index": 20
},
{
"name": "strategy_board_bg",
"type": "rounded_rect",
"x": 350,
"y": 300,
"width": 300,
"height": 250,
"radius": 20,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "",
"stroke_width": 0,
"opacity": 90,
"animation": "fade_in",
"start_frame": 30,
"end_frame": 60,
"z_index": 40
},
{
"name": "wireframe_rect1",
"type": "rect",
"x": 370,
"y": 320,
"width": 80,
"height": 50,
"radius": 5,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 40,
"end_frame": 70,
"z_index": 45
},
{
"name": "wireframe_rect2",
"type": "rect",
"x": 460,
"y": 320,
"width": 80,
"height": 50,
"radius": 5,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 50,
"end_frame": 80,
"z_index": 45
},
{
"name": "sticky_note1",
"type": "rounded_rect",
"x": 370,
"y": 380,
"width": 60,
"height": 40,
"radius": 8,
"points": [],
"text": "",
"fill": "#5A3E9A",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_up",
"start_frame": 60,
"end_frame": 90,
"z_index": 46
},
{
"name": "sticky_note2",
"type": "rounded_rect",
"x": 440,
"y": 380,
"width": 60,
"height": 40,
"radius": 8,
"points": [],
"text": "",
"fill": "#6C4BD7",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_up",
"start_frame": 70,
"end_frame": 100,
"z_index": 46
},
{
"name": "research_line1",
"type": "line",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
400,
350
],
[
550,
350
]
],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 2,
"opacity": 0,
"animation": "fade_in",
"start_frame": 80,
"end_frame": 110,
"z_index": 47
},
{
"name": "checkmark1",
"type": "polygon",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
560,
345
],
[
570,
355
],
[
585,
335
]
],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "pop_in",
"start_frame": 90,
"end_frame": 120,
"z_index": 48
},
{
"name": "browser_mockup_bg",
"type": "rounded_rect",
"x": 700,
"y": 200,
"width": 450,
"height": 350,
"radius": 25,
"points": [],
"text": "",
"fill": "secondary",
"stroke": "accent",
"stroke_width": 2,
"opacity": 0,
"animation": "fade_in",
"start_frame": 110,
"end_frame": 140,
"z_index": 50
},
{
"name": "navbar_bar",
"type": "rect",
"x": 710,
"y": 210,
"width": 430,
"height": 40,
"radius": 10,
"points": [],
"text": "",
"fill": "#1E293B",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_right",
"start_frame": 120,
"end_frame": 150,
"z_index": 51
},
{
"name": "hero_section",
"type": "rounded_rect",
"x": 710,
"y": 260,
"width": 430,
"height": 100,
"radius": 15,
"points": [],
"text": "",
"fill": "#334155",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_right",
"start_frame": 130,
"end_frame": 160,
"z_index": 52
},
{
"name": "service_card1",
"type": "rounded_rect",
"x": 720,
"y": 370,
"width": 120,
"height": 80,
"radius": 15,
"points": [],
"text": "",
"fill": "#475569",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 140,
"end_frame": 170,
"z_index": 53
},
{
"name": "service_card2",
"type": "rounded_rect",
"x": 850,
"y": 370,
"width": 120,
"height": 80,
"radius": 15,
"points": [],
"text": "",
"fill": "#475569",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 150,
"end_frame": 180,
"z_index": 53
},
{
"name": "service_card3",
"type": "rounded_rect",
"x": 980,
"y": 370,
"width": 120,
"height": 80,
"radius": 15,
"points": [],
"text": "",
"fill": "#475569",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 160,
"end_frame": 180,
"z_index": 53
},
{
"name": "image_block",
"type": "rect",
"x": 720,
"y": 470,
"width": 380,
"height": 100,
"radius": 20,
"points": [],
"text": "",
"fill": "#64748B",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "slide_in_up",
"start_frame": 170,
"end_frame": 180,
"z_index": 54
},
{
"name": "cta_button",
"type": "rounded_rect",
"x": 900,
"y": 580,
"width": 150,
"height": 50,
"radius": 25,
"points": [],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "pop_in",
"start_frame": 175,
"end_frame": 180,
"z_index": 55
},
{
"name": "footer_bar",
"type": "rect",
"x": 700,
"y": 640,
"width": 450,
"height": 40,
"radius": 10,
"points": [],
"text": "",
"fill": "#1E293B",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 175,
"end_frame": 180,
"z_index": 51
},
{
"name": "code_brackets",
"type": "polygon",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
680,
300
],
[
700,
280
],
[
700,
320
]
],
"text": "",
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fly_up_loop",
"start_frame": 140,
"end_frame": 180,
"z_index": 60
},
{
"name": "html_block",
"type": "rect",
"x": 660,
"y": 330,
"width": 80,
"height": 40,
"radius": 8,
"points": [],
"text": "",
"fill": "#0E7490",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 145,
"end_frame": 180,
"z_index": 60
},
{
"name": "css_block",
"type": "rect",
"x": 750,
"y": 330,
"width": 80,
"height": 40,
"radius": 8,
"points": [],
"text": "",
"fill": "#2563EB",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "fade_in",
"start_frame": 150,
"end_frame": 180,
"z_index": 60
},
{
"name": "database_node1",
"type": "circle",
"x": 680,
"y": 400,
"width": 30,
"height": 30,
"radius": 15,
"points": [],
"text": "",
"fill": "#22D3EE",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "float_loop",
"start_frame": 155,
"end_frame": 180,
"z_index": 61
},
{
"name": "database_node2",
"type": "circle",
"x": 770,
"y": 400,
"width": 30,
"height": 30,
"radius": 15,
"points": [],
"text": "",
"fill": "#22D3EE",
"stroke": "",
"stroke_width": 0,
"opacity": 0,
"animation": "float_loop",
"start_frame": 160,
"end_frame": 180,
"z_index": 61
},
{
"name": "gear1",
"type": "ring",
"x": 840,
"y": 430,
"width": 50,
"height": 50,
"radius": 25,
"points": [],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 3,
"opacity": 0,
"animation": "orbit_loop",
"start_frame": 165,
"end_frame": 180,
"z_index": 62
},
{
"name": "gear2",
"type": "ring",
"x": 900,
"y": 430,
"width": 40,
"height": 40,
"radius": 20,
"points": [],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 2,
"opacity": 0,
"animation": "orbit_loop",
"start_frame": 170,
"end_frame": 180,
"z_index": 62
},
{
"name": "connecting_line1",
"type": "line",
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"radius": 0,
"points": [
[
700,
350
],
[
750,
350
],
[
770,
400
],
[
840,
430
]
],
"text": "",
"fill": "",
"stroke": "accent",
"stroke_width": 2,
"opacity": 0,
"animation": "fade_in",
"start_frame": 165,
"end_frame": 180,
"z_index": 63
}
],
"_model_used": "gpt-4.1-mini",
"_raw_response_id": "resp_0fa1ec3295ccfef1006a241e56c4a081a19e2b9cadecb9e211",
"_tokens_used": 3945,
"_prompt_tokens": 1470,
"_completion_tokens": 2475,
"transparent_background": false
}
Rendered Project
Ready
Live Lottie Preview
Loading preview
The saved JSON animation will render here.