@biunow/agent-biuart 0.0.0-stage → 0.1.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/bin/server.mjs +575 -0
- package/data/styles.json +533 -0
- package/engine/audit_clip.py +46 -0
- package/engine/clip.html +24 -0
- package/engine/clip.js +104 -0
- package/engine/clip_schema.json +19 -0
- package/engine/clips/t1_3b1b.js +203 -0
- package/engine/clips/t2_keynote_ui.js +347 -0
- package/engine/clips/t3_finance_chart.js +206 -0
- package/engine/clips/y1_kurzgesagt.js +183 -0
- package/engine/clips/y2_vox.js +150 -0
- package/engine/clips/y3_whiteboard.js +209 -0
- package/engine/clips/y4_storytime.js +194 -0
- package/engine/clips/y5_kinetic_type.js +134 -0
- package/engine/compare.py +19 -0
- package/engine/demos/_shared/hero/c1_0.png +0 -0
- package/engine/demos/_shared/hero/c1_1.png +0 -0
- package/engine/demos/_shared/hero/c1_2.png +0 -0
- package/engine/demos/_shared/hero/c3_line.png +0 -0
- package/engine/demos/_shared/hero.js +96 -0
- package/engine/demos/long_scroll/eras.js +23 -0
- package/engine/demos/long_scroll/frames/8bit_act/01.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/02.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/03.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/04.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/05.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/06.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/07.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/08.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_act/meta.json +69 -0
- package/engine/demos/long_scroll/frames/8bit_walk/01.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/02.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/03.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/04.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/05.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/06.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/07.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/08.png +0 -0
- package/engine/demos/long_scroll/frames/8bit_walk/meta.json +69 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/01.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/02.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/03.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/04.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/05.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/06.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/07.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/08.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_dodge/meta.json +69 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/01.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/02.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/03.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/04.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/05.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/06.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/07.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/08.png +0 -0
- package/engine/demos/long_scroll/frames/egypt_walk8/meta.json +69 -0
- package/engine/demos/long_scroll/frames/monet_throw/01.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/02.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/03.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/04.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/05.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/06.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/07.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/08.png +0 -0
- package/engine/demos/long_scroll/frames/monet_throw/meta.json +71 -0
- package/engine/demos/long_scroll/frames/monet_walk/01.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/02.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/03.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/04.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/05.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/06.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/07.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/08.png +0 -0
- package/engine/demos/long_scroll/frames/monet_walk/meta.json +71 -0
- package/engine/demos/long_scroll/lib/acts.js +87 -0
- package/engine/demos/long_scroll/lib/crossing.js +463 -0
- package/engine/demos/long_scroll/lib/world.js +143 -0
- package/engine/demos/long_scroll/lib/xing2_ding.js +42 -0
- package/engine/demos/long_scroll/lib/xing2_jia.js +114 -0
- package/engine/demos/long_scroll/lib/xing2_yi.js +133 -0
- package/engine/demos/long_scroll/segments/02_egypt.js +234 -0
- package/engine/demos/long_scroll/segments/14_8bit.js +118 -0
- package/engine/demos/long_scroll/segments/28_monet.js +86 -0
- package/engine/demos/t1_3b1b/eras.js +11 -0
- package/engine/demos/t1_3b1b/t1_s1.js +101 -0
- package/engine/demos/t1_3b1b/t1_s2.js +74 -0
- package/engine/demos/t1_3b1b/t1_s3.js +65 -0
- package/engine/demos/t2_keynote_ui/eras.js +10 -0
- package/engine/demos/t2_keynote_ui/t2_s1.js +57 -0
- package/engine/demos/t2_keynote_ui/t2_s2.js +70 -0
- package/engine/demos/t2_keynote_ui/t2_s3.js +61 -0
- package/engine/demos/t3_finance_chart/eras.js +11 -0
- package/engine/demos/t3_finance_chart/t3_s1.js +48 -0
- package/engine/demos/t3_finance_chart/t3_s2.js +42 -0
- package/engine/demos/t3_finance_chart/t3_s3.js +51 -0
- package/engine/demos/y1_kurzgesagt/eras.js +10 -0
- package/engine/demos/y1_kurzgesagt/kurzgesagt.js +347 -0
- package/engine/demos/y2_vox/eras.js +10 -0
- package/engine/demos/y2_vox/vox.js +240 -0
- package/engine/demos/y3_whiteboard/eras.js +10 -0
- package/engine/demos/y3_whiteboard/whiteboard.js +162 -0
- package/engine/demos/y4_storytime/eras.js +14 -0
- package/engine/demos/y4_storytime/s1_desk.js +18 -0
- package/engine/demos/y4_storytime/s2_screen.js +82 -0
- package/engine/demos/y4_storytime/s3_react.js +39 -0
- package/engine/demos/y4_storytime/s4_wide.js +16 -0
- package/engine/demos/y4_storytime/s5_close.js +18 -0
- package/engine/demos/y4_storytime/story.js +25 -0
- package/engine/demos/y4_storytime/vo_env.js +2 -0
- package/engine/demos/y4_storytime/world.js +73 -0
- package/engine/demos/y5_kinetic_type/eras.js +16 -0
- package/engine/demos/y5_kinetic_type/k1_title.js +38 -0
- package/engine/demos/y5_kinetic_type/k2_complete.js +55 -0
- package/engine/demos/y5_kinetic_type/k3_chat.js +47 -0
- package/engine/demos/y5_kinetic_type/k4_agent.js +49 -0
- package/engine/demos/y5_kinetic_type/kinetic.js +52 -0
- package/engine/engine.js +277 -0
- package/engine/eras.js +60 -0
- package/engine/eras_gallery.js +115 -0
- package/engine/eras_style_studies.js +20 -0
- package/engine/examples/assets/K/347/272/277/345/233/276_/346/250/252/345/261/217.png +0 -0
- package/engine/examples/assets//347/273/210/347/253/257_for/345/276/252/347/216/257/346/261/202/345/222/214.png +0 -0
- package/engine/examples/assets//347/273/210/347/253/257_sum/346/261/202/345/222/214.png +0 -0
- package/engine/examples/assets//350/220/245/346/224/266/345/233/276_/347/253/226/345/261/217.png +0 -0
- package/engine/examples/assets//350/264/242/347/273/217/345/233/276/350/241/250_/346/250/252/345/261/217.png +0 -0
- package/engine/examples/t1_3b1b.json +19 -0
- package/engine/examples/t2_fullbleed_pulse.json +15 -0
- package/engine/examples/t2_keynote_ui.json +15 -0
- package/engine/examples/t3_finance_chart.json +29 -0
- package/engine/examples/y1_kurzgesagt.json +16 -0
- package/engine/examples/y2_vox.json +14 -0
- package/engine/examples/y3_whiteboard.json +17 -0
- package/engine/examples/y4_storytime.json +52 -0
- package/engine/examples/y5_kinetic_type.json +14 -0
- package/engine/index.html +42 -0
- package/engine/lib/THREE_LICENSE.txt +21 -0
- package/engine/lib/brush.js +149 -0
- package/engine/lib/camera.js +99 -0
- package/engine/lib/chart.js +152 -0
- package/engine/lib/collage.js +97 -0
- package/engine/lib/diagram.js +264 -0
- package/engine/lib/finish.js +70 -0
- package/engine/lib/fonts/AlfaSlabOne-400.woff +0 -0
- package/engine/lib/fonts/Anton-400.woff +0 -0
- package/engine/lib/fonts/ArchivoBlack-400.woff +0 -0
- package/engine/lib/fonts/Bangers-400.woff +0 -0
- package/engine/lib/fonts/Caveat-600.woff +0 -0
- package/engine/lib/fonts/Cinzel-400.woff +0 -0
- package/engine/lib/fonts/Cinzel-700.woff +0 -0
- package/engine/lib/fonts/CormorantGaramond-500.woff +0 -0
- package/engine/lib/fonts/CormorantGaramond-500i.woff +0 -0
- package/engine/lib/fonts/CormorantGaramond-700.woff +0 -0
- package/engine/lib/fonts/EBGaramond-400.woff +0 -0
- package/engine/lib/fonts/EBGaramond-400i.woff +0 -0
- package/engine/lib/fonts/EBGaramond-600.woff +0 -0
- package/engine/lib/fonts/Exo2-800i.woff +0 -0
- package/engine/lib/fonts/GochiHand-400.woff +0 -0
- package/engine/lib/fonts/IMFellEnglish-400.woff +0 -0
- package/engine/lib/fonts/IMFellEnglish-400i.woff +0 -0
- package/engine/lib/fonts/Inter-var.woff +0 -0
- package/engine/lib/fonts/JosefinSans-700.woff +0 -0
- package/engine/lib/fonts/Kalam-700.woff +0 -0
- package/engine/lib/fonts/LICENSES.md +40 -0
- package/engine/lib/fonts/LXGWWenKai-500.woff +0 -0
- package/engine/lib/fonts/LibreBaskerville-400.woff +0 -0
- package/engine/lib/fonts/LibreBaskerville-700.woff +0 -0
- package/engine/lib/fonts/LilitaOne-400.woff +0 -0
- package/engine/lib/fonts/Marcellus-400.woff +0 -0
- package/engine/lib/fonts/NotoSansSC-500.woff +0 -0
- package/engine/lib/fonts/NotoSansSC-700.woff +0 -0
- package/engine/lib/fonts/NotoSansSC-800.woff +0 -0
- package/engine/lib/fonts/NotoSansSC-900.woff +0 -0
- package/engine/lib/fonts/NotoSansSC-sub.woff +0 -0
- package/engine/lib/fonts/NotoSerifJP-600.woff +0 -0
- package/engine/lib/fonts/NotoSerifSC-sub.woff +0 -0
- package/engine/lib/fonts/OFL.txt +94 -0
- package/engine/lib/fonts/PlayfairDisplay-400i.woff +0 -0
- package/engine/lib/fonts/PlayfairDisplay-700.woff +0 -0
- package/engine/lib/fonts/PlayfairDisplay-700i.woff +0 -0
- package/engine/lib/fonts/Poppins-600.woff +0 -0
- package/engine/lib/fonts/Poppins-700.woff +0 -0
- package/engine/lib/fonts/Poppins-800.woff +0 -0
- package/engine/lib/fonts/PressStart2P-400.woff +0 -0
- package/engine/lib/fonts/Righteous-400.woff +0 -0
- package/engine/lib/fonts/RobotoCondensed-var.woff +0 -0
- package/engine/lib/fonts/Rye-400.woff +0 -0
- package/engine/lib/fonts/UnifrakturMaguntia-400.woff +0 -0
- package/engine/lib/fonts/cmunrm.woff +0 -0
- package/engine/lib/fonts/cmunti.woff +0 -0
- package/engine/lib/fonts/index.json +1 -0
- package/engine/lib/fonts.js +56 -0
- package/engine/lib/kit.js +91 -0
- package/engine/lib/media.js +118 -0
- package/engine/lib/medium.js +258 -0
- package/engine/lib/motion.js +111 -0
- package/engine/lib/paint.js +200 -0
- package/engine/lib/palettes.js +57 -0
- package/engine/lib/post.js +108 -0
- package/engine/lib/render.js +189 -0
- package/engine/lib/rig.js +390 -0
- package/engine/lib/rig_huashu.js +171 -0
- package/engine/lib/three.min.js +7 -0
- package/engine/lib/toon.js +186 -0
- package/engine/lib/typo.js +136 -0
- package/engine/lib/ui.js +141 -0
- package/engine/lib/util.js +92 -0
- package/engine/render.py +157 -0
- package/engine/scenes/01_cave.js +364 -0
- package/engine/scenes/02_egypt.js +524 -0
- package/engine/scenes/03_greek.js +448 -0
- package/engine/scenes/04_roman.js +555 -0
- package/engine/scenes/05_gothic.js +522 -0
- package/engine/scenes/06_renaissance.js +338 -0
- package/engine/scenes/08_impressionism.js +206 -0
- package/engine/scenes/09_postimp.js +183 -0
- package/engine/scenes/10_nouveau.js +334 -0
- package/engine/scenes/11_cubism.js +265 -0
- package/engine/scenes/12_bauhaus.js +214 -0
- package/engine/scenes/13_pop.js +269 -0
- package/engine/scenes/14_8bit.js +238 -0
- package/engine/scenes/15_raytrace.js +300 -0
- package/engine/scenes/16_2026.js +565 -0
- package/engine/scenes/17_ink.js +273 -0
- package/engine/scenes/18_klimt.js +227 -0
- package/engine/scenes/19_munch.js +153 -0
- package/engine/scenes/20_dunhuang.js +215 -0
- package/engine/scenes/21_kusama.js +124 -0
- package/engine/scenes/22_constructivism.js +205 -0
- package/engine/scenes/23_dali.js +221 -0
- package/engine/scenes/24_hopper.js +150 -0
- package/engine/scenes/25_ghibli.js +251 -0
- package/engine/scenes/26_vaporwave.js +191 -0
- package/engine/scenes/27_kirby.js +255 -0
- package/engine/scenes/28_monet.js +176 -0
- package/engine/scenes/29_seurat.js +104 -0
- package/engine/scenes/30_matisse.js +151 -0
- package/engine/scenes/31_haring.js +109 -0
- package/engine/scenes/32_rembrandt.js +217 -0
- package/engine/scenes/33_rubberhose.js +219 -0
- package/engine/scenes/34_shadowpuppet.js +195 -0
- package/engine/scenes/35_shinkai.js +197 -0
- package/engine/scenes/36_picasso_blue.js +123 -0
- package/engine/scenes/38_giotto.js +133 -0
- package/engine/scenes/39_piero.js +53 -0
- package/engine/scenes/40_raphael.js +96 -0
- package/engine/scenes/41_michelangelo.js +112 -0
- package/engine/scenes/42_guardi.js +70 -0
- package/engine/scenes/43_lorenzetti.js +145 -0
- package/engine/scenes/44_cortona.js +86 -0
- package/engine/scenes/45_renoir.js +86 -0
- package/engine/scenes/46_pissarro.js +82 -0
- package/engine/scenes/47_sisley.js +94 -0
- package/engine/scenes/48_gauguin.js +107 -0
- package/engine/scenes/49_chagall.js +60 -0
- package/engine/scenes/50_ma_yuan.js +131 -0
- package/engine/scenes/51_persian_miniature.js +149 -0
- package/engine/scenes/52_south_park.js +105 -0
- package/engine/scenes/53_pixar.js +60 -0
- package/engine/scenes/54_ghibli_lab.js +68 -0
- package/engine/scenes/55_dunhuang.js +161 -0
- package/engine/scenes/index.js +28 -0
- package/engine/spec_assets.py +76 -0
- package/engine/transitions.js +929 -0
- package/engine//346/227/266/344/273/243/344/275/234/350/200/205/350/247/204/350/214/203.md +49 -0
- package/lib/host.mjs +754 -0
- package/lib/render-bridge.mjs +543 -0
- package/lib/render-cli.mjs +98 -0
- package/lib/storyboard-lint.mjs +54 -0
- package/manifest.json +52 -0
- package/package.json +8 -4
- package/runtime/package.json +8 -0
- package/skills/biuart/SKILL.md +154 -0
- package/skills/biuart/references/01-/346/213/206/350/247/243.md +55 -0
- package/skills/biuart/references/02-/346/234/272/345/210/266.md +41 -0
- package/skills/biuart/references/03-/344/270/200/345/270/247/345/205/210/350/241/214/345/233/233/346/235/241/350/267/257/347/272/277.md +39 -0
- package/skills/biuart/references/04-/347/272/257/344/273/243/347/240/201/347/273/230/345/210/266.md +92 -0
- package/skills/biuart/references/05-/350/212/202/345/245/217/344/270/216/351/205/215/344/271/220.md +19 -0
- package/skills/biuart/references/06-/345/217/243/346/222/255/351/251/261/345/212/250/347/232/204/350/211/272/346/234/257/347/237/255/347/211/207.md +31 -0
- package/skills/biuart/references/07-/346/255/243/351/235/242/347/273/217/351/252/214.md +196 -0
- package/skills/biuart/references/08-/351/243/216/346/240/274/344/275/234/350/200/205/350/247/204/350/214/203.md +61 -0
- package/skills/biuart/references/09-/350/247/206/351/242/221/345/212/250/347/224/273/350/257/255/346/263/225.md +382 -0
- package/skills/biuart/references/10-/350/247/222/350/211/262.md +34 -0
- package/skills/biuart/references/11-/351/225/277/345/215/267/347/251/277/350/266/212/347/211/207.md +43 -0
- package/skills/biuart/references/12-/345/217/243/346/222/255/346/225/264/347/211/207/344/270/216/347/273/217/351/252/214/345/233/236/346/265/201.md +25 -0
- package/skills/biuart/references/13-/345/217/243/346/222/255/344/270/216/350/257/255/351/237/263/345/244/215/345/210/273.md +7 -0
- package/skills/biuart/references/15-/350/267/250/345/234/272/346/231/257/351/243/216/346/240/274/346/217/220/347/202/274.md +48 -0
- package/skills/biuart/references/16-/351/243/216/346/240/274/346/274/224/347/244/27295/345/210/206/345/215/217/350/256/256.md +103 -0
- package/skills/biuart/references/about-author.md +99 -0
- package/skills/biuart/references/capabilities.md +91 -0
- package/skills/biuart/references/compatibility.md +34 -0
- package/skills/biuart/references/images.md +97 -0
- package/skills/biuart/references/voice-model-review.md +18 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/t1_3b1b.md +122 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/t2_keynote_ui.md +117 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/t3_finance_chart.md +116 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y1_kurzgesagt.md +193 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y2_vox.md +195 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y3_whiteboard.md +190 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y4_storytime.md +166 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y5_kinetic_type.md +158 -0
- package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y6_presenter_explainer.md +24 -0
- package/skills/biuart/references//345/217/243/346/222/255API.md +125 -0
- package/skills/biuart/references//350/211/262/346/235/277.md +38 -0
- package/skills/biuart/references//350/247/222/350/211/262/347/262/276/347/273/206/345/272/246.md +61 -0
- package/skills/biuart/references//351/225/234/345/244/264/350/241/250/346/250/241/346/235/277.md +80 -0
- package/skills/biuart/references//351/225/234/345/244/264/350/257/255/350/250/200.md +73 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/01_cave.md +46 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/02_egypt.md +64 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/03_greek.md +50 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/04_roman.md +99 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/05_gothic.md +32 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/06_renaissance.md +41 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/08_impressionism.md +34 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/09_postimp.md +17 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/10_nouveau.md +31 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/11_cubism.md +30 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/12_bauhaus.md +30 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/13_pop.md +29 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/14_8bit.md +27 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/15_raytrace.md +32 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/16_2026.md +55 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/17_ink.md +50 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/18_klimt.md +37 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/19_munch.md +42 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/20_dunhuang.md +49 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/21_kusama.md +32 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/22_constructivism.md +35 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/23_dali.md +29 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/24_hopper.md +30 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/25_ghibli.md +55 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/26_vaporwave.md +27 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/27_kirby.md +30 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/28_monet.md +39 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/29_seurat.md +31 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/30_matisse.md +26 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/31_haring.md +22 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/32_rembrandt.md +29 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/33_rubberhose.md +31 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/34_shadowpuppet.md +40 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/35_shinkai.md +34 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/36_picasso_blue.md +25 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/37_rick_morty.md +48 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/38_giotto.md +67 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/39_piero.md +59 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/40_raphael.md +65 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/41_michelangelo.md +65 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/42_guardi.md +65 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/43_lorenzetti.md +69 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/44_cortona.md +66 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/45_renoir.md +66 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/46_pissarro.md +66 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/47_sisley.md +67 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/48_gauguin.md +66 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/49_chagall.md +59 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/50_ma_yuan.md +68 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/51_persian_miniature.md +66 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/52_south_park.md +65 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/53_pixar.md +61 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/55_dunhuang.md +41 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/INDEX.md +89 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/_/350/275/254/345/234/272_/350/277/201/347/247/273/346/265/213/350/257/225.md +53 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/_/351/207/215/345/201/232/350/277/233/345/272/246.md +37 -0
- package/skills/biuart/references//351/243/216/346/240/274/351/205/215/346/226/271/_/351/237/263/350/275/250_/350/211/272/346/234/257/345/217/262/351/200/237/351/200/232.md +135 -0
- package/studio/app.js +380 -0
- package/studio/assert-panel-permit.mjs +67 -0
- package/studio/composer.css +465 -0
- package/studio/composer.js +480 -0
- package/studio/index.html +97 -0
- package/studio/optimize-prompt.mjs +84 -0
- package/studio/optimize-prompt.test.mjs +47 -0
- package/studio/recipes.mjs +87 -0
- package/studio/select-menu.js +450 -0
- package/studio/styles.css +71 -0
- package/studio/to-english-prompt.mjs +149 -0
- package/studio/to-english-prompt.test.mjs +72 -0
- package/README.md +0 -3
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# Y2 · Vox 式拼贴解说:视频动画语法卡
|
|
2
|
+
|
|
3
|
+
一句话:把论证摆在一张有真实材料的桌面上——剪报、照片、文件,相机像调查记者的眼睛在桌上移动;线和笔一顿一顿地画上去,证据感来自「这些东西是真的被放在这里的」。
|
|
4
|
+
|
|
5
|
+
示范片:`scripts/engine/demos/y2_vox/`(渲染 `render.py --film demos/y2_vox`)(8s,3 镜 2 转场),总览:`assets/动画语法/y2_vox_总览.jpg`
|
|
6
|
+
依据:本风格的调研(调研原文与逐帧数据留在实验归档、没收进 skill,用到的数字已摘进本卡)。样本 5 支:Missing Chapter(2022)、迷幻海报(2019)、Vox Borders(2018)、Johnny Harris(2026),另有 Vox 2026 实拍片作对照。13 段相机运动拟合了缓动,取了色。
|
|
7
|
+
|
|
8
|
+
## 起手必查
|
|
9
|
+
|
|
10
|
+
1. **真实材料当主画面。** 截图、原文、照片铺满或接近铺满,推近到要读的那一句;桌面是相机穿行的世界,不是给小图垫的底色。量一下:素材宽不到画宽 60% 的镜头连续超过 2 个,就是「相框版式」。
|
|
11
|
+
2. **「滑入→打字标签→红圈」要轮换。** 分镜时列一张揭示动作表:直接在(随切点出现)、推近、横移到下一张、荧光笔扫、红线连、盖章、撕下……同一套揭示序列连用不超过 3 次。证据:一支长片 37 个标签里有 36 次滑入,到中段观众已经能预判下一步。
|
|
12
|
+
3. **要读的字放在最上层、最后画,** 不跟所属物件的层级走。照片、夹子、后放上来的卡盖住字,是这个语法最常复发的穿帮。
|
|
13
|
+
4. **相机落点按这一刻要读的东西反算**(框住目标再留边),不手填坐标;半截入画的邻卡标签推出画外。
|
|
14
|
+
5. **累积桌面每放一张新卡,把同屏的字按阅读顺序连读一遍。** 两张卡的字挨在一起会拼成一句错话(「超过」贴着「收购」),撤卡或把限定词写全。
|
|
15
|
+
6. **同一事件的正式动作只演一次。** 全景示意里演过的动作,推近后不再重演,否则读成「又发生了一次」。
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## ① 适用场景
|
|
20
|
+
|
|
21
|
+
**用它:**
|
|
22
|
+
- 有真实档案、新闻、历史、地图、人物的内容:「这件事是怎么发生的」「谁在什么时候说了什么」。
|
|
23
|
+
- 口播是记者式的论证:引用、证据、因果。旁白里有「看这一句」「注意这个数字」,画面就去高亮那一句。
|
|
24
|
+
- 引一句原话、一组数字、一个年份,需要观众「亲眼看到出处」的时刻。
|
|
25
|
+
- 示范片用 2012 年 Google「认猫」论文的真实数字:1000 台机器、1.6 万个 CPU 核、1000 万张 YouTube 截图、不打标签。出处是 arXiv:1112.6209 与 Google 官方博客。
|
|
26
|
+
|
|
27
|
+
**别用它:**
|
|
28
|
+
- 纯机制、纯概念、没有任何真实材料可贴的内容。硬做会变成「假档案」,用 Y1。
|
|
29
|
+
- 推导和步骤:用 Y3。
|
|
30
|
+
- 需要大量角色表演的内容:剪纸角色只能一顿一顿地动。
|
|
31
|
+
|
|
32
|
+
## ② 画面构成
|
|
33
|
+
|
|
34
|
+
- **三色体系**(Missing Chapter 实测):
|
|
35
|
+
- 近黑底 `#171716`
|
|
36
|
+
- 纸白 `#E0DCDA`–`#EEEDED`
|
|
37
|
+
- 一种红分两档:亮红 `#B65255` 画线,暗红 `#93403C` 填面
|
|
38
|
+
- 荧光黄 `#DACF08`(比 Vox logo 的 `#FFF200` 更暗、更偏橄榄。logo 黄在片中很少大面积用)
|
|
39
|
+
- 旧地图纸 `#E4DCCF`,羊皮纸 `#CFB195`
|
|
40
|
+
- 没有纯白,没有纯黑。
|
|
41
|
+
- **【本片】**:
|
|
42
|
+
- 桌面 `#e4ddcf`,平铺纸纹,有纤维和低频明暗。
|
|
43
|
+
- 线索红用 `#b8433f`,比实测略亮,因为 1080p 下要读得清。
|
|
44
|
+
- 荧光 `rgba(218,207,8,.9)`,叠加方式是 multiply。
|
|
45
|
+
- 镜 3 是桌上的一张大黑卡纸 `#1b1b1a`,四边露出桌面。
|
|
46
|
+
- **材料**:
|
|
47
|
+
- 照片一律灰度网点(45°),带白边,贴两条半透明胶带。
|
|
48
|
+
- 剪报是撕边、泛黄,宋体标题。
|
|
49
|
+
- 标签是 Borders 式的黑底白字粗体条(「2012 · 谷歌」)。
|
|
50
|
+
- 索引卡是横线纸。
|
|
51
|
+
- 纸纹是**静态**的。实测停留段帧差是 0.0–0.1,没有逐帧颗粒,那是 Johnny Harris 2026 的底片风,不是 Vox。
|
|
52
|
+
- **投影很弱**。黑底卡片在 360p 下几乎看不到投影【实测】。【本片】统一 blur 10、偏移 (3,6)、α 0.28。
|
|
53
|
+
- **故意不完美**:Vox 美术总监的原话是「You don't want it to look perfect because that might make it look more like an ad than an editorial piece」【一手】。
|
|
54
|
+
- **角色**:真人照片剪下来做贴纸,加白边和阴影。【本片】花叔用 `HUASHU.draw`,把剪影向 16 个方向偏移 12px,垫一层纸白当贴纸边。
|
|
55
|
+
|
|
56
|
+
## ③ 运动轨迹
|
|
57
|
+
|
|
58
|
+
- **两层帧率(核心)**【实测】:
|
|
59
|
+
- 相机层是 24fps 平滑运动。
|
|
60
|
+
- 元素层(地图色块生长、红线描路、打字、手绘圈、弹入)按 12fps「一拍二」步进。迷幻海报片里 52% 的运动帧有「动-停-动」交替的指纹。
|
|
61
|
+
- 【本片】相机按 60fps 连续算;所有元素都用 `MO.step(t, 12)` 量化后再算进度。qa 量到镜 1 有 16.9% 的静止帧对,就是一拍二的停帧,不是卡顿。
|
|
62
|
+
- **相机缓动**【实测 13 段】:
|
|
63
|
+
- 时长中位 1.29s,范围 0.71–1.96s,**没有一段是线性**。
|
|
64
|
+
- 7 段是对称的 easeInOutSine,相当于 AE 默认 Easy Ease,用于长距离「找下一张卡」。
|
|
65
|
+
- 6 段是起步快、长尾落定,贴近 `cubic-bezier(.33,0,.2,1)`,用于「拉出揭示」和「沿线索追过去」。
|
|
66
|
+
- **【本片】相机**:
|
|
67
|
+
- 镜 1:荧光笔扫完后,用 1.5s sineInOut 推向那一行(1.14→1.28)。BD 实测扫完常接一次推进。
|
|
68
|
+
- 转场 A:1.1s 长尾 bezier。
|
|
69
|
+
- 转场 B:推进 0.6s sineInOut。
|
|
70
|
+
- 镜 3:拉出 0.85s 长尾 bezier。
|
|
71
|
+
- 上面这些实测时长(推进 0.6–1.5s、拉出约 1s、追线 1.3–1.8s)就是新片的默认。示范片镜 1 开场的 0.9s 慢推(1.14→1.165,只推 2%、什么都没带出来)和镜 3 拉出后的 1%/s 匀速慢漂是旧做法,新片不照抄。
|
|
72
|
+
- **入场**【实测】:
|
|
73
|
+
- 档案照片和剪报**随切点直接出现**,不弹、不落。
|
|
74
|
+
- 只有沿时间线追踪时,下一张卡会从画外滑入,带 5–15° 倾斜,到位放平,约 0.8s。
|
|
75
|
+
- 【本片】小照片和花叔贴纸用 `slideIn`:0.55s quartOut,从 12° 倾斜放平,12fps 步进。
|
|
76
|
+
- **线与笔**【实测】:
|
|
77
|
+
- 红色下划线 0.5–1s 画完。
|
|
78
|
+
- 红色椭圆圈约 1s,一笔,首尾不闭合、略交叉。
|
|
79
|
+
- 荧光条一行 1.5–3s,跟着旁白念词扫。
|
|
80
|
+
- 打字约 13 字/秒,一拍二。
|
|
81
|
+
- 【本片】红圈 0.65s,荧光 0.9s(演示压缩),打字 13 字/秒,红线每根 0.5s、错开 0.15s,计数器 1.4s cubicOut 滚到 10,000,000。
|
|
82
|
+
- **停留时相机停住**:实测停留段帧差 0.0–0.1,Vox 的桌面停下来就是停下来。卡片内部有动画(描线、荧光、打字)时相机不动;纯静态图停得久,就在口播讲到要读的那一处时推近(找卡 0.5–0.9 秒、推进 1.0–1.5 秒,缓入缓出;揭晓那一下才快推 0.28 秒),或横移到下一张,不加匀速慢漂。
|
|
83
|
+
|
|
84
|
+
## ④ 转场(常用 6 种)
|
|
85
|
+
|
|
86
|
+
1. **硬切**:占绝大多数,切点卡在旁白句读上【实测】。
|
|
87
|
+
2. **沿红线平移(时间线追踪)**:相机沿一条红线水平移动,1.3–1.8s,用长尾缓动;下一张卡从右侧斜着滑入放平。
|
|
88
|
+
- 【本片】转场 A:红线从剪报高亮那行连到调查墙的计数标签,相机 1.1s 追过去,带沿速度方向的短运动模糊(7 次叠加,系数 0.6)。
|
|
89
|
+
3. **推进进纸或照片 → 直接切成同一张图的高清扫描**:1.0–1.4s,S 型缓动。
|
|
90
|
+
- 【本片】转场 B:推满墙上那张小照片(对数插值到 z≈9.6);硬切成同一张图的大幅扫描(网点从细变粗,读作「换了一张更清楚的」);再接 3。
|
|
91
|
+
4. **从单张照片拉出 → 露出整面拼贴**:约 1.0s,起步快、长尾(实测 MC 2:30)。
|
|
92
|
+
5. **地图色块生长、路线描线**:2.5–3.5s,一拍二,线头带实心红点。
|
|
93
|
+
6. **真手翻页、抽纸**(Missing Chapter 的标志):代码里可以近似成「纸沿弧线滑入,带阴影变化」。
|
|
94
|
+
|
|
95
|
+
**注意**:「撕纸转场」在 5 支样片里一次都没出现。它是模板网站的常见做法,不是 Vox 语法。本片第一版用了撕纸,看过调研后换掉了。
|
|
96
|
+
|
|
97
|
+
## ⑤ 节奏与文字
|
|
98
|
+
|
|
99
|
+
- **镜头时长**【实测,拼贴段】:
|
|
100
|
+
- 分两档:慢档(Missing Chapter)中位 3.3s,约 12 切/分,一张卡停 3–7s,靠卡内的描线和高亮撑场。
|
|
101
|
+
- 快档(迷幻海报 1.8s、Johnny Harris 1.4s)约 25–33 切/分,图几乎不动,靠切换出节奏。
|
|
102
|
+
- **和口播对齐**:
|
|
103
|
+
- 荧光条、打字、描线的速度锁在念词速度上,不锁音乐拍点。
|
|
104
|
+
- Johnny Harris 的说法是「Each word must correspond to a movement or action within the animation」,他的脚本分两栏写【一手】。
|
|
105
|
+
- Joss Fong 约每 20s 换一段音乐【一手】。
|
|
106
|
+
- **文字**:
|
|
107
|
+
- 人名、地点用衬线小字,白字放在照片下方。
|
|
108
|
+
- 黑底时间线标题逐字打出,13 字/秒,配一条横贯画面的红线。
|
|
109
|
+
- 引文用手写体「墨水洇开」式浮现,约 2s,然后红条逐行跟读【实测】。
|
|
110
|
+
- 【本片】剪报和卡片用 Songti SC,大标签用 PuHui-Heavy,数字用 Anton。
|
|
111
|
+
|
|
112
|
+
## ⑥ 代码实现要点
|
|
113
|
+
|
|
114
|
+
> 收进 skill 后(2026-10-04 v0.4):本卡「新写」里的通用函数已统一进 `scripts/engine/lib/`(名字已换成统一后的 MO / CAM / DG / TY / CH / UI / CL / TOON),示范片自己的代码在 `scripts/engine/demos/y2_vox/`。库速查和「怎么为一段口播选语法」见 `references/09-视频动画语法.md`。
|
|
115
|
+
|
|
116
|
+
- 复用 skill:
|
|
117
|
+
- `PAINT.cached`、`PAINT.scratch`:所有纸片、照片、剪报都一次画成精灵图
|
|
118
|
+
- `PAINT.grain`:静态颗粒
|
|
119
|
+
- `PAINT.noise/fbm`
|
|
120
|
+
- `KIT.densify/resample`:手画圈
|
|
121
|
+
- `HUASHU.build/pose/draw`
|
|
122
|
+
- 引擎转场接口
|
|
123
|
+
- 新写、现已统一进库(`lib/collage.js` / `camera.js` / `diagram.js` / `motion.js`):
|
|
124
|
+
- `MO.step(t,12)`:一拍二。
|
|
125
|
+
- `CL.paperTile`:可平铺纸纹,在环面上取样所以无缝,带纤维。
|
|
126
|
+
- `CL.halftone`:灰度转 45° 网点,批成一条 path 一次 fill。
|
|
127
|
+
- `CL.tornEdge`:撕边。
|
|
128
|
+
- `DG.hand / DG.drawPartial / DG.cum`:手画线,按长度描出。
|
|
129
|
+
- `CAM.motionBlur`:沿速度方向叠帧。
|
|
130
|
+
- 新片的真实素材件:`MD.print`(冲印件:白边、旧纸色、投影、胶带,可按焦点裁)、`MD.label`(黑底撕边标签,12fps 打字)、`MD.cover`(满幅铺开+焦点+推近,硬切到实拍时用);镜头用 `CAM.track` 的 glide、push,重音才 punch。参数化片段 y2 已经换成这一套:照片占画面八九成,镜头默认 0.7 秒移到下一件、highlight 缓推 0.9 秒(spec 顶层的 `data` 里写 `"camera": "snap"` 换成 0.30 秒横移、0.28 秒快推),不匀速慢推。
|
|
131
|
+
- `MO.bezier`:长尾缓动 `(.33,0,.2,1)`。
|
|
132
|
+
- 示范片自己的(`demos/y2_vox/vox.js`;`slideIn / highlight / stringPts` 已进库为 `CL.slideIn / CL.highlight / CL.stringPts`):
|
|
133
|
+
- `slideIn`:倾斜滑入放平。
|
|
134
|
+
- `highlight`:荧光毛边带,multiply。
|
|
135
|
+
- `stringPts`:带下垂的红线。
|
|
136
|
+
- `deskCam`:桌面相机关键帧,加末段推进。
|
|
137
|
+
- **关键架构**:
|
|
138
|
+
- 镜 1、镜 2 是同一张桌面世界、同一台相机。转场 A 用 `same`(A、B 本来就是同一幅画),平移完全由相机完成。
|
|
139
|
+
- 镜 3 是桌上的大黑卡纸。转场 B 用 `cut`,在推满的那一帧切。
|
|
140
|
+
- **性能**:镜 3 每帧 73/89ms(均/峰),花叔贴纸每帧要做 16 次偏移垫边。可以把贴纸边缓存起来,只在 12fps 换姿势时重算。
|
|
141
|
+
|
|
142
|
+
## ⑦ 代表作品与一手参考
|
|
143
|
+
|
|
144
|
+
- 样片:
|
|
145
|
+
- Missing Chapter《The case to rename this famous Christmas plant》https://www.youtube.com/watch?v=lLSUjl4WatY
|
|
146
|
+
- 《Where the 1960s "psychedelic" look came from》https://www.youtube.com/watch?v=9vuqI2v2IRs
|
|
147
|
+
- Vox Borders《China is erasing its border with Hong Kong》https://www.youtube.com/watch?v=MQyxG4vTyZ8
|
|
148
|
+
- Johnny Harris《The Internet Didn't Fail. It Was Taken.》https://www.youtube.com/watch?v=0rKDo3hKbVk
|
|
149
|
+
- 一手:
|
|
150
|
+
- Vox 美术总监 Joey Sendaydiego 访谈 https://www.storybench.org/how-vox-uses-animation-to-make-complicated-topics-digestible-for-everyone/
|
|
151
|
+
- Joss Fong 访谈 https://www.theopennotebook.com/2020/01/07/videogram-how-a-vox-video-explains-the-science-behind-the-first-photo-of-a-black-hole/
|
|
152
|
+
- Johnny Harris《How I Make My Maps》https://www.youtube.com/watch?v=GsojLuJpe_0
|
|
153
|
+
- 二手:PremiumBeat《Replicating Vox motion graphic》https://www.premiumbeat.com/blog/replicating-vox-motion-graphic/
|
|
154
|
+
- 示范片事实:
|
|
155
|
+
- Le et al., ICML 2012, arXiv:1112.6209 https://arxiv.org/abs/1112.6209
|
|
156
|
+
- Google 官方博客 2012-06-26 https://blog.google/innovation-and-ai/products/using-large-scale-brain-simulations-for/
|
|
157
|
+
|
|
158
|
+
## ⑧ 最容易做错的 3 件事
|
|
159
|
+
|
|
160
|
+
1. **所有东西一起 60fps 丝滑地动**。拼贴的手工感一半来自「相机滑、元素顿」的两层帧率。全部丝滑会像企业宣传片,全部 12fps 又会让相机发晕。
|
|
161
|
+
2. **用模板语法冒充 Vox**:撕纸、每张图都弹入落下、纸纹逐帧抖。实测里这些都没出现,Vox 的照片随切点直接在、纸纹是死的、转场多是硬切和推进。花哨的入场越多,越不像「编辑部作品」。
|
|
162
|
+
3. **用 Vox logo 黄当大面积底色、颜色铺太多**。片子里的黄是 `#DACF08` 一档的荧光笔,只用来划重点。主体是「黑、纸白、一种红」三色,另加一种强调色就够了。
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## 审片与修订(独立 agent 只看成片,8/10)
|
|
167
|
+
|
|
168
|
+
审片意见和这一轮的处理:
|
|
169
|
+
- 「镜 3 变纯黑,一张大桌面断了」:改成一张大黑卡纸铺在同一张桌上,四边露出桌面纸纹。仍是 Missing Chapter 的黑底卡片语法,但桌面不断。
|
|
170
|
+
- 「0–0.9s 完全静止」:示范片当时加了开场慢推(1.14→1.165)。现在的做法:第一个事件放在 0.3 秒内(照片随切点就在、荧光笔或红线立刻开始),或者开场一次 0.17 秒砸入。
|
|
171
|
+
- 「半调糊图铺满全屏太久」:推镜从 0.7s 缩到 0.6s,拉出从 1.0s 缩到 0.85s。拉出起点 z=3.68,让照片在硬切两侧的屏幕宽度一致,并给大图补上同位置的胶带,硬切读作「换成高清扫描」。
|
|
172
|
+
- 「空白纸条先出现」:纸条改成倾斜滑入,打字提前到 0.4s。
|
|
173
|
+
- 「主角从右边一帧切进来半身」:起点移到屏外 1100px,12fps 的第一步仍在画外。
|
|
174
|
+
- 「荧光笔没划完片子就结束」:打字、红圈、荧光整体前移,荧光在 1.8s 划完,之后停 0.3s。
|
|
175
|
+
- 「它脑中的『猫』字太小」:提到 40px。
|
|
176
|
+
- 「相机全程平滑,一拍二不够」:没改。调研实测 Vox 就是「相机 24fps 平滑、元素 12fps 步进」;把相机也改成步进,会背离实测。
|
|
177
|
+
|
|
178
|
+
## QA(skill `scripts/qa.py`,修订后终版)
|
|
179
|
+
|
|
180
|
+
| 镜 | 量的窗口(镜内秒) | 运动面积% 均/峰 | 静止帧对% | 跳变帧 | 每帧耗时 均/峰 ms | 确定性 |
|
|
181
|
+
|---|---|---|---|---|---|---|
|
|
182
|
+
| y2_s1 | 0.35–2.58 | 11.02 / 16.71 | 3.1 | 0 | 17.4 / 20.3 | ✓ 逐像素一致 |
|
|
183
|
+
| y2_s2 | 1.1–3.28 | 16.09 / 76.76 | 3.1 | 16(2.77–3.28s 连续) | 23.4 / 52.2 | ✓ 逐像素一致 |
|
|
184
|
+
| y2_s3 | 0.35–2.08 | 7.77 / 37.41 | 0.0 | 14(0.39–0.83s 连续) | 73.3 / 88.5 | ✓ 逐像素一致 |
|
|
185
|
+
|
|
186
|
+
转场冒烟(每个转场渲一遍,最慢一帧):y2_s2(same)55.2ms;y2_s3(hardcut)43.8ms
|
|
187
|
+
|
|
188
|
+
读法:
|
|
189
|
+
- **镜 2 的跳变**在 2.77–3.28s 连续,是「推进墙上小照片」的 0.6s 推镜,推到 9.6 倍。
|
|
190
|
+
- **镜 3 的跳变**在 0.39–0.83s 连续,是硬切后「拉出揭示」的 0.85s 拉镜。
|
|
191
|
+
- 两段都是整屏缩放,属于设计内的相机运动。硬切本身落在镜 3 第 0 帧,不在量的窗口里。
|
|
192
|
+
- **静止帧对 3.1%**:来自元素层的一拍二(12fps 停帧)。第一版开场相机不动,这个数是 16.9%;审片指出「0–0.9s 完全静止」后加了开场慢推,降到 3.1%。这个数降下来不说明变好:匀速慢推能把静止帧对压得很低,读起来照样像翻 PPT;开场静止的正解是让第一个事件提早发生。
|
|
193
|
+
- **镜 3 每帧 73/89ms** 是三片里最重的:花叔贴纸每帧做 16 次偏移垫白边,还要画黑卡纸纹。要提速,可以只在 12fps 换姿势时重算贴纸、其余帧复用。
|
|
194
|
+
|
|
195
|
+
复跑:`uv run scripts/qa.py --project scripts/engine --film demos/y2_vox --out <目录>`(上表是实验时的数字;收进 skill 后的复跑见 09 号的回归表)。
|
package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y3_whiteboard.md
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
# Y3 · 白板手绘解说(RSA Animate 型):视频动画语法卡
|
|
2
|
+
|
|
3
|
+
一句话:讲者说一句,手就在一张大白板上写一句、画一个图;相机跟着论证在板上移动,最后拉远,观众看到整场论证是一张图。
|
|
4
|
+
|
|
5
|
+
示范片:`scripts/engine/demos/y3_whiteboard/`(渲染 `render.py --film demos/y3_whiteboard`)(8s,3 镜,转场 2 种+收尾拉远),总览:`assets/动画语法/y3_whiteboard_总览.jpg`
|
|
6
|
+
依据:本风格的调研(调研原文与逐帧数据留在实验归档、没收进 skill,用到的数字已摘进本卡)。实测了 RSA Animate《Changing Education Paradigms》和 Minute Physics《Why is it Dark at Night?》,还查了 VideoScribe、Doodly 的官方文档和 Andrew Park、Henry Reich 的一手说法。
|
|
7
|
+
|
|
8
|
+
**先选一种语法,不能混**:
|
|
9
|
+
- RSA 型:一整块大白板,相机在板上移动,每分钟 5.3 次。
|
|
10
|
+
- Minute Physics 型:一页一张纸,硬切换纸,每分钟 8.1 次,相机不动。
|
|
11
|
+
- 本卡和示范片走 RSA 型。Minute Physics 型的要点写在 ④ 和 ⑧ 里。
|
|
12
|
+
|
|
13
|
+
## 起手必查
|
|
14
|
+
|
|
15
|
+
1. **画少写多是分镜层的问题,先定视觉隐喻再动笔。** 每块板先写下要画的那个物或笑点,再定写什么字;手写整句不超过一行。数一数:板书和同时刻口播原文重合的字超过一半,就是画少写多,后期补双关、加图标救不回来。
|
|
16
|
+
2. **块式模板要轮换。** 「年份 → 物件 → 橙标签」或「圆点 → 一行字 → 一个图标」这类同结构的块,全片连用不超过 3 次;换成对比(左右两幅)、流程(箭头串起来)、放大细节、一整幅大图。
|
|
17
|
+
3. **取景不手填相机坐标。** 用本段笔画的外框反算(框住再留边),画框边上被裁成半截的旧字推出画外。
|
|
18
|
+
4. **线型从第一笔定死。** 实线=已发生,虚线=计划,点线=跨段引线;板上的东西只能擦掉或留着,不渐隐。
|
|
19
|
+
5. **每个物件的造型过一遍「会不会被看成不雅形状」。** 圆头、两侧外翻、圆底的竖长物最容易出事,改成尖头、平底再画。
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## ① 适用场景
|
|
24
|
+
|
|
25
|
+
**用它:**
|
|
26
|
+
- 论证型内容:演讲、观点、因果链、历史脉络。概念之间有关系、能画成一张地图的内容最合适。Andrew Park 的原话是「把信息摆在空间里,让人看见事物之间的关系」【一手】。
|
|
27
|
+
- 一条推理链的短科普,走 Minute Physics 型。
|
|
28
|
+
- 口播语速平稳,关键词清楚。RSA 的写字速度大约等于语速,像「字幕被手写出来」【实测】。
|
|
29
|
+
|
|
30
|
+
**别用它:**
|
|
31
|
+
- 需要精确数据图表的内容,手绘误差大。
|
|
32
|
+
- 动作和空间关系复杂的内容,白板没有景深。
|
|
33
|
+
- 需要情绪强度的内容,单色线稿表达弱。
|
|
34
|
+
- 想靠它「提升理解」:Türkay 2016 的实验没发现白板动画比其他形式学得更好。它的价值在吸引注意和陪伴感【二手】。
|
|
35
|
+
|
|
36
|
+
## ② 画面构成
|
|
37
|
+
|
|
38
|
+
- **配色**(RSA 实测):
|
|
39
|
+
- 底:纯白 `#FBFBFB`
|
|
40
|
+
- 线:黑 `#0A0503`
|
|
41
|
+
- 唯一强调色:橙,文字 `#EB701F`,填色 `#F3742D`;斜线排出的浅橙面约 `#E9A67C`
|
|
42
|
+
- 橙色约占全部笔迹像素的 22%,只用在关键词和斜线填色上。
|
|
43
|
+
- Minute Physics 则是偏粉的米白纸 `#E7DBE1`,加彩铅浅黄 `#EDE6A2` 和浅蓝 `#B5CBE8`。
|
|
44
|
+
- **【本片】**:底 `#FBFBFB`,线 `#0A0503`,强调 `#EF7226`。猫身用 22% 透明度的橙色铺一层。
|
|
45
|
+
- **线宽**:RSA 笔画约为画高的 0.6–0.7%,1080p 下约 6–7px;阴影斜线约 0.3%;标题字高约为画高的 5.5%。Minute Physics 的线更粗,约 0.8%【实测】。【本片】线宽 6.5px。
|
|
46
|
+
- **构图**:
|
|
47
|
+
- RSA 是「先规划好最终全图,再倒着画」【一手】。
|
|
48
|
+
- 每块画面里有 3–6 个图文组块,画满再移走。
|
|
49
|
+
- 平滑移动一次只移 0.23 个画宽,所以新旧两块大面积重叠,观众始终看得到上一块的边【实测】。
|
|
50
|
+
- 收尾露出的全图是一条很长的横向长卷。
|
|
51
|
+
- **字**:RSA 是全大写的手写印刷体(漫画对白体)。【本片】中文用霞鹜文楷(LXGW WenKai),子集化成 woff。
|
|
52
|
+
- **手**:
|
|
53
|
+
- 真人右手握黑马克笔,从**右下方**入画,前臂斜向右下,遮住 15–25% 的画面。
|
|
54
|
+
- 不画的时候整只手出画。手在画面里的时间:RSA 49%,Minute Physics 40%【实测】。
|
|
55
|
+
- 【本片】代码画的手:裸前臂带暗面和汗毛,食指压黑马克笔,缩放 0.82,按 7 rad/s 轻轻晃。
|
|
56
|
+
|
|
57
|
+
## ③ 运动轨迹
|
|
58
|
+
|
|
59
|
+
- **写字速度**【实测,9 例】:
|
|
60
|
+
- 正文中位约 16 字符/秒。
|
|
61
|
+
- 片头标题慢一半,约 7.5 字符/秒,用来「立题」。
|
|
62
|
+
- 口播约 13 字符/秒,所以写字速度大致等于语速。
|
|
63
|
+
- 【本片】正文 16 字/秒;「猫?」按标题 7.5 字/秒写。
|
|
64
|
+
- **画图速度**【实测+归纳】:
|
|
65
|
+
- 小图标 0.5–1s,人物头像约 2s。
|
|
66
|
+
- RSA 新增墨迹的面积中位是每秒 0.25% 画面。
|
|
67
|
+
- 复杂插画不当着镜头画:要么预先画好,相机移过去时露出来;要么整张硬切进来,手只补色。
|
|
68
|
+
- **【本片】**:
|
|
69
|
+
- 线条笔速 2600 世界像素/秒,约为 RSA 实拍的 2 倍。8 秒演示片必须压缩,真片请放慢。
|
|
70
|
+
- 笔画时长按长度除以笔速算,每笔至少 0.04s,抬笔间隔 0.02s。
|
|
71
|
+
- 每笔内部用 sineInOut,起笔、收笔慢。
|
|
72
|
+
- 花叔用 0.7s「Reveal」揭开:笔尖在他的关节包围盒里走 8 行之字形,`DG.revealMask` 把走过的地方变成 clip,线稿只在 clip 里露出。
|
|
73
|
+
- 第一版是按部件 `setLineDash` 同时描、笔尖沿关节走,审片判「笔不领线」,所以换了。
|
|
74
|
+
- 汉字没有笔顺数据,每个字用 3 行之字形揭开,笔尖跟着来回,看起来就是在写。
|
|
75
|
+
- **加速倍率**:Henry Reich 每秒拍 1 张照片,画画时每张停 2 帧,等效约 12 倍速。RSA 推断 5–8 倍【一手+推断】。
|
|
76
|
+
- **「不带手」的弹出**:RSA 有一部分橙色关键词是后期整词弹出的,没有手画(ANAESTHETIC、CREATIVITY)【实测】。【本片】「×1000万张」「是猫!」用 0.3s backOut(2.2) 弹出,手不过去。
|
|
77
|
+
- **笔尖路径**:
|
|
78
|
+
- 两笔之间间隔 <0.25s 时,笔尖从上一笔终点沿弧线滑到下一笔起点(sineInOut,抬高 30px)。
|
|
79
|
+
- 间隔更长时,抬手出画:0.35s cubicIn 退到右下屏外。
|
|
80
|
+
- 下一笔开始前 0.3s,从右下 cubicOut 进来。
|
|
81
|
+
- **持续运动**:白板片的「活」来自手一直在画。RSA 的画线活动量和说话词密度之间几乎不相关(|r|<0.07):说话停顿时,手也不停【实测】。
|
|
82
|
+
|
|
83
|
+
## ④ 转场(常用 5 种)
|
|
84
|
+
|
|
85
|
+
1. **板上平滑移动或推拉**(RSA 主力,41 次)。
|
|
86
|
+
- 1.2–2.4s,**easeInOutSine**:实测速度峰值/均值 1.49,理论 sine 是 1.57。
|
|
87
|
+
- 一次平移约 0.23 画宽,与上一块重叠约 75%。
|
|
88
|
+
- 【本片】转场 B:0.9s sineInOut(4.7→5.6s),斜移约 0.5 画宽,同时推到 1.12 倍。移动开始时手正在画一支橙色连线引向新区域,手领着相机走。
|
|
89
|
+
2. **甩镜**:快速摇加运动模糊,约 0.8s,一次移 0.5–1.2 画宽,用来跳到板上很远的区域(RSA 15 次)。
|
|
90
|
+
- 【本片】转场 A:0.8s cubicInOut 横移约一整屏。只在这 0.8s 里沿速度方向叠 9 次做模糊;平滑移动和拉远都保持清楚。
|
|
91
|
+
3. **拉远揭示全图**(收尾)。
|
|
92
|
+
- RSA 片尾:灰色铺满 → 0.6s 快速拉远 → 约 9s 横摇扫过长卷 → 再拉远看全图。
|
|
93
|
+
- VideoScribe 默认就勾着「Zoom at end?」【一手】。
|
|
94
|
+
- 【本片】6.85→7.5s sineInOut 拉到 0.45 倍,停 0.5s,同时整板在 0.5s 里铺一层很浅的灰 `#EEEEEC`。
|
|
95
|
+
4. **云团或爆炸擦除**:卡通烟团铺满再散开,约 1s(RSA 1 次)。
|
|
96
|
+
5. **硬切**:硬切到预先画好的图(RSA 少量);Minute Physics 型的换纸硬切(主力,每分钟 8.1 次);Minute Physics 讲黑夜时整帧反相。
|
|
97
|
+
|
|
98
|
+
**注意**:「推进到画框或泡泡里」「翻页」在样片里都没出现。本片第一版做了「推进思考泡泡」,看过调研后换成甩镜加平滑移动。
|
|
99
|
+
|
|
100
|
+
## ⑤ 节奏与文字
|
|
101
|
+
|
|
102
|
+
- **每块停留**:RSA 两次相机移动之间中位 6.6s(四分位 4.0–13.8s);Minute Physics 每个镜头中位 7.1s【实测】。示范片 8s 放了 3 块,约为真片密度的 2.5 倍。
|
|
103
|
+
- **和口播对齐(核心)**【实测】:
|
|
104
|
+
- 开写比对应短语开说晚 0.2–0.8s,中位 +0.5s。
|
|
105
|
+
- 短语说完后 1s 内写完:边说边写,稍微落后,**不抢先**。
|
|
106
|
+
- 例外是视觉铺垫(药瓶、箭头)会提前几秒画好,等台词说到。
|
|
107
|
+
- Minute Physics 是名词一说出来图就落下,中位 +0.3s。
|
|
108
|
+
- **转场卡话题,不卡停顿**:新的一块板对应一个新论点【实测+归纳】。
|
|
109
|
+
- **音乐**:RSA 在讲话下面**没有音乐**。Minute Physics 全程有音乐垫底,约比人声低 9dB【实测】。
|
|
110
|
+
- **工具默认值**:
|
|
111
|
+
- VideoScribe 画完停留默认 0.5s【一手】,相机移动默认 1s【二手】。
|
|
112
|
+
- Doodly 每个素材默认画 3s【一手】。
|
|
113
|
+
|
|
114
|
+
## ⑥ 代码实现要点
|
|
115
|
+
|
|
116
|
+
> 收进 skill 后(2026-10-04 v0.4):本卡「新写」里的通用函数已统一进 `scripts/engine/lib/`(名字已换成统一后的 MO / CAM / DG / TY / CH / UI / CL / TOON),示范片自己的代码在 `scripts/engine/demos/y3_whiteboard/`。库速查和「怎么为一段口播选语法」见 `references/09-视频动画语法.md`。
|
|
117
|
+
|
|
118
|
+
- 复用 skill:
|
|
119
|
+
- `KIT.densify / KIT.resample`:Catmull-Rom 加密后按弧长等距重采样,`DG.hand` 在这之上加低频噪声
|
|
120
|
+
- `PAINT.noise`、`PAINT.cached`
|
|
121
|
+
- `HUASHU.build/pose/details`:花叔线稿
|
|
122
|
+
- 引擎转场接口
|
|
123
|
+
- 新写、现已统一进库(`lib/diagram.js` / `camera.js`):
|
|
124
|
+
- `DG.cum / DG.pointAt / DG.drawPartial`:折线按长度描出,返回笔尖位置。
|
|
125
|
+
- `CAM.at`:关键帧相机。
|
|
126
|
+
- `CAM.motionBlur`:运动模糊。
|
|
127
|
+
- `DG.revealMask / DG.zigzag`:之字形揭开遮罩(审片后新加)。
|
|
128
|
+
- 示范片自己的(`demos/y3_whiteboard/whiteboard.js`;笔画时间线、笔间滑移、马克笔已进库为 `DG.board` / `B.penAt` / `DG.pen`):
|
|
129
|
+
- **笔画时间线**:`addLine / addText / addPop / addFill` 按顺序排,时长由长度和速度自动算,交付时打印 `Y3.timeline` 核对每块的结束时间。第一版第二块排到了 7.9s,比相机移动晚了 2.5s,靠这个数才发现。
|
|
130
|
+
- `drawStroke`:线、字、弹出、填色、角色五种。字和角色都用之字形遮罩揭开,笔尖坐标直接取遮罩的前沿。
|
|
131
|
+
- `penAt`:笔尖与手的路径,包括笔间滑移、抬手出画、入画。
|
|
132
|
+
- `drawHand`:手和马克笔。
|
|
133
|
+
- 擦痕纹理放在屏幕空间,只跟相机平移、不跟缩放,否则推近 5 倍时会变成大灰斑。
|
|
134
|
+
- **关键架构**:三镜画的是同一块白板、同一台相机,转场全是 `same`。「转场」本身就是相机运动,所以白板上的东西在转场里绝不会跳。
|
|
135
|
+
|
|
136
|
+
## ⑦ 代表作品与一手参考
|
|
137
|
+
|
|
138
|
+
- 样片:
|
|
139
|
+
- RSA ANIMATE: Changing Education Paradigms https://www.youtube.com/watch?v=zDZFcDGpL4U
|
|
140
|
+
- MinutePhysics: Why is it Dark at Night? https://www.youtube.com/watch?v=gxJ4M7tyLRE
|
|
141
|
+
- Andrew Park 访谈(Sketchnote Army 2025)https://sketchnotearmy.com/blog/2025/11/18/andrew-park
|
|
142
|
+
- Cognitive Media「毛手」https://www.hairyhand.co/about
|
|
143
|
+
- VideoScribe 官方文档:
|
|
144
|
+
- 相机与 Zoom at end https://help.videoscribe.co/knowledge/use-zoom-and-set-the-camera
|
|
145
|
+
- Draw 入场 https://help.videoscribe.co/knowledge/draw
|
|
146
|
+
- 入场动画 https://help.videoscribe.co/knowledge/entrance-animations
|
|
147
|
+
- Doodly 默认值 https://support.voomly.com/en/articles/12735753-doodly-how-do-i-customize-video-settings
|
|
148
|
+
- 学习效果研究(转引)https://en.wikipedia.org/wiki/Whiteboard_animation
|
|
149
|
+
|
|
150
|
+
## ⑧ 最容易做错的 3 件事
|
|
151
|
+
|
|
152
|
+
1. **一块画满才说话,或者说完才画**。白板片的魔力是「说一句写一句」:写字速度等于语速,比口播晚约 0.5s。先画后说会让观众等,先说后画会让画变成多余的复述。复杂插画不要现场画,预先画好,相机移过去露出来。
|
|
153
|
+
2. **每次都整屏切到下一块空白**。RSA 的平滑移动只移 0.23 画宽,新旧区域大面积重叠,观众一直知道自己在一张大图的哪里。只在跳到远处时才用 0.8s 甩镜加模糊。收尾一定要拉远看全图,这是这个类型的落点。
|
|
154
|
+
3. **颜色多、线太细或太均匀、手一直挂在画面上**。只用黑加一个强调色,线宽约为画高的 0.65%。手只在画的时候入画,画完就从右下退出;强调词可以不带手直接弹出。另外别把 RSA 和 Minute Physics 混用:要么一张大白板加相机移动,要么一页一张纸加硬切。
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## 审片与修订(独立 agent 只看成片,6/10,三片里最低)
|
|
159
|
+
|
|
160
|
+
审片意见和这一轮的处理:
|
|
161
|
+
- 「笔尖不领着线走,花叔好几笔同时冒出来;字是遮罩擦出来的」:
|
|
162
|
+
- 花叔改成 VideoScribe 的 Reveal 画法:完整线稿藏在下面,笔尖走 8 行之字形,笔过之处揭开,笔尖永远在前沿上。
|
|
163
|
+
- 字改成逐字写:每个字一段时间,笔尖在字框里 3 行之字形来回,遮罩跟着揭开。
|
|
164
|
+
- 新写 `DG.revealMask`(同向绕行的方条并集,nonzero 下重叠不抵消)和 `DG.zigzag`。
|
|
165
|
+
- 「甩镜后 0.4s 死区」:第二块提前到 3.12s 开画,手在甩镜收尾时就入画。
|
|
166
|
+
- 「截图框线穿过猫头」:每个框先填一层白板色再描边,前框盖住后框的线。
|
|
167
|
+
- 「『自己找规律』被上缘切一半」:第三块整体下移 60px。
|
|
168
|
+
- 「拉远后灰底和擦痕像脏墙」:灰底减淡到 `#EEEEEC`,擦痕透明度减半。
|
|
169
|
+
- 「全景只停 0.15s、三组画没连起来」:
|
|
170
|
+
- 第一块结尾加一支橙箭头指向右边,甩镜有了方向。
|
|
171
|
+
- 第二块结尾画一支橙色连线引向第三块,手领着相机走。
|
|
172
|
+
- 拉远提前到 6.85–7.5s,全景停 0.5s。
|
|
173
|
+
- 「手是蓝袖子卡通手」:改成裸前臂,带暗面和汗毛,更接近 RSA 的真人手。仍是代码画的。
|
|
174
|
+
|
|
175
|
+
## QA(skill `scripts/qa.py`,修订后终版)
|
|
176
|
+
|
|
177
|
+
| 镜 | 量的窗口(镜内秒) | 运动面积% 均/峰 | 静止帧对% | 跳变帧 | 每帧耗时 均/峰 ms | 确定性 |
|
|
178
|
+
|---|---|---|---|---|---|---|
|
|
179
|
+
| y3_s1 | 0.35–2.48 | 3.1 / 5.31 | 0.0 | 0 | 6.5 / 6.9 | ✓ 逐像素一致 |
|
|
180
|
+
| y3_s2 | 0.8–2.23 | 4.65 / 9.57 | 0.0 | 0 | 6.5 / 7.3 | ✓ 逐像素一致 |
|
|
181
|
+
| y3_s3 | 0.85–3.23 | 4.45 / 10.94 | 0.0 | 0 | 8.3 / 9.0 | ✓ 逐像素一致 |
|
|
182
|
+
|
|
183
|
+
转场冒烟(每个转场渲一遍,最慢一帧):y3_s2(same)46.9ms;y3_s3(same)14ms
|
|
184
|
+
|
|
185
|
+
读法:
|
|
186
|
+
- 白板片三镜都没有跳变:所有「转场」都是同一块板上的相机运动,板上的东西不会跳。
|
|
187
|
+
- 运动面积 3–4.7% 主要来自手和正在画的线,相机移动时会更高。
|
|
188
|
+
- 每帧不到 10ms,因为全是矢量线条,没有像素级处理。
|
|
189
|
+
|
|
190
|
+
复跑:`uv run scripts/qa.py --project scripts/engine --film demos/y3_whiteboard --out <目录>`(上表是实验时的数字;收进 skill 后的复跑见 09 号的回归表)。
|
package/skills/biuart/references//345/212/250/347/224/273/350/257/255/346/263/225/y4_storytime.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# y4 · 故事型简笔角色动画(YouTube storytime animation)
|
|
2
|
+
|
|
3
|
+
> 一句话语法:**口播是主角,画面是给口播配的「表情包」——角色在几个姿势之间快切(0.1 秒)然后定住,笑点靠切到反应大特写、并在那一下里闭嘴。**
|
|
4
|
+
|
|
5
|
+
代表:TheOdd1sOut(James Rallison)、Jaiden Animations、Domics。工具:据 Jaiden 的 FAQ 和二手资料,三人早期都用 Flash / Adobe Animate(这条没拿到一手原文,只作背景)。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ① 适用场景
|
|
10
|
+
|
|
11
|
+
**用它:**
|
|
12
|
+
- 第一人称讲经历、讲翻车、讲「我第一次……」:口播有起承转合、有一个能停顿的笑点。
|
|
13
|
+
- 观众要的是「这个人」:创作者的卡通化身每期出现,认的是人设不是画工(Pappis 的类型研究:化身之间「往往只靠发型就能区分」)。
|
|
14
|
+
- 预算有限、要稳定周更:一个角色、五六个姿势、三张嘴就能撑满一期。
|
|
15
|
+
|
|
16
|
+
**别用:**
|
|
17
|
+
- 信息密度高的教程、数据讲解 → 用 y5 动态文字或信息图。观众会盯着角色等笑点,记不住数字。
|
|
18
|
+
- 没有「我」的内容(行业新闻、产品对比)→ 角色没有立场可表演,就只剩一个会张嘴的贴图。
|
|
19
|
+
- 口播本身不好笑、没停顿 → 这个风格把口播放大,不会替口播救场。
|
|
20
|
+
|
|
21
|
+
## ② 画面构成
|
|
22
|
+
|
|
23
|
+
**构图**
|
|
24
|
+
- 中景(腰以上,头占画高 25–35%)是默认机位,角色居中偏一侧,另一侧留给「他在说的东西」(电脑、对方、物件)。
|
|
25
|
+
- 背景只交代「在哪」:一面墙、一张桌、一扇窗,3–5 个大色块。白底或纯色底也完全成立(Pappis:「白底或者一个粗糙的场景草图」)。
|
|
26
|
+
- 反应镜头把环境拿掉:脸占满画面(头半径 ≈ 画高 1/3),背景换纯色+暗角。
|
|
27
|
+
- 笑点镜头经常反着来:切到**大全景**,人变得很小(「渺小无助」本身就是笑点)。
|
|
28
|
+
|
|
29
|
+
**配色(示范片实际色值)**
|
|
30
|
+
|
|
31
|
+
| 部位 | 色值 | 说明 |
|
|
32
|
+
|---|---|---|
|
|
33
|
+
| 皮肤 | `#FFE2CC` | 浅、近白——TheOdd1sOut 的「棉花糖人」是纯白,Jaiden 偏暖白 |
|
|
34
|
+
| 帽子 / 白 T | `#FFFFFF`,帽带 `#E4E4E8` | 白色物件靠黑轮廓立住 |
|
|
35
|
+
| 短裤 | `#CDBB97` | |
|
|
36
|
+
| 角色线 | `#1B1B1F` | 全片最黑 |
|
|
37
|
+
| 墙 / 桌 / 地 | `#DCE9EC` / `#E2C29B` / `#E8DCC8` | 低饱和、高明度:背景永远比角色「轻」 |
|
|
38
|
+
| 背景线 | `#5B6470` 3px | 比角色线浅、细一半以上 |
|
|
39
|
+
| 反应镜头虚空 | `#3D405B`+径向暗角 | 冷、暗,把注意力全压到脸上 |
|
|
40
|
+
| 嘴 / 舌 / 腮红 | `#6E2430` / `#F07B7B` / `rgba(255,140,120,.35)` | 嘴里唯一的饱和色,口型一张一合很显眼 |
|
|
41
|
+
|
|
42
|
+
**线宽**:角色线 = 头半径 × 0.05(最低 4px)——中景 R=165 → 8px,大特写 R=360 → 12px,全景 R=95 → 6px。线随镜头缩放变粗变细(Flash 默认行为),背景线固定 3px。**角色线 ≥ 背景线 × 2** 是这个风格「人永远跳出来」的根源。
|
|
43
|
+
|
|
44
|
+
**形状语言**:全圆、全钝。头是略扁的圆(宽 1.0R × 高 0.93R),身体是豆子(宽 1.0R × 高 1.2R),全身 3.2R——**头占身高约 58%**。手臂是一根两端圆头的管子,没有肘、没有手指,手是一个圆。没有直角,除了道具。
|
|
45
|
+
|
|
46
|
+
**角色画法(花叔 storytime 版)**
|
|
47
|
+
- 保留两个标志:**纯白渔夫帽**(帽冠圆角梯形+往下斜的宽帽檐+浅灰帽带)、**圆框黑眼镜**(镜框线是轮廓线的 1.5 倍——眼镜就是这张脸的「眼睛」)。其余从原形象里只留白 T、卡其短裤、黑手表(近侧手腕一小块黑)。
|
|
48
|
+
- 眼睛是镜片里的黑点(0.075R),带一个白高光;「死鱼眼」把黑点缩到 0.035R、去高光。
|
|
49
|
+
- 表情主要靠**眉毛**(帽檐和镜框之间那条短粗线):抬高=惊、内端抬高=委屈、放平=无语。嘴只有:微笑弧、一字、波浪(担心)、半张、全张五种。
|
|
50
|
+
- 鬓角露一点黑发,告诉观众帽子底下是头发不是光头。
|
|
51
|
+
|
|
52
|
+
## ③ 运动轨迹
|
|
53
|
+
|
|
54
|
+
**原片实测(本次抓取、480p 转载版、去掉片头片尾各 10 秒;方法:160×90 灰度逐帧差)**
|
|
55
|
+
|
|
56
|
+
| | TheOdd1sOut「老妈的惩罚」(30fps,475s) | Jaiden Animations「Being Not Straight」(24fps,902s) |
|
|
57
|
+
|---|---|---|
|
|
58
|
+
| 平均镜头长 ASL | **2.43s**(中位 1.87s,四分位 1.03–3.07s) | **5.73s**(中位 3.21s,四分位 1.67–6.67s) |
|
|
59
|
+
| 完全静止的相邻帧 | **70.7%** | 51.2% |
|
|
60
|
+
| 静止段时长 | 中位 **0.40s**,p75 0.70s | 中位 0.08s(=一拍二的停顿) |
|
|
61
|
+
| 运动段时长 | 中位 **100ms**(3 帧) | 中位 42ms(1 帧) |
|
|
62
|
+
|
|
63
|
+
读法:TheOdd1sOut 是**快切(0.1s)→ 定住(0.4–0.7s)→ 再快切**,七成时间画面完全不动;Jaiden 是**一拍二持续在动**(12 张/秒),镜头更长。Toon Boom 访谈里 Netflix《Oddballs》的动画监督 Hallis Blaney 说得最准:「TheOdd1sOut 是 pose-to-pose,动画极少……基本是在图片之间切换」,改成剧集时最难的是保住那种 snappiness,避免「太软、太慢」。示范片取两者中间:姿势快切照 TheOdd1sOut,呼吸和口型照 Jaiden。
|
|
64
|
+
|
|
65
|
+
**示范片参数**
|
|
66
|
+
|
|
67
|
+
| 运动 | 怎么做 | 数字 |
|
|
68
|
+
|---|---|---|
|
|
69
|
+
| 角色帧率 | 角色所有运动按 24fps 步进(`MO.step(t,24)`),镜头按 60fps 平滑 | Flash 默认 24 |
|
|
70
|
+
| 姿势切换 | 手臂目标点 `expoOut` 插值 | **0.10s**(24fps 下 2–3 帧) |
|
|
71
|
+
| 换姿势回弹 | 切换瞬间身体竖向压 7%,Ebberts 弹簧回弹(体积守恒,横向反向) | `settle(dt, -0.07, freq 3.5, decay 9)`,≈0.35s 停稳 |
|
|
72
|
+
| 口型 | 读口播 RMS 包络,**每 1/12 秒才允许换一次形**(一拍二);三张嘴 | 包络 <0.06 闭、<0.22 半张、其余全张 |
|
|
73
|
+
| 说话点头 | 嘴张开时头下沉 | 0.015R × 口型级数 |
|
|
74
|
+
| 呼吸 | 身体竖向缩放 | ±1.2%,周期 1.6s |
|
|
75
|
+
| 眨眼 | 固定时刻表,间隔 2.4–3.6s | 闭眼 2 帧@24fps(83ms);「无语」慢眨 3 帧 |
|
|
76
|
+
| 眼神 | 指向某物时黑点往那边移 | 0.09R |
|
|
77
|
+
| 镜头 | 示范片用了中景、特写、近景慢推和全景慢拉(每镜都慢推,旧做法);新片优先定住,变化靠硬切、跳近;砸镜只给包袱那一下 | 示范片:中景 +3.5%/2.0s;特写 +6%/1.2s;全景 0.53→0.50(quintOut);近景 1.90→1.98 |
|
|
78
|
+
| 开场 | 镜头 1.04→1.01 落定(0.5s expoOut),代替「第一帧静止」 | |
|
|
79
|
+
| 汗滴 | 太阳穴处沿脸侧滑落 | 0.9s,expoOut 混线性 |
|
|
80
|
+
| 镜片反光 | 白色斜带扫过两片镜片 | 0.3s |
|
|
81
|
+
| 「?」 | 头顶弹出,backOut 过冲 30%,之后 ±3° 晃 | 0.26s |
|
|
82
|
+
|
|
83
|
+
入场/出场:storytime 几乎没有「入场动画」——角色在镜头切进来的第一帧就已经在位、已经在说话。道具和符号(?!、汗滴、数字)才用弹入(`backOut`,过冲 15–30%)。
|
|
84
|
+
|
|
85
|
+
## ④ 转场(常用 5 种)
|
|
86
|
+
|
|
87
|
+
1. **硬切(cut)**——占绝大多数。一句口播一个镜头,口播换句就切。示范片 S3→S4(特写 → 同一房间的大全景)就是硬切,靠景别反差制造笑点。
|
|
88
|
+
2. **砸镜 / smash cut 到反应特写**——新画面第一帧就出现,从 1.22 倍以弹簧(freq 3, decay 11)缩回 1,前 2 帧压一层 55% 白闪,配一个低音「噔」。用在「说完一句离谱的话 → 看他的脸」。`TRANSITIONS.smash`。
|
|
89
|
+
3. **甩镜 / whip pan**——镜头往「他在看的东西」方向甩,`expoInOut` 0.26s,中段 16 张偏移叠加做横向运动模糊、配 whoosh。用在「我打开电脑 →(屏幕)」这种视线转移。`TRANSITIONS.whip`。
|
|
90
|
+
4. **推近 / 跳近(jump-in)**——同一机位直接切到约 2 倍的更近景,不换背景。用在「他重复了一遍」「他意识到了」「包袱那一句」。示范片 S4→S5:全景里说「这些……」,在「贴哪儿」前的换气处硬切到 1.9 倍近景,笑点那张脸才看得清。前提是全景和近景是**同一张世界画布、只换镜头**(`world.js`),否则一跳就穿帮。
|
|
91
|
+
5. **过肩 / 主观镜头**——切到他看见的东西(屏幕、手机、对方),前景放一块他的后脑勺。示范片 S2:花叔的背影——白帽+帽带、耳朵、挂在耳朵上的眼镜腿、短黑发、后颈、白 T 领口,屏幕那侧一圈冷色轮廓光(第一版画成纯黑剪影,审片读成「另一个影子人」);前景不跟镜头推,只随呼吸起伏,和屏幕之间有视差,画面立刻「有空间」。
|
|
92
|
+
|
|
93
|
+
## ⑤ 节奏与文字
|
|
94
|
+
|
|
95
|
+
- **镜头跟口播句子走,不跟音乐拍子走**:一句 ≈ 一镜。示范片 5 镜平均 1.75s(2.0 / 2.4 / 1.2 / 1.65 / 1.5),落在 TheOdd1sOut 实测的四分位 1.03–3.07s 之内。
|
|
96
|
+
- **转场放在两句之间的换气里,字幕和切点同一帧换**:第一版甩镜切在「它一口气」的前两个字上,审片指出「切点落在句子中间」;改成 L1 结束(1.87s)→ 2.0s 甩 → 2.26s 落定 → 2.30s 才开口。
|
|
97
|
+
- **反应镜头放在两句之间的沉默里**:示范片 S3 整整 1.3s 没有一句话,只有蟋蟀叫——这一下停顿就是笑点。剪辑上:说完离谱的那句(「三千行」)后**不要马上接下一句**,留 0.8–1.5s 给脸。
|
|
98
|
+
- **包袱后定住 ≥0.9s**:「?」7.80s 弹出,片子 8.75s 才结束,音效尾巴自然收完(第一版只留 0.4s,审片:「笑的那一拍被剪掉了」)。
|
|
99
|
+
- **字**:YouTube 原生 storytime 不烧字幕(靠 CC),只在画面里写「需要被看见」的字——屏幕上的字、关键数字(示范片「3000 行」用普惠体 Black 230px、`#FFCB6B`、过冲 23% 砸出来)。中文平台需要烧录字幕:白字 50px、黑描边 10px、整句切入切出、不做动画(字幕动起来会和角色抢视线)。
|
|
100
|
+
- 画内数字和口播**同一个字**对齐:「三千」那个音节(3.70s)= 3000 砸出 = 低频 thump = 屏幕震(9Hz、0.3s 衰减完)。
|
|
101
|
+
|
|
102
|
+
## ⑥ 代码实现要点
|
|
103
|
+
|
|
104
|
+
> 收进 skill 后(2026-10-04 v0.4):本卡「新写」里的通用函数已统一进 `scripts/engine/lib/`(名字已换成统一后的 MO / CAM / DG / TY / CH / UI / CL / TOON),示范片自己的代码在 `scripts/engine/demos/y4_storytime/`。库速查和「怎么为一段口播选语法」见 `references/09-视频动画语法.md`。
|
|
105
|
+
|
|
106
|
+
- **复用 skill**:引擎(段落表、转场时新旧两段离屏合成、`GLOBAL_OVERLAY`)、`render.py`、`PAINT.cached`(房间背景整张缓存)、`U.rng` 种子随机(代码瀑布的色块布局)。
|
|
107
|
+
- **engine 两处改动(已并进 skill 引擎)**:段落表任何段都可以直接写 `dur`(秒),不必凑八分音符——storytime 按口播切,不按节拍;转场可以写 `punch: 0`(或片级 `window.PUNCH = 0`)关掉引擎默认的拍点冲击(storytime 没有拍点)。
|
|
108
|
+
- **新写、现已统一进库**(`lib/toon.js` / `typo.js` / `camera.js` / `motion.js`,转场进 `transitions.js`):
|
|
109
|
+
- `TOON.bean(c, {x, y, s, char, pose, expr, mouth, blink, look, squash, bob, tilt, lw})`:正面豆子角色,全部 Path2D 程序化,返回双手和头的坐标(给道具、符号定位)。这套代码画的豆子角色只留给示范片和白模预演:作者看过多个模型做的片子后,判代码画的小人是一眼 AI 味(原话「很多视频里用到的小人和机器人角色都太差了」)。参数化片段 y4 只接受你自己的帧库(`data.character.frames`,AI 生帧,见 10 号和 `references/角色精细度.md`),没有帧库启动就失败。
|
|
110
|
+
- `TOON.POSES`:rest / talk / point / type / shrug / stiff,每个姿势只是两只手相对肩的目标点(单位:头半径)。
|
|
111
|
+
- `TOON.mouth(t)`:读 `window.VO_ENV`(音频脚本导出的 60fps RMS 包络),一拍二量化成 0/1/2。
|
|
112
|
+
- `MO.springHz / settle / backOut / expoOut / step`,`CAM.with`、`CAM.drift`(示范片用过的手持微漂;新片定住就是定住,不加),`TOON.sweat`、`TOON.mark`。
|
|
113
|
+
- 转场 `whip`、`smash`(y5 用的冲进色块转场收进库后改名 `fillZoom`,另有 `bands / push`)。
|
|
114
|
+
- **本片 `y4_storytime/story.js`**:`STORY.poseAt(keys, t)`(姿势时间线+换姿势回弹),`blinkAt`、`alive`(点头+呼吸),字幕 overlay。
|
|
115
|
+
- **音频(实验归档里的 `build_y4.py`,没收进 skill)**:摆口播、合成音效(whoosh、键盘、bloop、thump、「噔」、蟋蟀、pip、boing),同时导出 `vo_env.js`。口播是 macOS `say` 的 Eddy 占位——**正式片换成真人口播后重新导出包络,口型自动跟上**。
|
|
116
|
+
- **同一个房间三种景别**:`y4_storytime/world.js` 把房间画成一张世界画布(x −1000..2900、y −700..1700,静态部分整张缓存),S1(zoom 1.01–1.045)、S4(0.53→0.50)、S5(1.90→1.98)只换 `CAM.with`。全景才看得到的书架、绿植、吊灯本来就在世界里。世界要比最远的镜头大一圈,否则镜头漂移会露黑边(第一版三处黑边全是这个原因)。
|
|
117
|
+
- 关键参数:角色 24fps、口型 12 次/秒、换姿势 0.1s+7% 回弹、角色线 0.05R。
|
|
118
|
+
|
|
119
|
+
## ⑦ 代表作品与一手参考
|
|
120
|
+
|
|
121
|
+
- TheOdd1sOut 频道:https://www.youtube.com/@theodd1sout ;本次实测的转载「老妈的惩罚」:https://www.bilibili.com/video/BV14s411M7x4
|
|
122
|
+
- Jaiden Animations 频道:https://www.youtube.com/@JaidenAnimations ;本次实测「Being Not Straight」转载:https://www.bilibili.com/video/BV1xu411r734
|
|
123
|
+
- Domics 频道:https://www.youtube.com/@Domics
|
|
124
|
+
- Toon Boom × Atomic Cartoons,《Oddballs》从 YouTube 到剧集(「pose-to-pose,动画极少」「他在 YouTube 上从没做过口型」「太软、太慢」):https://www.toonboom.com/atomic-cartoons-on-bringing-oddballs-from-youtube-to-series
|
|
125
|
+
- Konstantinos Pappis, *The Odd Ones Out: The Rise of YouTube Storytime Animation*(Animation Studies,类型史与视觉语法:圆脸化身、白底、无逐帧、更像动态分镜):https://journal.animationstudies.org/article/id/135/
|
|
126
|
+
- TheOdd1sOut 维基(「棉花糖人」的说法):https://en.wikipedia.org/wiki/TheOdd1sOut
|
|
127
|
+
- Dan Ebberts 惯性回弹表达式(freq 3、decay 5 的出处):http://www.motionscript.com/articles/bounce-and-overshoot.html
|
|
128
|
+
- 制作者经验帖「换姿势时加一点 bounce」:https://forum.wickeditor.com/t/whoever-wants-to-make-a-storytime-animation/5940
|
|
129
|
+
|
|
130
|
+
## ⑧ 最容易做错的 3 件事
|
|
131
|
+
|
|
132
|
+
1. **把它当「全动画」做,什么都在动。** 这个风格的生命在「快切+定住」:TheOdd1sOut 七成帧完全静止。所有东西都在慢慢飘,反而软、反而没节奏(Oddballs 团队最怕的「too soft, too slow」)。姿势切换要快到 0.1s,然后**真的停住**;持续微动只给呼吸、眨眼、背景小物,幅度 ≤ 1–2%。
|
|
133
|
+
2. **背景画得和角色一样精彩。** 背景饱和度、对比、线宽都要比角色低一档(本片背景线 3px 灰 vs 角色 8px 黑)。背景一花,观众的眼睛就离开脸,口播的笑点就丢了。
|
|
134
|
+
3. **反应镜头不给沉默。** 说完离谱那句马上接下一句,等于把笑点讲掉了。反应镜头要放在口播的空白里,至少 0.8s。镜头定住,只给一两个小细节(汗滴、慢眨、眉毛一垮);要加强就在包袱那一下跳近一档(硬切到约 2 倍近景)或砸入 0.17 秒,不用匀速慢推去填。
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
## 示范片
|
|
139
|
+
|
|
140
|
+
- 成片:`scripts/engine/demos/y4_storytime/`(渲染 `render.py --film demos/y4_storytime`)(8.75s,60fps,含临时口播+音效);每镜一帧总览:`assets/动画语法/y4_storytime_总览.jpg`
|
|
141
|
+
- 工程:`scripts/engine/demos/y4_storytime/`(`eras.js` 段落表、`story.js`、`world.js` 世界画布、`s1_desk.js / s2_screen.js / s3_react.js / s4_wide.js / s5_close.js`),通用部分在 `scripts/engine/lib/`
|
|
142
|
+
- 镜头表:S1 中景对镜头讲(0–2.0s)→ 甩镜 → S2 过肩看屏幕,代码瀑布+「3000行」(2.0–4.4s)→ 砸镜 → S3 反应大特写,沉默(4.4–5.6s)→ 硬切 → S4 同一房间大全景「我问它:这些……」,瞟电脑、指电脑(5.6–7.25s)→ 跳近 → S5 近景摊手「贴哪儿?」+「?」,定住(7.25–8.75s)
|
|
143
|
+
|
|
144
|
+
## 审片返修(独立 agent 只看成片)
|
|
145
|
+
|
|
146
|
+
第一版审片「必须改」5 条,全部处理:
|
|
147
|
+
1. 三处黑边穿帮(S1 左/上、砸镜回弹缩到 1 以下、S4 镜头下漂)→ 世界画布铺大+`smash` 缩放夹在 ≥1。返修后逐帧扫描四条边:0 帧露黑。
|
|
148
|
+
2. 包袱没留气口 → 拆出 S5 跳近镜头,「?」后定住 0.95s。
|
|
149
|
+
3. S1 和 S4 不是同一个房间 → 改成同一张世界画布换镜头。
|
|
150
|
+
4. 过肩剪影像另一个人 → 画出背面识别点+轮廓光。
|
|
151
|
+
5. 甩镜切在句中、第二句字幕晚 → 甩镜挪进换气,字幕跟切点同帧。
|
|
152
|
+
「可以更好」处理了 2 条:S3 第二声蟋蟀后 0.15s 眉毛一垮(原来音效在 5.23s、表情在 5.38s 对不上);S4 两段停顿里加「瞟电脑→回看镜头」和说「这些」时指电脑。字幕去掉中英文之间的空格(「让AI帮我」「3000行」)。
|
|
153
|
+
没改的:线条是均匀等粗的矢量线、没有手绘抖线——这是 TheOdd1sOut/Jaiden 的 Flash 矢量线本来的样子,保留。
|
|
154
|
+
|
|
155
|
+
## qa.py 数字(返修后,`uv run scripts/qa.py --project scripts/engine --film demos/y4_storytime`)
|
|
156
|
+
|
|
157
|
+
| 段 | 运动% | 静止帧对% | 跳变 | 均/峰 ms | 确定性 |
|
|
158
|
+
|---|---|---|---|---|---|
|
|
159
|
+
| s1_desk | 1.47 | 8.6 | 0 | 9.9/10.4 | ✓ |
|
|
160
|
+
| s2_screen | 6.0 | 0.0 | 0 | 1.7/3.8 | ✓ |
|
|
161
|
+
| s3_react | 1.73 | 0.0 | 0 | 5.6/6.1 | ✓ |
|
|
162
|
+
| s4_wide | 0.77 | 16.2 | 0 | 9.6/9.9 | ✓ |
|
|
163
|
+
| s5_close | 3.27 | 3.1 | 0 | 10.9/11.4 | ✓ |
|
|
164
|
+
|
|
165
|
+
转场冒烟(整帧峰值):whip 47.9ms、smash 10.1ms、cut 15.7 / 20.5ms。第一版 s1、s2、s4 各报 1 个跳变(开场落定、3000 砸出、全景开头的快速拉远),返修后为 0。
|
|
166
|
+
读这张表要注意:qa 的经验阈值「静止帧对 >40% 读作卡」**不适用于 storytime**——TheOdd1sOut 原片 70.7% 的相邻帧完全静止,那是风格不是卡顿。本片静止帧对 0–16%,比原片「活」得多,是有意取 Jaiden 式的持续呼吸;想更像 TheOdd1sOut,就把呼吸、点头、背景小循环关掉,只留口型和姿势快切(静止帧对会大幅上升,本次没实测)。
|