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,28 @@
1
+ # Script: flomotion ad (30 s, 9:16, 128 bpm)
2
+
3
+ Built with `references/script-craft.md`: contrast hook, rule-of-four pain, a silent visual turn, a one-fact promise, verified proof in threes, a reveal and a callback, one command.
4
+ One beat = 0.46875 s; 64 beats = 30 s. Beats per scene: hook 7, pain 8, turn 4, promise 6, product 7, props 7, checks 6, licences 7, proof 6, CTA 6.
5
+
6
+ | # | Time | Technique | Spoken text (ElevenLabs, Jessica) | On screen |
7
+ |---|---|---|---|---|
8
+ | 1 | 0-3.3 | Contrast hook, loop opened | "Stop editing videos. Start describing them!" | Stop editing. (struck) Start describing. + a typed prompt |
9
+ | 2 | 3.3-7.0 | Rule of four | "Timelines." "Dragging." "Exporting." "Again." | one word per colour block, the last one glitches |
10
+ | 3 | 7.0-8.9 | Visual metaphor, silent | (none) | two big dots converge, split, grow into the next slide |
11
+ | 4 | 8.9-11.7 | Promise = name + one fact | "Meet flow-motion. One T S X file." | vault door opens on the name |
12
+ | 5 | 11.7-15.0 | Show the work | "Claude builds it." "You watch it come alive." | the real live view, the activity feed floats out |
13
+ | 6a | 15.0-18.3 | Feature 1 | "Every control? A typed prop." | the real TSX, the preview grows when the value changes |
14
+ | 6b | 18.3-21.1 | Feature 2 (a number) | "Seventeen checks. Before you even look." | 17, the real review panel scrolls |
15
+ | 6c | 21.1-24.4 | Feature 3, rule of three | "Every sound and font: licensed, logged, locked." | the real ledger; a vault door closes over it |
16
+ | 7 | 24.4-27.2 | Proof | "Thirty-nine tools." "Diff it like code." | 39, a two-line diff |
17
+ | 8 | 27.2-30.0 | Reveal + callback + one action | "Start now. N P X flow-motion." | `$ npx flomotion`, "a 30 s ad for flomotion: rendered", "This whole ad is one TSX file." |
18
+
19
+ ## Rules kept
20
+
21
+ - No word on screen that is not spoken or a number; headlines 6 words or fewer.
22
+ - Every number verified (39 tools, 17 checks); "same video every time" was cut because it is not true byte for byte here.
23
+ - Spoken spellings: "flow-motion", "T S X", "N P X"; the captions show the real spellings (flomotion, TSX, npx).
24
+ - The copy avoids heteronyms: the line is "come alive", not "live".
25
+
26
+ ## Voice settings
27
+
28
+ Voice Jessica (`cgSgspJ2msm6clMCkdW9`), model `eleven_multilingual_v2`, stability 0.30, similarity 0.80, style 0.55, speed 1.10, speaker boost on. One clip per phrase (`scripts/build-voice.py` places each on its beat; a line that overran was sped up by at most 1.2x).
@@ -0,0 +1,93 @@
1
+ # Storyboard: flomotion ad
2
+
3
+ Hero: flo, a dot with eyes (on its own track) · Turn: the two-dots turn at 7.0 s (marker `turn-marker` at 8.9 s) · Tempo: 128 bpm
4
+
5
+ ## 1. Hook · 0-3.28 s
6
+ - Block: Hook
7
+ - Scene: hook
8
+ - Voice: "Stop editing videos. Start describing them!"
9
+ - On screen: Stop editing. (struck through) Start describing. A prompt types in: a 30 s ad for flomotion
10
+ - Motion: the strike draws on after "videos"; the highlight wipes behind "describing"; the prompt card rises
11
+ - Sound: whoosh + hit on "Start", type ticks
12
+ - Why it works: contrast hook with no brand name; the typed prompt is paid off in the CTA
13
+
14
+ ## 2. Pain · 3.28-7.03 s
15
+ - Block: Problem
16
+ - Scene: pain-1, pain-2, pain-3, pain-4
17
+ - Voice: "Timelines." "Dragging." "Exporting." "Again."
18
+ - On screen: one word per beat on a blue, green, purple, red block
19
+ - Motion: slab, vertical, iris and side wipes between the words; "Again." glitches and shakes
20
+ - Sound: whip on every cut, a glitch whip on the last
21
+ - Why it works: four specific verbs of the old way, rule of four
22
+
23
+ ## 3. Turn · 7.03-8.91 s
24
+ - Block: Bridge
25
+ - Scene: turn
26
+ - Voice: (silent)
27
+ - On screen: two big dots converge into a small ringed dot, split into two small dots, grow into the next slide
28
+ - Motion: converge 0.8 s, merge, split 0.3 s, grow with power3.in
29
+ - Sound: the music ducks, a hit on the merge, a pop on the split, riser and hit land on the drop
30
+ - Why it works: a match cut on a circle; the story turns without a word
31
+
32
+ ## 4. Promise · 8.91-11.72 s
33
+ - Block: ProductReveal
34
+ - Scene: promise
35
+ - Voice: "Meet flow-motion. One T S X file."
36
+ - On screen: Meet flomotion; a vault door opens onto a yellow disc; One TSX file.
37
+ - Motion: the door lands, its wheel spins, it shrinks and turns away
38
+ - Sound: hit when it lands, tick for the unlock, whip when it opens
39
+ - Why it works: the circle from the turn becomes the door; the line is a fact
40
+
41
+ ## 5. Product · 11.72-15.0 s
42
+ - Block: UIZoom
43
+ - Scene: product
44
+ - Voice: "Claude builds it." "You watch it come alive."
45
+ - On screen: the real live view in a browser frame; the activity feed floats out; an "alive" chip
46
+ - Motion: the frame rises with a bounce, the card slides out and scrolls
47
+ - Sound: hit, pop, chime
48
+ - Why it works: shows the real thing, animated
49
+
50
+ ## 6. Props · 15.0-18.28 s
51
+ - Block: FeatureCallout
52
+ - Scene: feature-props
53
+ - Voice: "Every control? A typed prop."
54
+ - On screen: the real TSX types in; the size line is ringed; the preview grows to 140
55
+ - Motion: the value changes on the spoken word
56
+ - Sound: type ticks, a pop on the change
57
+ - Why it works: cause and effect in one frame
58
+
59
+ ## 7. Checks · 18.28-21.09 s
60
+ - Block: StatCounter
61
+ - Scene: feature-checks
62
+ - Voice: "Seventeen checks. Before you even look."
63
+ - On screen: 17 counts up; the real review panel scrolls
64
+ - Motion: thud on the number
65
+ - Sound: ticks, pop
66
+ - Why it works: a verified number
67
+
68
+ ## 8. Licences · 21.09-24.375 s
69
+ - Block: FeatureCallout
70
+ - Scene: feature-licences
71
+ - Voice: "Every sound and font: licensed, logged, locked."
72
+ - On screen: Licensed. Logged. Locked. over the real ledger; a vault door closes over it
73
+ - Motion: each word lands on its spoken beat; the door slams on "locked"
74
+ - Sound: pops, a slam, a chime
75
+ - Why it works: rule of three, the safe is the metaphor
76
+
77
+ ## 9. Proof · 24.375-27.19 s
78
+ - Block: StatCounter
79
+ - Scene: proof
80
+ - Voice: "Thirty-nine tools." "Diff it like code."
81
+ - On screen: 39 MCP tools; a two-line diff of a size value
82
+ - Motion: thud, the diff lines pop in
83
+ - Sound: boom on the cut
84
+ - Why it works: a verified number and a true claim
85
+
86
+ ## 10. CTA · 27.19-30.0 s
87
+ - Block: CtaCard
88
+ - Scene: cta
89
+ - Voice: "Start now. N P X flow-motion."
90
+ - On screen: Start now. `$ npx flomotion`, "a 30 s ad for flomotion: rendered", This whole ad is one TSX file.
91
+ - Motion: the command types in; the callback chip and the reveal land last
92
+ - Sound: boom, type ticks, chime
93
+ - Why it works: one action, a closed loop, a reveal that reframes the film
@@ -4,4 +4,4 @@
4
4
 
