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:31
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
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "none",
"stroke": "accent",
"stroke_width": 12,
"opacity": 90,
"z_index": 40
},
{
"id": "front_highlight",
"group_id": "main_subject",
"name": "Front Highlight",
"type": "rounded_rect",
"role": "highlight",
"x": 120,
"y": -40,
"width": 0,
"height": 0,
"radius": 0,
"rotation": 0,
"points": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"text": "",
"font_size": 0,
"fill": "none",
"stroke": "text",
"stroke_width": 6,
"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": 80,
"height": 50,
"radius": 12,
"rotation": 10,
"points": [],
"text": "",
"font_size": 0,
"fill": "secondary",
"stroke": "accent",
"stroke_width": 3,
"opacity": 100,
"z_index": 60
},
{
"id": "price_tag_string",
"group_id": "main_subject",
"name": "Price Tag String",
"type": "line",
"role": "connector",
"x": -40,
"y": -25,
"width": 0,
"height": 0,
"radius": 0,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "accent",
"stroke_width": 2,
"opacity": 90,
"z_index": 65
},
{
"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": 1
},
{
"id": "motion_ring_1",
"group_id": "rings",
"name": "Motion Ring 1",
"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": 15
},
{
"id": "motion_ring_2",
"group_id": "rings",
"name": "Motion Ring 2",
"type": "ring",
"role": "ring",
"x": 600,
"y": 400,
"width": 640,
"height": 640,
"radius": 320,
"rotation": 0,
"points": [],
"text": "",
"font_size": 0,
"fill": "transparent",
"stroke": "accent",
"stroke_width": 3,
"opacity": 62,
"z_index": 16
},
{
"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": 22,
"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.4,
"loop": true
},
{
"target_group_id": "particles",
"animation": "pulse_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.7,
"loop": true
},
{
"target_group_id": "environment",
"animation": "float_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.3,
"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": "swing_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.5,
"loop": true
},
{
"target_group_id": "main_subject",
"animation": "shimmer_loop",
"start_frame": 0,
"end_frame": 180,
"intensity": 0.8,
"loop": true
}
],
"quality_notes": "All parts are connected with parent_id and anchors for correct attachment. The main bag body is large and centered occupying about 60% of canvas width and height. Handle is curved and attached to the top center of the bag. Price tag is attached to the handle's right side with a string connector. Sparkle particles are small polygons scattered near the bag. Floor shadow is a soft ellipse below the bag. Circular glow behind the bag is subtle and large. Minimal motion rings are placed behind the bag with low opacity. Animations include gentle hover, swing handle, shimmer highlight, orbiting rings, pulsing sparkles, and floating environment effects.",
"_model_used": "gpt-4.1-mini",
"_raw_response_id": "resp_072fb76a8ad50042006a26a979607481a1a20d786a38d201df",
"_tokens_used": 5340,
"_prompt_tokens": 1352,
"_completion_tokens": 3988,
"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": 9,
"shape_layers": 9,
"text_layers": 0,
"visible_layers": 6,
"animated_layers": 8,
"foreground_layers": 8,
"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.