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.
- package/CHANGELOG.md +58 -2
- package/LICENSE +1 -1
- package/README.md +29 -20
- package/dist/bin.mjs +6279 -2582
- package/dist/chunks/{chunk-QG2MOGKO.mjs → chunk-IGG2VZB6.mjs} +178 -14
- package/dist/chunks/{chunk-AVP5XX4G.mjs → chunk-PEC2UVQY.mjs} +138 -108
- package/dist/chunks/{chunk-IUSYVGP6.mjs → chunk-TTHAZGRG.mjs} +7 -7
- package/dist/chunks/{chunk-JCLRAREG.mjs → chunk-XWY6CUY6.mjs} +16 -16
- package/dist/chunks/{lock-MLQUU7X3.mjs → lock-WGPR7CJ2.mjs} +3 -3
- package/dist/components.mjs +19 -13
- package/dist/core.mjs +12 -12
- package/dist/hooks.mjs +8 -12
- package/dist/jsx-dev-runtime.mjs +1 -1
- package/dist/jsx-runtime.mjs +1 -1
- package/docs/components/Adjustment.md +2 -2
- package/docs/components/Audio.md +2 -2
- package/docs/components/B.md +3 -3
- package/docs/components/Captions.md +2 -2
- package/docs/components/Card.md +2 -2
- package/docs/components/Center.md +2 -2
- package/docs/components/Chart.md +2 -2
- package/docs/components/Chip.md +2 -2
- package/docs/components/Circle.md +2 -2
- package/docs/components/Clip.md +2 -2
- package/docs/components/CodeBlock.md +2 -2
- package/docs/components/Composition.md +2 -2
- package/docs/components/Counter.md +2 -2
- package/docs/components/Cursor.md +2 -2
- package/docs/components/Fonts.md +2 -2
- package/docs/components/GlassCard.md +2 -2
- package/docs/components/Grid.md +2 -2
- package/docs/components/Group.md +2 -2
- package/docs/components/Highlight.md +3 -3
- package/docs/components/I.md +3 -3
- package/docs/components/Image.md +2 -2
- package/docs/components/Line.md +2 -2
- package/docs/components/Marker.md +2 -2
- package/docs/components/Path.md +2 -2
- package/docs/components/Polygon.md +2 -2
- package/docs/components/Precomp.md +2 -2
- package/docs/components/ProgressRing.md +2 -2
- package/docs/components/Rect.md +2 -2
- package/docs/components/RoundRect.md +2 -2
- package/docs/components/SafeArea.md +2 -2
- package/docs/components/Scene.md +2 -2
- package/docs/components/Sequence.md +2 -2
- package/docs/components/Span.md +3 -3
- package/docs/components/SplitText.md +2 -2
- package/docs/components/Stack.md +2 -2
- package/docs/components/Stagger.md +2 -2
- package/docs/components/Strike.md +3 -3
- package/docs/components/Svg.md +2 -2
- package/docs/components/Text.md +2 -2
- package/docs/components/Title.md +2 -2
- package/docs/components/Track.md +2 -2
- package/docs/components/UIMock.md +2 -2
- package/docs/components/Underline.md +3 -3
- package/docs/components/Video.md +2 -2
- package/docs/gate2-manual-checklist.md +10 -9
- package/docs/hyperframes-notes.md +20 -20
- package/docs/later.md +23 -16
- package/docs/spec.md +83 -22
- package/package.json +1 -2
- package/skills/flomotion-studio/CHANGELOG.md +39 -0
- package/skills/flomotion-studio/README.md +81 -0
- package/skills/flomotion-studio/SKILL.md +90 -0
- package/skills/flomotion-studio/config/thresholds.md +191 -0
- package/skills/flomotion-studio/dataset/annotations/ansarada.md +53 -0
- package/skills/flomotion-studio/dataset/annotations/canva.md +49 -0
- package/skills/flomotion-studio/dataset/annotations/clickup.md +60 -0
- package/skills/flomotion-studio/dataset/annotations/gemini-stub.md +39 -0
- package/skills/flomotion-studio/dataset/annotations/monday.md +51 -0
- package/skills/flomotion-studio/dataset/annotations/phantom.md +53 -0
- package/skills/flomotion-studio/dataset/annotations/slack.md +54 -0
- package/skills/flomotion-studio/dataset/annotations/unknown-7.md +39 -0
- package/skills/flomotion-studio/dataset/annotations/vaylens.md +53 -0
- package/skills/flomotion-studio/dataset/brief-template.md +110 -0
- package/skills/flomotion-studio/dataset/rating-sheet.md +28 -0
- package/skills/flomotion-studio/dataset/schema.md +44 -0
- package/skills/flomotion-studio/evals/README.md +33 -0
- package/skills/flomotion-studio/evals/briefs/briefs.md +25 -0
- package/skills/{motion-studio/looks → flomotion-studio/examples/engine-looks}/kinetic.scene.tsx +1 -1
- package/skills/{motion-studio/looks → flomotion-studio/examples/engine-looks}/minimal.scene.tsx +1 -1
- package/skills/{motion-studio/looks → flomotion-studio/examples/engine-looks}/sketch.scene.tsx +1 -1
- package/skills/flomotion-studio/examples/flomotion-ad/LOG.md +39 -0
- package/skills/flomotion-studio/examples/flomotion-ad/brief.md +41 -0
- package/skills/flomotion-studio/examples/flomotion-ad/ideas.md +12 -0
- package/skills/flomotion-studio/examples/flomotion-ad/project.tsx +1694 -0
- package/skills/flomotion-studio/examples/flomotion-ad/script.md +28 -0
- package/skills/flomotion-studio/examples/flomotion-ad/storyboard.md +93 -0
- package/skills/{motion-studio → flomotion-studio}/examples/saas-promo/README.md +1 -1
- package/skills/{motion-studio → flomotion-studio}/examples/saas-promo/make-assets.sh +1 -1
- package/skills/{motion-studio → flomotion-studio}/examples/saas-promo/project.tsx +3 -3
- package/skills/flomotion-studio/looks/bold-kinetic.md +122 -0
- package/skills/flomotion-studio/looks/clean-light.md +122 -0
- package/skills/flomotion-studio/looks/dark-product.md +120 -0
- package/skills/flomotion-studio/references/anti-patterns.md +36 -0
- package/skills/flomotion-studio/references/assets.md +42 -0
- package/skills/flomotion-studio/references/block-recipes.md +249 -0
- package/skills/flomotion-studio/references/blocks.md +114 -0
- package/skills/flomotion-studio/references/catalogue.md +53 -0
- package/skills/flomotion-studio/references/checks.md +87 -0
- package/skills/flomotion-studio/references/clean-styles.md +56 -0
- package/skills/{motion-studio → flomotion-studio}/references/components.md +94 -94
- package/skills/flomotion-studio/references/copywriting.md +64 -0
- package/skills/flomotion-studio/references/decision-tables.md +80 -0
- package/skills/flomotion-studio/references/interview.md +145 -0
- package/skills/flomotion-studio/references/looks.md +45 -0
- package/skills/flomotion-studio/references/mcp-tools.md +70 -0
- package/skills/flomotion-studio/references/motion.md +68 -0
- package/skills/flomotion-studio/references/patterns.md +45 -0
- package/skills/flomotion-studio/references/review.md +56 -0
- package/skills/flomotion-studio/references/script-craft.md +59 -0
- package/skills/flomotion-studio/references/sound.md +57 -0
- package/skills/flomotion-studio/references/story-templates.md +52 -0
- package/skills/flomotion-studio/references/storyboard.md +62 -0
- package/skills/flomotion-studio/references/styles.md +70 -0
- package/skills/flomotion-studio/references/transitions.md +62 -0
- package/skills/flomotion-studio/references/typography.md +46 -0
- package/skills/flomotion-studio/references/workflow.md +96 -0
- package/skills/motion-studio/SKILL.md +0 -87
- package/skills/motion-studio/looks/kinetic.json +0 -89
- package/skills/motion-studio/looks/minimal.json +0 -91
- package/skills/motion-studio/looks/sketch.json +0 -83
- package/skills/motion-studio/references/motion.md +0 -73
- package/skills/motion-studio/references/review.md +0 -32
- package/skills/motion-studio/references/saas-promo.md +0 -29
- package/skills/motion-studio/references/sound.md +0 -47
- 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
|
|
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
|
|
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 "@
|
|
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
|
|
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="
|
|
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.
|