5
5
  The sounds and the voice in the repo copy are synthetic stand-ins made by `make-assets.sh` (FFmpeg tones and the macOS `say` voice, with estimated word timings). They show the structure; a real project uses `sound_get`, a recording or `voice_generate`.
6
6
 
7
- Run it from the repo: `pnpm codecut render examples/saas-promo`.
7
+ Run it from the repo: `pnpm flomotion render examples/saas-promo`.
@@ -19,7 +19,7 @@ $F -f lavfi -i "anoisesrc=d=0.35:c=white:a=0.5" -af "acrusher=bits=4:mix=1,afade
19
19
  # music bed: soft pad, 31s
20
20
  $F -f lavfi -i "sine=f=110:d=31" -f lavfi -i "sine=f=164.81:d=31" -f lavfi -i "sine=f=220:d=31" -filter_complex "amix=inputs=3:normalize=0,volume=0.35,tremolo=f=0.3:d=0.2,afade=t=in:d=2,afade=t=out:st=28:d=3" music.wav
21
21
  # voiceover (local TTS test double) and estimated word timings
22
- SCRIPT="Ship videos as code. Editing takes forever. Hours of clicking, exporting, and waiting for every single change. Meet CodeCut. Every control is a prop. Describe a scene, and it renders the same way every time. Write it, preview it, render it. Claude can edit the same file you do, with real sound and captions built in. Over twelve thousand videos shipped, and ninety eight percent rendered on the first try. Start free today."
22
+ SCRIPT="Ship videos as code. Editing takes forever. Hours of clicking, exporting, and waiting for every single change. Meet flomotion. Every control is a prop. Describe a scene, and it renders the same way every time. Write it, preview it, render it. Claude can edit the same file you do, with real sound and captions built in. Over twelve thousand videos shipped, and ninety eight percent rendered on the first try. Start free today."
23
23
  say -v Samantha -r 175 -o voice.aiff "$SCRIPT"
