Spaces:
Running
Running
refactor: revise animation suggestion section for clarity and detail in sequential scenarios
Browse files
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
|
| 41 |
-
Based on the semantic grouping and optimization analysis, propose three animation
|
| 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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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
|
| 90 |
-
[action] [object_name]: [
|
| 91 |
|
| 92 |
Provide exactly 3 suggestions:
|
| 93 |
-
1. [action] [object_name]: [
|
| 94 |
-
2. [action] [object_name]: [
|
| 95 |
-
3. [action] [object_name]: [
|
| 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>
|