flomotion 0.2.0 → 0.4.0

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.
Files changed (129) hide show
  1. package/CHANGELOG.md +58 -2
  2. package/LICENSE +1 -1
  3. package/README.md +29 -20
  4. package/dist/bin.mjs +6279 -2582
  5. package/dist/chunks/{chunk-QG2MOGKO.mjs → chunk-IGG2VZB6.mjs} +178 -14
  6. package/dist/chunks/{chunk-AVP5XX4G.mjs → chunk-PEC2UVQY.mjs} +138 -108
  7. package/dist/chunks/{chunk-IUSYVGP6.mjs → chunk-TTHAZGRG.mjs} +7 -7
  8. package/dist/chunks/{chunk-JCLRAREG.mjs → chunk-XWY6CUY6.mjs} +16 -16
  9. package/dist/chunks/{lock-MLQUU7X3.mjs → lock-WGPR7CJ2.mjs} +3 -3
  10. package/dist/components.mjs +19 -13
  11. package/dist/core.mjs +12 -12
  12. package/dist/hooks.mjs +8 -12
  13. package/dist/jsx-dev-runtime.mjs +1 -1
  14. package/dist/jsx-runtime.mjs +1 -1
  15. package/docs/components/Adjustment.md +2 -2
  16. package/docs/components/Audio.md +2 -2
  17. package/docs/components/B.md +3 -3
  18. package/docs/components/Captions.md +2 -2
  19. package/docs/components/Card.md +2 -2
  20. package/docs/components/Center.md +2 -2
  21. package/docs/components/Chart.md +2 -2
  22. package/docs/components/Chip.md +2 -2
  23. package/docs/components/Circle.md +2 -2
  24. package/docs/components/Clip.md +2 -2
  25. package/docs/components/CodeBlock.md +2 -2
  26. package/docs/components/Composition.md +2 -2
  27. package/docs/components/Counter.md +2 -2
  28. package/docs/components/Cursor.md +2 -2
  29. package/docs/components/Fonts.md +2 -2
  30. package/docs/components/GlassCard.md +2 -2
  31. package/docs/components/Grid.md +2 -2
  32. package/docs/components/Group.md +2 -2
  33. package/docs/components/Highlight.md +3 -3
  34. package/docs/components/I.md +3 -3
  35. package/docs/components/Image.md +2 -2
  36. package/docs/components/Line.md +2 -2
  37. package/docs/components/Marker.md +2 -2
  38. package/docs/components/Path.md +2 -2
  39. package/docs/components/Polygon.md +2 -2
  40. package/docs/components/Precomp.md +2 -2
  41. package/docs/components/ProgressRing.md +2 -2
  42. package/docs/components/Rect.md +2 -2
  43. package/docs/components/RoundRect.md +2 -2
  44. package/docs/components/SafeArea.md +2 -2
  45. package/docs/components/Scene.md +2 -2
  46. package/docs/components/Sequence.md +2 -2
  47. package/docs/components/Span.md +3 -3
  48. package/docs/components/SplitText.md +2 -2
  49. package/docs/components/Stack.md +2 -2
  50. package/docs/components/Stagger.md +2 -2
  51. package/docs/components/Strike.md +3 -3
  52. package/docs/components/Svg.md +2 -2
  53. package/docs/components/Text.md +2 -2
  54. package/docs/components/Title.md +2 -2
  55. package/docs/components/Track.md +2 -2
  56. package/docs/components/UIMock.md +2 -2
  57. package/docs/components/Underline.md +3 -3
  58. package/docs/components/Video.md +2 -2
  59. package/docs/gate2-manual-checklist.md +10 -9
  60. package/docs/hyperframes-notes.md +20 -20
  61. package/docs/later.md +23 -16
  62. package/docs/spec.md +83 -22
  63. package/package.json +1 -2
  64. package/skills/flomotion-studio/CHANGELOG.md +39 -0
  65. package/skills/flomotion-studio/README.md +81 -0
  66. package/skills/flomotion-studio/SKILL.md +90 -0
  67. package/skills/flomotion-studio/config/thresholds.md +191 -0
  68. package/skills/flomotion-studio/dataset/annotations/ansarada.md +53 -0
  69. package/skills/flomotion-studio/dataset/annotations/canva.md +49 -0
  70. package/skills/flomotion-studio/dataset/annotations/clickup.md +60 -0
  71. package/skills/flomotion-studio/dataset/annotations/gemini-stub.md +39 -0
  72. package/skills/flomotion-studio/dataset/annotations/monday.md +51 -0
  73. package/skills/flomotion-studio/dataset/annotations/phantom.md +53 -0
  74. package/skills/flomotion-studio/dataset/annotations/slack.md +54 -0
  75. package/skills/flomotion-studio/dataset/annotations/unknown-7.md +39 -0
  76. package/skills/flomotion-studio/dataset/annotations/vaylens.md +53 -0
  77. package/skills/flomotion-studio/dataset/brief-template.md +110 -0
  78. package/skills/flomotion-studio/dataset/rating-sheet.md +28 -0
  79. package/skills/flomotion-studio/dataset/schema.md +44 -0
  80. package/skills/flomotion-studio/evals/README.md +33 -0
  81. package/skills/flomotion-studio/evals/briefs/briefs.md +25 -0
  82. package/skills/{motion-studio/looks → flomotion-studio/examples/engine-looks}/kinetic.scene.tsx +1 -1
  83. package/skills/{motion-studio/looks → flomotion-studio/examples/engine-looks}/minimal.scene.tsx +1 -1
  84. package/skills/{motion-studio/looks → flomotion-studio/examples/engine-looks}/sketch.scene.tsx +1 -1
  85. package/skills/flomotion-studio/examples/flomotion-ad/LOG.md +39 -0
  86. package/skills/flomotion-studio/examples/flomotion-ad/brief.md +41 -0
  87. package/skills/flomotion-studio/examples/flomotion-ad/ideas.md +12 -0
  88. package/skills/flomotion-studio/examples/flomotion-ad/project.tsx +1694 -0
  89. package/skills/flomotion-studio/examples/flomotion-ad/script.md +28 -0
  90. package/skills/flomotion-studio/examples/flomotion-ad/storyboard.md +93 -0
  91. package/skills/{motion-studio → flomotion-studio}/examples/saas-promo/README.md +1 -1
  92. package/skills/{motion-studio → flomotion-studio}/examples/saas-promo/make-assets.sh +1 -1
  93. package/skills/{motion-studio → flomotion-studio}/examples/saas-promo/project.tsx +3 -3
  94. package/skills/flomotion-studio/looks/bold-kinetic.md +122 -0
  95. package/skills/flomotion-studio/looks/clean-light.md +122 -0
  96. package/skills/flomotion-studio/looks/dark-product.md +120 -0
  97. package/skills/flomotion-studio/references/anti-patterns.md +36 -0
  98. package/skills/flomotion-studio/references/assets.md +42 -0
  99. package/skills/flomotion-studio/references/block-recipes.md +249 -0
  100. package/skills/flomotion-studio/references/blocks.md +114 -0
  101. package/skills/flomotion-studio/references/catalogue.md +53 -0
  102. package/skills/flomotion-studio/references/checks.md +87 -0
  103. package/skills/flomotion-studio/references/clean-styles.md +56 -0
  104. package/skills/{motion-studio → flomotion-studio}/references/components.md +94 -94
  105. package/skills/flomotion-studio/references/copywriting.md +64 -0
  106. package/skills/flomotion-studio/references/decision-tables.md +80 -0
  107. package/skills/flomotion-studio/references/interview.md +145 -0
  108. package/skills/flomotion-studio/references/looks.md +45 -0
  109. package/skills/flomotion-studio/references/mcp-tools.md +70 -0
  110. package/skills/flomotion-studio/references/motion.md +68 -0
  111. package/skills/flomotion-studio/references/patterns.md +45 -0
  112. package/skills/flomotion-studio/references/review.md +56 -0
  113. package/skills/flomotion-studio/references/script-craft.md +59 -0
  114. package/skills/flomotion-studio/references/sound.md +57 -0
  115. package/skills/flomotion-studio/references/story-templates.md +52 -0
  116. package/skills/flomotion-studio/references/storyboard.md +62 -0
  117. package/skills/flomotion-studio/references/styles.md +70 -0
  118. package/skills/flomotion-studio/references/transitions.md +62 -0
  119. package/skills/flomotion-studio/references/typography.md +46 -0
  120. package/skills/flomotion-studio/references/workflow.md +96 -0
  121. package/skills/motion-studio/SKILL.md +0 -87
  122. package/skills/motion-studio/looks/kinetic.json +0 -89
  123. package/skills/motion-studio/looks/minimal.json +0 -91
  124. package/skills/motion-studio/looks/sketch.json +0 -83
  125. package/skills/motion-studio/references/motion.md +0 -73
  126. package/skills/motion-studio/references/review.md +0 -32
  127. package/skills/motion-studio/references/saas-promo.md +0 -29
  128. package/skills/motion-studio/references/sound.md +0 -47
  129. package/skills/motion-studio/references/typography.md +0 -50
