Milhaud commited on
Commit
6143c33
·
1 Parent(s): df5263a

refactor: revise animation suggestion section for clarity and detail in sequential scenarios

Browse files
Files changed (1) hide show
  1. prompts/predict_decompose_group.txt +24 -18
prompts/predict_decompose_group.txt CHANGED
@@ -37,18 +37,8 @@ Please follow these steps to analyze and decompose the SVG code. For each step,
37
  - Analyze how to optimize the structure for hardware acceleration.
38
  - Prepare <title> and <desc> elements for accessibility.
39
 
40
- 4. Suggest Animation Ideas:
41
- Based on the semantic grouping and optimization analysis, propose three animation ideas that would be suitable for the SVG. For each idea, explain how it relates to the semantic structure and why it would be effective.
42
- 1. Animated group elements reveal:
43
- - Sequentially fade in and scale up each group on page load
44
-
45
- 2. Inter active group elements transitions:
46
- - Smooth color and shape changes on hover/click
47
- - Applies to the group elements, improves user engagement
48
-
49
- 3. Parallax scrolling effect:
50
- - Move group elements layers at different speeds
51
- - Utilizes the group elements structure, adds depth to the design
52
 
53
  5. Provide Decomposed Output:
54
  a) Animation Plan:
@@ -58,7 +48,23 @@ Please follow these steps to analyze and decompose the SVG code. For each step,
58
 
59
  b) Animation Suggestions:
60
  <animation_suggestions>
61
- [Insert three animation ideas, each with a brief explanation of its suitability and effectiveness]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </animation_suggestions>
63
 
64
  c) Restructured and decomposed SVG code:
@@ -86,13 +92,13 @@ Example output structure:
86
 
87
  <animation_suggestions>
88
  4. Suggest Animation Ideas:
89
- Based on your analysis of how the SVG elements are grouped and organized, please suggest exactly three simple animation concepts that can be achieved by animating the existing elements in their current positions. Use this format:
90
- [action] [object_name]: [Detailed description of how the existing elements would move, what animation techniques would be used (e.g., gentle rotation, scaling, opacity changes), and why this works well with the current SVG structure]
91
 
92
  Provide exactly 3 suggestions:
93
- 1. [action] [object_name]: [description]
94
- 2. [action] [object_name]: [description]
95
- 3. [action] [object_name]: [description]
96
  </animation_suggestions>
97
 
98
  <decomposed_svg>
 
37
  - Analyze how to optimize the structure for hardware acceleration.
38
  - Prepare <title> and <desc> elements for accessibility.
39
 
40
+ 4. Suggest Sequential Animation Scenarios:
41
+ Based on the semantic grouping and optimization analysis, propose three comprehensive animation scenarios. Each scenario should contain multiple sequential steps that flow naturally together. For each scenario, describe the complete sequence of animations from beginning to end, including timing and transitions between steps.
 
 
 
 
 
 
 
 
 
 
42
 
43
  5. Provide Decomposed Output:
44
  a) Animation Plan:
 
48
 
49
  b) Animation Suggestions:
50
  <animation_suggestions>
51
+ Create exactly three comprehensive animation scenarios, each containing multiple sequential steps:
52
+ Scenario 1: [Scenario Name]
53
+ Step 1: [First animation action - describe which elements animate, how they move, timing]
54
+ Step 2: [Second animation action that follows - describe the next sequential movement]
55
+ Step 3: [Final animation action - describe the concluding animation]
56
+ Why this works: [Explain how this sequence utilizes the SVG structure effectively]
57
+ Scenario 2: [Scenario Name]
58
+ Step 1: [Different first animation action]
59
+ Step 2: [Sequential second action]
60
+ Step 3: [Sequential final action]
61
+ Why this works: [Explanation of structural benefits]
62
+ Scenario 3: [Scenario Name]
63
+ Step 1: [Third unique animation sequence start]
64
+ Step 2: [Sequential middle action]
65
+ Step 3: [Sequential concluding action]
66
+ Why this works: [Explanation of how it leverages the decomposed structure]
67
+ Each scenario should tell a complete visual story through sequential animations, with smooth transitions between steps.
68
  </animation_suggestions>
69
 
70
  c) Restructured and decomposed SVG code:
 
92
 
93
  <animation_suggestions>
94
  4. Suggest Animation Ideas:
95
+ Based on your analysis of how the SVG elements are grouped and organized, please suggest exactly three simple animation scenarios that can be achieved by animating the existing elements in their current positions. Use this format:
96
+ [action] [object_name]: [the sequential animation scenario descriptions]
97
 
98
  Provide exactly 3 suggestions:
99
+ 1. [action] [object_name]: [Step 1: ... Step 2: ... Step 3: ... complete sequential narrative]
100
+ 2. [action] [object_name]: [Step 1: ... Step 2: ... Step 3: ... cohesive multi-step sequence]
101
+ 3. [action] [object_name]: [Step 1: ... Step 2: ... Step 3: ... animated story]
102
  </animation_suggestions>
103
 
104
  <decomposed_svg>