24
24
  $F -i voice.aiff -ar 48000 -ac 1 voice.wav
25
25
  rm voice.aiff
@@ -32,7 +32,7 @@ import {
32
32
  Sound,
33
33
  Voiceover,
34
34
  Audio,
35
- } from "@codecut/components";
35
+ } from "@flomotion/components";
36
36
 
37
37
  const SFX = (n: string) => `./assets/sfx/${n}.wav`;
38
38
 
@@ -192,7 +192,7 @@ export default (
192
192
  <SafeArea id="reveal-safe" preset="reels">
193
193
  <Title
194
194
  id="r-title"
195
- text="Meet CodeCut"
195
+ text="Meet flomotion"
196
196
  at="top"
197
197
  size={92}
198
198
  start="0.2s"
@@ -493,7 +493,7 @@ export default (
493
493
  id="cta-chip"
494
494
  at="center"
495
495
  position={[0, 250]}
496
- label="codecut.dev"
496
+ label="flomotion.dev"
497
497
  fill="$brand.primary"
498
498
  textColor="#ffffff"
499
499
  size={52}
@@ -0,0 +1,122 @@
1
+ # Look: bold-kinetic
2
+
3
+ Mood: energetic, confident. starter - replace after direction notes. Use these tokens and nothing else (see `references/looks.md`).
4
+
5
+ ## palette
6
+
7
+ | Field | Value |
8
+ | --- | --- |
9
+ | bg | #FFFFFF |
10
+ | surface | #FFFFFF |
11
+ | text | #1A1020 |
12
+ | textMuted | #5A4A66 |
13
+ | accent | #FF3D81 |
14
+ | signal | #FFC933 |
15
+ | positive | #22B573 |
16
+ | negative | #E5484D |
17
+ | blocks | #FF8FB1, #7BD389, #6CB8FF, #FFD35C, #9B6BFF |
18
+
19
+ ## type
20
+
21
+ | Field | Value |
22
+ | --- | --- |
23
+ | case | lower-or-sentence |
24
+
25
+ ### display
26
+
27
+ | Field | Value |
28
+ | --- | --- |
29
+ | family | Plus Jakarta Sans |
30
+ | weights | 800 |
31
+ | tracking | -0.03 |
32
+ | lineHeight | 0.98 |
33
+
34
+ ### body
35
+
36
+ | Field | Value |
37
+ | --- | --- |
38
+ | family | Plus Jakarta Sans |
39
+ | weights | 500, 600 |
40
+ | tracking | 0 |
41
+ | lineHeight | 1.25 |
42
+
43
+ ### mono
44
+
45
+ | Field | Value |
46
+ | --- | --- |
47
+ | family | JetBrains Mono |
48
+ | weights | 500 |
49
+
50
+ ### scale
51
+
52
+ | Field | Value |
53
+ | --- | --- |
54
+ | hero | 1.2 |
55
+ | title | 0.7 |
56
+ | body | 0.38 |
57
+ | caption | 0.3 |
58
+
59
+ ## motion
60
+
61
+ | Field | Value |
62
+ | --- | --- |
63
+ | speed | fast |
64
+ | staggerMs | 50 |
65
+ | blurOnMotion | yes |
66
+ | signatureTransition | color-block-wipe |
67
+
68
+ ### easing
69
+
70
+ | Field | Value |
71
+ | --- | --- |
72
+ | enter | back.out(1.4) |
73
+ | exit | power4.in |
74
+ | move | expo.inOut |
75
+
76
+ #### spring
77
+
78
+ | Field | Value |
79
+ | --- | --- |
80
+ | stiffness | 260 |
81
+ | damping | 18 |
82
+
83
+ ## surface
84
+
85
+ | Field | Value |
86
+ | --- | --- |
87
+ | radius | 32 |
88
+ | shadow | none |
89
+
90
+ ### glass
91
+
92
+ | Field | Value |
93
+ | --- | --- |
94
+ | blur | 0 |
95
+ | opacity | 1 |
96
+
97
+ ## texture
98
+
99
+ | Field | Value |
100
+ | --- | --- |
101
+ | grain | 0.0 |
102
+ | gradient | none |
103
+
104
+ ## sound
105
+
106
+ | Field | Value |
107
+ | --- | --- |
108
+ | palette | pop, click, thud, whoosh-short |
109
+ | musicMood | upbeat-punchy |
110
+ | impactStyle | punchy |
111
+
112
+ ## Do
113
+
114
+ - One flat block color per scene
115
+ - Crop giant type at the edge for scale
116
+ - Key word in the contrast color
117
+
118
+ ## Don't
119
+
120
+ - No gradients
121
+ - No thin weights
122
+ - No more than 2 type families
@@ -0,0 +1,122 @@
1
+ # Look: clean-light
2
+
3
+ Mood: calm, credible. starter - replace after direction notes. Use these tokens and nothing else (see `references/looks.md`).
4
+
5
+ ## palette
6
+
7
+ | Field | Value |
8
+ | --- | --- |
9
+ | bg | #F6F7FB |
10
+ | surface | #FFFFFF |
11
+ | text | #0F1222 |
12
+ | textMuted | #5B6075 |
13
+ | accent | #4B5CFF |
14
+ | signal | #FF7A45 |
15
+ | positive | #2FBF71 |
16
+ | negative | #E5484D |
17
+ | blocks | #4B5CFF, #FF7A45, #2FBF71, #FFC933 |
18
+
19
+ ## type
20
+
21
+ | Field | Value |
22
+ | --- | --- |
23
+ | case | sentence |
24
+
25
+ ### display
26
+
27
+ | Field | Value |
28
+ | --- | --- |
29
+ | family | Inter Tight |
30
+ | weights | 700, 800 |
31
+ | tracking | -0.02 |
32
+ | lineHeight | 1.02 |
33
+
34
+ ### body
35
+
36
+ | Field | Value |
37
+ | --- | --- |
38
+ | family | Inter |
39
+ | weights | 400, 500, 600 |
40
+ | tracking | 0 |
41
+ | lineHeight | 1.3 |
42
+
43
+ ### mono
44
+
45
+ | Field | Value |
46
+ | --- | --- |
47
+ | family | JetBrains Mono |
48
+ | weights | 500 |
49
+
50
+ ### scale
51
+
52
+ | Field | Value |
53
+ | --- | --- |
54
+ | hero | 1.0 |
55
+ | title | 0.62 |
56
+ | body | 0.36 |
57
+ | caption | 0.3 |
58
+
59
+ ## motion
60
+
61
+ | Field | Value |
62
+ | --- | --- |
63
+ | speed | medium |
64
+ | staggerMs | 70 |
65
+ | blurOnMotion | yes |
66
+ | signatureTransition | card-slide |
67
+
68
+ ### easing
69
+
70
+ | Field | Value |
71
+ | --- | --- |
72
+ | enter | expo.out |
73
+ | exit | power3.in |
74
+ | move | power3.inOut |
75
+
76
+ #### spring
77
+
78
+ | Field | Value |
79
+ | --- | --- |
80
+ | stiffness | 220 |
81
+ | damping | 24 |
82
+
83
+ ## surface
84
+
85
+ | Field | Value |
86
+ | --- | --- |
87
+ | radius | 28 |
88
+ | shadow | soft |
89
+
90
+ ### glass
91
+
92
+ | Field | Value |
93
+ | --- | --- |
94
+ | blur | 24 |
95
+ | opacity | 0.6 |
96
+
97
+ ## texture
98
+
99
+ | Field | Value |
100
+ | --- | --- |
101
+ | grain | 0.03 |
102
+ | gradient | #E9ECFF, #FFFFFF |
103
+
104
+ ## sound
105
+
106
+ | Field | Value |
107
+ | --- | --- |
108
+ | palette | soft-click, air-whoosh, gentle-pad |
109
+ | musicMood | warm-minimal |
110
+ | impactStyle | light |
111
+
112
+ ## Do
113
+
114
+ - One accent per scene
115
+ - Margins >= 6% of width
116
+ - Skeleton UI for complex screens
117
+
118
+ ## Don't
119
+
120
+ - No drop shadows on text
121
+ - No more than 2 type families
122
+ - No gradients behind body text
@@ -0,0 +1,120 @@
1
+ # Look: dark-product
2
+
3
+ Mood: focused, premium. starter - replace after direction notes. Use these tokens and nothing else (see `references/looks.md`).
4
+
5
+ ## palette
6
+
7
+ | Field | Value |
8
+ | --- | --- |
9
+ | bg | #0B0D14 |
10
+ | surface | #151826 |
11
+ | text | #F4F5F9 |
12
+ | textMuted | #9AA0B8 |
13
+ | accent | #7C5CFF |
14
+ | signal | #3DDC97 |
15
+ | positive | #3DDC97 |
16
+ | negative | #FF6B6B |
17
+ | blocks | #0B0D14, #7C5CFF, #151826, #3DDC97 |
18
+
19
+ ## type
20
+
21
+ | Field | Value |
22
+ | --- | --- |
23
+ | case | sentence |
24
+
25
+ ### display
26
+
27
+ | Field | Value |
28
+ | --- | --- |
29
+ | family | Sora |
30
+ | weights | 600, 700 |
31
+ | tracking | -0.02 |
32
+ | lineHeight | 1.05 |
33
+
34
+ ### body
35
+
36
+ | Field | Value |
37
+ | --- | --- |
38
+ | family | Inter |
39
+ | weights | 400, 500 |
40
+ | tracking | 0 |
41
+ | lineHeight | 1.35 |
42
+
43
+ ### mono
44
+
45
+ | Field | Value |
46
+ | --- | --- |
47
+ | family | JetBrains Mono |
48
+ | weights | 500 |
49
+
50
+ ### scale
51
+
52
+ | Field | Value |
53
+ | --- | --- |
54
+ | hero | 1.0 |
55
+ | title | 0.6 |
56
+ | body | 0.34 |
57
+ | caption | 0.28 |
58
+
59
+ ## motion
60
+
61
+ | Field | Value |
62
+ | --- | --- |
63
+ | speed | medium |
64
+ | staggerMs | 80 |
65
+ | blurOnMotion | yes |
66
+ | signatureTransition | glow-wipe |
67
+
68
+ ### easing
69
+
70
+ | Field | Value |
71
+ | --- | --- |
72
+ | enter | expo.out |
73
+ | exit | power2.in |
74
+ | move | power3.inOut |
75
+
76
+ #### spring
77
+
78
+ | Field | Value |
79
+ | --- | --- |
80
+ | stiffness | 200 |
81
+ | damping | 22 |
82
+
83
+ ## surface
84
+
85
+ | Field | Value |
86
+ | --- | --- |
87
+ | radius | 24 |
88
+ | shadow | glow |
89
+
90
+ ### glass
91
+
92
+ | Field | Value |
93
+ | --- | --- |
94
+ | blur | 28 |
95
+ | opacity | 0.35 |
96
+
97
+ ## texture
98
+
99
+ | Field | Value |
100
+ | --- | --- |
101
+ | grain | 0.06 |
102
+ | gradient | #0B0D14, #1B1340 |
103
+
104
+ ## sound
105
+
106
+ | Field | Value |
107
+ | --- | --- |
108
+ | palette | low-drone, tick, sub-hit, bright-pluck |
109
+ | musicMood | pulse-ambient |
110
+ | impactStyle | deep |
111
+
112
+ ## Do
113
+
114
+ - Accent only on the element that matters
115
+ - Use glow edges to separate cards
116
+
117
+ ## Don't
118
+
119
+ - No pure white text on pure black for body (use text token)
120
+ - No more than 2 type families
@@ -0,0 +1,36 @@
1
+ # Anti-patterns (scan before every draft)
2
+
3
+ Each entry: **Bad** -> **Fix** -> check that catches it.
4
+
5
+ 1. **Static centered title on a flat background for 3+ s.** Fix: staggered word entrance, one secondary element, or camera push. `no-dead-frames`.
6
+ 2. **Default easing / linear moves.** Fix: look easing tokens (`expo.out` enter). `look-consistency`.
7
+ 3. **Everything enters at once.** Fix: stagger 40-120 ms, hero first. Manual.
8
+ 4. **More than 2 type families.** Fix: display + body only. `type-families`.
9
+ 5. **Walls of text (> 12 words in a scene).** Fix: split into beats or keep keywords. `text-words`.
10
+ 6. **Text over busy footage with no scrim.** Fix: glass panel, dark gradient scrim, or text on a flat block. `contrast`.
11
+ 7. **Text in the bottom 380 px of 9:16.** Fix: move above the safe line. `safe-area`.
12
+ 8. **Hero element changes style between beats.** Fix: lock hero shape/color, use `Bridge`. `hero-continuity`.
13
+ 9. **Pain without a turn.** Fix: add a visible look change + calm line. `turn-present`.
14
+ 10. **Product shown only as a flat screenshot.** Fix: tilt, zoom to one region, skeleton UI, card wall. Manual.
15
+ 11. **Tiny UI text in screenshots.** Fix: zoom to the region or redraw skeleton UI. `min-size`.
16
+ 12. **Same transition between every scene.** Fix: rotate 2-3 per look; cuts on beat. `transition-count`.
17
+ 13. **Invented stats, quotes, customers.** Fix: remove or mark placeholder. `proof-sourced`.
18
+ 14. **Third-party logos or music you do not own.** Fix: ledger-listed assets only. `assets-licensed`.
19
+ 15. **Sounds not on frames** (impact with no sound, or sound before motion). Fix: align to `peak`. `sound-on-impact`.
20
+ 16. **Music masks voice.** Fix: duck >= 12 dB. `mix-voice-on-top`.
21
+ 17. **CTA with tiny URL or < 1 s hold.** Fix: URL >= caption min, hold >= 1 s. `cta-present`.
22
+ 18. **More than 3 features in 30 s.** Fix: pick the top 2-3; cut the rest.
23
+ 19. **Gradients behind body text.** Fix: solid surface or scrim. `contrast`.
24
+ 20. **Over-shaking and over-blurring.** Fix: max 1 impact per 1.5 s; blur only during motion.
25
+ 21. **Same hook type for every video.** Fix: choose from the 6 hook types by audience state.
26
+ 22. **Mixing more than 2 style families.** Fix: primary + secondary only.
27
+ 23. **Reusing a pattern without a reason.** Every effect must be explainable in one line ("shake marks the price drop").
28
+ 24. **Dead start** (first frame is empty or logo splash). Fix: motion in the first 0.3 s, brand later. `motion-frame0`.
29
+ 25. **Centered everything on 16:9.** Fix: left-align for serious looks; use grid.
30
+
31
+ ## Self-test questions
32
+ - If I paused any frame, is there one clear focal point?
33
+ - Could a viewer with the sound off follow the story?
34
+ - Is anything on screen that does not support the beat's single idea?
35
+ - Did I show the pain instead of describing it?
36
+ - Is the first product frame after the turn?
@@ -0,0 +1,42 @@
1
+ # Assets: where every graphic and file comes from
2
+
3
+ A SaaS video needs a lot of pictures: logos, icons, product screenshots, a few photos, charts. Pull them with the tools, never from memory, never by drawing a brand logo yourself. Everything pulled is recorded in the ledger with its licence; CC-BY items are credited in the render's credits file; `lint` fails on an unrecorded file.
4
+
5
+ ## Where each thing comes from
6
+
7
+ | Need | First choice | Tool | Notes |
8
+ |---|---|---|---|
9
+ | The person's own logo and brand images | Their files | `asset_import {source, rights}` | Vector (SVG) if they have it. They say whether the files are theirs or licensed. |
10
+ | Their brand colours, fonts, logo | Their website | `brand_extract {url, permission:true}` | Only their own site. It reports what the page uses today; confirm the real accent with them before building a look (see `looks.md`, brand override). Logos land in `assets/brand/`. |
11
+ | Product UI | A screenshot of the real app | `asset_capture {url, permission:true, selector?, hide?}` or `asset_import` | 2x sharp. Pages behind a login: they take the screenshot. Hide cookie banners and chat widgets with `hide`. If the UI is not ready or is private: build a skeleton UI with `UIMock`, `Card`, `Chip` and `RoundRect`, and say it is a mock. |
12
+ | Icons (feature icons, bullets, arrows) | Open icon sets | `asset_search {kind:"icon"}`, `asset_get {ref, color, height}` | Lucide, Tabler, Phosphor, Material and more. Colour them with the look's accent (`color`). One set per video so the stroke weight matches. |
13
+ | Emoji | Open emoji sets | `asset_search {kind:"emoji"}` | Use sparingly; they carry their own colours. |
14
+ | Other companies' logos ("works with Slack", customer strip) | Only with permission | `asset_search {kind:"logo"}`, `asset_get {permission:true}` | The artwork is openly licensed but the brand is a **trademark**. Ask the person whether they have permission or the brand's guidelines allow it; if not, use the name in text. Never for a competitor comparison without them saying so. |
15
+ | Photos (people, desks, places) | Open or stock photos | `asset_search {kind:"photo"}`, `asset_get` | Openverse (CC0, CC-BY) with no key; Pexels with a key. Check the picture in a frame: a text match can be the wrong picture. No photos of identifiable people for testimonials: a quote card has no face. |
16
+ | Illustrations | Openverse `illustration`, or draw | `asset_search {kind:"illustration"}` | Or build with `Circle`, `Rect`, `Path`, `Line` and gradients; that always matches the look. |
17
+ | Backgrounds, shapes, gradients, grids | The components | `Rect` (gradient fill), `Circle`, `Path`, `Grain` | No download needed. This is most of a clean look. |
18
+ | Charts and numbers | The person's data | `Chart`, `Counter`, `ProgressRing` | Data comes only from them, with a source. |
19
+ | Voice, transcript, sounds | Their own files, or a service | `voice_import`, `transcript_import`, `sound_import`, `sound_search` | See `sound.md`. |
20
+
21
+ ## The asset plan (write it into `storyboard.md` at G4)
22
+
23
+ For every beat list: the graphics it needs, the source from the table, who must supply it, and whether it needs permission. Example:
24
+
25
+ ```
26
+ ### Beat 3: assets
27
+ - product dashboard shot: asset_capture of https://app.example.com/board (permission: asked at G0) · status: to capture
28
+ - calendar icon: asset_get iconify:lucide/calendar, colour $brand.accent · status: pulled
29
+ - customer logos x3: asset_import · status: waiting for the person
30
+ ```
31
+
32
+ Never ship a placeholder as if it were final: a missing logo is a visible "LOGO" box and a line in "Needs your review".
33
+
34
+ ## Rules
35
+
36
+ 1. **Look at what you pulled.** Place it in a frame (`frame_render`) and describe what you see; reject the wrong picture.
37
+ 2. **One icon set per video**, one stroke weight, colours from the look.
38
+ 3. **Permission is the person's to give.** For screenshots, brand extraction and other companies' logos, ask first and pass `permission:true` only after a yes. Record the yes in `LOG.md`.
39
+ 4. **Licences:** CC0, permissive (MIT, Apache, ISC) and CC-BY are allowed by default; share-alike, non-commercial and unknown licences are refused (`license_blocked`). `flomotion.json` can narrow this with `assetLicenses`.
40
+ 5. **Credits:** CC-BY assets are credited automatically; sources that ask for a credit (Pexels) are listed as recommended. Tell the person where the credits file is.
41
+ 6. **Size:** photos are scaled to 2400 px on the long side. Screenshots at 2x of a 1440 px page are fine; do not capture at 3x for a 1080 px frame.
42
+ 7. **No remote files at render time.** Everything is on disk; a `src` that starts with `http` fails the build.