@@ -0,0 +1,90 @@
1
+ ---
2
+ name: flomotion-studio
3
+ description: Produce professional SaaS promo and explainer videos with the flomotion MCP tools (the video is one TSX file, rendered by HyperFrames). Use when the user asks for a promo, ad, explainer, product video, kinetic-type video or motion graphics. Enforces a gated workflow, looks, scene blocks, and automatic quality checks.
4
+ ---
5
+
6
+ # flomotion-studio
7
+
8
+ You turn a brief into a finished, professional video through the flomotion MCP tools (the `flomotion` package, `flomotion mcp`). This skill exists to **constrain** you: you do not freestyle. You pick a style family, a look, a story template and scene blocks, fill their parameters, run the checks, and show the person drafts at fixed gates.
9
+
10
+ ## Hard rules (never break)
11
+
12
+ 0. **Interview first, extensively.** On every new video request, run the full interview in `references/interview.md` before any design work: short batches, adaptive follow-ups, a clarity score, and a read-back the person approves. Do not start G1 until clarity is >= 90% and the read-back is approved. If the person's first message already answers a lot, still confirm it back; never skip the read-back.
13
+ 1. **Never invent the brief.** Product, audience, claims, numbers, customer names and quotes come only from the person. If a fact is missing, ask or leave a visible placeholder. Never fabricate stats, testimonials or logos.
14
+ 2. **Original work only.** The reference catalogue (`dataset/`, `references/catalogue.md`) records *patterns* seen in public ads. Never reproduce another brand's logos, footage, music, UI, slogans, characters or exact layouts. Examples and test content use invented brands.
15
+ 3. **Start from structure, not a blank canvas.** Every video has: one style family, one look, one story template, and every scene is a named block (`references/blocks.md`). Custom scenes only when no block fits, and you must say why.
16
+ 4. **Text discipline.** One idea per scene. Headline beats are 6 words or fewer (8 max). No paragraphs. Max 2 type families from the active look.
17
+ 5. **Palette and fonts come from the look.** No colors, fonts or easings outside it.
18
+ 6. **You cannot hear or judge taste.** You can measure, render frames, read frames as images, and run checks. Everything subjective (look choice, font pairing, sound choice, "does it feel right") goes into a **Needs your review** list. Never claim a video "sounds good" or "looks great".
19
+ 7. **Verify, do not claim.** After each scene run `lint`; before showing a draft run `review`. Report what ran and what you saw. If something is unverified, say so. `review` computes 17 checks itself; the rest of `references/checks.md` you compute from `project_read` and frames (the table says which). A check that no one ran is reported as "not run", never as passed.
20
+ 7a. **Setup and the person's own material.** At the very start call `setup_status`, tell the person what is missing, and let them choose how to supply voice, transcript, sound effects and graphics (their own files are always an option). Keys are added by the person with `flomotion setup`; never ask for a key in the chat. Their rights statements are theirs: ask "yours, or licensed to you?" before importing, and ask permission before capturing their site or using another company's logo.
21
+ 7b. **Money and the network.** `voice_generate` only after `voice_quote`, the person's yes, and `confirm:true`. The server refuses otherwise (`quote_required`); never work around it. Sounds and fonts are fetched only through `sound_get` and `font_get`, which write the ledger.
22
+ 8. **Stop at every gate** (see `references/workflow.md`) and wait for approval. In unattended runs, state the reading you took and continue; stop only at irreversible or paid steps (voice generation, final render to a shared location).
23
+ 9. **Licensing.** Every sound, font and asset must be in the ledger with license data. No unlicensed assets. Required attributions go in the license report.
24
+ 10. **Determinism.** No `Math.random`, `Date.now`, or unseeded noise. All motion is a function of time.
25
+ 11. **Claims you can back.** Every number and promise on screen or in the voice is checked first (a count from `tools/list` or `review`, a figure the person gave with a source). If it cannot be checked, cut it or rewrite it as something that can; say what you checked in `LOG.md`. See `references/script-craft.md`.
26
+
27
+ ## Workflow (summary — full detail in `references/workflow.md`)
28
+
29
+ | Gate | You produce | Person approves |
30
+ |---|---|---|
31
+ | G0 Interview | Multi-round interview (`references/interview.md`), `interview.md` log, `brief.md`, clarity score, read-back | The read-back (brief) |
32
+ | G1 Direction | Style family, look, story template, one-line concept, hook options (3) | Direction |
33
+ | G2 Script | Script with beat list, on-screen text per beat, voiceover | Script |
34
+ | G3 Style frames | 3 to 5 key frames rendered in the chosen look | Look |
35
+ | G4 Storyboard | Beat table: block, duration, motion, sound tags | Storyboard |
36
+ | G5 Draft | Draft render + contact sheet + `review` results + Needs-your-review list | Draft |
37
+ | G6 Final | Final render + license report + changelog of fixes | Final |
38
+
39
+ ## How to choose (decision order)
40
+
41
+ 0. Read `ideas.md` if it exists (the person's brainstorm notes, see `references/storyboard.md`) and the quality bar in `references/clean-styles.md`.
42
+ 1. `references/decision-tables.md` → style family and story template from the brief.
43
+ 2. `references/styles.md` → the family's recipe (structure, design, motion, sound).
44
+ 3. `references/looks.md` + `looks/*.md` → pick a look. Do not build a new look unless the person supplied direction notes.
45
+ 4. `references/story-templates.md` → beat sheet with duration ranges.
46
+ 5. `references/blocks.md` → block per beat with parameters.
47
+ 6. `references/script-craft.md` + `references/copywriting.md` → write hook, pain, turn, promise, proof, reveal, CTA.
48
+ 7. `references/motion.md`, `references/typography.md`, `references/sound.md` → motion, type and sound rules.
49
+ 8. `references/checks.md` + `references/review.md` → run and report quality checks.
50
+ 9. `references/anti-patterns.md` → scan before every draft.
51
+
52
+ ## Reference index (load only what the current step needs)
53
+
54
+ | File | Use it for |
55
+ |---|---|
56
+ | `references/interview.md` | The extensive interview: rounds, question bank, clarity score, read-back |
57
+ | `references/workflow.md` | Gates, unattended behavior |
58
+ | `references/catalogue.md` | What the 8 reference ads do (pattern source) |
59
+ | `references/patterns.md` | 21 rules distilled from the catalogue |
60
+ | `references/styles.md` | 7 style-family recipes |
61
+ | `references/looks.md` | Look token spec and the 3 starter looks |
62
+ | `references/blocks.md` | 13 core and 13 extra scene blocks with parameters |
63
+ | `references/story-templates.md` | 15 s, 30 s, 45 s beat sheets and variants |
64
+ | `references/decision-tables.md` | Brief → style, look, template, blocks |
65
+ | `references/copywriting.md` | Hook types, word limits, sentence-splitting, proof, CTA |
66
+ | `references/script-craft.md` | The engineered script: hook, pain, turn, promise, proof, reveal, CTA, timing, audit |
67
+ | `references/clean-styles.md` | What clean, catchy motion looks like (from three reference pieces) and how to apply it |
68
+ | `references/storyboard.md` | The Storyboard tab: `ideas.md`, `storyboard.md`, how the board shows what is built |
69
+ | `references/motion.md` | Easing, timing, blur, impacts, 8-direction, transitions |
70
+ | `references/transitions.md` | Signature transitions with TSX: slab, iris, stripes, halves, the two-dots turn, the vault door, the mascot |
71
+ | `references/typography.md` | Scale, emphasis methods, format minimums |
72
+ | `references/sound.md` | Sound palettes, impact placement, mix targets, licensing |
73
+ | `references/checks.md` | The 23 automatic checks |
74
+ | `references/review.md` | Review protocol, rating rubric, fix loop |
75
+ | `references/anti-patterns.md` | Concrete mistakes with before and after |
76
+ | `references/mcp-tools.md` | The real flomotion tool list, call order, error codes |
77
+ | `references/assets.md` | Where every graphic comes from (icons, logos, screenshots, photos), the asset plan, permission rules |
78
+ | `references/block-recipes.md` | TSX recipes for the 13 core blocks, built from real components |
79
+ | `references/components.md` | Every component and effect with its props (generated from the schemas: do not edit) |
80
+ | `config/thresholds.md` | All numeric defaults (tunable) |
81
+ | `dataset/` | Annotation schema, reference annotations, rating sheet |
82
+ | `evals/` | 10 test briefs and the evaluation procedure |
83
+
84
+ ## Live view
85
+
86
+ The person can watch your progress in a browser: `flomotion ui` in the project folder (or the `ui` address `project_read` returns when the server was started with `--ui`). It opens on the **Storyboard** tab: the person's ideas (`ideas.md`) and your plan (`storyboard.md`) as a timeline that turns green as you build. It shows each tool call as you make it, the scene outline and timeline, the latest frames, review results, and the gate files you write (`brief.md`, `script.md`, `storyboard.md`, `LOG.md`). Tell them once at G0 that it exists. Keep those files current: the page shows gate progress from them.
87
+
88
+ ## Output style
89
+
90
+ Be brief in chat. Show tables for beats and results. At each gate end with the single decision you need. Never paste long code to the person; write it to the project through the tools.
@@ -0,0 +1,191 @@
1
+ # Thresholds
2
+
3
+ All values are initial proposals. Tune from rendered results and human ratings. Never hard-code these elsewhere. Every numeric default the checks use lives here.
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | fps | 30 |
8
+
9
+ ## durations_s
10
+
11
+ | Field | Value |
12
+ | --- | --- |
13
+ | short | 15 |
14
+ | standard | 30 |
15
+ | long | 45 |
16
+ | tolerance | 2 |
17
+
18
+ ## scene
19
+
20
+ | Field | Value |
21
+ | --- | --- |
22
+ | min_s | 1.0 |
23
+ | typical_min_s | 1.5 |
24
+ | typical_max_s | 4.0 |
25
+ | max_s | 6.0 |
26
+ | hook_max_s | 3.0 |
27
+ | cta_min_s | 2.0 |
28
+
29
+ ## motion
30
+
31
+ | Field | Value |
32
+ | --- | --- |
33
+ | first_motion_max_s | 0.3 |
34
+ | max_static_s | 0.5 |
35
+ | novelty_window_s | 2.0 |
36
+ | min_new_elements_per_window | 1 |
37
+ | motion_blur_shutter_deg | 180 |
38
+ | overshoot_max_pct | 8 |
39
+
40
+ ### transition_s
41
+
42
+ | Field | Value |
43
+ | --- | --- |
44
+ | min | 0.25 |
45
+ | max | 0.7 |
46
+
47
+ ### stagger_ms
48
+
49
+ | Field | Value |
50
+ | --- | --- |
51
+ | min | 40 |
52
+ | max | 120 |
53
+
54
+ ## text
55
+
56
+ | Field | Value |
57
+ | --- | --- |
58
+ | headline_words_max | 6 |
59
+ | headline_words_hard_max | 8 |
60
+ | words_per_scene_max | 12 |
61
+ | reading_wps_max | 3.0 |
62
+ | caption_wps_max | 3.5 |
63
+ | families_max | 2 |
64
+ | contrast_ratio_min | 4.5 |
65
+ | contrast_ratio_large_min | 3.0 |
66
+ | large_text_px | 48 |
67
+
68
+ ### min_px
69
+
70
+ #### 9:16
71
+
72
+ | Field | Value |
73
+ | --- | --- |
74
+ | headline | 72 |
75
+ | body | 44 |
76
+ | caption | 40 |
77
+
78
+ #### 16:9
79
+
80
+ | Field | Value |
81
+ | --- | --- |
82
+ | headline | 64 |
83
+ | body | 36 |
84
+ | caption | 34 |
85
+
86
+ #### 1:1
87
+
88
+ | Field | Value |
89
+ | --- | --- |
90
+ | headline | 64 |
91
+ | body | 38 |
92
+ | caption | 36 |
93
+
94
+ #### 4:5
95
+
96
+ | Field | Value |
97
+ | --- | --- |
98
+ | headline | 68 |
99
+ | body | 40 |
100
+ | caption | 38 |
101
+
102
+ ## safe_area_px
103
+
104
+ ### 9:16
105
+
106
+ | Field | Value |
107
+ | --- | --- |
108
+ | top | 250 |
109
+ | bottom | 380 |
110
+ | left | 64 |
111
+ | right | 64 |
112
+
113
+ ### 16:9
114
+
115
+ | Field | Value |
116
+ | --- | --- |
117
+ | top | 54 |
118
+ | bottom | 54 |
119
+ | left | 96 |
120
+ | right | 96 |
121
+
122
+ ### 1:1
123
+
124
+ | Field | Value |
125
+ | --- | --- |
126
+ | top | 54 |
127
+ | bottom | 54 |
128
+ | left | 54 |
129
+ | right | 54 |
130
+
131
+ ### 4:5
132
+
133
+ | Field | Value |
134
+ | --- | --- |
135
+ | top | 150 |
136
+ | bottom | 250 |
137
+ | left | 54 |
138
+ | right | 54 |
139
+
140
+ ## sync
141
+
142
+ | Field | Value |
143
+ | --- | --- |
144
+ | voice_tolerance_frames | 3 |
145
+ | impact_sound_tolerance_frames | 2 |
146
+
147
+ ## audio
148
+
149
+ | Field | Value |
150
+ | --- | --- |
151
+ | target_lufs | -14 |
152
+ | lufs_tolerance | 1.0 |
153
+ | true_peak_dbtp_max | -1.0 |
154
+ | voice_over_music_db_min | 12 |
155
+ | duck_attack_ms | 80 |
156
+ | duck_release_ms | 400 |
157
+
158
+ ### bus_levels_db
159
+
160
+ | Field | Value |
161
+ | --- | --- |
162
+ | voice | -3 |
163
+ | music | -18 |
164
+ | sfx | -10 |
165
+
166
+ ## color
167
+
168
+ | Field | Value |
169
+ | --- | --- |
170
+ | palette_tolerance_deltaE | 12 |
171
+
172
+ ### grain_opacity_pct
173
+
174
+ | Field | Value |
175
+ | --- | --- |
176
+ | min | 3 |
177
+ | max | 8 |
178
+
179
+ ## layout
180
+
181
+ | Field | Value |
182
+ | --- | --- |
183
+ | text_overlap_iou_max | 0.0 |
184
+ | clip_tolerance_px | 0 |
185
+
186
+ ## determinism
187
+
188
+ | Field | Value |
189
+ | --- | --- |
190
+ | sample_frames | 12 |
191
+ | max_pixel_diff | 0 |
@@ -0,0 +1,53 @@
1
+ # Reference annotation: Ansarada
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | ansarada |
8
+ | brand | Ansarada |
9
+ | source | user-collected stills from a compilation, rank 1 in overlay |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | S1 |
15
+ | confidence | M |
16
+ | rating | none |
17
+ | rating_notes | none |
18
+ | pain_share | 0.15 |
19
+ | turn | split-wipe match-cut on shared circular geometry (dark to light) |
20
+ | motif | circle (wheel to vault door) |
21
+ | palette_source | single-accent |
22
+ | palette_notes | black/dark red then white and light grey; one lime accent after the turn |
23
+ | type_notes | large neo-grotesque, left aligned, generous space |
24
+ | text_emphasis | scale, contrast of dark vs white worlds |
25
+ | grain | heavy |
26
+ | blur_on_motion | none |
27
+ | sentence_split | none |
28
+ | human_presence | none |
29
+ | ui_fidelity | skeleton |
30
+ | transitions | split-wipe match-cut, door open reveal |
31
+ | proof_type | credential |
32
+ | sound_notes | none |
33
+ | patterns | 1, 2, 3, 4, 5, 6, 7, 13, 21 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | pain | MetaphorImage | none | grainy B/W roulette wheel, red tint, close camera |
40
+ | 2 | turn | WipeMatchCut | none | vertical split; wheel center matches vault door center; dark to white |
41
+ | 3 | promise | Promise | Hello simple and secure data rooms | black text on white, left aligned |
42
+ | 4 | product | Reveal3D | none | white 3D vault door opening onto glowing lime disc |
43
+ | 5 | product | DeviceMock | none | tilted laptop, skeleton UI with colored status pills |
44
+ | 6 | product | DeviceMock | none | same UI on phone |
45
+ | 7 | brand | LogoCard | none | black logo on white |
46
+ | 8 | proof | ProofCredential | First data room to be ISO 27001:2022 certified | large black text on white |
47
+
48
+ ## Lessons
49
+
50
+ - pain can be an image, not words
51
+ - match-cut on shared geometry makes the turn feel designed
52
+ - skeleton UI hides complexity
53
+ - proof is a concrete credential
@@ -0,0 +1,49 @@
1
+ # Reference annotation: Canva (video)
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | canva |
8
+ | brand | Canva (video) |
9
+ | source | user-collected stills from a compilation, rank 6 in overlay |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | S6 |
15
+ | confidence | M |
16
+ | rating | none |
17
+ | rating_notes | none |
18
+ | pain_share | 0.2 |
19
+ | turn | real footage to product prompt using the same footage |
20
+ | motif | the footage itself |
21
+ | palette_source | mixed |
22
+ | palette_notes | warm real colors in footage; clean white UI with purple accent; teal-violet gradient end card |
23
+ | type_notes | script logotype on footage; plain sans in UI |
24
+ | text_emphasis | none |
25
+ | grain | none |
26
+ | blur_on_motion | none |
27
+ | sentence_split | none |
28
+ | human_presence | story |
29
+ | ui_fidelity | stylized |
30
+ | transitions | footage to UI thumbnails |
31
+ | proof_type | none |
32
+ | sound_notes | none |
33
+ | patterns | 4, 15, 16 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | hook | HumanMoment | none | woman chopping vegetables, phone held in her mouth to film; script logotype overlay |
40
+ | 2 | pain | HumanMoment | none | wide shot with ring light |
41
+ | 3 | bridge | CursorTag | none | overhead hands, purple selection frame, green cursor, name tag |
42
+ | 4 | product | PromptUI | What's the topic of your video? / Sunday slow food energ/ | white prompt box, four thumbnails from the same footage, option chips |
43
+ | 5 | brand | LogoPill | Canva Video | teal-to-violet gradient, white pill |
44
+
45
+ ## Lessons
46
+
47
+ - story first, product as a simple prompt
48
+ - footage becomes the UI input
49
+ - cursor name tag as a character
@@ -0,0 +1,60 @@
1
+ # Reference annotation: ClickUp
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | clickup |
8
+ | brand | ClickUp |
9
+ | source | user-collected stills from a compilation, rank 3 in overlay |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | S3 |
15
+ | confidence | M |
16
+ | rating | none |
17
+ | rating_notes | none |
18
+ | pain_share | 0.5 |
19
+ | turn | palette flip: monochrome thin line to saturated grained gradient; line ends as the period |
20
+ | motif | continuous black/white line with round head |
21
+ | palette_source | mixed |
22
+ | palette_notes | pain: white/black/pale pink and dark space; solution: magenta-orange-violet gradient with grain |
23
+ | type_notes | tight-tracked geometric sans; grey lead-in, black or white payoff; tilt for energy |
24
+ | text_emphasis | grey to black, scanline strike, word swap |
25
+ | grain | heavy |
26
+ | blur_on_motion | yes |
27
+ | sentence_split | none |
28
+ | human_presence | none |
29
+ | ui_fidelity | stylized |
30
+ | transitions | wedge wipe, line sweep, card fly-through with blur |
31
+ | proof_type | none |
32
+ | sound_notes | none |
33
+ | patterns | 3, 4, 5, 7, 8, 9, 10, 13, 14, 19, 21 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | pain | OverwhelmDiagram | Work Sprawl is killing us. | unreadable diagram of boxes and red arrows behind huge title |
40
+ | 2 | bridge | MotifLine | none | thick black line with round head, speed streaks |
41
+ | 3 | pain | PainFlavor | Too many apps... | app icons tangled on the line with badges and warnings |
42
+ | 4 | bridge | Bridge | none | dark wedge narrows to the line's head and wipes to white |
43
+ | 5 | pain | PainFlavor | Too many AI tools... | dark starry bg, line loops through AI logos |
44
+ | 6 | pain | QuestionBubbles | Context is lost. | chat-like bubbles of questions along the line |
45
+ | 7 | promise | TextSwap | Work sprawl kills human productivity / AI productivity | grey lead-in, bold black payoff; tilted; swap |
46
+ | 8 | turn | Bridge | It's time to kill sprawl. | pale gradient; the line ends as the period |
47
+ | 9 | other | StrikeText | kill Sprawl | scanline glitch strike |
48
+ | 10 | product | CardGrid | none | saturated magenta/orange/purple grained gradient; cards fly with heavy motion blur; grid of mini-apps |
49
+ | 11 | promise | Hook | A New Era of AI | soft white star blob on gradient |
50
+ | 12 | promise | OrbitCards | A New Era of Craft & Quality | metal-edged cards orbit the text |
51
+ | 13 | brand | VersionBadge | ClickUp 4.0 / AI Workspace | logo with version badge; motion-blurred text |
52
+ | 14 | product | CardGrid | none | tilted isometric UI card wall |
53
+
54
+ ## Lessons
55
+
56
+ - one continuous motif ties scenes
57
+ - pain takes about half the runtime in several flavors
58
+ - palette flip marks the turn
59
+ - template reuse with a word swap
60
+ - text strike for kill
@@ -0,0 +1,39 @@
1
+ # Reference annotation: Google Gemini (stub)
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | gemini-stub |
8
+ | brand | Google Gemini (stub) |
9
+ | source | one frame only: bold white 'powerful tools' over a dark mascot silhouette on violet; overlay '#8 Google Gemini' |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | unknown |
15
+ | confidence | L |
16
+ | rating | none |
17
+ | rating_notes | need more frames to annotate |
18
+ | pain_share | none |
19
+ | turn | none |
20
+ | motif | none |
21
+ | palette_source | none |
22
+ | palette_notes | violet, near-black |
23
+ | type_notes | heavy white geometric sans, tight tracking, overlaps a dark shape |
24
+ | text_emphasis | none |
25
+ | grain | none |
26
+ | blur_on_motion | none |
27
+ | sentence_split | none |
28
+ | human_presence | none |
29
+ | ui_fidelity | none |
30
+ | transitions | none |
31
+ | proof_type | none |
32
+ | sound_notes | none |
33
+ | patterns | 2 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | other | none | powerful tools | giant white geometric text over a dark mascot shape on violet |
@@ -0,0 +1,51 @@
1
+ # Reference annotation: monday.com
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | monday |
8
+ | brand | monday.com |
9
+ | source | user-collected stills from a compilation, rank 5 in overlay |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | S5 |
15
+ | confidence | M |
16
+ | rating | none |
17
+ | rating_notes | none |
18
+ | pain_share | 0.0 |
19
+ | turn | none |
20
+ | motif | colored status cells |
21
+ | palette_source | mixed |
22
+ | palette_notes | pastel lavender/blue gradient; saturated status colors (green, orange, red, blue, pink) as the signature |
23
+ | type_notes | clean geometric sans, large board title |
24
+ | text_emphasis | color blocks as data |
25
+ | grain | none |
26
+ | blur_on_motion | yes |
27
+ | sentence_split | none |
28
+ | human_presence | talking-head |
29
+ | ui_fidelity | real |
30
+ | transitions | blur-in staggered rows, circle-to-cell morph |
31
+ | proof_type | none |
32
+ | sound_notes | none |
33
+ | patterns | 4, 12, 13, 14 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | hook | Spokesperson | none | man talking to camera in an open-plan office |
40
+ | 2 | brand | BrandPill | none | logo on a frosted glass pill over a pastel gradient |
41
+ | 3 | product | UIZoom | none | board UI with colored status and priority cells, avatars |
42
+ | 4 | product | UIZoom | none | dashboard widgets: progress bar, revenue vs goal, trend line |
43
+ | 5 | product | ChatDemo | Please collect all live Q4 projects into one board / Sure, I'm on it! | AI assistant chat |
44
+ | 6 | product | CellFill | none | board builds itself: circles morph into filled cells, avatars slide in |
45
+
46
+ ## Lessons
47
+
48
+ - demo-led: UI crops are the content
49
+ - AI request/response in plain language
50
+ - shape morph as progress
51
+ - color-coded cells make the product recognizable
@@ -0,0 +1,53 @@
1
+ # Reference annotation: Phantom (wallet)
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | phantom |
8
+ | brand | Phantom (wallet) |
9
+ | source | user-collected stills; overlay says '#8 Google Gemini' but on-screen brand is Phantom (label mismatch to confirm) |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | S7 |
15
+ | confidence | M |
16
+ | rating | none |
17
+ | rating_notes | none |
18
+ | pain_share | 0.25 |
19
+ | turn | old grey small windows to big saturated 3D object |
20
+ | motif | the 3D wallet object |
21
+ | palette_source | single-accent |
22
+ | palette_notes | electric violet alternating with pure black; white text |
23
+ | type_notes | big lowercase geometric sans, white |
24
+ | text_emphasis | short lines of 2-4 words, lowercase |
25
+ | grain | none |
26
+ | blur_on_motion | none |
27
+ | sentence_split | none |
28
+ | human_presence | none |
29
+ | ui_fidelity | stylized |
30
+ | transitions | color flip, 3D tumble, burst |
31
+ | proof_type | none |
32
+ | sound_notes | none |
33
+ | patterns | 2, 3, 7, 17, 18, 19, 20, 21 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | pain | OldWay | none | three plain grey desktop windows: connect, collections, gas fee table |
40
+ | 2 | turn | ClaimWith3D | a home for your NFTs | violet screen, black circle with glassy 3D NFT frame and props |
41
+ | 3 | product | GestureCallout | Pin it! | phone long-press menu with bubble and touch ripple |
42
+ | 4 | promise | WordBeat | one wallet | black screen, 3D bits orbit |
43
+ | 5 | product | Object3D | none | 3D purple wallet with app cards sliding in and out |
44
+ | 6 | product | WordBeat | drag | floating coins, large blobs, black corner |
45
+ | 7 | promise | Burst | a wallet you'll love | radial black dashes behind the wallet |
46
+ | 8 | cta | UrlCard | phantom.app | white on black |
47
+
48
+ ## Lessons
49
+
50
+ - old way small and grey, new way big and colored
51
+ - 2 to 4 word lines
52
+ - gesture callouts
53
+ - URL end card
@@ -0,0 +1,54 @@
1
+ # Reference annotation: Slack
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | slack |
8
+ | brand | Slack |
9
+ | source | user-collected stills from a compilation, rank 2 in overlay |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | S2 |
15
+ | confidence | M |
16
+ | rating | none |
17
+ | rating_notes | none |
18
+ | pain_share | 0.0 |
19
+ | turn | question to answered-by-customers |
20
+ | motif | logo-color palette and rounded shapes |
21
+ | palette_source | per-scene-blocks |
22
+ | palette_notes | pink, green, blue, yellow, purple blocks (logo colors); dark maroon / dark green text with white payoff words |
23
+ | type_notes | giant geometric sans, cropped at frame edges; product UI font in the search box |
24
+ | text_emphasis | color (white payoff words), gesture (selection box, magnifier) |
25
+ | grain | none |
26
+ | blur_on_motion | none |
27
+ | sentence_split | none |
28
+ | human_presence | b-roll |
29
+ | ui_fidelity | stylized |
30
+ | transitions | color-block cuts, shape assembly |
31
+ | proof_type | named customers |
32
+ | sound_notes | none |
33
+ | patterns | 1, 2, 6, 10, 13, 14, 17 |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | brand | LogoCard | none | logo with parent-company lockup on white |
40
+ | 2 | hook | TypedQuery | Is Slack changing the way businesses do business? | typed in a purple search field, extreme close crop, caret |
41
+ | 3 | proof | LogoSwap | Just ask Roku | customer logo replaces a word; blurred footage behind; white type |
42
+ | 4 | proof | QuoteCard | Things move faster because everything is in one place. | pink block, key words white, attribution lockup (logo, name, title) |
43
+ | 5 | proof | LogoSwap | And Canva / And Signable | roll call over b-roll with logo-in-sentence |
44
+ | 6 | proof | QuoteCard | Slack has been a huge part of how we're building for scale | green block; selection box and cursor land on the word scale |
45
+ | 7 | product | SpotlightWord | none | magnifier reveals white letters on blue |
46
+ | 8 | product | CardCollage | none | tight crop of colorful UI cards (stats, rocket, table) |
47
+ | 9 | brand | ShapeLogo | none | logo assembled from large colored shapes |
48
+
49
+ ## Lessons
50
+
51
+ - proof through other people's voices
52
+ - one color world per scene
53
+ - key word in white, lead-in dark
54
+ - brand built from motion shapes
@@ -0,0 +1,39 @@
1
+ # Reference annotation: unidentified (overlay '#7 -' cropped)
2
+
3
+ Patterns seen in a public ad, annotated from stills. Never reproduce another brand's work (see `SKILL.md` rule 2).
4
+
5
+ | Field | Value |
6
+ | --- | --- |
7
+ | id | unknown-7 |
8
+ | brand | unidentified (overlay '#7 -' cropped) |
9
+ | source | one frame only: live-action boardroom, man with white hair and glasses mid-shout, blurred foreground head, cool grey grade |
10
+ | url | none |
11
+ | format | 16:9 |
12
+ | duration_s | none |
13
+ | platform | none |
14
+ | style_family | unknown |
15
+ | confidence | L |
16
+ | rating | none |
17
+ | rating_notes | identify the ad and send more frames |
18
+ | pain_share | none |
19
+ | turn | none |
20
+ | motif | none |
21
+ | palette_source | none |
22
+ | palette_notes | cool grey blue grade |
23
+ | type_notes | none |
24
+ | text_emphasis | none |
25
+ | grain | none |
26
+ | blur_on_motion | none |
27
+ | sentence_split | none |
28
+ | human_presence | story |
29
+ | ui_fidelity | none |
30
+ | transitions | none |
31
+ | proof_type | none |
32
+ | sound_notes | none |
33
+ | patterns | |
34
+
35
+ ## beats
36
+
37
+ | n | role | block | text | notes |
38
+ | --- | --- | --- | --- | --- |
39
+ | 1 | other | none | none | cinematic live action, shallow depth of field, dramatic performance |