@docyrus/animaguru 0.16.1 → 0.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NOTICE.md +27 -0
- package/README.md +10 -0
- package/dist/animaguru.js +224 -137
- package/package.json +1 -1
- package/skills/animaguru/SKILL.md +2 -0
- package/skills/animaguru-art-motion/LICENSE +21 -0
- package/skills/animaguru-art-motion/SKILL.md +35 -0
- package/skills/animaguru-art-motion/agents/openai.yaml +4 -0
- package/skills/animaguru-art-motion/references/art/art-nouveau.md +27 -0
- package/skills/animaguru-art-motion/references/art/bauhaus-geometry.md +27 -0
- package/skills/animaguru-art-motion/references/art/blue-period.md +27 -0
- package/skills/animaguru-art-motion/references/art/cave-painting.md +27 -0
- package/skills/animaguru-art-motion/references/art/cinematic-anime-light.md +27 -0
- package/skills/animaguru-art-motion/references/art/constructivist-poster.md +27 -0
- package/skills/animaguru-art-motion/references/art/contemporary-flat.md +27 -0
- package/skills/animaguru-art-motion/references/art/cosmic-comic.md +27 -0
- package/skills/animaguru-art-motion/references/art/cubist-facets.md +27 -0
- package/skills/animaguru-art-motion/references/art/dunhuang-mural.md +27 -0
- package/skills/animaguru-art-motion/references/art/early-cgi.md +27 -0
- package/skills/animaguru-art-motion/references/art/egyptian-wall-painting.md +27 -0
- package/skills/animaguru-art-motion/references/art/expressionist-waves.md +27 -0
- package/skills/animaguru-art-motion/references/art/flat-outline-cartoon.md +27 -0
- package/skills/animaguru-art-motion/references/art/gothic-illumination.md +27 -0
- package/skills/animaguru-art-motion/references/art/greek-vase-painting.md +27 -0
- package/skills/animaguru-art-motion/references/art/hopper-hard-light.md +27 -0
- package/skills/animaguru-art-motion/references/art/impressionist-dabs.md +27 -0
- package/skills/animaguru-art-motion/references/art/ink-wash.md +27 -0
- package/skills/animaguru-art-motion/references/art/klimt-gold.md +27 -0
- package/skills/animaguru-art-motion/references/art/matisse-cut-paper.md +27 -0
- package/skills/animaguru-art-motion/references/art/monet-water-garden.md +27 -0
- package/skills/animaguru-art-motion/references/art/pixel-art.md +27 -0
- package/skills/animaguru-art-motion/references/art/polka-dot-infinity.md +27 -0
- package/skills/animaguru-art-motion/references/art/pop-print.md +27 -0
- package/skills/animaguru-art-motion/references/art/post-impressionist-flow.md +27 -0
- package/skills/animaguru-art-motion/references/art/radiant-line-figures.md +27 -0
- package/skills/animaguru-art-motion/references/art/rembrandt-chiaroscuro.md +27 -0
- package/skills/animaguru-art-motion/references/art/renaissance-sfumato.md +27 -0
- package/skills/animaguru-art-motion/references/art/roman-mosaic.md +27 -0
- package/skills/animaguru-art-motion/references/art/rubber-hose.md +27 -0
- package/skills/animaguru-art-motion/references/art/seurat-pointillism.md +27 -0
- package/skills/animaguru-art-motion/references/art/shadow-puppet.md +27 -0
- package/skills/animaguru-art-motion/references/art/surrealist-soft-forms.md +27 -0
- package/skills/animaguru-art-motion/references/art/vaporwave-vhs.md +27 -0
- package/skills/animaguru-art-motion/references/art/watercolor-cel-world.md +27 -0
- package/skills/animaguru-art-motion/references/art-styles.md +44 -0
- package/skills/animaguru-art-motion/references/coverage.json +190 -0
- package/skills/animaguru-art-motion/references/explainer-grammars.md +17 -0
- package/skills/animaguru-art-motion/references/explainers/concept-morph.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/editorial-evidence.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/honest-data-chart.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/kinetic-type.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/luminous-science.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/presenter-explainer.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/product-interface.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/storytime-acting.md +21 -0
- package/skills/animaguru-art-motion/references/explainers/whiteboard-reasoning.md +21 -0
- package/skills/animaguru-art-motion/references/production.md +78 -0
- package/skills/animaguru-art-motion/references/rendering.md +84 -0
- package/skills/animaguru-art-motion/references/sources.md +40 -0
- package/skills/animaguru-video/SKILL.md +2 -0
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
{
|
|
2
|
+
"repository": "https://github.com/alchaincyf/huashu-art-motion",
|
|
3
|
+
"commit": "2571ee0a9a0467c4d99e935ea9e0fadda19210b0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"adaptationLanguage": "en",
|
|
6
|
+
"artStyles": [
|
|
7
|
+
{
|
|
8
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/01_cave.md",
|
|
9
|
+
"reference": "references/art/cave-painting.md"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/02_egypt.md",
|
|
13
|
+
"reference": "references/art/egyptian-wall-painting.md"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/03_greek.md",
|
|
17
|
+
"reference": "references/art/greek-vase-painting.md"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/04_roman.md",
|
|
21
|
+
"reference": "references/art/roman-mosaic.md"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/05_gothic.md",
|
|
25
|
+
"reference": "references/art/gothic-illumination.md"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/06_renaissance.md",
|
|
29
|
+
"reference": "references/art/renaissance-sfumato.md"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/08_impressionism.md",
|
|
33
|
+
"reference": "references/art/impressionist-dabs.md"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/09_postimp.md",
|
|
37
|
+
"reference": "references/art/post-impressionist-flow.md"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/10_nouveau.md",
|
|
41
|
+
"reference": "references/art/art-nouveau.md"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/11_cubism.md",
|
|
45
|
+
"reference": "references/art/cubist-facets.md"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/12_bauhaus.md",
|
|
49
|
+
"reference": "references/art/bauhaus-geometry.md"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/13_pop.md",
|
|
53
|
+
"reference": "references/art/pop-print.md"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/14_8bit.md",
|
|
57
|
+
"reference": "references/art/pixel-art.md"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/15_raytrace.md",
|
|
61
|
+
"reference": "references/art/early-cgi.md"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/16_2026.md",
|
|
65
|
+
"reference": "references/art/contemporary-flat.md"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/17_ink.md",
|
|
69
|
+
"reference": "references/art/ink-wash.md"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/18_klimt.md",
|
|
73
|
+
"reference": "references/art/klimt-gold.md"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/19_munch.md",
|
|
77
|
+
"reference": "references/art/expressionist-waves.md"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/20_dunhuang.md",
|
|
81
|
+
"reference": "references/art/dunhuang-mural.md"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/21_kusama.md",
|
|
85
|
+
"reference": "references/art/polka-dot-infinity.md"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/22_constructivism.md",
|
|
89
|
+
"reference": "references/art/constructivist-poster.md"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/23_dali.md",
|
|
93
|
+
"reference": "references/art/surrealist-soft-forms.md"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/24_hopper.md",
|
|
97
|
+
"reference": "references/art/hopper-hard-light.md"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/25_ghibli.md",
|
|
101
|
+
"reference": "references/art/watercolor-cel-world.md"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/26_vaporwave.md",
|
|
105
|
+
"reference": "references/art/vaporwave-vhs.md"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/27_kirby.md",
|
|
109
|
+
"reference": "references/art/cosmic-comic.md"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/28_monet.md",
|
|
113
|
+
"reference": "references/art/monet-water-garden.md"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/29_seurat.md",
|
|
117
|
+
"reference": "references/art/seurat-pointillism.md"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/30_matisse.md",
|
|
121
|
+
"reference": "references/art/matisse-cut-paper.md"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/31_haring.md",
|
|
125
|
+
"reference": "references/art/radiant-line-figures.md"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/32_rembrandt.md",
|
|
129
|
+
"reference": "references/art/rembrandt-chiaroscuro.md"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/33_rubberhose.md",
|
|
133
|
+
"reference": "references/art/rubber-hose.md"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/34_shadowpuppet.md",
|
|
137
|
+
"reference": "references/art/shadow-puppet.md"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/35_shinkai.md",
|
|
141
|
+
"reference": "references/art/cinematic-anime-light.md"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/36_picasso_blue.md",
|
|
145
|
+
"reference": "references/art/blue-period.md"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"source": "references/\u98ce\u683c\u914d\u65b9/37_rick_morty.md",
|
|
149
|
+
"reference": "references/art/flat-outline-cartoon.md"
|
|
150
|
+
}
|
|
151
|
+
],
|
|
152
|
+
"explainerGrammars": [
|
|
153
|
+
{
|
|
154
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/t1_3b1b.md",
|
|
155
|
+
"reference": "references/explainers/concept-morph.md"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/t2_keynote_ui.md",
|
|
159
|
+
"reference": "references/explainers/product-interface.md"
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/t3_finance_chart.md",
|
|
163
|
+
"reference": "references/explainers/honest-data-chart.md"
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/y1_kurzgesagt.md",
|
|
167
|
+
"reference": "references/explainers/luminous-science.md"
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/y2_vox.md",
|
|
171
|
+
"reference": "references/explainers/editorial-evidence.md"
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/y3_whiteboard.md",
|
|
175
|
+
"reference": "references/explainers/whiteboard-reasoning.md"
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/y4_storytime.md",
|
|
179
|
+
"reference": "references/explainers/storytime-acting.md"
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/y5_kinetic_type.md",
|
|
183
|
+
"reference": "references/explainers/kinetic-type.md"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"source": "references/\u52a8\u753b\u8bed\u6cd5/y6_presenter_explainer.md",
|
|
187
|
+
"reference": "references/explainers/presenter-explainer.md"
|
|
188
|
+
}
|
|
189
|
+
]
|
|
190
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# Explainer grammars
|
|
2
|
+
|
|
3
|
+
Choose the visual operation that explains the passage. A film can use several grammars when the explanatory job changes, keeping palette, type, audio and continuity coherent. Read only the selected cards.
|
|
4
|
+
|
|
5
|
+
| Grammar | Explanatory job |
|
|
6
|
+
|---|---|
|
|
7
|
+
| [Concept morph](explainers/concept-morph.md) | Show how one object or representation becomes another. |
|
|
8
|
+
| [Product/interface](explainers/product-interface.md) | Make a real product detail, feature or specification readable. |
|
|
9
|
+
| [Data/chart](explainers/honest-data-chart.md) | Compare reliable quantities, time and events. |
|
|
10
|
+
| [Luminous science](explainers/luminous-science.md) | Give an abstract system a concrete metaphor and travel across scale. |
|
|
11
|
+
| [Editorial evidence](explainers/editorial-evidence.md) | Inspect authentic quotations, documents, photos and maps. |
|
|
12
|
+
| [Whiteboard reasoning](explainers/whiteboard-reasoning.md) | Accumulate an argument as a connected spatial diagram. |
|
|
13
|
+
| [Storytime acting](explainers/storytime-acting.md) | Support a personal story through poses, reactions and silence. |
|
|
14
|
+
| [Kinetic type](explainers/kinetic-type.md) | Land a short phrase, list structure, chapter or number. |
|
|
15
|
+
| [Presenter explainer](explainers/presenter-explainer.md) | Let an original presenter connect evidence, diagrams and reactions. |
|
|
16
|
+
|
|
17
|
+
All nine source grammars have English adaptations. The source includes eight parameterized examples; presenter-led explanation is guidance with a reference film, not a ninth ready-to-run template. No source engine API is assumed to exist in AnimaGuru.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Concept morph and mathematical explanation
|
|
2
|
+
|
|
3
|
+
Choose this when a concrete object can become another object: a grid becomes a vector, weights become a sum, or a curve changes under a transformation. Write “A becomes B” for each passage. Use another grammar for a quotation, anecdote or launch with no meaningful transform.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Put the object on screen first, then the question or formula. A dark, often black, ground and thin saturated lines support clear semantic color. Example colors are blue #58C4DD, red #FC6255, yellow #FFFF00 and teal #5CD0B3. Keep a concept’s color consistent in the diagram, legend and equation. Computer Modern-like mathematical typography can sit alongside a compatible reading face. Glow is optional emphasis, not the defining feature.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Use the quintic smoothstep 6p^5−15p^4+10p^3 for transforms. A 1–3 second change followed by roughly one second of reading is a useful starting point. Match point count, winding and starting landmark when interpolating paths. Stagger related objects slightly, preserving the relation between them. Write/reveal strokes by measured length; use a passing signal only along a real connection. During a reading hold, objects and camera can genuinely stop.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Prefer object continuity: the end state is the next explanation’s starting state. A camera move targets the next meaningful object, usually over about a second. Before a scale traversal, identify the target, then interpolate zoom logarithmically and redraw vectors at that scale. The portal must cover the screen before the composition switches. Match formula symbols by identity rather than crossfading two whole equations.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Use the existing kit’s analytic easing, line reveals and scene containers; implement missing path resampling locally. Upstream DG/CAM/MO names are not installed APIs. Check mathematical meaning as well as geometry: an output neuron connects to the preceding hidden layer, not directly to image pixels unless the actual architecture says so. Maintain the same value through a diagram, number label and conclusion. Give the final result time to be read. Do not turn successive bullet reveals into a black-background slide deck.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/t1_3b1b.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Editorial evidence collage
|
|
2
|
+
|
|
3
|
+
Use when the viewer should inspect actual documents, photos, maps, dates or quotations. Place the argument in a coherent desk/wall world and guide attention through the evidence. For AnimaGuru’s established tactile brand treatment, also read the sibling animaguru-cutcraft skill when present; this card adds evidence-specific choreography.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Let the material occupy most of the frame while it is being read; an expansive desk of tiny framed images weakens the evidence. Use static paper fibers, restrained shadows, original cutouts and a small annotation palette. Source study colors include paper #E4DCCF, ink #171716, red #B65255 / #93403C and muted highlighter yellow #DACF08. Use the client’s own identity. Exact quotations remain faithful to the source and are composed as real text or shown in an authentic capture.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Separate smooth camera time from stepped element time. Quantizing drawn lines, labels or cutouts to about 12 fps can suggest editorial handwork while the camera remains smooth. Photos may already be present on the cut; avoid making every item bounce or slide in. Source examples use red lines over .5–1 s, a hand-drawn open circle near 1 s and a highlighter following a spoken phrase over 1.5–3 s. Schedule by actual words and readability, not a fixed typing rate borrowed from Chinese text.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Fit the camera to the exact evidence rectangle plus reading margin. Pan along a connecting line, push into the relevant sentence, pull out to reveal the full argument, or hard cut on a narrative boundary. One continuous world should keep one camera through connected shots. Tears are a possible paper effect but were not a defining transition in the source’s sampled Vox pieces. Keep paper still while it is being read.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Store authentic evidence with URLs and dates; label generated illustrations as conceptual in production records. Use AnimaGuru for original art, not fabricated archives. Render important reading text above clips, pins and neighboring cards. Re-read all simultaneously visible text to catch accidental combined meanings. Perform an event once; pushing closer must not replay a completed acquisition or transaction. In portrait, crop to the relevant half-sentence and follow its word cue before revealing the next region. Check source fidelity, highlighter bounds, top-layer text and full-speed camera variety.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/y2_vox.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Data and financial charts
|
|
2
|
+
|
|
3
|
+
Use for reliable numbers, time, comparisons and inflection points. Write the chart’s one takeaway before constructing it. A single number may be clearer as type. Data authenticity and sourcing are separate from visual style.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Establish the scale, reveal the data, then annotate the takeaway. Use one color for the protagonist and gray for context. A zero baseline and light horizontal grid can define a bar chart. Keep units, date range and a readable source on the image. Label fictional examples in every applicable shot. Match the surrounding film’s theme or place the chart on an object within its world; avoid an unexplained white report card in a dark film.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Bars grow from zero with labels tracking their tips. A line advances by x/time rather than arc length, preserving the meaning of steep changes. Trigger event annotations when the animated head reaches that event, using the inverse easing function if necessary. Stage complex changes across roughly one second per operation as a starting point. Time final values to their spoken cues and hold long enough to read, at least about .5 s in a short example. Use tabular numerals.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Hold the camera while data grows. Move to a specific point when the narration names it. Morph only between equivalent representations of the same data, with stable identifiers and explicit scale changes. Changing revenue bars into a stock-price line would imply a false relation. A zoom into recent data should redraw the chart rather than magnify a screenshot.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Store the source data and units in production records. Bars use zero baselines; a cropped line/candlestick axis needs clear disclosure and a fair scale. Distinguish “grew to 8.7 times” from “increased by 8.7 times”: the latter means a different final value. Recompute ratios from the actual labels and match endpoints across wide/detail charts. Red/green direction conventions vary by market; state them or use blue/orange with symbols. Check negative values, decimals, long labels and portrait safe areas. Avoid bounce, perspective columns and decorative 3D that distort quantity.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/t3_finance_chart.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Kinetic typography
|
|
2
|
+
|
|
3
|
+
Use words as performers for an opening, list structure, quotation, key number or chapter transition. Long explanatory passages usually need images, evidence or diagrams between typographic sections. Design English copy by measured width and reading time; do not import Chinese character-count limits literally.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
One dominant word or short phrase, one supporting line and at most one supporting evidence object make a useful starting point. A roughly 3:1 main/support size ratio creates hierarchy. Use a chapter palette and an intentional alignment grid. Maintain margins and safe areas at the real aspect ratio. Vary page structures before the film starts feeling like repeated title slides.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Land the main phrase on a spoken stress or measured musical beat. A brief scale slam, around .35 s settling from roughly 1.7×, can establish emphasis. Supporting text can rise through a mask over .3–.35 s; a card can move in over .4 s. Reveal one focus at a time. An exit can be shorter than entry, around .18 s. Once readable, type stays fixed. Background motion or a tiny beat pulse is optional, with no need to make the whole film continuously drift.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Expand a meaningful letter or colored shape into the next background, use a band wipe, or move across a continuous layout. Schedule the visible reveal on the accent, rather than scheduling only the transition’s first frame: transitionStart = accentTime − revealFraction × transitionDuration. For a .45 s transition revealing at .55, start about .2475 s before the accent. Check the actual rendered reveal; easing changes its perceived arrival.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Use editable local type, font measurement, masks and the shared audio cue sheet. Keep a progress track in screen space so it does not move with a page. Essential wording should never depend on generated lettering. Review reading time after the last character finishes, final hold, the gap to an evidence card, glyph coverage and alignment between text impact and sound. For narration, prioritize the stressed word; for music, use the measured beat grid. Do not add an effect or sound to every small element if it competes with the spoken message.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/y5_kinetic_type.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Luminous flat science worlds
|
|
2
|
+
|
|
3
|
+
Choose a visual metaphor before drawing: what physical thing represents this abstract idea? Use this grammar for systems, processes and journeys across scale. Authentic archives or real events usually benefit more from editorial evidence.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Use clear organic/geometric silhouettes, usually without dark outlines. Shade with a darker local hue and a small highlight shape. A dark ground with two or three contrasting saturated accents can support luminous signals; a lighter treatment is also possible. Choose a coherent era/palette rather than mixing visual systems. A glowing orange central planet is one source example, not a required subject. Plan foreground, subject, landscape and distant layers with meaningful depth.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Each explanatory passage should have a visible state change: a connection forms, a structure opens, an object divides or a level is revealed. Once settled, labels and subjects hold; stars, clouds or particles may continue quietly. Source references use approximately .83 s for a regular action, faster .17–.5 s for selected pops and a short stagger between related objects. These are study values, not quotas. Avoid making every object float to satisfy a motion metric.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Identify and briefly highlight the target before entering it. Interpolate large scale changes in logarithmic space. Keep the world live and redraw vectors or use sufficient-resolution source assets: magnifying a 1920 px screenshot 60 times will blur. Match color, highlight direction and object position across a portal; pull back to reveal context. Scale travel can take around 1–2 s, while whole conceptual units often need several seconds of narration.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Use original subjects and brand-appropriate colors; use generated transparent layers when character drawing is the bottleneck. Apply compatible shading/material to all subjects. Existing Pixi containers provide depth stacks; only implement parallax where it explains space. Review portal coverage, object identity, readable label holds, particle density and whether the visual actually explains the concept. Short upstream demos are compressed catalogs of techniques, not timing templates for a finished science film.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/y1_kurzgesagt.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Presenter-led business explainer
|
|
2
|
+
|
|
3
|
+
An original presenter connects paper, charts, key terms and emotional reactions. Use for business history, product mechanisms and knowledge explainers with a visible guide. This is the ninth upstream grammar; it has a reference film but no standalone parameterized snippet or supplied character sprites.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Allocate varied layouts: a presenter beside evidence, a full-frame number, a left/right comparison, a character inside a chart and a reaction close-up. Avoid a whole film of person-left/chart-right. Prepare full-body and bust views. Sitting, leaning and walking require matching pose material rather than distorting a standing frame.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Use explicit position and scale at the first character keyframe of each segment, so state does not leak from the previous segment. Normalize apparent pose height using measured anchors. Switch different silhouettes directly with a slight motivated pop instead of crossfading a double figure. Stop mouths during pauses; use complete gait frames for walking. Numbers settle on the spoken value, then the emphasis circle appears. Do not attach “over” or “+” while a count is still passing through lower values.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Page transitions may move the page while the presenter and year display continue across it. Derive year, subtitles, chapter title and graphics from one timeline. Prefer a live scene camera to enlarging a full-frame raster image; keep the presenter inside the actual viewport at every zoom.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Create or import an authorized original presenter through AnimaGuru and save local frames with actual bounds and foot anchors. Reuse the player’s captions, audio cues and scene containers. Multiply nested opacity by the parent value rather than replacing it, preserving outer fades. Check text occlusion, subtitle-zone conflicts, character cropping, matching year labels and numerical qualifiers. The source card is a production recipe, not a complete reusable film or proof that arbitrary presenter performance is supported.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/y6_presenter_explainer.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Product and interface presentation
|
|
2
|
+
|
|
3
|
+
Use for a real interface, feature launch, product name, price or specification. Let a screenshot, recording or product image carry the frame. For mechanism, evidence or time-series data, use the corresponding grammar instead.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Show one product fact at a time. A screenshot can occupy about 80% of a landscape frame or 90% of a portrait frame, then the camera finds the relevant detail. Use the product’s brand palette. Near-black grounds, generous whitespace, tight large type and concentric corner radii are useful options. Light meshes, glass cards, gradient text and decorative floating are optional packaging; stacking all of them produces a generic launch template.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Start UI springs at critical damping or very low overshoot. Source duration/bounce examples use .5–.75 s and bounce 0–.15; stronger .3 bounce is an intentional choice. An optional text reveal removes 18–26 px blur while moving 16–40 px over .7–1 s. Count a quantity only once, use tabular digits, and time its final value to the spoken number. Compute the start by subtracting the animation duration from that cue. Let units fit their measured width.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Hold while the screen is readable. Push toward a detail around .9 s, move to another region around .7 s, then return to context. Reserve a much faster push for a real reveal. A shared-element card can expand into a full view: place the incoming opaque image inside the card from the first transition frame so old and new text do not double. Pad blur/shrink transitions with overscan to prevent dark edges.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Use actual local product captures and editable exact type; label conceptual UI in production records. Keep one coordinate system between full view and detail view. A numeric conclusion about the screen can overlay that same dimmed screen instead of cutting to an unrelated gradient background. Check glass against actual content, spring restraint, glyph coverage, screenshot legibility, final holds, and accidental repeats of the same three-card layout.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/t2_keynote_ui.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Storytime pose acting
|
|
2
|
+
|
|
3
|
+
Use for a first-person experience, a recurring original narrator and a script with reaction beats. Voice carries the story; the animation supplies decisive poses, expressions and silence. Data-heavy or impersonal material may need another grammar.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Keep a recognizable character with a small pose/expression library. Medium shots can leave space for the object being discussed; a reaction close-up removes background competition, while a sudden wide shot can communicate helplessness. Characters have stronger contours and contrast than simplified backgrounds. Do not copy the upstream author’s mascot or a creator’s identity. Generate consistent character sheets through AnimaGuru when detailed human acting is needed; intentional simple geometric figures are also valid when they fit the brief.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Change a pose quickly, around .1 s as a starting point, then truly hold. A small contact-anchored compression and short decaying settle can accent the switch. Choose a limited mouth system or proper visemes according to quality needs. Audio RMS can drive open/half/closed mouths at about 12 updates/s, but is not phoneme-accurate lip sync. Use deterministic blinks and gaze that point at the spoken subject. Stop talking during actual silence.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Hard cuts dominate. Use a jump to a reaction close-up, an occasional glance-motivated whip, or an over-shoulder screen shot. Wide and close views must refer to the same room geometry. Put a reaction in a real gap in the narration—often .8–1.5 s is useful—rather than immediately speaking over the joke. Leave the final reaction long enough to land.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Use actual sprite metadata and feet/hand anchors. Match silhouettes across poses and normalize apparent height without stretching anatomy. Do not dissolve unrelated poses into double bodies. A high static-frame percentage may be intentional; review the sharp pose changes and story beats instead of forcing everything to float. Check scene edges at maximum camera distance, matching subtitle cuts, prop contact, recognition from behind and actual audio/mouth timing.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/y4_storytime.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Whiteboard reasoning
|
|
2
|
+
|
|
3
|
+
Choose a continuous argument map or a sequence of separate paper pages. A moving-camera RSA-like board and a fixed-camera page-cut explanation are different grammars; keep the chosen spatial model consistent.
|
|
4
|
+
|
|
5
|
+
## Visual structure
|
|
6
|
+
|
|
7
|
+
Plan the final diagram before the drawing order. Use a visual metaphor or relational sketch, not a transcript handwritten in full. An off-white board, near-black line and one accent color are enough. A line width near .6–.7% of frame height is a useful source starting point; make hatching lighter. Define solid/dashed/dotted semantics once. Existing marks persist until explicitly erased or left outside the viewport.
|
|
8
|
+
|
|
9
|
+
## Motion and timing
|
|
10
|
+
|
|
11
|
+
Measure each stroke by arc length, derive its duration from pen speed, and return the reveal frontier as the pen-tip position. If revealing a complex image by a zigzag mask, attach the pen to that same frontier. Do not reveal several unrelated lines at once under a stationary hand. Source drawing tends to follow the spoken phrase slightly, often about .5 s; adapt English handwriting speed and phrase length to the measured voice. Complex art can be pre-drawn and discovered rather than drawn in real time.
|
|
12
|
+
|
|
13
|
+
## Camera and transitions
|
|
14
|
+
|
|
15
|
+
Fit the current drawing bounds with margins. Small smooth board moves retain substantial overlap with the previous argument. Use a whip only for a purposeful move to a distant area. A final pullback reveals the overall argument map and holds. A page-based version uses cuts to new pages instead. Keep board marks and pen in world space; keep any paper/erase texture scaled appropriately for the viewport.
|
|
16
|
+
|
|
17
|
+
## AnimaGuru adaptation and review
|
|
18
|
+
|
|
19
|
+
Use kit line primitives and local analytic path timing; generated hand art is optional if a hand helps the brief. The hand exits when idle and must not cover the conclusion. Print planned stroke completion times to catch a drawing that continues after the camera leaves. Check pen/frontier alignment, no cropped old words at edges, clear line semantics, connected argument groups and a real final reading hold. Whiteboard rendering alone does not establish a claim of better learning outcomes.
|
|
20
|
+
|
|
21
|
+
Adapted in English from [the upstream grammar](https://github.com/alchaincyf/huashu-art-motion/blob/2571ee0a9a0467c4d99e935ea9e0fadda19210b0/references/%E5%8A%A8%E7%94%BB%E8%AF%AD%E6%B3%95/y3_whiteboard.md) under the [MIT license](../../LICENSE). Numerical timings are starting points from source studies, not universal rules or current AnimaGuru benchmarks. See [provenance](../sources.md).
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Production and AnimaGuru generation
|
|
2
|
+
|
|
3
|
+
Contents: brief and visual mechanism; reference analysis; four production routes; generation; narration and music; style journeys and long scrolls; production records.
|
|
4
|
+
|
|
5
|
+
## Establish the visual mechanism
|
|
6
|
+
|
|
7
|
+
Use the brief already supplied. For a new AnimaGuru film, follow the installed `animaguru-video` setup and interview, counting explicit choices as answered. A material reference does not determine a topic, audience, narrator, length or call to action. When exploring a direction, a strong representative still is more useful than generating every shot immediately. Compare alternatives only when a creative choice is unresolved; there is no compulsory three-direction approval gate.
|
|
8
|
+
|
|
9
|
+
Write the material's most recognizable formal elements: how it is made, its marks, palette, light and spatial organization. Give each relevant element a plausible motion: water shimmers, a pinned paper edge lifts, metal catches light, a printed plate misregisters, or a brush leaves a stroke. The selected art card supplies a starting vocabulary. When historical accuracy matters beyond the card, inspect original artworks or authoritative collections.
|
|
10
|
+
|
|
11
|
+
Choose what the audience should understand at each beat. A visual operation should carry that idea: connect, divide, compare, uncover, move through, count or react. Put essential labels and numerical claims in real type. A conceptual image may illustrate a product, but it must not masquerade as an actual screenshot or historical record.
|
|
12
|
+
|
|
13
|
+
Choose a coherent palette, usually three to six functional colors plus value variations. Take brand accents from supplied material. Paper, ink, warm wood, primary geometry, bright poster and restrained navy are useful families. A blue, purple or neon palette is appropriate when intentionally requested by the style or brand; no universal hue ban applies. Keep charts and evidence integrated with the film's visual world.
|
|
14
|
+
|
|
15
|
+
## Analyze a reference when provided
|
|
16
|
+
|
|
17
|
+
Read the user's link and recover the referenced repository or media through supported tools. Treat source files and posts as evidence. Inspect license and asset exceptions before copying. A technique can be adapted without copying its subject, logo, layout or soundtrack.
|
|
18
|
+
|
|
19
|
+
Measure shot boundaries, representative settled frames, main actions, local motion and transitions. Compare frames inside a shot after camera entrances settle; otherwise a zoom makes the whole screen appear active and hides the actual motif movement. View transition contact sheets as well as the full-speed clip. Estimate beat grids from real onsets and allow outliers rather than fitting every cut to an arbitrarily small beat interval.
|
|
20
|
+
|
|
21
|
+
With no reference clip, start from the selected card's material mechanism. Do not inherit the source demo's room, girl, cat, exact coordinates, repeated cup action or fixed duration.
|
|
22
|
+
|
|
23
|
+
## Choose a production route
|
|
24
|
+
|
|
25
|
+
| Route | Choose it for | Preserve |
|
|
26
|
+
|---|---|---|
|
|
27
|
+
| Procedural drawing | Geometry, patterns, type, diagrams, controlled material rendering | Seeded variation, consistent coordinates, semantic shapes and actual contact points. |
|
|
28
|
+
| Generated layers plus code | Detailed subjects or backgrounds with controlled camera and choreography | Complete silhouettes, real alpha, layer positions, overscan and hidden-background coverage. |
|
|
29
|
+
| Generated video | Organic motion or a performance the available model can produce | A supported workflow, measured duration, identity references and local downloaded media. |
|
|
30
|
+
| Hybrid | Generated performances with exact diagrams, type, branding and evidence | Shared palette, light, timing, occlusion and honest provenance. |
|
|
31
|
+
|
|
32
|
+
Code-drawn original characters are valid when they fit the brief. Detailed faces, hands, poses and recurring character performance often benefit from generated assets. Choose on visible quality; do not turn one upstream author's character preference or model ranking into a universal prohibition.
|
|
33
|
+
|
|
34
|
+
For layered art, ask for enough canvas beyond the viewport to cover the planned motion. Moving a character reveals what was behind it; prepare that missing background before separating the layer. Preserve source image coordinates, crop offsets and semantic anchors when trimming transparent borders. Check downloaded alpha rather than assuming a transparent-looking preview contains transparency.
|
|
35
|
+
|
|
36
|
+
## Use the available AnimaGuru tools
|
|
37
|
+
|
|
38
|
+
Read the sibling `animaguru` skill for the installed environment's authentication, generation and job recovery rules. For local CLI work, discover the actual schema and help, authentication status, credits, catalog, project and existing assets. Do not read credential files. If the CLI is unavailable, use connected AnimaGuru tools; installing a CLI requires the user's agreement.
|
|
39
|
+
|
|
40
|
+
The local catalog describes known capabilities. Intersect it with the live project's enabled models and video profiles. A successful local dry run alone does not prove the remote provider is enabled. Choose image, speech, video or sprite options actually exposed by the selected tool; never carry arbitrary upstream provider names into requests.
|
|
41
|
+
|
|
42
|
+
Save a concrete request, inspect its estimate, and reuse existing media before submitting. Account for all planned images, speech, music and motion within the user's scope and budget. A request to create a skill is not permission to spend generation credits. A film-generation request supports a proportionate initial attempt under the existing authorization; paid retries remain bounded by that scope. Do not purchase credits or change provider settings as an incidental production step.
|
|
43
|
+
|
|
44
|
+
An art request can express the material independently of the subject:
|
|
45
|
+
|
|
46
|
+
> Original [medium] illustration of [specific subject and action]. [Composition, layer depth, light direction and scale.] Use [palette], [edge/mark treatment] and [recognizable material process]. Maintain [recurring identity details]. Keep [area] quiet for separately composed type. No essential lettering, logos or watermark.
|
|
47
|
+
|
|
48
|
+
For a transparent moving subject, request the tool's actual transparency option and a complete uncropped silhouette. For video, use saved project files as image/end-frame references only when that model supports them. An extracted local frame is not automatically a remote asset: use a supported import path. Do not assume extension, first/end-frame control, audio, seeds or a fixed clip duration exist for every model.
|
|
49
|
+
|
|
50
|
+
Save job receipts immediately. After a timeout or uncertain response, inspect the original job and assets before another submission. On an explicit provider failure, diagnose it and use a compatible enabled alternative within the authorized budget. Record the returned charge/refund result without guessing. Download finished files into the film and measure them; output playback should not require signed remote URLs.
|
|
51
|
+
|
|
52
|
+
## Narration, cues and music
|
|
53
|
+
|
|
54
|
+
Use one final narration track and its actual timing as the spine for a narrated film. Reuse the workspace's audio tools rather than building a second editor. In a current starter, `audio:vo` writes `production/audio/timing.json`; `cueSheet(timing)` and `joinCaptions()` keep graphics and captions aligned. Read local help and the installed `animaguru-video` skill for the precise command options.
|
|
55
|
+
|
|
56
|
+
Where word timing exists, identify an event by the word and occurrence, then resolve it to a frame during production. With caption-level timing, use that real cue plus a documented offset rather than claiming word precision. Re-resolve cues after voice edits. Numbers should finish counting on the spoken value, so compute the start from the desired finish. A reading hold begins after the final glyph or graphic is fully revealed.
|
|
57
|
+
|
|
58
|
+
Speech-led evidence, charts and whiteboard passages follow the spoken phrase. A music-led art montage or kinetic opening follows measured beats. To align a transition, schedule its visible reveal or impact on the accent, not merely its start:
|
|
59
|
+
|
|
60
|
+
`transition start = accent time − reveal fraction × transition duration`
|
|
61
|
+
|
|
62
|
+
Use an actual beat analysis for supplied/generated music. A source demo's 128 BPM is not a default tempo for all films. Shorten scene durations to accelerate a montage instead of blindly speeding up the entire performance. Use a coherent musical motif with changes in instrumentation when appropriate. Duck music beneath the narrator and leave time for the final idea or reaction. A synthesized test sound or temporary voice is a placeholder until replaced or explicitly accepted.
|
|
63
|
+
|
|
64
|
+
## Same-scene style journeys
|
|
65
|
+
|
|
66
|
+
This format has five separable layers: invariant composition, material renderer, shared choreography, material-aware transitions and rhythmic structure. Reuse the same identity and action across style boundaries. Derive that shared performance from global time; restarting a cup lift in every style looks like several separate actions. Only a style-specific local event should use segment time.
|
|
67
|
+
|
|
68
|
+
Give each art scene a main action and a small number of meaningful motif loops when an animated painting is the desired treatment. This is not a requirement for every explainer reading hold. Apply material treatment to characters as well as backgrounds, keeping facial landmarks legible. A signature transition can grow from the medium—gold, tiles, ink, paper or a reflection—without interrupting the continuous performance.
|
|
69
|
+
|
|
70
|
+
## Long-scroll journeys
|
|
71
|
+
|
|
72
|
+
Define a shared world contract: segment width, ground, subject height, travel speed, back/front layers, entry boundary and interaction anchors. Choose these dimensions for the new film. Style the subject at a world boundary without changing its ground contact or identity. Derive walk phase from distance traveled so speed changes do not make feet skate. Sitting, leaning and interaction poses require corresponding frames or a suitable rig.
|
|
73
|
+
|
|
74
|
+
Time local events relative to interaction start rather than seconds since segment entry. This lets travel speed change without retiming every action. Use a monotonic camera for a deliberately forward-only scroll; do not impose it on other film formats. Hide seams with real foreground or material boundaries. If music is composed after fixed visual boundaries, modest per-section tempo adjustments can align changes to bars; preserve natural phrasing and inspect the transitions by ear.
|
|
75
|
+
|
|
76
|
+
## Production records
|
|
77
|
+
|
|
78
|
+
Follow existing `production/` conventions: brief, sources, storyboard, generation requests/receipts, cue data and review evidence. Save actual resource paths and model identifiers. Keep all output media local, and retain original evidence alongside any crop. Do not add private project facts or unverified successes to the reusable skill. Generalize a lesson only when the observed cause supports it.
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# Rendering, camera and review
|
|
2
|
+
|
|
3
|
+
Contents: runtime mapping; material pipelines; characters and contact; camera; deterministic rendering; review and delivery.
|
|
4
|
+
|
|
5
|
+
## Map techniques to the installed runtime
|
|
6
|
+
|
|
7
|
+
The upstream source uses Canvas globals such as `PAINT`, `CAM`, `MO`, `DG`, `CL`, `CH`, `UI` and `TOON`. Those are provenance, not dependencies of this skill. Do not import them into AnimaGuru by name or claim their demos are locally installed.
|
|
8
|
+
|
|
9
|
+
In an existing AnimaGuru film, inspect `src/kit/index.ts` or workspace `runtime/kit/index.ts`, the film entry point and local skills. The current kit provides `FilmBase`, time windows, easing, seeded `rng`, text, panels, line reveals and asset helpers. Scene hooks register updates driven by absolute time. Use existing helpers before adding a small scene-local implementation. For Pixi code, read the available `pixijs` skill and relevant assets, container, graphics, sprite, text or filter references.
|
|
10
|
+
|
|
11
|
+
Keep the normal player contract: asynchronous seeking and frame rendering, film dimensions/fps/duration, local media, synchronized captions, audio and resource metadata. A hybrid SVG overlay outside the captured Pixi canvas may disappear from MP4 export; put intended film content inside the supported capture surface or explicitly rasterize/composite it. The source's standalone SVG demo is not compatible with a Canvas-only recorder without adaptation.
|
|
12
|
+
|
|
13
|
+
## Material pipeline
|
|
14
|
+
|
|
15
|
+
A useful default for painted scenes is:
|
|
16
|
+
|
|
17
|
+
1. Establish flat form, composition and value.
|
|
18
|
+
2. Repaint large regions with the selected material renderer.
|
|
19
|
+
3. Render small props separately with finer parameters.
|
|
20
|
+
4. Apply compatible material to subjects, preserving silhouettes and features.
|
|
21
|
+
5. Add motivated light, local motion and restored visible detail.
|
|
22
|
+
|
|
23
|
+
Change that order when the medium demands it. Ink starts with unpainted paper and adds strokes. Pattern art starts with a flat shape and its pattern. Chiaroscuro begins with a readable lit scene and multiplies a light map. Cut paper needs unified silhouettes and contact shadows. A universal filter on a completed flat scene rarely supplies those construction differences.
|
|
24
|
+
|
|
25
|
+
For brush and dot work, define a color group per region. Stable sampled colors with deliberate warm/cool relations work better than independent RGB jitter. Keep stroke positions fixed and change a flow field continuously; re-randomizing the whole screen produces flashing. Line boiling or a stepped pose cadence can be intentional in a local region. Distress, flakes and heavy dirt should usually protect focal faces and exact text.
|
|
26
|
+
|
|
27
|
+
Cache static surfaces, tessera layouts, patterns, masks and blur passes; prewarm heavy caches before capture. Reuse offscreens and reset their drawing state each frame. If reading pixels often, choose a read-friendly offscreen context. Write raw pixel data into an offscreen and composite it through the current camera/mask rather than bypassing them with `putImageData` on the final surface.
|
|
28
|
+
|
|
29
|
+
Keep compositing operations local. Repeated `source-in` can erase earlier patterns: build the pattern layer first and mask it once. `destination-out` on the final surface creates transparent holes; carve isolated pieces before compositing. A paper-color layer applied source-atop can wash a figure white; clip the texture and choose the actual intended blend. When a texture/brush pass excludes a rectangular prop region, it leaves a visible patch; draw that prop as a separate layer instead.
|
|
30
|
+
|
|
31
|
+
Check contour occlusion by part order. A final outline pass across every body part can draw hidden limbs through torsos. Either draw fill/texture/visible outline per part in depth order or derive a proper visible-line mask. Rounded caps and opposite path winding can leave holes at joints; union silhouettes before outlining when needed.
|
|
32
|
+
|
|
33
|
+
## Characters and contact
|
|
34
|
+
|
|
35
|
+
Measure landmarks from the actual art rather than guessing a generic skeleton. Preserve crop offset, alpha bounds, head/neck anchors, hands, feet and prop contact. Use the same transform for fill, material and outline. Squash and stretch around a support point; a center pivot makes the feet slide.
|
|
36
|
+
|
|
37
|
+
Use actual sprite-sheet rectangles, cadence and anchors from downloaded metadata. Do not assume every generated pose has identical height or padding. Normalize apparent height with measured feet/head landmarks, not destructive anatomical stretching. Do not mirror an asymmetric costume, prop or face detail merely to change travel direction. For walking, a genuine gait and distance-based phase are preferable to sliding a standing sprite.
|
|
38
|
+
|
|
39
|
+
For a hand meeting a world-space prop, transform the contact into the local rig coordinate space. Keep upper/forearm lengths and bend direction stable if using two-bone IK. A generated full-body frame enlarged for a face close-up can lose quality; prepare a matching bust/detail asset. Mouth activity should stop in silence. RMS-driven mouth opening is a coarse performance technique, not verified phoneme lip sync.
|
|
40
|
+
|
|
41
|
+
## Camera language
|
|
42
|
+
|
|
43
|
+
First identify what the viewer should inspect and whether it is already readable. If so, holding is appropriate. Fit the target's actual bounds with a margin; do not tune arbitrary coordinates until the words nearly fit. Keep neighboring half-cut labels outside the final frame.
|
|
44
|
+
|
|
45
|
+
| Action | Purpose | Useful starting range |
|
|
46
|
+
|---|---|---|
|
|
47
|
+
| Hold | Read, watch an existing action, or let a reaction land | Follow the voice and reading need. |
|
|
48
|
+
| Push | Make a specific detail readable | .6–1.5 s, eased. |
|
|
49
|
+
| Pull back | Restore context or reveal the whole relation | .8–2 s, a controlled long tail. |
|
|
50
|
+
| Pan/glide | Find the next object in one continuous world | .5–.9 s; longer for following a connecting line. |
|
|
51
|
+
| Fast push or slam | A reveal, reversal, key number or joke | Roughly .17–.35 s, followed by a hold. |
|
|
52
|
+
| Hard cut/jump-in | Change viewpoint or land a reaction | Immediate, with matched geometry when it is the same world. |
|
|
53
|
+
| Drift | Sustained atmosphere or an expressive music passage | Use only when the composition and mood benefit. |
|
|
54
|
+
|
|
55
|
+
These are source-derived design suggestions, not quotas. Do not fill every pause with a slow zoom or every noun with a fast one. Once pushed in, consider a pullback, sideways move or held cut. Source footage may already supply sufficient motion. A still image cannot prove camera smoothness; watch at normal speed.
|
|
56
|
+
|
|
57
|
+
For scale travel, use `z = exp(lerp(log(z0), log(z1), easedProgress))`. Continue rendering the live world through the transition rather than enlarging a low-resolution still. Preserve color/position landmarks at the cut, and make the mask or portal cover the complete frame. Use a larger world, background fill and blur overscan to prevent exposed edges. Keep captions, progress and persistent HUD in screen space when they should not move with the scene.
|
|
58
|
+
|
|
59
|
+
## Deterministic capture
|
|
60
|
+
|
|
61
|
+
Derive every state from absolute film time and stable IDs/seeds. Incremental particle integration, uncontrolled video clocks and render-call-order RNG make random seeks unreliable. Derive particle positions analytically, or use a reproducible simulation with deterministic checkpoints. Seed textures once; derive time-varying variation from explicit quantized time where required.
|
|
62
|
+
|
|
63
|
+
Compare a cold render of time A with warm/seek-order renders A → B → A. Inspect the actual raster output as well as state. Ensure caches include any inputs that alter their output, and invalidate them when those inputs change. Missing scenes, failed imports or syntax errors should fail visibly rather than silently produce a placeholder.
|
|
64
|
+
|
|
65
|
+
The upstream SVG example obtained equal screenshots under a specific Chromium configuration that disabled partial rasterization. Do not generalize that result to every browser. Verify the AnimaGuru capture surface and browser configuration actually used. Await decoded video frames and texture uploads before a frame render resolves.
|
|
66
|
+
|
|
67
|
+
Profile end-to-end capture, including GPU completion when relevant. Upstream milliseconds are measurements of another engine, machine and resolution. They are not guarantees. Optimize heavy work only after measuring the new film: cache static rendering, batch patterns and dots, and reduce unnecessary full-screen passes.
|
|
68
|
+
|
|
69
|
+
## Review and delivery
|
|
70
|
+
|
|
71
|
+
In the installed starter, use its build, `review`, `frames`, HTML5 and MP4 tools as documented by `animaguru-video`. For a multi-animation workspace, run from the workspace root with the selected animation argument. Keep the film's real resources and clip timing in the resource registry so the timeline and review tools inspect the finished film.
|
|
72
|
+
|
|
73
|
+
Review representative full-size stills, transition midpoints, extreme expressions and the smallest intended display. Watch the complete film at normal speed and listen to the final mix when those capabilities are available. Check:
|
|
74
|
+
|
|
75
|
+
- Does the selected material read immediately, including on the subjects?
|
|
76
|
+
- Does each visible event explain or express something, with natural reading holds?
|
|
77
|
+
- Are exact text, numbers, sources, labels and captions correct and unobscured?
|
|
78
|
+
- Are contact points, layer order, frame edges and scene continuity sound?
|
|
79
|
+
- Do cue timing, mouths, impacts and the actual recording agree?
|
|
80
|
+
- Are arbitrary seeks stable and exports complete at the requested dimensions, duration and frame count?
|
|
81
|
+
|
|
82
|
+
Motion-area, static-frame and jump statistics are diagnostics. A noisy VHS frame can score as moving while nothing meaningful happens; storytime and mathematical explanations may intentionally contain long static holds. Inspect suspicious intervals rather than enforcing a universal threshold or speeding up scenes to pass a score. Do not claim an independent review when none occurred.
|
|
83
|
+
|
|
84
|
+
Deliver the requested local playable film and/or export with production sources. Check that portable HTML plays from local packaged assets, including under a nested URL and iframe where relevant. For MP4 verify codecs, audio, dimensions, duration and exact frame count using the existing exporter. State any unperformed playback/listening checks. Publishing, uploading and package release are separate actions from local film creation.
|