Project Detail
Premium EV Charging Station
Create a premium electric vehicle charging station Lottie animation in clean vector motion-graphic style. Show one modern EV charging station centered on the canvas. Build it from clear connected vector parts: a tall rounded charger body, glowing screen panel, small status lights, charging cable hanging from the side, charging plug, battery indicator bars, lightning icon shape, soft floor shadow, subtle energy rings, glowing particles, and a clean background glow. Composition: The charging station should be centered and occupy about 60% of the
Versions
Generation History
Version 1
Success
2026-06-08 10:45:13
AI Blueprint
Motion Plan
{
"mode": "ai_motion_scene_graph",
"title": "Premium EV Charging Station",
"subject": "Electric Vehicle Charging Station",
"intent": "Show a modern premium EV charging station with clean vector parts and subtle animations",
"scene_intent": "Show a modern premium EV charging station with clean vector parts and subtle animations",
"prompt": "Create a premium electric vehicle charging station Lottie animation in clean vector motion-graphic style.\n\nShow one modern EV charging station centered on the canvas. Build it from clear connected vector parts: a tall rounded charger body, glowing screen panel, small status lights, charging cable hanging from the side, charging plug, battery indicator bars, lightning icon shape, soft floor shadow, subtle energy rings, glowing particles, and a clean background glow.\n\nComposition:\nThe charging station should be centered and occupy about 60% of the",
"canvas": {
"width": 1200,
"height": 800,
"fps": 30,
"duration_seconds": 6
},
"style": {
"background": "#050B0A",
"primary": "#71D71D",
"secondary": "#111827",
"accent": "#22D3EE",
"text": "#FFFFFF"
},
"groups": [
{
"id": "environment",
"name": "Environment",
"x": 0,
"y": 0,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": 0
},
{
"id": "rings",
"name": "Energy Rings",
"x": 600,
"y": 400,
"anchor_x": 0,
"anchor_y": 0,
"rotation": 0,
"scale": 1,
"opacity": 40,
"z_index": 5
},
{
"id": "particles",
"name": "Glowing Particles",
"x": 600,
"y": 400,
"anchor_x": 0,
"anchor_y": 0,
"rotation": 0,
"scale": 1,
"opacity": 70,
"z_index": 10
},
{
"id": "main_subject",
"name": "Main Subject",
"x": 600,
"y": 400,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": 20
},
{
"id": "details",
"name": "Details",
"x": 600,
"y": 400,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": 25
},
{
"id": "trails",
"name": "Trails",
"x": 0,
"y": 0,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": -10
}
],
"objects": [
{
"id": "charger_body",
"group_id": "main_subject",
"name": "Charger Body",
"type": "rounded_rect",
"role": "main_body",
"x": 600,
"y": 400,
"width": 720,
"height": 400,
"radius": 80,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "secondary",
"stroke": "primary",
"stroke_width": 4,
"opacity": 100,
"z_index": 30
},
{
"id": "screen_panel",
"group_id": "main_subject",
"name": "Screen Panel",
"type": "rect",
"role": "screen",
"x": 600,
"y": 350,
"width": 320,
"height": 180,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 90,
"z_index": 35
},
{
"id": "status_light1",
"group_id": "details",
"name": "Status Light 1",
"type": "circle",
"role": "light",
"x": 530,
"y": 460,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 40
},
{
"id": "status_light2",
"group_id": "details",
"name": "Status Light 2",
"type": "circle",
"role": "light",
"x": 570,
"y": 460,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 40
},
{
"id": "status_light3",
"group_id": "details",
"name": "Status Light 3",
"type": "circle",
"role": "light",
"x": 610,
"y": 460,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 40
},
{
"id": "charging_cable",
"group_id": "main_subject",
"name": "Charging Cable",
"type": "line",
"role": "cable",
"x": 780,
"y": 480,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [
[
0,
0
],
[
0,
120
],
[
40,
140
]
],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "primary",
"stroke_width": 8,
"opacity": 100,
"z_index": 32
},
{
"id": "charging_plug",
"group_id": "main_subject",
"name": "Charging Plug",
"type": "rounded_rect",
"role": "connector",
"x": 820,
"y": 620,
"width": 60,
"height": 40,
"radius": 12,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "secondary",
"stroke": "primary",
"stroke_width": 3,
"opacity": 100,
"z_index": 33
},
{
"id": "battery_indicator",
"group_id": "details",
"name": "Battery Indicator",
"type": "rect",
"role": "chart",
"x": 600,
"y": 430,
"width": 200,
"height": 40,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "accent",
"stroke_width": 2,
"opacity": 100,
"z_index": 38
},
{
"id": "battery_bar1",
"group_id": "details",
"name": "Battery Bar 1",
"type": "rect",
"role": "chart",
"x": 520,
"y": 430,
"width": 30,
"height": 30,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 39
},
{
"id": "battery_bar2",
"group_id": "details",
"name": "Battery Bar 2",
"type": "rect",
"role": "chart",
"x": 560,
"y": 430,
"width": 30,
"height": 40,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 39
},
{
"id": "battery_bar3",
"group_id": "details",
"name": "Battery Bar 3",
"type": "rect",
"role": "chart",
"x": 600,
"y": 430,
"width": 30,
"height": 35,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 39
},
{
"id": "battery_bar4",
"group_id": "details",
"name": "Battery Bar 4",
"type": "rect",
"role": "chart",
"x": 640,
"y": 430,
"width": 30,
"height": 38,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 39
},
{
"id": "lightning_icon",
"group_id": "details",
"name": "Lightning Icon",
"type": "polygon",
"role": "highlight",
"x": 600,
"y": 520,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [
[
0,
-40
],
[
20,
0
],
[
0,
-10
],
[
20,
40
],
[
-20,
0
],
[
0,
10
],
[
-20,
-40
]
],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 100,
"z_index": 40
},
{
"id": "floor_shadow",
"group_id": "environment",
"name": "Floor Shadow",
"type": "ellipse",
"role": "shadow",
"x": 600,
"y": 720,
"width": 600,
"height": 80,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "secondary",
"stroke": "",
"stroke_width": 0,
"opacity": 30,
"z_index": 1
},
{
"id": "energy_ring1",
"group_id": "rings",
"name": "Energy Ring 1",
"type": "ring",
"role": "ring",
"x": 600,
"y": 400,
"width": 480,
"height": 480,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "primary",
"stroke_width": 4,
"opacity": 40,
"z_index": 6
},
{
"id": "energy_ring2",
"group_id": "rings",
"name": "Energy Ring 2",
"type": "ring",
"role": "ring",
"x": 600,
"y": 400,
"width": 520,
"height": 520,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "accent",
"stroke_width": 2,
"opacity": 30,
"z_index": 7
},
{
"id": "glowing_particle1",
"group_id": "particles",
"name": "Particle 1",
"type": "circle",
"role": "particle",
"x": 540,
"y": 350,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 70,
"z_index": 11
},
{
"id": "glowing_particle2",
"group_id": "particles",
"name": "Particle 2",
"type": "circle",
"role": "particle",
"x": 660,
"y": 450,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "",
"stroke_width": 0,
"opacity": 70,
"z_index": 11
},
{
"id": "glowing_particle3",
"group_id": "particles",
"name": "Particle 3",
"type": "circle",
"role": "particle",
"x": 620,
"y": 370,
"width": 0,
"height": 0,
"radius": 16,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "",
"stroke_width": 0,
"opacity": 70,
"z_index": 11
}
],
"timeline": [
{
"target_group_id": "rings",
"animation": "orbit_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 1,
"loop": true
},
{
"target_group_id": "particles",
"animation": "float_loop",
"start_frame": 0,
"end_frame": 120,
"intensity": 1,
"loop": true
},
{
"target_group_id": "main_subject",
"animation": "hover_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.5,
"loop": true
},
{
"target_group_id": "details",
"animation": "pulse_loop",
"start_frame": 30,
"end_frame": 90,
"intensity": 0.7,
"loop": true
},
{
"target_group_id": "environment",
"animation": "fade_in",
"start_frame": 0,
"end_frame": 30,
"intensity": 1,
"loop": false
}
],
"quality_notes": "Compact vector shapes with subtle animations for a clean premium look. Main subject centered and sized to 60% canvas width.",
"_model_used": "gpt-4.1-mini",
"_raw_response_id": "resp_0128188115e55a83006a269d020aa4819480b905f5548b0a42",
"_tokens_used": 3105,
"_prompt_tokens": 1008,
"_completion_tokens": 2097,
"transparent_background": false,
"_graph_quality": {
"passed": true,
"issues": [],
"warnings": [],
"roles": [
"main_body",
"screen",
"light",
"cable",
"connector",
"chart",
"highlight",
"shadow",
"ring",
"particle"
],
"required_roles": [],
"object_count": 19,
"group_count": 6,
"timeline_count": 5
},
"_lottie_quality": {
"passed": true,
"score": 100,
"issues": [],
"warnings": [],
"stats": {
"layers": 20,
"shape_layers": 20,
"text_layers": 0,
"visible_layers": 1,
"animated_layers": 19,
"foreground_layers": 19,
"particle_like_layers": 3,
"canvas_width": 1200,
"canvas_height": 800
}
}
}
Rendered Project
Ready
Live Lottie Preview
Loading preview
The saved JSON animation will render here.