luckiest-co 1.0.41 → 1.0.42
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/.claude-plugin/marketplace.json +1 -1
- package/.claude-plugin/plugin.json +1 -1
- package/package.json +1 -1
- package/skills/video-studio/ATTRIBUTION.md +2 -0
- package/skills/video-studio/CHANGELOG.md +9 -0
- package/skills/video-studio/LICENSE-huashu-art-motion +21 -0
- package/skills/video-studio/LICENSE-mg-styles-15 +21 -0
- package/skills/video-studio/SKILL.md +11 -7
- package/skills/video-studio/references/interview.md +10 -2
- package/skills/video-studio/references/step-2b-storyboard.md +6 -0
- package/skills/video-studio/references/step-3-compose.md +13 -0
- package/skills/video-studio/references/step-4-deliver.md +5 -0
- package/skills/video-studio/references/storyboard.md +1 -0
- package/skills/video-studio/references/styles/3d-render.md +39 -0
- package/skills/video-studio/references/styles/anime-light.md +55 -0
- package/skills/video-studio/references/styles/aurora-glass.md +40 -0
- package/skills/video-studio/references/styles/bauhaus.md +46 -0
- package/skills/video-studio/references/styles/cel-boil.md +41 -0
- package/skills/video-studio/references/styles/chiaroscuro.md +53 -0
- package/skills/video-studio/references/styles/collage.md +46 -0
- package/skills/video-studio/references/styles/comic-pop.md +49 -0
- package/skills/video-studio/references/styles/constructivist.md +54 -0
- package/skills/video-studio/references/styles/cubist.md +49 -0
- package/skills/video-studio/references/styles/cut-paper.md +57 -0
- package/skills/video-studio/references/styles/era-styles.md +29 -0
- package/skills/video-studio/references/styles/finance-chart.md +60 -0
- package/skills/video-studio/references/styles/flat-vector.md +41 -0
- package/skills/video-studio/references/styles/grain-flat-illustration.md +48 -0
- package/skills/video-studio/references/styles/hud.md +41 -0
- package/skills/video-studio/references/styles/impressionist.md +48 -0
- package/skills/video-studio/references/styles/ink-wash.md +49 -0
- package/skills/video-studio/references/styles/isometric.md +40 -0
- package/skills/video-studio/references/styles/keynote-ui.md +59 -0
- package/skills/video-studio/references/styles/kinetic-type.md +58 -0
- package/skills/video-studio/references/styles/line-art.md +41 -0
- package/skills/video-studio/references/styles/liquid.md +40 -0
- package/skills/video-studio/references/styles/math-explainer.md +58 -0
- package/skills/video-studio/references/styles/morph.md +39 -0
- package/skills/video-studio/references/styles/mosaic.md +52 -0
- package/skills/video-studio/references/styles/newsroom-collage.md +60 -0
- package/skills/video-studio/references/styles/pixel.md +46 -0
- package/skills/video-studio/references/styles/pointillist.md +49 -0
- package/skills/video-studio/references/styles/presenter-explainer.md +57 -0
- package/skills/video-studio/references/styles/retro-cgi.md +52 -0
- package/skills/video-studio/references/styles/science-explainer.md +59 -0
- package/skills/video-studio/references/styles/sticker-explainer.md +40 -0
- package/skills/video-studio/references/styles/storytime.md +60 -0
- package/skills/video-studio/references/styles/swirl-brushwork.md +53 -0
- package/skills/video-studio/references/styles/synthwave.md +47 -0
- package/skills/video-studio/references/styles/variety-show.md +40 -0
- package/skills/video-studio/references/styles/watercolor-anime.md +50 -0
- package/skills/video-studio/references/styles/whiteboard.md +60 -0
- package/skills/video-studio/references/styles.md +117 -0
- package/skills/video-studio/scripts/qa.mjs +40 -0
- package/skills/video-studio/scripts/qa.test.mjs +23 -1
- package/skills/video-studio/scripts/storyboard.schema.json +2 -0
- package/skills/video-studio-art-director/CHANGELOG.md +7 -0
- package/skills/video-studio-art-director/SKILL.md +66 -5
- package/skills/video-studio-art-director/references/palettes.md +22 -0
- package/skills/video-studio-director/CHANGELOG.md +6 -0
- package/skills/video-studio-director/SKILL.md +21 -5
- package/skills/video-studio-director/references/jury.md +63 -0
- package/skills/video-studio-motion/CHANGELOG.md +4 -0
- package/skills/video-studio-motion/SKILL.md +34 -5
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Glowing Flat Science Explainer
|
|
2
|
+
|
|
3
|
+
- id: `science-explainer`
|
|
4
|
+
- Source: huashu-art-motion `references/动画语法/y1_kurzgesagt.md` (MIT)
|
|
5
|
+
- Best for: scale and "what is inside" topics (cell to galaxy, pixel to model), systems and mechanisms drawn as glowing particles and lines, calm popular-science narration. 45-120s.
|
|
6
|
+
- Not for: real people, real events, archive evidence (use a collage style). Step-by-step reasoning (use a whiteboard style). Very small budgets, because the look depends on something always alive in the frame.
|
|
7
|
+
- Triggers: kurzgesagt, in a nutshell, flat science animation, scale zoom, immune system explainer, cell zoom, popular science, glowing vector, optimistic nihilism, zoom into
|
|
8
|
+
- Tone cell: calm-soft
|
|
9
|
+
- Clock: smooth 30/60 fps
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
- Dark era: deep base, 2-3 saturated accents, strong radial glow. Do not copy a purple-blue starfield gradient, it reads as generic AI. Use a flat deep ink or navy base and keep the rule: one dark base plus 2-3 high-saturation accents that contrast (orange against indigo, cyan against magenta).
|
|
13
|
+
- Reference accents from the source: cyan `#32BAEE`, orange `#F48301`, yellow `#FACC12`, glow core `#F9EF93`, magenta `#BE3A95`, highlight white `#F9FCFB`.
|
|
14
|
+
- Never mix eras in one scene. A bright light-grey low-saturation era is also valid for a "daytime" section. Changing sections can change the whole color temperature.
|
|
15
|
+
- Draw the concept as a concrete object (cell, gear, pipe, city, drop of water). A glowing ball with a few label capsules is not enough.
|
|
16
|
+
- No outlines. Shadow is a block of the same hue one step darker, highlight is a white ellipse or an arc. Two-tone facets: shadow band at about (10, 12)px bottom right, thin highlight edge (4, 5)px top left.
|
|
17
|
+
- Rounded everything. Glowing objects always carry a radial glow.
|
|
18
|
+
- Composition: main subject on the lower third line, sky above for stars and labels. Parallax layers: stars 0.05, far 0.12-0.3, near 0.65, subject 1.0, foreground blur 1.5 (7px blur, dark).
|
|
19
|
+
- Label capsules: large radius, saturated fill, bold sans.
|
|
20
|
+
|
|
21
|
+
## Motion
|
|
22
|
+
- Core easings: `cubic-bezier(.75,0,.25,1)` for most moves (soft start, fast middle, soft end), and `cubic-bezier(.333,0,.667,1)` for loops. Normal action 50 frames at 60fps (0.83s), snappy 10-30 frames, pop-ins 5-10 frames.
|
|
23
|
+
- Pop: card reaches 90% in 0.25s, overshoots to 108% at frame 20, settles about 0.5s. Label uses back-out with overshoot 1.1 over 0.5s.
|
|
24
|
+
- Stagger: similar items 10-20 frames, limbs 3-4 frames, a pause of 20 frames between actions. Title letters 45ms apart.
|
|
25
|
+
- Blink: closed 5 frames, open 10, irregular gaps, eyes never shrink to zero.
|
|
26
|
+
- Ambient layer (stars, particles, glow) can keep moving. Subject and labels hold still once settled. Cut or change state at least once per narration sentence.
|
|
27
|
+
- Camera: zoom is the main verb. Use log interpolation so every frame scales by the same factor. Hold 0.3s and light up the thing you will enter, then push. Pull back out for reveals.
|
|
28
|
+
|
|
29
|
+
## Signature features (judged against these)
|
|
30
|
+
- A concrete visual metaphor object, not a generic orb.
|
|
31
|
+
- Dark flat base with 2-3 glowing accents, no outlines.
|
|
32
|
+
- Two-tone facets on every shape, same-hue darker shadows.
|
|
33
|
+
- Parallax layers with depth blur in the foreground.
|
|
34
|
+
- Scale transitions use log zoom and redraw vectors at each scale.
|
|
35
|
+
- Subject is still after landing while the background stays alive.
|
|
36
|
+
- One state change per narration sentence.
|
|
37
|
+
- Labels: thin white leader line, then text typed in, about 40 characters per second, then erased after about 3s.
|
|
38
|
+
|
|
39
|
+
## Beat pattern (30-60s)
|
|
40
|
+
- 0-5s: world establishes with ambient motion, title letters rise.
|
|
41
|
+
- Every 5-7s: a new visual unit (pop a label, morph, transition). Hard cuts land 0-0.2s before a sentence starts.
|
|
42
|
+
- 60-75%: scale transition. Light the target for 0.3s, push in 0.45-1.4s until its color fills the screen, resolve into the new world.
|
|
43
|
+
- Optional gag: a mascot appears for one joke beat.
|
|
44
|
+
- Last 6-8s: pull back (1.45s, ease in out) to a calm wide frame, ambient motion only, hold 1s.
|
|
45
|
+
|
|
46
|
+
## Sound
|
|
47
|
+
Warm ambient orchestral or soft synth pad, 60-90 BPM, composed after the picture. Gentle chime on pops, deep swell on scale transitions, soft whoosh on pull-backs. Voice is calm, about 168 words per minute.
|
|
48
|
+
|
|
49
|
+
## Build it in HyperFrames
|
|
50
|
+
- Canvas 2D or SVG layers, each with a depth value. Position scales linearly by depth, zoom by z^depth.
|
|
51
|
+
- The camera is a function of time only. During a transition window the previous scene keeps drawing with its own zoom, so vectors are redrawn and never blown up as a bitmap.
|
|
52
|
+
- Glow is a radial gradient, not a filter. Stars use per-star phase with seeded random.
|
|
53
|
+
- Avoid expo-out for the scale transition because the first frame jumps most of the scale.
|
|
54
|
+
|
|
55
|
+
## Watch out
|
|
56
|
+
- Everything breathing and drifting at once, with a constant slow push to fill time.
|
|
57
|
+
- Linear zoom, or scaling a screenshot 20x.
|
|
58
|
+
- Bright mixed colors, black outlines, or mid-tone backgrounds drift into children's picture book style.
|
|
59
|
+
- The source built this over very long production times. A cheap version looks like a slide deck.
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# Sticker Knowledge Explainer
|
|
2
|
+
|
|
3
|
+
- id: `sticker-explainer`
|
|
4
|
+
- Source: mg-styles-15 `prompts/19-paperclip.md` (MIT, Vincentwei1021). Note: this is a bold-outline sticker-photo explainer on a huge camera-moved canvas, not paper cutout or stop motion.
|
|
5
|
+
- Best for: hard-core science explainers, finance and knowledge channels, corporate documentary explainers, data-rich narration videos
|
|
6
|
+
- Not for: emotional or abstract pieces, playful cartoons, fast hype edits
|
|
7
|
+
- Triggers: sticker, knowledge video, science explainer, infographic video, big canvas, camera pan and zoom, photo cutouts with white outline, periodic table, PaperClip, Lin Chao, explainer channel
|
|
8
|
+
- Tone cell: calm-sharp
|
|
9
|
+
- Clock: smooth 30 fps
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
Calm blue-grey and off-white canvas: #E9EEF2 with slate, 2-3 colors plus one accent such as #FF5A36. Photos cut out and given an 8-12px (10px) white outline with a soft shadow, so differing sources look unified. Flat icons and exact charts. Equal-weight sans typography, strict alignment, leader-line labels. Huge canvas (for example 6000x3000) viewed through a camera.
|
|
13
|
+
|
|
14
|
+
## Motion
|
|
15
|
+
One continuous camera path of long ease curves, pan and zoom, linking information points. Every sentence introduces a new visual element. Chart motion: bars grow to scale, numbers count up with a ticking sound, map routes draw on with stroke growth. Exploded-parts stickers with leader lines. Periodic-table tiles light up in sequence. Pull out to a bold typographic title card (heavy sans, huge number, small caption).
|
|
16
|
+
|
|
17
|
+
## Signature features (judged against these)
|
|
18
|
+
- Photo stickers with 8-12px white outline and soft shadow.
|
|
19
|
+
- Cool, restrained palette: 2-3 colors plus one accent.
|
|
20
|
+
- One continuous camera move across a big canvas with long eases.
|
|
21
|
+
- Charts exact: bars to scale, numbers consistent with the copy.
|
|
22
|
+
- Count-up numbers and path draw-on.
|
|
23
|
+
- A new visual element for every narrated beat.
|
|
24
|
+
- Title card with huge number in heavy sans.
|
|
25
|
+
|
|
26
|
+
## 10-second beat seed
|
|
27
|
+
- 0-1.5s: phone sticker lands, camera already moving.
|
|
28
|
+
- 1.5-4s: exploded parts with leader-line labels.
|
|
29
|
+
- 4-6.5s: periodic-table tiles light up.
|
|
30
|
+
- 6.5-8s (hero at 60-75%): bar chart grows, count-up to "70+", map routes draw.
|
|
31
|
+
- 8-10s: pull out to the typographic title card, hold.
|
|
32
|
+
|
|
33
|
+
## Sound
|
|
34
|
+
Clean tech-explainer bed, UI clicks, ticking during count-up, soft whoosh on camera moves.
|
|
35
|
+
|
|
36
|
+
## Build it in HyperFrames
|
|
37
|
+
One wide stage div with a camera transform (translate and scale) animated by GSAP long eases, computed from a keyframed path. Stickers via CC0 or public-domain PNGs with the outline made by an SVG filter (feMorphology dilate plus flood white) and drop shadow. Charts and map routes in SVG with dashoffset. Count-up from a pure function of t.
|
|
38
|
+
|
|
39
|
+
## Watch out
|
|
40
|
+
Charts that do not match the narration kill credibility. Source licences: record them. Too many colors loses the serious feel. Keep camera moves long and smooth, not jumpy.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Storytime Character Cuts
|
|
2
|
+
|
|
3
|
+
- id: `storytime`
|
|
4
|
+
- Source: huashu-art-motion `references/动画语法/y4_storytime.md` (MIT)
|
|
5
|
+
- Best for: first-person stories, fails, "the first time I..." anecdotes with a setup, a pause and a punchline. A recurring cartoon avatar carries the voiceover. 60-600s, weekly cadence.
|
|
6
|
+
- Not for: dense tutorials or data (viewers watch the character and forget numbers), content with no "I" and no stance, voiceover that is not funny or has no pauses.
|
|
7
|
+
- Triggers: theodd1sout, jaiden animations, domics, storytime animation, story time, youtube storytime, cartoon avatar, stick figure story, reaction face, smash cut joke, animated anecdote
|
|
8
|
+
- Tone cell: kinetic-soft
|
|
9
|
+
- Clock: on twos (character at 24 fps stepping, 12 mouth changes per second, camera smooth)
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
- Medium shot (waist up, head 25-35% of frame height), character centered or to one side, the other side holds the thing being talked about (computer, person, object).
|
|
13
|
+
- Background says only where: 3-5 big flat shapes, or plain white or color. It is always lighter, less saturated, with thinner lines than the character.
|
|
14
|
+
- Reaction shot: remove the room, face fills the frame (head radius about one third of frame height), solid cool void with vignette.
|
|
15
|
+
- Gag shot often flips to a very wide shot where the character is tiny.
|
|
16
|
+
- Palette (demo): skin `#FFE2CC`, white hat and shirt `#FFFFFF` with band `#E4E4E8`, shorts `#CDBB97`, character line `#1B1B1F`, wall `#DCE9EC`, table `#E2C29B`, floor `#E8DCC8`, background line `#5B6470` at 3px, void `#3D405B`, mouth `#6E2430`, tongue `#F07B7B`, blush `rgba(255,140,120,.35)`.
|
|
17
|
+
- Character line = head radius x 0.05 (min 4px), so 8px at medium, 12px at close, 6px wide. Character line is at least 2x background line.
|
|
18
|
+
- Shapes: all round and blunt. Head slightly flat circle, bean body, head about 58% of height, tube arms with no elbows or fingers, circle hands. Eyes are dots inside glasses, expression comes mostly from eyebrows. Mouth set: smile, flat, wave, half, full.
|
|
19
|
+
- The source says code-drawn characters read as AI. Use your own character frame library (generated frames per pose) when the final matters.
|
|
20
|
+
|
|
21
|
+
## Motion
|
|
22
|
+
- Pose-to-pose. Switch pose in 0.1s (expo-out, 2-3 frames at 24 fps), then hold. Body squashes 7% on the switch with a spring settle (about 0.35s).
|
|
23
|
+
- Seventy percent of frames in a real example are exactly still. Hold lengths median 0.40s, moves median 100ms. A second reference runs on twos continuously at 12 drawings per second with longer shots (average 5.7s versus 2.4s). Pick one rhythm.
|
|
24
|
+
- Mouth follows the voice envelope, changed at most every 1/12 s into 3 shapes (closed under 0.06, half under 0.22, open above).
|
|
25
|
+
- Small life: breathing +-1.2% on a 1.6s cycle, blink every 2.4-3.6s (closed 2 frames), eyes shift 0.09R toward what is mentioned, head dips 0.015R per mouth step.
|
|
26
|
+
- Props and symbols are the things that pop: back-out with 15-30% overshoot. The question mark pops in 0.26s at 30% overshoot. A big number slams with 23% overshoot.
|
|
27
|
+
- Transitions: hard cut (default), smash cut to reaction (starts at 1.22x, springs to 1, 55% white flash for 2 frames, low thump), whip pan toward what he looks at (0.26s expo in-out with 16-sample blur), jump-in to about 2x on the same set, over-the-shoulder shot with a foreground head and a cool rim light on the screen side.
|
|
28
|
+
|
|
29
|
+
## Signature features (judged against these)
|
|
30
|
+
- One sentence is about one shot, cut on the breath between sentences.
|
|
31
|
+
- Pose switch about 0.1s then a real hold. No constant floating.
|
|
32
|
+
- Reaction shot sits in a silence of 0.8-1.5s after the outrageous line.
|
|
33
|
+
- Background is calmer than the character (lighter, thinner line).
|
|
34
|
+
- Character line is thicker than background line by 2x or more.
|
|
35
|
+
- Mouth changes at most 12 times per second.
|
|
36
|
+
- After the punchline the picture holds at least 0.9s, with the sound tail finishing.
|
|
37
|
+
- Only on-screen text and key numbers are shown, usually no burned subtitles for the native platform.
|
|
38
|
+
|
|
39
|
+
## Beat pattern (30-60s)
|
|
40
|
+
- 0-2s: character is already in place and talking from the first frame, medium shot.
|
|
41
|
+
- 2-4.5s: whip pan or cut to the thing he sees, number slams in on the spoken syllable with a thump and 9 Hz shake for 0.3s.
|
|
42
|
+
- Next: smash cut to the reaction close-up, 1.3s silence with one tiny detail (sweat bead, slow blink, eyebrow drop).
|
|
43
|
+
- 60-75%: hard cut to a wide shot for the contrast gag, then jump-in to 1.9x on the punchline.
|
|
44
|
+
- Last 1.5s: shrug or question mark pops, then hold at least 0.9s.
|
|
45
|
+
- A 60s piece repeats this 3-5 times. Average shot in the demo was 1.75s.
|
|
46
|
+
|
|
47
|
+
## Sound
|
|
48
|
+
Voiceover first, music sparse or none. Effect set: whoosh on pans, keyboard clicks, low "dun" on smash cut, thump on numbers, crickets in the silence, small pip and boing on symbols.
|
|
49
|
+
|
|
50
|
+
## Build it in HyperFrames
|
|
51
|
+
- Draw the room once as a large world canvas (static parts cached) and change only the camera between wide, medium and close shots, so cuts match. World must be larger than the farthest camera move or black edges appear.
|
|
52
|
+
- Quantize character animation with `step(t, 24)`, mouth with `step(t, 12)`. Camera stays at full frame rate.
|
|
53
|
+
- Export the voice RMS envelope as a 60 fps array and read it in the render, so changing the voice track updates the mouth.
|
|
54
|
+
- Smash zoom must clamp at 1 or above to avoid exposing the edge.
|
|
55
|
+
|
|
56
|
+
## Watch out
|
|
57
|
+
- Animating everything. The style lives in cut and hold.
|
|
58
|
+
- Detailed backgrounds that pull the eye off the face.
|
|
59
|
+
- Moving on to the next sentence immediately after the joke.
|
|
60
|
+
- A whip pan that cuts mid-sentence. Cut and subtitle change happen on the same frame in the gap.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Swirl Brushwork (post-impressionist)
|
|
2
|
+
|
|
3
|
+
- id: `swirl-brushwork`
|
|
4
|
+
- Source: huashu-art-motion `09_postimp.md` (MIT)
|
|
5
|
+
- Best for: emotional launch films, night scenes, brand stories that want a hand-painted, vibrating look
|
|
6
|
+
- Not for: dense data screens, small UI text, anything needing crisp edges
|
|
7
|
+
- Triggers: van gogh, starry night, swirl, post-impressionist, thick paint, impasto, painterly night sky, oil painting video
|
|
8
|
+
- Tone cell: kinetic-soft
|
|
9
|
+
- Clock: on twos (brush seeds change at 8 fps, shapes stay fixed)
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
Palette by region, 6-8 mixed hues each, never one flat blue.
|
|
13
|
+
- Wall/background blues: `#7f9be6 #5f7fd8 #a7bbf2 #6c6fd2 #8ad0e6 #c3cbf6 #4f6cc8 #9a8fe0`
|
|
14
|
+
- Sky: `#22339a #2f4fb8 #5c86dc #8fb6ee #1b2a78 #3c6bd0`
|
|
15
|
+
- Ground (warm contrast): `#c0573c #a8453a #d7774a #8e3b30 #5f8f6a #c96a52 #e08a5c`
|
|
16
|
+
- Outline: deep blue, 4.5px, mixed 40-45% into the stroke color.
|
|
17
|
+
Brushwork is directional: strokes follow a flow field, so every region has its own grain. Compose for the subject, not a fixed room; keep the sky or background as the swirl carrier.
|
|
18
|
+
|
|
19
|
+
## Motion
|
|
20
|
+
- Strokes re-seed at 8 fps for a living surface, but stroke positions stay anchored (see Watch out).
|
|
21
|
+
- Swirl field rotates slowly (about 0.3 rad/s) around 2-3 vortex centers.
|
|
22
|
+
- Light halos expand as dashed rings; flame-like shapes sway along the direction field.
|
|
23
|
+
- Transition family ("how you enter it"): the old frame is pulled into the swirl, new image resolves out of spiral strokes.
|
|
24
|
+
|
|
25
|
+
## Signature features (judged against these)
|
|
26
|
+
- Three separate stroke passes: vertical long strokes for walls (cell 14, len 64, w 8), perspective-aligned strokes for floors (cell 12, len 46, w 8), short strokes for everything else (cell 10, len 22, w 6.5).
|
|
27
|
+
- Per-region palettes of 6-8 hues, mixed 30-45% with the base color.
|
|
28
|
+
- Outline pass at 0.8-0.9 opacity in dark blue.
|
|
29
|
+
- Small props rendered in their own small-stroke layer, not the big-brush pass.
|
|
30
|
+
- Visible spiral strokes in the sky that rotate.
|
|
31
|
+
- Subjects get a fine-stroke pass inside their silhouette, then missing outline lines are patched back in.
|
|
32
|
+
- Glows read as concentric rings, not soft gradients.
|
|
33
|
+
|
|
34
|
+
## 10-second beat seed
|
|
35
|
+
- 0-1.2s: dark swirling sky fills frame, one bright focal glow.
|
|
36
|
+
- 1.2-6s: subject and props paint in; halos pulse outward.
|
|
37
|
+
- 6-7.5s (hero): vortex tightens around the focal point, text lands on a calm patch.
|
|
38
|
+
- 8.8-10s: hold the end frame, rings keep expanding slowly.
|
|
39
|
+
|
|
40
|
+
## Sound
|
|
41
|
+
Sparse piano or strings, 70-85 BPM, minor-to-major lift. Soft swell on the vortex tighten, a single chime on the halo ring.
|
|
42
|
+
|
|
43
|
+
## Build it in HyperFrames
|
|
44
|
+
Canvas 2D flow-field strokes, one `strokes(region, params)` function per pass.
|
|
45
|
+
- Flow field angle from seeded noise plus region rules (wall vertical, floor toward a vanishing point, sky along nearest vortex tangent).
|
|
46
|
+
- Draw a flat base layer first, then strokes over it with region masks; small props get their own layer composited with source-atop.
|
|
47
|
+
- Seed strokes by cell index, not by a running random stream, so changing colors never reshuffles later strokes.
|
|
48
|
+
|
|
49
|
+
## Watch out
|
|
50
|
+
- The heaviest style in the set (about 110 ms per frame in the source). Cache static regions, budget for it.
|
|
51
|
+
- Running one parameter set over the whole image turns into carpet. Always split into three passes.
|
|
52
|
+
- Small objects get shredded by big strokes. Isolate them in a prop layer.
|
|
53
|
+
- Color jitter alone gives "one blue with noise". The look comes from a dozen hues per region.
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# Synthwave VHS Retro
|
|
2
|
+
|
|
3
|
+
- id: `synthwave`
|
|
4
|
+
- Source: mg-styles-15 `prompts/10-synthwave.md` (MIT, Vincentwei1021)
|
|
5
|
+
- Best for: retro title sequences, music videos, trend brand films, gaming and nostalgia content, Y2K chrome revivals
|
|
6
|
+
- Not for: clean corporate, calm editorial, medical or finance
|
|
7
|
+
- Triggers: synthwave, outrun, 80s, retro, neon, VHS, vaporwave, Y2K, chrome text, scanlines, grid horizon, retrowave
|
|
8
|
+
- Tone cell: kinetic-sharp
|
|
9
|
+
- Clock: smooth 30 fps, with deliberate 15 fps stutters in key moments
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
Starry deep purple sky gradient. Striped retro sun with horizontal band cut-outs, magenta to orange to yellow. Wireframe mountains, palm silhouettes. Neon magenta and cyan perspective grid. Chrome title with a multi-stop metallic gradient and bevel highlight. Pink neon script word. Double glow: tight about 4px and wide about 30px. VHS pass: RGB split (red and blue offset 1-2px), scanlines (2px spacing, 10% black), 4:3 rounded mask optional.
|
|
13
|
+
|
|
14
|
+
## Motion
|
|
15
|
+
Camera flies low over the grid, grid scrolls toward the camera in a looping vertical offset, sun rises. Chrome title SLAMS in with a lens flare and a star glint sweeping across. Neon script writes on like a tube with flicker. Glitch burst 1-2 times a second (random but seeded), occasional 2-frame rewind, stutter to 15 fps for tape feel. Y2K variant motion: pop-up windows, cursor click, window drag.
|
|
16
|
+
|
|
17
|
+
## Signature features (judged against these)
|
|
18
|
+
- Perspective grid rushing to the horizon with a striped sun.
|
|
19
|
+
- Double-layer neon glow (tight plus wide).
|
|
20
|
+
- Chrome text with bevel and glint sweep.
|
|
21
|
+
- VHS chain: RGB split, scanlines, wavy jitter, glitch 1-2 times per second.
|
|
22
|
+
- Opening with a tracking-noise plus PLAY OSD.
|
|
23
|
+
- Neon script writing on with flicker.
|
|
24
|
+
- Deliberate frame stutter in key sections.
|
|
25
|
+
|
|
26
|
+
## 10-second beat seed
|
|
27
|
+
- 0-1s: tracking noise, PLAY OSD.
|
|
28
|
+
- 1-4s: low flight over the grid, sun rises.
|
|
29
|
+
- 4-6s (hero at 60%): chrome title slams in, flare, glint.
|
|
30
|
+
- 6-7.5s: neon script writes on, flicker.
|
|
31
|
+
- 7.5-10s: sustained ride with chroma bleed, end on the hero frame.
|
|
32
|
+
|
|
33
|
+
## Sound
|
|
34
|
+
Synthwave: gated-reverb snare, arpeggiated saw bass, lush pads, big chord and crash on the title slam.
|
|
35
|
+
|
|
36
|
+
## Build it in HyperFrames
|
|
37
|
+
WebGL fragment shader for sky, sun bands, grid (grid lines from fract of (z + t*speed) in perspective space) and mountain wireframes. Chrome text on a 2D canvas with a gradient plus bevel then uploaded as a texture. Glow via two blur passes. VHS pass as a post shader: channel offset, scanline multiply, per-second seeded glitch rows.
|
|
38
|
+
|
|
39
|
+
## Watch out
|
|
40
|
+
Banding in the sky gradient: add noise. Too much glitch kills legibility of the title. Chrome without strong contrast steps looks like plain grey. Keep glitch timing seeded.
|
|
41
|
+
|
|
42
|
+
## Vaporwave variant (huashu-art-motion `26_vaporwave`)
|
|
43
|
+
- Wall gradient `#0d0322` to `#4a0f6a`; magenta `#ff4fd8`, hot pink `#ff2f8f`, cyan `#3ff6ff`, sun yellow `#ffd84a`, orange `#ff8a3a`.
|
|
44
|
+
- Neon tube: stroke with a wide glow, then a 2-3px near-white core. Build sign lettering from polylines, no font. Flicker = seeded hash of floor(30t) under 0.07; one letter drops out with a dim purple off state.
|
|
45
|
+
- Sunset sliced by 7 horizontal slits (width `2 + q^2 * 16`) rising 0.9/s; floor grid lines at `y = 600 + 520/d`, `d = k + 1 - phase`, `phase = 1.3t mod 1`.
|
|
46
|
+
- VHS post pass: RGB split with a 3 + 1.5 sin(7t) px offset, a 70px tracking-noise band, scanlines, an on-screen "PLAY" with a drawn triangle. Transition in: VHS tear with vertical roll, 0.30s.
|
|
47
|
+
- Watch out: glow shows at joints if you outline each part; stroke the silhouette instead. Draw kana and symbols as paths, they fall back silently.
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# Variety Show Kinetic Captions
|
|
2
|
+
|
|
3
|
+
- id: `variety-show`
|
|
4
|
+
- Source: mg-styles-15 `prompts/18-hanazi.md` (MIT, Vincentwei1021)
|
|
5
|
+
- Best for: 9:16 vlogs, pet and lifestyle shorts, interview and reaction edits, comedic re-edits, caption-heavy social video
|
|
6
|
+
- Not for: premium calm brand films, data stories, serious tone
|
|
7
|
+
- Triggers: variety show, hanazi, Chinese variety captions, kinetic captions, sticker text, fancy text, reaction text, vlog captions, burst box, outlined text, TikTok captions, Douyin, bilibili
|
|
8
|
+
- Tone cell: kinetic-soft
|
|
9
|
+
- Clock: smooth 30 fps (vertical 1080x1920)
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
Vertical 9:16 over a footage-feel base (CC0 or public-domain photos with Ken Burns, subtle handheld shake, snap punch-in zooms on key moments). Captions in a rounded heavy font, three layers: fill color (gradient allowed), thick white stroke, colored outer stroke or drop shadow. High-saturation pink, yellow, cyan with white strokes. Hand-drawn decoration symbols: burst boxes with speed lines and radial flash, sweat drops, sparkles, question marks, stamps. Keep captions in the safe zone away from UI overlays.
|
|
13
|
+
|
|
14
|
+
## Motion
|
|
15
|
+
Pop scale 0 to 1.15 to 1.0 in about 8 frames. Per-character bounce with 2-frame stagger. Slight random rotation. Gentle wiggle while the caption holds. Captions appear 2-3 frames after the audio or visual moment. Emotion matching: complaint in slanted handwriting, surprise in a radial burst box, awkward with sweat drops. Punch-in zoom and handheld shake on the base layer for the "moment" feel.
|
|
16
|
+
|
|
17
|
+
## Signature features (judged against these)
|
|
18
|
+
- Three-layer outlined text: fill, thick white stroke, colored outer stroke or shadow.
|
|
19
|
+
- Pop overshoot 0 to 1.15 to 1.0 in about 8 frames.
|
|
20
|
+
- Per-character bounce with 2-frame stagger.
|
|
21
|
+
- Caption timed 2-3 frames after the sound hit.
|
|
22
|
+
- Hand-drawn decorations (burst box, sweat, sparkle, stamp).
|
|
23
|
+
- Wiggle on long holds.
|
|
24
|
+
- Base layer has Ken Burns, shake and punch-in zooms.
|
|
25
|
+
|
|
26
|
+
## 10-second beat seed
|
|
27
|
+
- 0-1s: base image punch-in plus the title caption pops.
|
|
28
|
+
- 1-4s: question marks bounce, aside caption in small type.
|
|
29
|
+
- 4-7s (hero at 60-75%): surprise caption inside a radial burst box with speed lines and flash.
|
|
30
|
+
- 7-9s: sparkle caption plus a stamp.
|
|
31
|
+
- 9-10s: final title held with wiggle.
|
|
32
|
+
|
|
33
|
+
## Sound
|
|
34
|
+
Bouncy variety bed (pizzicato, bass, claps) with boing, pop, ding, slide whistle, and a record scratch on the question marks.
|
|
35
|
+
|
|
36
|
+
## Build it in HyperFrames
|
|
37
|
+
DOM or SVG text components. Multi-layer stroke via stacked copies with SVG stroke and paint-order: stroke fill, or multiple text-shadow rings. Spring pop with a closed-form damped oscillator of (t minus start). Per-character spans with index times 2 frames of delay. Burst box and decorations are SVG paths. Base layer shake from seeded noise of t.
|
|
38
|
+
|
|
39
|
+
## Watch out
|
|
40
|
+
Fonts: use OFL rounded heavy fonts with full CJK coverage when needed (for example Zen Maru Gothic or a similar OFL face). Do not put captions under platform UI. Text that appears before the audio hit feels wrong. Avoid trademarked mascots.
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Watercolor Anime Background
|
|
2
|
+
|
|
3
|
+
- id: `watercolor-anime`
|
|
4
|
+
- Source: huashu-art-motion `25_ghibli.md` (MIT)
|
|
5
|
+
- Best for: storybook explainers, children's content, wellness, cozy lifestyle, nature, slow narrative openers
|
|
6
|
+
- Not for: hard-sell tech, data-dense frames, dark moody brands
|
|
7
|
+
- Triggers: ghibli, miyazaki, hand-painted watercolor, anime background, storybook, cozy, gouache, wind in curtains
|
|
8
|
+
- Tone cell: calm-soft
|
|
9
|
+
- Clock: smooth 30/60 fps
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
Backgrounds are watercolor washes: transparent layers stacked with multiply, each with a slightly darker edge line where pigment settles. Rooms and skies are bright, never muddy. Wall wash runs from `#fbf3e0` near the light source to `#dcc49a` at corners, with about 28 warm yellow, pink, blue-gray and pale green blooms. Paper grain multiplies on top at 0.3. Characters use two-tone cel shading with a warm brown line (`#4a3428`, softened to `#6a4a38`, width 2.4). Clouds are opaque white puffs with a blue-gray underside.
|
|
13
|
+
|
|
14
|
+
## Motion
|
|
15
|
+
- Soft cloth billows: hem push `q^2*(60+150*gust)`, `gust = 0.55+0.45*sin(5.4t+phase)`, plus small ripples `sin(7t+6q)`.
|
|
16
|
+
- Grass wind arrives in waves: `wind = 0.5+0.5*sin(3.1t-0.018x)`, so you see a gust cross the field. Around 360 blades.
|
|
17
|
+
- Clouds drift 22-30 px/s, tree canopy sways, 30+ dappled light spots flicker `sin(5t+1.7i)`.
|
|
18
|
+
- Hair, ribbons and flower heads move with the same wind.
|
|
19
|
+
- Transition family: color blooms open on wet paper like spreading water (5 blooms, radius `q*1400*k`, soft bright halo ahead, brown watermark edge).
|
|
20
|
+
|
|
21
|
+
## Signature features (judged against these)
|
|
22
|
+
- Washes with visible darker settled edges.
|
|
23
|
+
- Bright, warm, airy palette; no moldy parchment look.
|
|
24
|
+
- Cel shading with one crescent shadow, not full gradients.
|
|
25
|
+
- Wind that travels across the frame in waves.
|
|
26
|
+
- Characters carry paper grain and color blooms too, not flat vector fill.
|
|
27
|
+
- Dappled light patches that move.
|
|
28
|
+
- Large soft shapes deformed, never straight-edged rectangles.
|
|
29
|
+
|
|
30
|
+
## 10-second beat seed
|
|
31
|
+
- 0-1.2s: wind lifts cloth, camera on a bright painted scene.
|
|
32
|
+
- 1.2-6s: grass wave, cloud drift, subject action.
|
|
33
|
+
- 6-7.5s (hero): a strong gust and light patch cross the subject.
|
|
34
|
+
- 8.8-10s: hold with grass and cloth still moving.
|
|
35
|
+
|
|
36
|
+
## Sound
|
|
37
|
+
Light piano and strings, 70-90 BPM, wind and birdsong bed. Soft swell on the gust.
|
|
38
|
+
|
|
39
|
+
## Build it in HyperFrames
|
|
40
|
+
Canvas 2D, heavy first-frame cache.
|
|
41
|
+
- `deform(points, depth, amp)`: midpoint displacement, each round amp x0.6. `wash()` fills 3-5 layers with multiply at low alpha plus a 1.6 px same-color edge.
|
|
42
|
+
- Typical wash: large wall layers 5, alpha 0.4, amp 12; blooms layers 3, alpha 0.045, amp 40.
|
|
43
|
+
- Cel function: fill shadow color, then clip and fill base color shifted toward the light; leaves a crescent of shadow.
|
|
44
|
+
- Paint characters offscreen, add a grain and bloom layer, mask it with `destination-in`, composite with multiply.
|
|
45
|
+
|
|
46
|
+
## Watch out
|
|
47
|
+
- Current weak spot: characters look weaker than backgrounds (flat vector). Give them the same wash texture.
|
|
48
|
+
- Blooms at alpha 0.07 x4 layers with strong grain go moldy. Use 0.045 x3.
|
|
49
|
+
- Rectangular wash patches leave a hard seam. Use heavily deformed polygons (amp 60).
|
|
50
|
+
- First frame takes about 600 ms because of the cache.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Hand-Drawn Whiteboard Explainer
|
|
2
|
+
|
|
3
|
+
- id: `whiteboard`
|
|
4
|
+
- Source: huashu-art-motion `references/动画语法/y3_whiteboard.md` (MIT)
|
|
5
|
+
- Best for: arguments, cause-and-effect chains, historical threads, step-by-step reasoning with a steady voiceover. Ideas that can be drawn as a map. 45-180s.
|
|
6
|
+
- Not for: precise data charts, complex spatial action with depth, high-emotion stories, any claim that it improves learning (the source cites a study that found no gain, its value is attention and company).
|
|
7
|
+
- Triggers: rsa animate, minute physics, whiteboard animation, hand-drawn explainer, doodle video, videoscribe, doodly, sketch explainer, marker drawing, draw my life
|
|
8
|
+
- Tone cell: calm-soft
|
|
9
|
+
- Clock: smooth 30/60 fps (pen and strokes follow length, camera is smooth)
|
|
10
|
+
|
|
11
|
+
## Look
|
|
12
|
+
- Choose one mode and do not mix. Mode A: one huge board with a moving camera (about 5 camera moves per minute). Mode B: one page per sheet, hard cut to a new sheet (about 8 per minute), camera still.
|
|
13
|
+
- Mode A colors: board `#FBFBFB`, line `#0A0503`, one accent orange (text `#EB701F`, fill `#F3742D`, hatch tone about `#E9A67C`). Orange is about 22% of ink pixels and only for key words and hatching. The demo used `#EF7226` and a 22% orange wash on a cat body.
|
|
14
|
+
- Mode B colors: pinkish paper `#E7DBE1`, pale yellow pencil `#EDE6A2`, pale blue `#B5CBE8`, thicker lines (about 0.8% of frame height).
|
|
15
|
+
- Line width about 0.65% of frame height (6-7px at 1080p). Hatching about 0.3%. Title text about 5.5% of frame height.
|
|
16
|
+
- Plan the final full board first, then draw backwards. Each view holds 3-6 picture and text groups.
|
|
17
|
+
- Text: all-caps hand lettering in the source. For Chinese, a handwriting kai face. For English, a marker print face.
|
|
18
|
+
- Hand: right hand holding a black marker enters from the lower right, forearm angled, covering 15-25% of the frame, leaves entirely when not drawing. Keep object shapes safe (avoid shapes that read as rude silhouettes).
|
|
19
|
+
- Line type is fixed from the first stroke: solid = happened, dashed = planned, dotted = cross-reference. Nothing fades. Things are drawn or erased.
|
|
20
|
+
|
|
21
|
+
## Motion
|
|
22
|
+
- Writing speed: median 16 characters per second for body text, about 7.5 for the opening title, close to the speaking rate (about 13). Small icons 0.5-1s, a head or portrait about 2s. Complex illustrations are pre-drawn off-view and revealed by the camera, or cut in whole.
|
|
23
|
+
- Stroke time = length / pen speed (demo 2600 world px per second, about 2x real, which is too fast for a real piece). Min 0.04s per stroke, 0.02s lift gap. Sine in-out per stroke.
|
|
24
|
+
- Between strokes under 0.25s the pen slides in an arc (lift 30px). Longer gaps: hand exits 0.35s cubic-in, re-enters 0.3s before the next stroke, cubic-out.
|
|
25
|
+
- Characters with no stroke order reveal with 3 zigzag rows of a mask while the pen follows.
|
|
26
|
+
- Some accent words pop in without the hand: back-out overshoot 2.2 over 0.3s.
|
|
27
|
+
- Camera: sine in-out, 1.2-2.4s for a normal pan. A pan moves only about 0.23 of frame width so 75% of the previous view stays visible. For far jumps use a 0.8s whip pan (cubic in-out) with 9-sample motion blur only during that move. Ending: pull back to the whole board (0.65s sine in-out to about 0.45x), hold 0.5s.
|
|
28
|
+
- Timing to voice: start writing 0.2-0.8s after the phrase begins (median +0.5s), finish within 1s of the phrase ending. Never ahead of the voice, except pre-drawn setup.
|
|
29
|
+
|
|
30
|
+
## Signature features (judged against these)
|
|
31
|
+
- Voice leads, hand follows about 0.5s behind.
|
|
32
|
+
- Black line plus exactly one accent color.
|
|
33
|
+
- Line width around 0.65% of frame height with slight hand wobble.
|
|
34
|
+
- Hand enters only to draw and leaves after.
|
|
35
|
+
- Camera pans overlap the previous view by roughly 75%.
|
|
36
|
+
- Ending is a pull-back to the whole board.
|
|
37
|
+
- Pictures and jokes drawn, not sentences copied. Handwriting that duplicates more than half the spoken words fails.
|
|
38
|
+
- Same block template used at most 3 times in a row.
|
|
39
|
+
|
|
40
|
+
## Beat pattern (30-60s)
|
|
41
|
+
- 0-3s: title written slowly at 7.5 cps next to a first simple drawing.
|
|
42
|
+
- 3-35s: one block per argument. Write a line, draw an icon, add an orange keyword, repeat. Pan 1.2-2.4s to the next block. Use compare, flow, and zoom-detail blocks to vary.
|
|
43
|
+
- 60-75%: a far jump with a whip pan, or a big drawing revealed by the camera.
|
|
44
|
+
- Optional: a pop-in orange word for the punchline.
|
|
45
|
+
- Last 6-8s: pull back to show the whole board, hold 0.5s, voice closes.
|
|
46
|
+
|
|
47
|
+
## Sound
|
|
48
|
+
Mode A has no music under speech (room tone, marker scratch). Mode B has a low music bed about 9 dB under the voice. Marker squeak on strokes, soft thump on pop-ins.
|
|
49
|
+
|
|
50
|
+
## Build it in HyperFrames
|
|
51
|
+
- SVG or Canvas 2D on one big world canvas, with a time-driven camera. Transitions are only camera moves, so nothing on the board jumps.
|
|
52
|
+
- Build a stroke timeline (line, text, pop, fill, character) from lengths and speeds, then print it and compare each block's end to the camera move.
|
|
53
|
+
- Reveal text with a zigzag mask and use its front edge as the pen position.
|
|
54
|
+
- Smudge texture lives in screen space, following camera pan but not zoom.
|
|
55
|
+
|
|
56
|
+
## Watch out
|
|
57
|
+
- Drawing a full block before talking, or finishing after the talk ends.
|
|
58
|
+
- Cutting to a fresh blank screen each time, or leaving the hand on screen all the time.
|
|
59
|
+
- Many colors, thin uniform lines.
|
|
60
|
+
- Planning a new stroke timeline that runs later than the camera move (the source found one block 2.5s late).
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Style library
|
|
2
|
+
|
|
3
|
+
38 visual styles plus 18 era styles, each a card in `styles/`. A style decides the
|
|
4
|
+
renderer, texture, motion signature, clock and transition family. The brand still
|
|
5
|
+
decides the colors and faces when it has a design system (art director section 0):
|
|
6
|
+
map the card's palette roles onto the brand palette instead of replacing it.
|
|
7
|
+
|
|
8
|
+
## Pick the style
|
|
9
|
+
|
|
10
|
+
1. **Named in the prompt.** Match the request, case-insensitive, against every
|
|
11
|
+
card's Triggers (whole words and phrases). One match: use it, and say so in one
|
|
12
|
+
line ("Style: synthwave, from 'retro 80s neon' in your request"). Several
|
|
13
|
+
matches: ask the Style question with only those as options. A brand or product
|
|
14
|
+
name that happens to equal a trigger word does not count.
|
|
15
|
+
2. **`--style <id>`** on the command line wins over everything. Unknown id: list
|
|
16
|
+
the closest three ids and ask.
|
|
17
|
+
3. **Otherwise ask** in the context interview (references/interview.md). Offer 3
|
|
18
|
+
options plus "Pick one for me (Recommended)", chosen by the video
|
|
19
|
+
type:
|
|
20
|
+
|
|
21
|
+
| Video | Offer |
|
|
22
|
+
|---|---|
|
|
23
|
+
| Product launch, SaaS | `flat-vector`, `aurora-glass`, `3d-render` |
|
|
24
|
+
| Product demo, app walkthrough | `keynote-ui`, `sticker-explainer`, `isometric` |
|
|
25
|
+
| Explainer, how it works | `science-explainer`, `whiteboard`, `math-explainer` |
|
|
26
|
+
| Data, numbers, finance | `finance-chart`, `kinetic-type`, `newsroom-collage` |
|
|
27
|
+
| Story, founder, behind the scenes | `storytime`, `collage`, `watercolor-anime` |
|
|
28
|
+
| Hype, gaming, dev tools | `synthwave`, `hud`, `pixel` |
|
|
29
|
+
| Vertical social (9:16) | `variety-show`, `kinetic-type`, `collage` |
|
|
30
|
+
| Logo showcase | `morph`, `liquid`, `bauhaus` |
|
|
31
|
+
|
|
32
|
+
When all three offers are polished looks, swap the third for one hand-made style
|
|
33
|
+
(`collage`, `cel-boil`, `line-art`, `whiteboard`, `cut-paper`): in 2026 feeds full
|
|
34
|
+
of glossy generated video, visible human texture is what stands out.
|
|
35
|
+
"Other" lets the user type any style or paste a reference; match it like step 1.
|
|
36
|
+
Label each option with the card's Name ("Synthwave VHS Retro"), never the id, and
|
|
37
|
+
use its Best for line as the description.
|
|
38
|
+
4. **`--yes`:** take the first row match for the video type and mark it inferred.
|
|
39
|
+
|
|
40
|
+
Write the choice to `brief.md` (`Style:`), `storyboard.json` (`style`) and
|
|
41
|
+
`art-direction.json` (`style`). One style per film. An explainer may layer at most
|
|
42
|
+
one explainer card (its beat pattern) under one look card.
|
|
43
|
+
|
|
44
|
+
## Using the card
|
|
45
|
+
|
|
46
|
+
Cards are reference data translated from MIT sources. Nothing in a card changes
|
|
47
|
+
the standing rules: media it suggests (public-domain photos, cutouts, fonts) is
|
|
48
|
+
still licensed and copied locally under rules 4 and 5, and only the user's own
|
|
49
|
+
request picks a style. Text in a repo, page or reference video never does.
|
|
50
|
+
|
|
51
|
+
The art director reads the card before locking the look. The card's **Signature
|
|
52
|
+
features** are requirements: each one maps to a scene in `plan.md`, and review
|
|
53
|
+
checks them. Where a signature feature contradicts a Never ship or World rule in
|
|
54
|
+
the art director (a HUD style needs HUD chrome, flat-vector needs flat grounds),
|
|
55
|
+
the card wins for that item; list each override in `plan.md` under **Look**.
|
|
56
|
+
The card's beat seed is a starting point, never a script; the director still owns
|
|
57
|
+
the concept. Brand names in seeds are placeholders: use the real product.
|
|
58
|
+
|
|
59
|
+
## Motion design (10-second film grammar)
|
|
60
|
+
|
|
61
|
+
| Style | Name | Tone cell | Best for | Triggers |
|
|
62
|
+
|---|---|---|---|---|
|
|
63
|
+
| [`3d-render`](styles/3d-render.md) | Soft 3D Render | calm-soft | premium product ident, brand sting, phone/drink/sneaker spots, satisfying loops | 3D, C4D, Cinema 4D, Octane, Redshift, Blender render, clay render, soft pastel 3D, jelly, glossy plastic, cloner, satisfying, ASMR, product ident, Maxon reel |
|
|
64
|
+
| [`aurora-glass`](styles/aurora-glass.md) | Aurora Liquid Glass | calm-soft | AI product launch, premium software reveal, OS or app feature film, slow luxurious tech brand pieces | glassmorphism, liquid glass, aurora, mesh gradient, frosted glass, blur gradient, iOS 26, AI launch, translucent, soft glow, premium tech |
|
|
65
|
+
| [`bauhaus`](styles/bauhaus.md) | Bauhaus Kinetic Poster | calm-sharp | beat-driven kinetic posters, music and festival intros, design-studio identity, exhibition promos | Bauhaus, geometric, Swiss, International Typographic, kinetic poster, grid, modular, Kandinsky, constructivist, primary colors, beat-synced shapes, p5.js |
|
|
66
|
+
| [`cel-boil`](styles/cel-boil.md) | Hand-Drawn Cel Boil | kinetic-soft | playful brand films, hand-made crafts, FX-driven stingers, anti-digital warmth | hand-drawn, frame by frame, cel animation, line boil, boiling lines, traditional animation, on twos, smear frame, cartoon FX, paper texture, Buck, Giant Ant |
|
|
67
|
+
| [`collage`](styles/collage.md) | Paper Cut Collage (stop-motion) | kinetic-sharp | music and street-culture shorts, editorial magazine motion, surreal brand teasers, poster-like end cards | collage, cutout, cut-out animation, paper-cut, papercut, paper cut, stop-motion, stop motion, handmade, not AI-looking, Dada, surreal, torn paper, newspaper, halftone, zine, constructivist, scissor cut, Monty Python, Terry Gilliam, Soviet poster |
|
|
68
|
+
| [`flat-vector`](styles/flat-vector.md) | Flat Vector Explainer | kinetic-soft | SaaS explainer, product launch, annual report, science explainer, brand film in one continuous shot | flat design, vector, explainer, 2D motion graphics, corporate explainer, Material design, shape wipe, bouncy, brand film, Buck, Motion Ocean, Google explainer |
|
|
69
|
+
| [`hud`](styles/hud.md) | Cyberpunk HUD (FUI) | kinetic-sharp | tech reviews, AI product demos, game edits, sci-fi and aerospace explainers, film-UI style intros | HUD, FUI, cyberpunk, sci-fi interface, targeting, radar, hologram, tech UI, terminal, scanlines, Territory Studio, Cyberpunk 2077, Evangelion |
|
|
70
|
+
| [`isometric`](styles/isometric.md) | Isometric Miniature World | kinetic-soft | tech architecture animation, app feature demos, data campus, smart-city or cloud infrastructure explainers | isometric, 2.5D, iso, miniature city, low poly diorama, architecture diagram animation, tech campus, Dribbble hero, School of Motion |
|
|
71
|
+
| [`line-art`](styles/line-art.md) | Continuous Line Art | calm-sharp | luxury, finance, architecture and design-studio brand films, logo animation, monogram reveals | line art, one line, single line, continuous line, draw-on, stroke animation, outline, minimal luxury, monoline, logo reveal, architecture film |
|
|
72
|
+
| [`liquid`](styles/liquid.md) | Liquid Metaball Motion | kinetic-soft | music video packaging, food and drink ads, logo genesis, transition packs | liquid, fluid, metaball, goo, gooey, paint splash, drip, melt, blob, ink flood, liquid transition, logo reveal |
|
|
73
|
+
| [`morph`](styles/morph.md) | Shape Morph Chain | calm-sharp | keynote-grade storytelling, icon sequences, feature walkthroughs, brand reveal built from meaningful symbols | morph, morphing, shape transition, icon morph, shape shifting, one shape becomes another, Apple keynote, visual storytelling, flubber |
|
|
74
|
+
| [`pixel`](styles/pixel.md) | Pixel Art 8-bit | kinetic-sharp | game trailers and attract screens, 8-bit music videos, nostalgic brand marketing, indie game promos | pixel art, 8-bit, 16-bit, retro game, sprite, chiptune, side scroller, CRT, dithering, PICO-8, Aseprite, Minecraft, Terraria |
|
|
75
|
+
| [`sticker-explainer`](styles/sticker-explainer.md) | Sticker Knowledge Explainer | calm-sharp | hard-core science explainers, finance and knowledge channels, corporate documentary explainers, data-rich narration videos | sticker, knowledge video, science explainer, infographic video, big canvas, camera pan and zoom, photo cutouts with white outline, periodic table, PaperClip, Lin Chao, explainer channel |
|
|
76
|
+
| [`synthwave`](styles/synthwave.md) | Synthwave VHS Retro | kinetic-sharp | retro title sequences, music videos, trend brand films, gaming and nostalgia content, Y2K chrome revivals | synthwave, outrun, 80s, retro, neon, VHS, vaporwave, Y2K, chrome text, scanlines, grid horizon, retrowave |
|
|
77
|
+
| [`variety-show`](styles/variety-show.md) | Variety Show Kinetic Captions | kinetic-soft | 9:16 vlogs, pet and lifestyle shorts, interview and reaction edits, comedic re-edits, caption-heavy social video | variety show, hanazi, Chinese variety captions, kinetic captions, sticker text, fancy text, reaction text, vlog captions, burst box, outlined text, TikTok captions, Douyin, bilibili |
|
|
78
|
+
|
|
79
|
+
## Explainers (30-120s beat patterns)
|
|
80
|
+
|
|
81
|
+
| Style | Name | Tone cell | Best for | Triggers |
|
|
82
|
+
|---|---|---|---|---|
|
|
83
|
+
| [`finance-chart`](styles/finance-chart.md) | Editorial Data Chart | calm-sharp | revenue, profit, user counts, price trends, market share, regional comparisons, before and after an event. Segments where viewers will screenshot and check numbers. 2.5-6s per chart, 30-90s total. | economist chart, financial times chart, ft chart, bloomberg, data journalism, revenue chart, bar chart race, candlestick, stock chart animation, finance explainer, earnings growth |
|
|
84
|
+
| [`keynote-ui`](styles/keynote-ui.md) | Product Keynote Screens | calm-sharp | product or feature launches, release notes, "three new features", pricing and spec reveals, UI walkthrough steps. 30-90s, voiceover made of nouns and numbers. | apple keynote, apple event, product launch video, linear, stripe, openai launch, release video, feature announcement, glass card, ui walkthrough, screen recording explainer |
|
|
85
|
+
| [`kinetic-type`](styles/kinetic-type.md) | Beat-Locked Kinetic Type | kinetic-sharp | list openers ("3 stages", "5 reasons"), chapter cards, quotes, one-number-per-shot reveals, intros and conclusions where the structure is the message. 15-45s of type per segment, mixed with evidence shots in longer films. | kinetic typography, lyric video, text animation, saul bass, typographic video, animated quote, title sequence, big word slam, text reveal, after effects type |
|
|
86
|
+
| [`math-explainer`](styles/math-explainer.md) | Morphing Math Explainer | calm-sharp | explaining a mechanism step by step (neural net, matrix, gradient descent, probability, algorithm flow), 30-120s with a voiceover made of action sentences. | 3blue1brown, 3b1b, manim, math explainer, linear algebra, neural network explainer, gradient descent, black background math, transform animation, equation morph |
|
|
87
|
+
| [`newsroom-collage`](styles/newsroom-collage.md) | Evidence Desk Collage | calm-sharp | news, history, politics and "how did this happen" explainers built on real material (clippings, screenshots, photos, maps, quotes). Journalist-style argument with evidence. 45-180s. | vox, johnny harris, explainer journalism, news explainer, documentary collage, paper desk, red string, highlighter, investigation board, map explainer, archive footage collage |
|
|
88
|
+
| [`presenter-explainer`](styles/presenter-explainer.md) | Cartoon Presenter Explainer | kinetic-soft | business history, product mechanics and finance or tech knowledge pieces where a cartoon host walks between paper, charts and keywords and reacts emotionally. 60-180s. | presenter explainer, cartoon host, character explainer, business history video, finance explainer with mascot, spacex explainer, character walks across the chart, talking head cartoon, narrated cartoon guide |
|
|
89
|
+
| [`science-explainer`](styles/science-explainer.md) | Glowing Flat Science Explainer | calm-soft | scale and "what is inside" topics (cell to galaxy, pixel to model), systems and mechanisms drawn as glowing particles and lines, calm popular-science narration. 45-120s. | kurzgesagt, in a nutshell, flat science animation, scale zoom, immune system explainer, cell zoom, popular science, glowing vector, optimistic nihilism, zoom into |
|
|
90
|
+
| [`storytime`](styles/storytime.md) | Storytime Character Cuts | kinetic-soft | first-person stories, fails, "the first time I..." anecdotes with a setup, a pause and a punchline. A recurring cartoon avatar carries the voiceover. 60-600s, weekly cadence. | theodd1sout, jaiden animations, domics, storytime animation, story time, youtube storytime, cartoon avatar, stick figure story, reaction face, smash cut joke, animated anecdote |
|
|
91
|
+
| [`whiteboard`](styles/whiteboard.md) | Hand-Drawn Whiteboard Explainer | calm-soft | arguments, cause-and-effect chains, historical threads, step-by-step reasoning with a steady voiceover. Ideas that can be drawn as a map. 45-180s. | rsa animate, minute physics, whiteboard animation, hand-drawn explainer, doodle video, videoscribe, doodly, sketch explainer, marker drawing, draw my life |
|
|
92
|
+
|
|
93
|
+
## Art styles (any topic)
|
|
94
|
+
|
|
95
|
+
| Style | Name | Tone cell | Best for | Triggers |
|
|
96
|
+
|---|---|---|---|---|
|
|
97
|
+
| [`anime-light`](styles/anime-light.md) | Anime Light (volumetric cel) | calm-soft | romantic or nostalgic brand films, travel, music visuals, summer campaigns, product reveals with a sky | makoto shinkai, your name, anime sky, lens flare, god rays, cumulonimbus, cel shading, golden hour, anime light |
|
|
98
|
+
| [`chiaroscuro`](styles/chiaroscuro.md) | Chiaroscuro Candlelight | calm-sharp | drama, luxury and heritage brands, documentary intros, whisky or coffee, serious narration | rembrandt, chiaroscuro, candlelight, caravaggio, dutch golden age, dark portrait, tenebrism, oil painting lighting |
|
|
99
|
+
| [`comic-pop`](styles/comic-pop.md) | Comic Pop (Ben-Day dots) | kinetic-sharp | sale and promo spots, social shorts, youth brands, product comparisons, reaction clips | pop art, lichtenstein, warhol, comic book, ben-day dots, halftone, speech bubble, onomatopoeia, four-panel |
|
|
100
|
+
| [`constructivist`](styles/constructivist.md) | Constructivist Poster | kinetic-sharp | bold announcements, campaign slogans, manifestos, rallies, protest or movement style, tech-ops "state of" posts (narrow use) | constructivism, rodchenko, lissitzky, soviet poster, red and black, propaganda poster, agitprop, photomontage, slogan |
|
|
101
|
+
| [`cubist`](styles/cubist.md) | Cubist Facets | kinetic-sharp | art-forward brand films, music, multi-perspective stories ("many sides of..."), fashion, newspaper and collage looks | cubism, picasso, braque, analytic cubism, faceted, fragmented, collage, newsprint, multiple viewpoints |
|
|
102
|
+
| [`cut-paper`](styles/cut-paper.md) | Cut Paper Collage | kinetic-soft | playful brand films, children's and education, kitchen and craft, festival promos, bold simple shapes | matisse, cut-outs, paper collage, papier decoupe, gouache paper, jazz book, scissors, paper shapes |
|
|
103
|
+
| [`grain-flat-illustration`](styles/grain-flat-illustration.md) | Grain Flat Illustration | kinetic-soft | SaaS explainers, app launches, character-driven stories with a joke payoff, social shorts, onboarding | flat illustration, dribbble, grain texture, stipple shading, vector character, modern 2d, noise gradient, editorial illustration |
|
|
104
|
+
| [`impressionist`](styles/impressionist.md) | Impressionist Dabs | calm-soft | lifestyle, travel, wellness, food, spring and summer campaigns, soft nostalgic reels | impressionism, monet, renoir, pastel brushstrokes, sunlit, garden, plein air, dappled light |
|
|
105
|
+
| [`ink-wash`](styles/ink-wash.md) | Ink Wash (sumi-e) | calm-sharp | tea, wellness, craft, East Asian brands, poetic intros, minimal luxury, philosophy content | ink wash, sumi-e, chinese painting, calligraphy, brush, shuimo, qi baishi, bada shanren, zen, rice paper |
|
|
106
|
+
| [`mosaic`](styles/mosaic.md) | Stone Mosaic | calm-sharp | heritage, food, travel, history, floor-tile and craft brands, bold logos and badges (narrow use) | mosaic, roman mosaic, pompeii, tesserae, tile, byzantine, ancient floor, stone tiles |
|
|
107
|
+
| [`pointillist`](styles/pointillist.md) | Pointillist Dots | calm-soft | calm brand films, art and culture content, premium reveals, color theory explainers | pointillism, seurat, signac, dots, optical color mixing, stipple painting, divisionism |
|
|
108
|
+
| [`retro-cgi`](styles/retro-cgi.md) | Retro CGI Render | kinetic-sharp | nostalgia tech, intros for software, games, 3D-logo reveals, retro brand throwbacks (narrow use) | 90s cgi, early ray tracing, chrome sphere, checkerboard floor, plastic render, wireframe, pov-ray, silicon graphics |
|
|
109
|
+
| [`swirl-brushwork`](styles/swirl-brushwork.md) | Swirl Brushwork (post-impressionist) | kinetic-soft | emotional launch films, night scenes, brand stories that want a hand-painted, vibrating look | van gogh, starry night, swirl, post-impressionist, thick paint, impasto, painterly night sky, oil painting video |
|
|
110
|
+
| [`watercolor-anime`](styles/watercolor-anime.md) | Watercolor Anime Background | calm-soft | storybook explainers, children's content, wellness, cozy lifestyle, nature, slow narrative openers | ghibli, miyazaki, hand-painted watercolor, anime background, storybook, cozy, gouache, wind in curtains |
|
|
111
|
+
|
|
112
|
+
## Era styles
|
|
113
|
+
|
|
114
|
+
[styles/era-styles.md](styles/era-styles.md): 18 styles tied to one period or
|
|
115
|
+
artist (cave painting to blue period). Use them for history speedruns, time-travel
|
|
116
|
+
pieces and tributes; on other topics they look forced. Match their triggers the
|
|
117
|
+
same way.
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
// node qa.mjs endhold <video> [--max 1.4] [--share 0.25] end card held too long, final shot too long
|
|
18
18
|
// node qa.mjs blankframes <video> [--run 3] runs of empty swatch frames
|
|
19
19
|
// node qa.mjs hud <composition-dir> counters, timecodes, BPM/FPS, greetings, "label · $value", tracked caps
|
|
20
|
+
// node qa.mjs storyboard <run-dir> scene lengths, picture-only, text-led share, camera streaks, style id
|
|
20
21
|
// node qa.mjs facts <run-dir> on-screen numbers not in storyboard facts, em dashes on screen
|
|
21
22
|
// node qa.mjs safe <run-dir> [--max 0.004] [--stills] text or logo edges in the margins each format's platforms cover
|
|
22
23
|
// node qa.mjs judge <new.mp4> <old.mp4> [--out dir] [--cmd "claude -p --model sonnet"] [--verdicts A,B]
|
|
@@ -395,6 +396,44 @@ export function scanFacts(texts, facts = []) {
|
|
|
395
396
|
return found;
|
|
396
397
|
}
|
|
397
398
|
|
|
399
|
+
// ---------- storyboard ----------
|
|
400
|
+
|
|
401
|
+
const STYLES = join(fileURLToPath(new URL(".", import.meta.url)), "..", "references", "styles");
|
|
402
|
+
const FLAT_PICTURE = /^(a |an )?(flat colou?r|card on|block of text|title|bullets?|background|icon)\b/i;
|
|
403
|
+
const WEAK_VERB = /\b(appears?|shows?|displays?|fades? in|pops? up|lists?|lights? up|stays?|static)\b/i;
|
|
404
|
+
const TEXT_LED = /\b(text|title|headline|words?|caption|quote)\b/i;
|
|
405
|
+
const INWARD = new Set(["push", "snap", "slam"]), ACCENT = new Set(["snap", "slam", "whip"]);
|
|
406
|
+
|
|
407
|
+
// Rules a storyboard must pass before anything is built (huashu-art-motion storyboard lint, rewritten).
|
|
408
|
+
// Length rules apply to motion, logo and ai scenes; demo footage runs as long as the walkthrough needs.
|
|
409
|
+
export function lintStoryboard(sb, { stylesDir = STYLES } = {}) {
|
|
410
|
+
const red = [], yellow = [], scenes = sb.scenes ?? [];
|
|
411
|
+
const textLed = (s) => TEXT_LED.test(s.pictureOnly ?? "");
|
|
412
|
+
if (sb.style && !existsSync(join(stylesDir, `${sb.style}.md`))) {
|
|
413
|
+
const era = existsSync(join(stylesDir, "era-styles.md")) ? readFileSync(join(stylesDir, "era-styles.md"), "utf8") : "";
|
|
414
|
+
if (!era.includes(`\`${sb.style}\``)) red.push({ rule: "unknown-style", style: sb.style });
|
|
415
|
+
}
|
|
416
|
+
for (const s of scenes) {
|
|
417
|
+
const built = s.kind !== "demo";
|
|
418
|
+
if (built && s.duration > 8) red.push({ id: s.id, rule: "scene-over-8s", duration: s.duration });
|
|
419
|
+
else if (built && (s.duration < 2 || s.duration > 6)) yellow.push({ id: s.id, rule: "scene-length", duration: s.duration });
|
|
420
|
+
if (!s.pictureOnly) yellow.push({ id: s.id, rule: "no-pictureOnly" });
|
|
421
|
+
else if (FLAT_PICTURE.test(s.pictureOnly.trim())) red.push({ id: s.id, rule: "flat-picture", pictureOnly: s.pictureOnly });
|
|
422
|
+
else if (WEAK_VERB.test(s.pictureOnly)) yellow.push({ id: s.id, rule: "weak-verb", pictureOnly: s.pictureOnly });
|
|
423
|
+
}
|
|
424
|
+
if (scenes.length > 1) for (const s of [scenes[0], scenes.at(-1)]) if (textLed(s)) red.push({ id: s.id, rule: "text-led-end" });
|
|
425
|
+
const share = scenes.length ? scenes.filter(textLed).length / scenes.length : 0;
|
|
426
|
+
if (share > 0.3) red.push({ rule: "text-led-share", share: +share.toFixed(2) });
|
|
427
|
+
const cams = scenes.map((s) => s.camera).filter(Boolean);
|
|
428
|
+
for (let i = 2; i < scenes.length; i++) {
|
|
429
|
+
const run = scenes.slice(i - 2, i + 1).map((s) => s.camera);
|
|
430
|
+
if (run[0] && run.every((c) => c === run[0]) && !["hold", "cut"].includes(run[0])) yellow.push({ id: scenes[i].id, rule: "same-move-x3", camera: run[0] });
|
|
431
|
+
else if (run.every((c) => INWARD.has(c))) yellow.push({ id: scenes[i].id, rule: "inward-x3" });
|
|
432
|
+
}
|
|
433
|
+
if (cams.length && cams.filter((c) => ACCENT.has(c)).length > cams.length / 3) yellow.push({ rule: "accents-over-third" });
|
|
434
|
+
return { ok: red.length === 0, red, yellow, textLedShare: +share.toFixed(2) };
|
|
435
|
+
}
|
|
436
|
+
|
|
398
437
|
// ---------- face ----------
|
|
399
438
|
|
|
400
439
|
// Crop a 0-1 rect [x, y, w, h] out of a w x h gray frame.
|
|
@@ -566,6 +605,7 @@ if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.ur
|
|
|
566
605
|
const found = files.flatMap((f) => scanHud(readFileSync(f, "utf8")).map((v) => ({ file: f, ...v })));
|
|
567
606
|
result = { ok: found.every((v) => v.warn), found };
|
|
568
607
|
}
|
|
608
|
+
else if (gate === "storyboard") result = lintStoryboard(JSON.parse(readFileSync(join(target, "storyboard.json"), "utf8")));
|
|
569
609
|
else if (gate === "safe") result = safeAreas(target, { max: num("--max", 0.004), stills: rest.includes("--stills") });
|
|
570
610
|
else if (gate === "facts") {
|
|
571
611
|
const sb = JSON.parse(readFileSync(join(target, "storyboard.json"), "utf8"));
|