Project Detail
Premium Ecommerce Shopping Bag Animation
Create a premium ecommerce shopping bag Lottie animation in clean vector motion-graphic style. Show one elegant shopping bag centered on the canvas. Build it from clear connected vector parts: a main rounded bag body, curved handle, front highlight, small price tag attached to the handle, tiny sparkle particles, soft floor shadow, subtle circular glow behind the bag, and minimal motion rings. Composition: The shopping bag should be centered and occupy about 60% of the
Versions
Generation History
Version 1
Success
2026-06-08 11:38:58
AI Blueprint
Motion Plan
{
"mode": "ai_motion_scene_graph",
"title": "Premium Ecommerce Shopping Bag Animation",
"subject": "Elegant Shopping Bag",
"intent": "Showcase a premium ecommerce shopping bag with subtle motion and decorative effects",
"scene_intent": "Showcase a premium ecommerce shopping bag with subtle motion and decorative effects",
"prompt": "Create a premium ecommerce shopping bag Lottie animation in clean vector motion-graphic style.\n\nShow one elegant shopping bag centered on the canvas. Build it from clear connected vector parts: a main rounded bag body, curved handle, front highlight, small price tag attached to the handle, tiny sparkle particles, soft floor shadow, subtle circular glow behind the bag, and minimal motion rings.\n\nComposition:\nThe shopping bag should be centered and occupy about 60% of the",
"canvas": {
"width": 1200,
"height": 800,
"fps": 30,
"duration_seconds": 6
},
"style": {
"background": "#050B0A",
"primary": "#9DD71D",
"secondary": "#111827",
"accent": "#22D3EE",
"text": "#FFFFFF"
},
"groups": [
{
"id": "main_subject",
"name": "Main Subject",
"x": 0,
"y": 0,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": 20
},
{
"id": "rings",
"name": "Minimal Motion Rings",
"x": 600,
"y": 400,
"anchor_x": 0,
"anchor_y": 0,
"rotation": 0,
"scale": 1,
"opacity": 40,
"z_index": 10
},
{
"id": "particles",
"name": "Sparkle Particles",
"x": 600,
"y": 400,
"anchor_x": 0,
"anchor_y": 0,
"rotation": 0,
"scale": 1,
"opacity": 80,
"z_index": 40
},
{
"id": "environment",
"name": "Environment Effects",
"x": 600,
"y": 400,
"anchor_x": 0,
"anchor_y": 0,
"rotation": 0,
"scale": 1,
"opacity": 60,
"z_index": 5
},
{
"id": "trails",
"name": "Trails",
"x": 0,
"y": 0,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": -10
},
{
"id": "details",
"name": "Details",
"x": 0,
"y": 0,
"anchor_x": 600,
"anchor_y": 400,
"rotation": 0,
"scale": 1,
"opacity": 100,
"z_index": 40
}
],
"objects": [
{
"id": "bag_body",
"group_id": "main_subject",
"name": "Main Rounded Bag Body",
"type": "rounded_rect",
"role": "main_body",
"x": 0,
"y": 0,
"width": 720,
"height": 560,
"radius": 80,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "secondary",
"stroke_width": 6,
"opacity": 100,
"z_index": 30
},
{
"id": "bag_handle",
"group_id": "main_subject",
"name": "Curved Handle",
"type": "rounded_rect",
"role": "custom",
"x": 0,
"y": -280,
"width": 0,
"height": 0,
"radius": 0,
"rotation": 0,
"points": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "none",
"stroke": "secondary",
"stroke_width": 14,
"opacity": 100,
"z_index": 40
},
{
"id": "front_highlight",
"group_id": "main_subject",
"name": "Front Highlight",
"type": "rounded_rect",
"role": "highlight",
"x": 80,
"y": -40,
"width": 0,
"height": 0,
"radius": 0,
"rotation": 0,
"points": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "none",
"stroke_width": 0,
"opacity": 90,
"z_index": 50
},
{
"id": "price_tag",
"group_id": "main_subject",
"name": "Small Price Tag",
"type": "rounded_rect",
"role": "custom",
"x": 180,
"y": -40,
"width": 100,
"height": 60,
"radius": 14,
"rotation": -15,
"points": [],
"text": "",
"font_size": 0,
"fill": "secondary",
"stroke": "accent",
"stroke_width": 3,
"opacity": 100,
"z_index": 60
},
{
"id": "price_tag_connector",
"group_id": "main_subject",
"name": "Price Tag Connector",
"type": "line",
"role": "connector",
"x": 160,
"y": -40,
"width": 20,
"height": 0,
"radius": 0,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "accent",
"stroke_width": 2,
"opacity": 90,
"z_index": 55
},
{
"id": "floor_shadow",
"group_id": "environment",
"name": "Soft Floor Shadow",
"type": "ellipse",
"role": "custom",
"x": 600,
"y": 720,
"width": 520,
"height": 80,
"radius": 0,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "secondary",
"stroke": "none",
"stroke_width": 0,
"opacity": 90,
"z_index": 5
},
{
"id": "circular_glow",
"group_id": "environment",
"name": "Subtle Circular Glow",
"type": "circle",
"role": "glow",
"x": 600,
"y": 400,
"width": 720,
"height": 720,
"radius": 360,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "primary",
"stroke": "none",
"stroke_width": 0,
"opacity": 12,
"z_index": 3
},
{
"id": "motion_ring_outer",
"group_id": "rings",
"name": "Outer Motion Ring",
"type": "ring",
"role": "ring",
"x": 600,
"y": 400,
"width": 800,
"height": 800,
"radius": 400,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "accent",
"stroke_width": 4,
"opacity": 62,
"z_index": 12
},
{
"id": "motion_ring_inner",
"group_id": "rings",
"name": "Inner Motion Ring",
"type": "ring",
"role": "ring",
"x": 600,
"y": 400,
"width": 560,
"height": 560,
"radius": 280,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "accent",
"stroke_width": 3,
"opacity": 62,
"z_index": 13
},
{
"id": "sparkle_1",
"group_id": "particles",
"name": "Sparkle Particle 1",
"type": "polygon",
"role": "sparkle",
"x": 520,
"y": 320,
"width": 16,
"height": 16,
"radius": 0,
"rotation": 45,
"points": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "none",
"stroke_width": 0,
"opacity": 90,
"z_index": 45
},
{
"id": "sparkle_2",
"group_id": "particles",
"name": "Sparkle Particle 2",
"type": "polygon",
"role": "sparkle",
"x": 680,
"y": 360,
"width": 12,
"height": 12,
"radius": 0,
"rotation": 0,
"points": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "none",
"stroke_width": 0,
"opacity": 80,
"z_index": 46
},
{
"id": "sparkle_3",
"group_id": "particles",
"name": "Sparkle Particle 3",
"type": "polygon",
"role": "sparkle",
"x": 600,
"y": 280,
"width": 14,
"height": 14,
"radius": 0,
"rotation": 30,
"points": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "accent",
"stroke": "none",
"stroke_width": 0,
"opacity": 85,
"z_index": 47
}
],
"timeline": [
{
"target_group_id": "main_subject",
"animation": "hover_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.6,
"loop": true
},
{
"target_group_id": "rings",
"animation": "orbit_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.3,
"loop": true
},
{
"target_group_id": "particles",
"animation": "pulse_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.8,
"loop": true
},
{
"target_group_id": "environment",
"animation": "float_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.2,
"loop": true
},
{
"target_group_id": "main_subject",
"animation": "slide_in_right",
"start_frame": 0,
"end_frame": 30,
"intensity": 1,
"loop": false
},
{
"target_group_id": "main_subject",
"animation": "slide_in_right",
"start_frame": 0,
"end_frame": 30,
"intensity": 1,
"loop": false
},
{
"target_group_id": "main_subject",
"animation": "shimmer_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.4,
"loop": true
}
],
"quality_notes": "All parts are connected with parent_id and anchors. The main bag body is large and rounded with a curved handle attached. The price tag is attached to the handle with a connector line. Sparkle particles are small polygon stars scattered near the bag. Soft floor shadow and subtle circular glow provide environment depth. Minimal motion rings orbit behind the bag. Animations are subtle and loop smoothly.",
"_model_used": "gpt-4.1-mini",
"_raw_response_id": "resp_0671eeb800c7827c006a26a9b7737c81a38cf0b9d42341f368",
"_tokens_used": 5256,
"_prompt_tokens": 1352,
"_completion_tokens": 3904,
"transparent_background": false,
"_graph_quality": {
"passed": true,
"issues": [],
"warnings": [],
"roles": [
"main_body",
"custom",
"highlight",
"connector",
"glow",
"ring",
"sparkle"
],
"required_roles": [],
"object_count": 12,
"group_count": 6,
"timeline_count": 7
},
"_lottie_quality": {
"passed": true,
"score": 100,
"issues": [],
"warnings": [],
"stats": {
"layers": 10,
"shape_layers": 10,
"text_layers": 0,
"visible_layers": 7,
"animated_layers": 9,
"foreground_layers": 9,
"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.