dsh-drawai 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (379) hide show
  1. package/README.md +7 -5
  2. package/lib/client.js +142 -16
  3. package/lib/index.js +7945 -7719
  4. package/lib/motion/asset-pack.js +394 -394
  5. package/lib/motion/assets.js +291 -291
  6. package/lib/motion/demo-assets-lock.js +10 -10
  7. package/lib/motion/mgstyles/briefs/23-ink-wash.md +147 -0
  8. package/lib/motion/mgstyles/catalog.d/23-ink-wash.json +28 -0
  9. package/lib/motion/mgstyles/catalog.json +127 -14
  10. package/lib/motion/mgstyles/upstream/demos/23-ink-wash/brush.js +149 -0
  11. package/lib/motion/mgstyles/upstream/demos/23-ink-wash/film.js +202 -0
  12. package/lib/motion/mgstyles/upstream/manifest.json +28 -3
  13. package/lib/motion/mgstyles/upstream/prompts/23-ink-wash.md +59 -0
  14. package/lib/motion/mgstyles/vendor/README.md +28 -28
  15. package/lib/motion/mgstyles/vendor/modules/d3/LICENSE +13 -13
  16. package/lib/motion/mgstyles/vendor/modules/d3/dist/d3.min.js +2 -2
  17. package/lib/motion/mgstyles/vendor/modules/opentype.js/LICENSE +20 -20
  18. package/lib/motion/mgstyles/vendor/modules/opentype.js/dist/opentype.mjs +14460 -14460
  19. package/lib/motion/mgstyles/vendor/modules/simplex-noise/LICENSE +21 -21
  20. package/lib/motion/mgstyles/vendor/modules/simplex-noise/dist/esm/simplex-noise.js +465 -465
  21. package/lib/motion/mgstyles/vendor/modules/topojson-client/LICENSE +13 -13
  22. package/lib/motion/mgstyles/vendor/modules/topojson-client/dist/topojson-client.min.js +2 -2
  23. package/lib/motion/project.js +5 -1
  24. package/lib/motion/qa.js +116 -6
  25. package/lib/motion/render.js +179 -179
  26. package/lib/motion/scene-kit.js +1 -1
  27. package/lib/motion/shotcraft/upstream/SKILL.md +286 -286
  28. package/lib/motion/shotcraft/upstream/assets/lib/Caption.tsx +54 -54
  29. package/lib/motion/shotcraft/upstream/assets/lib/ClipCard.tsx +200 -200
  30. package/lib/motion/shotcraft/upstream/assets/lib/DigitRoll.tsx +45 -45
  31. package/lib/motion/shotcraft/upstream/assets/lib/FlashCut.tsx +20 -20
  32. package/lib/motion/shotcraft/upstream/assets/lib/FlatPanel.tsx +65 -65
  33. package/lib/motion/shotcraft/upstream/assets/lib/PageCam.tsx +151 -151
  34. package/lib/motion/shotcraft/upstream/assets/lib/VerticalTicker.tsx +129 -129
  35. package/lib/motion/shotcraft/upstream/assets/lib/helpers/camera.tsx +75 -75
  36. package/lib/motion/shotcraft/upstream/assets/lib/helpers/motion.ts +40 -40
  37. package/lib/motion/shotcraft/upstream/assets/lib/helpers/rand.ts +11 -11
  38. package/lib/motion/shotcraft/upstream/assets/lib/helpers/shake.ts +10 -10
  39. package/lib/motion/shotcraft/upstream/assets/scripts/build-readme-cover.mjs +49 -49
  40. package/lib/motion/shotcraft/upstream/assets/scripts/capture-template.mjs +210 -210
  41. package/lib/motion/shotcraft/upstream/assets/scripts/sfx-source.py +423 -423
  42. package/lib/motion/shotcraft/upstream/assets/scripts/smoke-render-demos.py +170 -170
  43. package/lib/motion/shotcraft/upstream/assets/scripts/test_sfx_source.py +157 -157
  44. package/lib/motion/shotcraft/upstream/demos/README.md +120 -120
  45. package/lib/motion/shotcraft/upstream/demos/_fixtures/Brand.tsx +112 -112
  46. package/lib/motion/shotcraft/upstream/demos/_fixtures/Fixtures.tsx +647 -647
  47. package/lib/motion/shotcraft/upstream/demos/_fixtures/Look.tsx +316 -316
  48. package/lib/motion/shotcraft/upstream/demos/_fixtures/Motion.tsx +82 -82
  49. package/lib/motion/shotcraft/upstream/demos/_fixtures/PageCam2D.tsx +115 -115
  50. package/lib/motion/shotcraft/upstream/demos/_fixtures/Polish.tsx +243 -243
  51. package/lib/motion/shotcraft/upstream/demos/_textures/live-layout.json +388 -388
  52. package/lib/motion/shotcraft/upstream/demos/camera/basic-3d-scene/Basic3DScene.tsx +250 -250
  53. package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashImpactReal.tsx +305 -305
  54. package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashZoomReal.tsx +246 -246
  55. package/lib/motion/shotcraft/upstream/demos/camera/cursor-flyover/CursorFlyover.tsx +390 -390
  56. package/lib/motion/shotcraft/upstream/demos/camera/depth-layer-moves/MultiplaneReal.tsx +138 -138
  57. package/lib/motion/shotcraft/upstream/demos/camera/graze-face-tour/GrazeFaceTour.tsx +542 -542
  58. package/lib/motion/shotcraft/upstream/demos/camera/overhead-camera-moves/OverheadTabletopDrop.tsx +315 -315
  59. package/lib/motion/shotcraft/upstream/demos/camera/overhead-camera-moves/TiltReveal.tsx +299 -299
  60. package/lib/motion/shotcraft/upstream/demos/camera/space-camera-moves/DroneDiveLanding.tsx +173 -173
  61. package/lib/motion/shotcraft/upstream/demos/camera/space-camera-moves/ExplodedView.tsx +348 -348
  62. package/lib/motion/shotcraft/upstream/demos/camera/steep-tilt-glide/SteepTiltGlide.tsx +366 -366
  63. package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/BulletTimeFreezeOrbit.tsx +279 -279
  64. package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/PullBackIsolation.tsx +184 -184
  65. package/lib/motion/shotcraft/upstream/demos/camera/terminal-3d/Terminal3D.tsx +390 -390
  66. package/lib/motion/shotcraft/upstream/demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.tsx +155 -155
  67. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/AxisRescaleShockV2.tsx +303 -303
  68. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/OscilloscopeStreamV2.tsx +290 -290
  69. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx +278 -278
  70. package/lib/motion/shotcraft/upstream/demos/data/gauge-readout-moves/NeedleSweepSelftest.tsx +307 -307
  71. package/lib/motion/shotcraft/upstream/demos/data/gauge-readout-moves/TapeScrollFixedPointer.tsx +215 -215
  72. package/lib/motion/shotcraft/upstream/demos/data/scroll-brake-moves/BrakeReticleLock.tsx +299 -299
  73. package/lib/motion/shotcraft/upstream/demos/data/scroll-brake-moves/ChangelogScrollBrake.tsx +232 -232
  74. package/lib/motion/shotcraft/upstream/demos/data/timeline-travel/TimelineTravel.tsx +290 -290
  75. package/lib/motion/shotcraft/upstream/demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx +273 -273
  76. package/lib/motion/shotcraft/upstream/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx +167 -167
  77. package/lib/motion/shotcraft/upstream/demos/effects/brand-frame-snap/BrandFrameSnap.tsx +536 -536
  78. package/lib/motion/shotcraft/upstream/demos/effects/fui-hud-moves/ReticleLockOn.tsx +164 -164
  79. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/FlylineArc.tsx +175 -175
  80. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx +197 -197
  81. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/OrbFlylineRelay.tsx +241 -241
  82. package/lib/motion/shotcraft/upstream/demos/effects/icon-performance-moves/AttentionBounce.tsx +279 -279
  83. package/lib/motion/shotcraft/upstream/demos/effects/impact-feedback/AnimeImpact.tsx +230 -230
  84. package/lib/motion/shotcraft/upstream/demos/effects/impact-feedback/HitCounter.tsx +345 -345
  85. package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SheenSweepRetry.tsx +275 -275
  86. package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SpotlightSweepReveal.tsx +229 -229
  87. package/lib/motion/shotcraft/upstream/demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.tsx +312 -312
  88. package/lib/motion/shotcraft/upstream/demos/effects/riso-print-hits/RisoMisregistrationHit.tsx +222 -222
  89. package/lib/motion/shotcraft/upstream/demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx +295 -295
  90. package/lib/motion/shotcraft/upstream/demos/effects/scanline-annotate-focus/ScanlineAnnotateFocus.tsx +329 -329
  91. package/lib/motion/shotcraft/upstream/demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx +315 -315
  92. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ImpactBurstKit.tsx +264 -264
  93. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/KanadaPerspectiveSnap.tsx +260 -260
  94. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ScoreSlam.tsx +263 -263
  95. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx +123 -123
  96. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx +187 -187
  97. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx +175 -175
  98. package/lib/motion/shotcraft/upstream/demos/interaction/autolayout-gap-dial/AutolayoutGapDial.tsx +305 -305
  99. package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx +350 -350
  100. package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.tsx +352 -352
  101. package/lib/motion/shotcraft/upstream/demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx +218 -218
  102. package/lib/motion/shotcraft/upstream/demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx +297 -297
  103. package/lib/motion/shotcraft/upstream/demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx +157 -157
  104. package/lib/motion/shotcraft/upstream/demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx +218 -218
  105. package/lib/motion/shotcraft/upstream/demos/interaction/picker-carousel-feature-cycle/PickerCarouselFeatureCycle.tsx +202 -202
  106. package/lib/motion/shotcraft/upstream/demos/interaction/segmented-thumb-hero/SegmentedThumbHero.tsx +265 -265
  107. package/lib/motion/shotcraft/upstream/demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx +457 -457
  108. package/lib/motion/shotcraft/upstream/demos/interaction/theme-switch-moves/ThemeSweepToggle.tsx +446 -446
  109. package/lib/motion/shotcraft/upstream/demos/interaction/type-and-filter/TypeAndFilter.tsx +249 -249
  110. package/lib/motion/shotcraft/upstream/demos/interaction/voice-waveform-live/VoiceWaveformLive.tsx +278 -278
  111. package/lib/motion/shotcraft/upstream/demos/opening/crane-rise-reveal/CraneRiseReveal.tsx +332 -332
  112. package/lib/motion/shotcraft/upstream/demos/opening/dataviz-landscape-open/DatavizLandscapeOpen.tsx +358 -358
  113. package/lib/motion/shotcraft/upstream/demos/opening/fracture/Fracture.tsx +201 -201
  114. package/lib/motion/shotcraft/upstream/demos/opening/icon-field-colorize/IconFieldColorize.tsx +200 -200
  115. package/lib/motion/shotcraft/upstream/demos/opening/letterspace-materialize/LetterspaceMaterialize.tsx +208 -208
  116. package/lib/motion/shotcraft/upstream/demos/opening/magician-card-flourish/MagicianCardFlourish.tsx +341 -341
  117. package/lib/motion/shotcraft/upstream/demos/opening/orbit-ring-title-open/OrbitRingTitleOpen.tsx +389 -389
  118. package/lib/motion/shotcraft/upstream/demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx +293 -293
  119. package/lib/motion/shotcraft/upstream/demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx +183 -183
  120. package/lib/motion/shotcraft/upstream/demos/opening/text-as-mask/TextAsMask.tsx +245 -245
  121. package/lib/motion/shotcraft/upstream/demos/outro/grain-dissolve/GrainDissolve.tsx +222 -222
  122. package/lib/motion/shotcraft/upstream/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx +223 -223
  123. package/lib/motion/shotcraft/upstream/demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx +217 -217
  124. package/lib/motion/shotcraft/upstream/demos/outro/outro-group-photo-launch/OutroGroupPhotoLaunch.tsx +343 -343
  125. package/lib/motion/shotcraft/upstream/demos/outro/ui-strip-away-outro/UiStripAwayOutro.tsx +357 -357
  126. package/lib/motion/shotcraft/upstream/demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx +187 -187
  127. package/lib/motion/shotcraft/upstream/demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.tsx +333 -333
  128. package/lib/motion/shotcraft/upstream/demos/rhythm/beat-cut-moves/PaparazziFlash.tsx +274 -274
  129. package/lib/motion/shotcraft/upstream/demos/rhythm/beat-step-list-theme-cycle/BeatStepListThemeCycle.tsx +270 -270
  130. package/lib/motion/shotcraft/upstream/demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx +430 -430
  131. package/lib/motion/shotcraft/upstream/demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx +252 -252
  132. package/lib/motion/shotcraft/upstream/demos/rhythm/rhythm-interrupt-moves/JumpCutPunchIn.tsx +106 -106
  133. package/lib/motion/shotcraft/upstream/demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx +288 -288
  134. package/lib/motion/shotcraft/upstream/demos/rhythm/speed-ramp-freeze/FreezeAnnotateReal.tsx +362 -362
  135. package/lib/motion/shotcraft/upstream/demos/rhythm/trailer-grammar-moves/TrailerBumper.tsx +168 -168
  136. package/lib/motion/shotcraft/upstream/demos/transition/bottom-push-stack-wipe/BottomPushStackWipe.tsx +310 -310
  137. package/lib/motion/shotcraft/upstream/demos/transition/card-flip-reveal/CardFlipReveal.tsx +261 -261
  138. package/lib/motion/shotcraft/upstream/demos/transition/card-flock-tumble/CardFlockTumble.tsx +459 -459
  139. package/lib/motion/shotcraft/upstream/demos/transition/circle-match-iris/CircleMatchIris.tsx +294 -294
  140. package/lib/motion/shotcraft/upstream/demos/transition/gradient-transition/GradientTransition.tsx +161 -161
  141. package/lib/motion/shotcraft/upstream/demos/transition/line-carry-transition/LineCarryTransition.tsx +248 -248
  142. package/lib/motion/shotcraft/upstream/demos/transition/mosaic-reframe/MosaicReframe.tsx +359 -359
  143. package/lib/motion/shotcraft/upstream/demos/transition/page-turn-transitions/BarnDoorSplit.tsx +227 -227
  144. package/lib/motion/shotcraft/upstream/demos/transition/print-texture-transitions/InkBleedReveal.tsx +162 -162
  145. package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/PortalWipeV2.tsx +248 -248
  146. package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/WhipBrakeReal.tsx +186 -186
  147. package/lib/motion/shotcraft/upstream/demos/transition/tear-streak-transitions/GlitchDisplace.tsx +355 -355
  148. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/InvisibleCut.tsx +272 -272
  149. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/LightLeakBurn.tsx +262 -262
  150. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/VersusSlam.tsx +217 -217
  151. package/lib/motion/shotcraft/upstream/demos/transition/transition-travel/LetterformZoom.tsx +285 -285
  152. package/lib/motion/shotcraft/upstream/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx +205 -205
  153. package/lib/motion/shotcraft/upstream/demos/transition/wipe-transitions/BlindsSlice.tsx +178 -178
  154. package/lib/motion/shotcraft/upstream/demos/typography/blur-slide/BlurSlide.tsx +147 -147
  155. package/lib/motion/shotcraft/upstream/demos/typography/brace-expand/BraceExpand.tsx +143 -143
  156. package/lib/motion/shotcraft/upstream/demos/typography/brand-ink-open/BrandInkOpen.tsx +134 -134
  157. package/lib/motion/shotcraft/upstream/demos/typography/countdown-arc-scatter/CountdownArcScatter.tsx +217 -217
  158. package/lib/motion/shotcraft/upstream/demos/typography/flying-words/FlyingWords.tsx +198 -198
  159. package/lib/motion/shotcraft/upstream/demos/typography/glitch-cycle/GlitchCycle.tsx +221 -221
  160. package/lib/motion/shotcraft/upstream/demos/typography/gradient-word-sweep/GradientWordSweep.tsx +312 -312
  161. package/lib/motion/shotcraft/upstream/demos/typography/lead-word-zoom-assemble/LeadWordZoomAssemble.tsx +261 -261
  162. package/lib/motion/shotcraft/upstream/demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx +121 -121
  163. package/lib/motion/shotcraft/upstream/demos/typography/outline-word-fill/OutlineWordFill.tsx +153 -153
  164. package/lib/motion/shotcraft/upstream/demos/typography/paper-title-card/PaperTitleCard.tsx +179 -179
  165. package/lib/motion/shotcraft/upstream/demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx +140 -140
  166. package/lib/motion/shotcraft/upstream/demos/typography/pill-slot-cycle/PillSlotCycle.tsx +309 -309
  167. package/lib/motion/shotcraft/upstream/demos/typography/text-column-converge/TextColumnConverge.tsx +191 -191
  168. package/lib/motion/shotcraft/upstream/demos/typography/title-demote-to-label/TitleDemoteToLabel.tsx +292 -292
  169. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx +135 -135
  170. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/SplitTextStagger.tsx +124 -124
  171. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/TextOnPath.tsx +255 -255
  172. package/lib/motion/shotcraft/upstream/demos/typography/type-entrance-moves/LetterDropPhysics.tsx +173 -173
  173. package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/FontWeightPump.tsx +225 -225
  174. package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/KaraokeFillSync.tsx +141 -141
  175. package/lib/motion/shotcraft/upstream/demos/typography/typewriter-moves/TypewriterErrorRetype.tsx +137 -137
  176. package/lib/motion/shotcraft/upstream/demos/typography/vertical-word-roll-blur-cycle/VerticalWordRollBlurCycle.tsx +147 -147
  177. package/lib/motion/shotcraft/upstream/demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx +409 -409
  178. package/lib/motion/shotcraft/upstream/demos/typography/word-relay-geometry/WordRelayGeometry.tsx +280 -280
  179. package/lib/motion/shotcraft/upstream/demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx +271 -271
  180. package/lib/motion/shotcraft/upstream/demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx +385 -385
  181. package/lib/motion/shotcraft/upstream/demos/ui-entrance/card-stack/CardStack.tsx +312 -312
  182. package/lib/motion/shotcraft/upstream/demos/ui-entrance/carousel-3d/Carousel3D.tsx +303 -303
  183. package/lib/motion/shotcraft/upstream/demos/ui-entrance/clipcard-looping/ClipCardLooping.tsx +77 -77
  184. package/lib/motion/shotcraft/upstream/demos/ui-entrance/cloner-depth-echo/ClonerDepthEcho.tsx +311 -311
  185. package/lib/motion/shotcraft/upstream/demos/ui-entrance/deck-deal-flyin/DeckDealFlyin.tsx +307 -307
  186. package/lib/motion/shotcraft/upstream/demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx +349 -349
  187. package/lib/motion/shotcraft/upstream/demos/ui-entrance/document-typewriter-reveal/DocumentTypewriterReveal.tsx +255 -255
  188. package/lib/motion/shotcraft/upstream/demos/ui-entrance/draw-svg-trace/DrawSvgTrace.tsx +244 -244
  189. package/lib/motion/shotcraft/upstream/demos/ui-entrance/element-body-moves/ContactShadowLift.tsx +217 -217
  190. package/lib/motion/shotcraft/upstream/demos/ui-entrance/integration-hub-map/IntegrationHubMap.tsx +652 -652
  191. package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-reveal/ListReveal.tsx +153 -153
  192. package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-stack-press/ListStackPress.tsx +238 -238
  193. package/lib/motion/shotcraft/upstream/demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.tsx +324 -324
  194. package/lib/motion/shotcraft/upstream/demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx +354 -354
  195. package/lib/motion/shotcraft/upstream/demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx +101 -101
  196. package/lib/motion/shotcraft/upstream/demos/ui-entrance/page-waterfall-wall/VerticalTicker.tsx +129 -129
  197. package/lib/motion/shotcraft/upstream/demos/ui-entrance/product-card-progressive-assemble/ProductCardProgressiveAssemble.tsx +297 -297
  198. package/lib/motion/shotcraft/upstream/demos/ui-entrance/radial-wave/RadialWave.tsx +57 -57
  199. package/lib/motion/shotcraft/upstream/demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx +155 -155
  200. package/lib/motion/shotcraft/upstream/demos/ui-entrance/row-embed/RowEmbed.tsx +175 -175
  201. package/lib/motion/shotcraft/upstream/demos/ui-entrance/value-stagger-gradient/ValueStaggerGradient.tsx +153 -153
  202. package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx +146 -146
  203. package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.tsx +226 -226
  204. package/lib/motion/shotcraft/upstream/gallery/api/library.json +1 -1
  205. package/lib/motion/shotcraft/upstream/references/aesthetic-rules.md +193 -193
  206. package/lib/motion/shotcraft/upstream/references/final-review.md +121 -121
  207. package/lib/motion/shotcraft/upstream/references/guided-free-creation.md +199 -199
  208. package/lib/motion/shotcraft/upstream/references/jianying-export.md +183 -183
  209. package/lib/motion/shotcraft/upstream/references/music-beat-sync.md +257 -257
  210. package/lib/motion/shotcraft/upstream/references/pipeline.md +382 -382
  211. package/lib/motion/shotcraft/upstream/references/publish-upload-post.md +111 -111
  212. package/lib/motion/shotcraft/upstream/references/sequences/promo-energy-arc.md +50 -50
  213. package/lib/motion/shotcraft/upstream/references/sfx-sourcing.md +95 -95
  214. package/lib/motion/shotcraft/upstream/references/shots/camera/basic-3d-scene.md +41 -41
  215. package/lib/motion/shotcraft/upstream/references/shots/camera/crash-zoom-punch.md +52 -52
  216. package/lib/motion/shotcraft/upstream/references/shots/camera/cursor-flyover.md +39 -39
  217. package/lib/motion/shotcraft/upstream/references/shots/camera/depth-layer-moves.md +39 -39
  218. package/lib/motion/shotcraft/upstream/references/shots/camera/graze-face-tour.md +57 -57
  219. package/lib/motion/shotcraft/upstream/references/shots/camera/overhead-camera-moves.md +51 -51
  220. package/lib/motion/shotcraft/upstream/references/shots/camera/space-camera-moves.md +46 -46
  221. package/lib/motion/shotcraft/upstream/references/shots/camera/steep-tilt-glide.md +52 -52
  222. package/lib/motion/shotcraft/upstream/references/shots/camera/tension-camera-moves.md +43 -43
  223. package/lib/motion/shotcraft/upstream/references/shots/camera/terminal-3d.md +42 -42
  224. package/lib/motion/shotcraft/upstream/references/shots/data/before-after-slider-scrub.md +48 -48
  225. package/lib/motion/shotcraft/upstream/references/shots/data/chart-live-moves.md +52 -52
  226. package/lib/motion/shotcraft/upstream/references/shots/data/gauge-readout-moves.md +45 -45
  227. package/lib/motion/shotcraft/upstream/references/shots/data/scroll-brake-moves.md +46 -46
  228. package/lib/motion/shotcraft/upstream/references/shots/data/timeline-travel.md +44 -44
  229. package/lib/motion/shotcraft/upstream/references/shots/effects/assemble-then-type-flyin.md +63 -63
  230. package/lib/motion/shotcraft/upstream/references/shots/effects/aurora-bloom-bg-flip.md +54 -54
  231. package/lib/motion/shotcraft/upstream/references/shots/effects/brand-frame-snap.md +58 -58
  232. package/lib/motion/shotcraft/upstream/references/shots/effects/fui-hud-moves.md +35 -35
  233. package/lib/motion/shotcraft/upstream/references/shots/effects/glow-flyline-moves.md +53 -53
  234. package/lib/motion/shotcraft/upstream/references/shots/effects/icon-performance-moves.md +42 -42
  235. package/lib/motion/shotcraft/upstream/references/shots/effects/impact-feedback.md +50 -50
  236. package/lib/motion/shotcraft/upstream/references/shots/effects/light-play-moves.md +46 -46
  237. package/lib/motion/shotcraft/upstream/references/shots/effects/radial-ripple-phone-chips.md +56 -56
  238. package/lib/motion/shotcraft/upstream/references/shots/effects/riso-print-hits.md +49 -49
  239. package/lib/motion/shotcraft/upstream/references/shots/effects/scan-bracket-sweep.md +50 -50
  240. package/lib/motion/shotcraft/upstream/references/shots/effects/scanline-annotate-focus.md +53 -53
  241. package/lib/motion/shotcraft/upstream/references/shots/effects/scanline-assemble-flyin.md +53 -53
  242. package/lib/motion/shotcraft/upstream/references/shots/effects/slam-entrance-moves.md +55 -55
  243. package/lib/motion/shotcraft/upstream/references/shots/effects/spotlight-sweep-moves.md +52 -52
  244. package/lib/motion/shotcraft/upstream/references/shots/interaction/autolayout-gap-dial.md +60 -60
  245. package/lib/motion/shotcraft/upstream/references/shots/interaction/canvas-materialize-moves.md +57 -57
  246. package/lib/motion/shotcraft/upstream/references/shots/interaction/chip-grid-single-select-blackout.md +51 -51
  247. package/lib/motion/shotcraft/upstream/references/shots/interaction/collab-cursor-moves.md +41 -41
  248. package/lib/motion/shotcraft/upstream/references/shots/interaction/glass-pill-dictation-typing.md +53 -53
  249. package/lib/motion/shotcraft/upstream/references/shots/interaction/hashtag-to-pill-materialize.md +60 -60
  250. package/lib/motion/shotcraft/upstream/references/shots/interaction/picker-carousel-feature-cycle.md +55 -55
  251. package/lib/motion/shotcraft/upstream/references/shots/interaction/segmented-thumb-hero.md +57 -57
  252. package/lib/motion/shotcraft/upstream/references/shots/interaction/theme-switch-moves.md +47 -47
  253. package/lib/motion/shotcraft/upstream/references/shots/interaction/type-and-filter.md +37 -37
  254. package/lib/motion/shotcraft/upstream/references/shots/interaction/voice-waveform-live.md +54 -54
  255. package/lib/motion/shotcraft/upstream/references/shots/opening/brand-ink-open.md +36 -36
  256. package/lib/motion/shotcraft/upstream/references/shots/opening/crane-rise-reveal.md +56 -56
  257. package/lib/motion/shotcraft/upstream/references/shots/opening/dataviz-landscape-open.md +56 -56
  258. package/lib/motion/shotcraft/upstream/references/shots/opening/fracture.md +40 -40
  259. package/lib/motion/shotcraft/upstream/references/shots/opening/icon-field-colorize.md +60 -60
  260. package/lib/motion/shotcraft/upstream/references/shots/opening/letterspace-materialize.md +57 -57
  261. package/lib/motion/shotcraft/upstream/references/shots/opening/magician-card-flourish.md +73 -73
  262. package/lib/motion/shotcraft/upstream/references/shots/opening/orbit-ring-title-open.md +87 -87
  263. package/lib/motion/shotcraft/upstream/references/shots/opening/spotlight-hero-card.md +55 -55
  264. package/lib/motion/shotcraft/upstream/references/shots/opening/stroke-segment-build.md +50 -50
  265. package/lib/motion/shotcraft/upstream/references/shots/opening/text-as-mask.md +59 -59
  266. package/lib/motion/shotcraft/upstream/references/shots/outro/grain-dissolve.md +38 -38
  267. package/lib/motion/shotcraft/upstream/references/shots/outro/logo-shrink-wordmark-lockup.md +38 -38
  268. package/lib/motion/shotcraft/upstream/references/shots/outro/neon-triple-marquee.md +59 -59
  269. package/lib/motion/shotcraft/upstream/references/shots/outro/outro-group-photo-launch.md +39 -39
  270. package/lib/motion/shotcraft/upstream/references/shots/outro/ui-strip-away-outro.md +61 -61
  271. package/lib/motion/shotcraft/upstream/references/shots/outro/ui-to-brand-morph.md +52 -52
  272. package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-cut-moves.md +50 -50
  273. package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-step-list-theme-cycle.md +66 -66
  274. package/lib/motion/shotcraft/upstream/references/shots/rhythm/panel-grid-moves.md +43 -43
  275. package/lib/motion/shotcraft/upstream/references/shots/rhythm/quad-split-parallel-scenes.md +38 -38
  276. package/lib/motion/shotcraft/upstream/references/shots/rhythm/rhythm-interrupt-moves.md +38 -38
  277. package/lib/motion/shotcraft/upstream/references/shots/rhythm/sakuga-timing-shift.md +56 -56
  278. package/lib/motion/shotcraft/upstream/references/shots/rhythm/speed-ramp-freeze.md +44 -44
  279. package/lib/motion/shotcraft/upstream/references/shots/rhythm/trailer-grammar-moves.md +38 -38
  280. package/lib/motion/shotcraft/upstream/references/shots/transition/bottom-push-stack-wipe.md +63 -63
  281. package/lib/motion/shotcraft/upstream/references/shots/transition/card-flip-reveal.md +57 -57
  282. package/lib/motion/shotcraft/upstream/references/shots/transition/card-flock-tumble.md +63 -63
  283. package/lib/motion/shotcraft/upstream/references/shots/transition/circle-match-iris.md +58 -58
  284. package/lib/motion/shotcraft/upstream/references/shots/transition/gradient-transition.md +45 -45
  285. package/lib/motion/shotcraft/upstream/references/shots/transition/line-carry-transition.md +55 -55
  286. package/lib/motion/shotcraft/upstream/references/shots/transition/mosaic-reframe.md +49 -49
  287. package/lib/motion/shotcraft/upstream/references/shots/transition/page-turn-transitions.md +42 -42
  288. package/lib/motion/shotcraft/upstream/references/shots/transition/print-texture-transitions.md +42 -42
  289. package/lib/motion/shotcraft/upstream/references/shots/transition/shot-transitions.md +45 -45
  290. package/lib/motion/shotcraft/upstream/references/shots/transition/tear-streak-transitions.md +48 -48
  291. package/lib/motion/shotcraft/upstream/references/shots/transition/transition-hidden-cut.md +55 -55
  292. package/lib/motion/shotcraft/upstream/references/shots/transition/transition-travel.md +43 -43
  293. package/lib/motion/shotcraft/upstream/references/shots/transition/white-flash-logo-simplify-cut.md +41 -41
  294. package/lib/motion/shotcraft/upstream/references/shots/transition/wipe-transitions.md +42 -42
  295. package/lib/motion/shotcraft/upstream/references/shots/typography/blur-slide.md +59 -59
  296. package/lib/motion/shotcraft/upstream/references/shots/typography/brace-expand.md +55 -55
  297. package/lib/motion/shotcraft/upstream/references/shots/typography/countdown-arc-scatter.md +65 -65
  298. package/lib/motion/shotcraft/upstream/references/shots/typography/document-typewriter-reveal.md +42 -42
  299. package/lib/motion/shotcraft/upstream/references/shots/typography/flying-words.md +64 -64
  300. package/lib/motion/shotcraft/upstream/references/shots/typography/glitch-cycle.md +64 -64
  301. package/lib/motion/shotcraft/upstream/references/shots/typography/gradient-word-sweep.md +54 -54
  302. package/lib/motion/shotcraft/upstream/references/shots/typography/lead-word-zoom-assemble.md +91 -91
  303. package/lib/motion/shotcraft/upstream/references/shots/typography/marker-underline-title.md +51 -51
  304. package/lib/motion/shotcraft/upstream/references/shots/typography/outline-word-fill.md +66 -66
  305. package/lib/motion/shotcraft/upstream/references/shots/typography/paper-title-card.md +38 -38
  306. package/lib/motion/shotcraft/upstream/references/shots/typography/pill-chip-slot-cycle-handled.md +66 -66
  307. package/lib/motion/shotcraft/upstream/references/shots/typography/pill-slot-cycle.md +58 -58
  308. package/lib/motion/shotcraft/upstream/references/shots/typography/text-column-converge.md +61 -61
  309. package/lib/motion/shotcraft/upstream/references/shots/typography/title-demote-to-label.md +64 -64
  310. package/lib/motion/shotcraft/upstream/references/shots/typography/type-assembly-moves.md +45 -45
  311. package/lib/motion/shotcraft/upstream/references/shots/typography/type-entrance-moves.md +41 -41
  312. package/lib/motion/shotcraft/upstream/references/shots/typography/type-rhythm-sync.md +51 -51
  313. package/lib/motion/shotcraft/upstream/references/shots/typography/typewriter-moves.md +42 -42
  314. package/lib/motion/shotcraft/upstream/references/shots/typography/vertical-word-roll-blur-cycle.md +63 -63
  315. package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-filmstrip.md +57 -57
  316. package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-geometry.md +75 -75
  317. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/avatar-bracket-carousel.md +59 -59
  318. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/bezier-source-converge-merge.md +67 -67
  319. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/card-stack.md +60 -60
  320. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/carousel-3d.md +66 -66
  321. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/cloner-depth-echo.md +40 -40
  322. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/deck-deal-flyin.md +45 -45
  323. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/doc-park-left-pill-deal.md +62 -62
  324. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/draw-svg-trace.md +55 -55
  325. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/element-body-moves.md +37 -37
  326. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/integration-hub-map.md +55 -55
  327. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/list-reveal.md +50 -50
  328. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/list-stack-press.md +43 -43
  329. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/neon-frame-forerun.md +55 -55
  330. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/neon-frame-orbit-drop.md +51 -51
  331. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/page-waterfall-wall.md +51 -51
  332. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/product-card-progressive-assemble.md +56 -56
  333. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/radial-wave.md +49 -49
  334. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/research-card-stack-scroll.md +57 -57
  335. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/row-embed.md +36 -36
  336. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/value-stagger-gradient.md +64 -64
  337. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/wall-reveal-moves.md +47 -47
  338. package/lib/motion/shotcraft/upstream/references/sound-design.md +170 -170
  339. package/lib/motion/shotcraft/upstream/references/workbench.md +157 -157
  340. package/lib/motion/shotcraft/upstream/template/TEMPLATE.md +103 -103
  341. package/lib/motion/shotcraft/upstream/template/THEMES.md +44 -44
  342. package/lib/motion/shotcraft/upstream/template/package.json +20 -20
  343. package/lib/motion/shotcraft/upstream/template/remotion.config.ts +6 -6
  344. package/lib/motion/shotcraft/upstream/template/src/Root.tsx +17 -17
  345. package/lib/motion/shotcraft/upstream/template/src/aifl/Caption.tsx +65 -65
  346. package/lib/motion/shotcraft/upstream/template/src/aifl/DigitRoll.tsx +48 -48
  347. package/lib/motion/shotcraft/upstream/template/src/aifl/FlashCut.tsx +24 -24
  348. package/lib/motion/shotcraft/upstream/template/src/aifl/Main.tsx +192 -192
  349. package/lib/motion/shotcraft/upstream/template/src/aifl/PaperTitleCard.tsx +111 -111
  350. package/lib/motion/shotcraft/upstream/template/src/aifl/live/PageCam.tsx +150 -150
  351. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneDetail.tsx +158 -158
  352. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneFlyIn.tsx +468 -468
  353. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOpen.tsx +552 -552
  354. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOutroLive.tsx +411 -411
  355. package/lib/motion/shotcraft/upstream/template/src/aifl/live/ScenePapers.tsx +200 -200
  356. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneWbr.tsx +324 -324
  357. package/lib/motion/shotcraft/upstream/template/src/aifl/live-layout.json +388 -388
  358. package/lib/motion/shotcraft/upstream/template/src/index.ts +4 -4
  359. package/lib/motion/shotcraft/upstream/template/src/themes/ThemedFilm.tsx +7 -7
  360. package/lib/motion/shotcraft/upstream/template/src/themes/manifest.tsx +68 -68
  361. package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.json +1 -1
  362. package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.ts +24 -24
  363. package/lib/motion/shotcraft/upstream/template/src/themes/palettes.json +74 -74
  364. package/lib/motion/shotcraft/upstream/template/src/themes/visual-theme.tsx +91 -91
  365. package/lib/motion/shotcraft/upstream/template/src/workbench.ts +213 -213
  366. package/lib/motion/shotcraft/upstream/template/tsconfig.json +15 -15
  367. package/lib/motion/style-frames.js +306 -306
  368. package/lib/motion/sync.js +214 -214
  369. package/lib/motion-library.js +1 -1
  370. package/lib/motion-project.js +105 -105
  371. package/lib/motion-render-worker.js +174 -174
  372. package/lib/routing/router.js +222 -222
  373. package/lib/routing/vendor/README.md +96 -96
  374. package/lib/routing/vendor/libavoid-routing.js +753 -753
  375. package/lib/routing/vendor/libavoid.min.js +59 -59
  376. package/lib/svg-export.js +1344 -0
  377. package/lib/video-trace-pool.js +128 -128
  378. package/package.json +3 -2
  379. package/LICENSE +0 -4175
@@ -1,66 +1,66 @@
1
- ---
2
- name: outline-word-fill
3
- 一句话: 空心词(细暖灰描边、500 字重)从 3.2 倍急缓收缩落位,虚线大圆随后从 2.8 倍收到字周围并缓慢自转,左右水平虚线从画框边缘内伸;描边先微微增亮,实心白热字在一帧内硬切点亮,一闪辉光即定格
4
- 适用: 单词式利益点/口号的重锤一拍;节奏卡点上的"钉子"镜;深底品牌片的强调帧
5
- 时长: 约 3.0s(90f@30fps,短促单拍 + 36f 落定)
6
- 能量: 高(3.2 倍收缩 + 瞬时点亮,短时高冲击)
7
- ---
8
-
9
- ## 意图
10
- 一个词要打成钉子,靠的不是慢慢淡入而是**两次落定**:先是巨大空心字
11
- 急速收缩到位(这是尺寸的落定),再是描边在一帧内变实心白(这是质感的
12
- 落定)。中间那 1.5s 的虚线圆收缩与水平虚线内伸是"瞄准"过程——技术
13
- 制图语汇,让点亮那一下读作"确认"。填充**必须是瞬时**的:慢扫填充会把
14
- 钉子变成缓慢的美化动画。
15
-
16
- ## 动效核心
17
- (demo 以 1920×1080 原生坐标、帧号标定;look = ember 暖黑 · 橙)
18
- - 空心字急缓收缩:`scale = mix(3.2, 1, ramp(f, 2, 11, EASE.snappy))`,2–8f 淡入——
19
- **收缩窗只 11f**,快到几乎是一次冲击;按 scale 速度给瞬时失焦(停稳归零)
20
- - 双层字:`outline`(`color:transparent` + `-webkit-text-stroke:2px` 暖灰)与 `solid`
21
- (白热 #fff5ee,初始 opacity 0)叠放,220px / **500 字重** Helvetica Neue
22
- (中等字重,不是标题的 800——空心字太粗会糊成块)
23
- - 虚线大圆(r=410、`dasharray 22 18`)+ 内圈 72 格刻度环(每 30° 一根长刻度,反向慢转)+ 四个套准刻度:
24
- 8–18f 淡入,`scale 2.8 → 1` 在 8–52f 慢收(EASE.out,**44f,全片最慢的一条曲线**);主圈 0.22°/f 自转,
25
- 点亮那一刻刹停("锁定"),内圈继续慢转让 hold 段画面仍在呼吸
26
- - 左右水平虚线(`dasharray 14 12`):28–46f 从画框边缘内伸到圆边外 28px,线端带准星点;
27
- 线上方 mono 读数「BEFORE 1 week」/「AFTER 4 hrs」——把"更快"讲成一组前后对比数据(手 K 一周 vs video-shotcraft 一下午出片)
28
- - 描边预热:44–53f 暖灰 → 亮橙白并带一点外发光,给硬切一个"充能"前奏
29
- - **瞬时填充**:第 54 帧 `lit = frame >= 54 ? 1 : 0`,solid 与 outline 透明度硬切,不存在中间态;
30
- 同帧圆 / 水平线锁定成橙色、右侧读数变橙
31
- - 一闪即逝的辉光:`flash = lit · (1 − ramp(f, 54, 8))`,白 14px + 橙 60px 两层 text-shadow,8f 衰完后
32
- 只留极弱橙晕;一道冲击环从圆边外扩 160px、14f 消散(只此一次);舞台主光同步脉冲一下
33
- - 落定:56–70f 圆内眉题(小号 video-shotcraft 标志 + 全小写 mono 字标)/ 副行(40px,"One prompt to a finished promo.")升起,70–90f hold,全程极缓推进 1→1.015
34
-
35
- ## 参数表
36
- | 参数 | 典型值 | 调节手感 |
37
- |------|--------|----------|
38
- | 收缩 | `scale 3.2 → 1`,窗 11f,snappy | 3.2 倍是"从脸前退开"的量;<2 倍读作普通缩放;窗 >20f 就成了缓慢 zoom,冲击全失 |
39
- | 字重字号 | 220px / **500**,占画宽约三分之一 | 空心字上 700+ 会让细描边包住一大块空白,读作气球字;500 是空心字的甜点 |
40
- | 描边 | 2px 暖灰(138,118,104),点亮前预热到亮橙白 | 细描边是"制图"语汇;>4px 变涂鸦;预热那一档删了硬切显得没由来 |
41
- | 虚线圆 | r=410、`dash 22 18`、scale 2.8→1(44f)、0.22°/f 自转,点亮时刹停 | 44f 慢收缩是全片的"呼吸",与 11f 的字收缩形成快慢对比;窗压到 20f 两者撞在一起 |
42
- | 水平虚线 | `dash 14 12`,28–46f 内伸到圆边外 28px | 内伸终点要停在圆边外(不进圆内);伸满全宽读作十字准星,过头了 |
43
- | 瞬时填充 | 第 54 帧硬切(按帧判断,不用归一化时间窗) | **这一下是全卡的目的**:任何形式的慢扫(>3f)都会把钉子降级成美化动画 |
44
- | 辉光 | 白 14px + 橙 60px,8f 衰完;冲击环 14f | 一闪即逝才像"点亮";持续辉光读作发光字体,质感立刻廉价 |
45
- | 时长 | 90f(3.0s):点亮后 hold 36f | 点亮后 <20f 观众来不及读副行与读数 |
46
-
47
- ## 已知坑
48
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
49
- 首次实战须以真实素材回验
50
- - **只适合单个短词(demo `Faster`,6 字母)**:字号 220 与虚线圆 r=410 是写死的
51
- 一组坐标,字一长就顶穿圆、水平虚线内伸终点也会压到字上——换成
52
- 两个词或中文四字须同步调 `SIZE` / `R` / 内伸终点三处
53
- - `-webkit-text-stroke` 是前缀属性,Chromium/WebKit 才生效;Firefox 下
54
- outline 层是全透明(词直到点亮帧才突然出现)。Remotion 走 Chromium 无碍
55
- - 瞬时填充必须按**帧**硬切(demo `frame >= POP`)。早期版本用归一化时间窗 `seg(0.742, 0.762)`,
56
- 片长一拉长这个窗就会变成几帧的可见渐变——改时长时只挪 `POP` 帧号
57
- - 深底专用:暖黑底 + 细描边 + 辉光是效果的全部;浅底上空心字
58
- 几乎不可见,需整套重配
59
- - 声音强依赖:点亮那一帧必须有一记短促重音(金属/开关/低频撞击),
60
- 这是本卡"钉子"感的一半,配法纪律见 sound-design.md;与
61
- word-relay-geometry 分工:那卡是三词接力(本卡是它第一段的独立化 +
62
- 升级版),同片二者不并置
63
-
64
- ## 参考实现
65
- demos/typography/outline-word-fill/
66
- (OutlineWordFill.tsx)
1
+ ---
2
+ name: outline-word-fill
3
+ 一句话: 空心词(细暖灰描边、500 字重)从 3.2 倍急缓收缩落位,虚线大圆随后从 2.8 倍收到字周围并缓慢自转,左右水平虚线从画框边缘内伸;描边先微微增亮,实心白热字在一帧内硬切点亮,一闪辉光即定格
4
+ 适用: 单词式利益点/口号的重锤一拍;节奏卡点上的"钉子"镜;深底品牌片的强调帧
5
+ 时长: 约 3.0s(90f@30fps,短促单拍 + 36f 落定)
6
+ 能量: 高(3.2 倍收缩 + 瞬时点亮,短时高冲击)
7
+ ---
8
+
9
+ ## 意图
10
+ 一个词要打成钉子,靠的不是慢慢淡入而是**两次落定**:先是巨大空心字
11
+ 急速收缩到位(这是尺寸的落定),再是描边在一帧内变实心白(这是质感的
12
+ 落定)。中间那 1.5s 的虚线圆收缩与水平虚线内伸是"瞄准"过程——技术
13
+ 制图语汇,让点亮那一下读作"确认"。填充**必须是瞬时**的:慢扫填充会把
14
+ 钉子变成缓慢的美化动画。
15
+
16
+ ## 动效核心
17
+ (demo 以 1920×1080 原生坐标、帧号标定;look = ember 暖黑 · 橙)
18
+ - 空心字急缓收缩:`scale = mix(3.2, 1, ramp(f, 2, 11, EASE.snappy))`,2–8f 淡入——
19
+ **收缩窗只 11f**,快到几乎是一次冲击;按 scale 速度给瞬时失焦(停稳归零)
20
+ - 双层字:`outline`(`color:transparent` + `-webkit-text-stroke:2px` 暖灰)与 `solid`
21
+ (白热 #fff5ee,初始 opacity 0)叠放,220px / **500 字重** Helvetica Neue
22
+ (中等字重,不是标题的 800——空心字太粗会糊成块)
23
+ - 虚线大圆(r=410、`dasharray 22 18`)+ 内圈 72 格刻度环(每 30° 一根长刻度,反向慢转)+ 四个套准刻度:
24
+ 8–18f 淡入,`scale 2.8 → 1` 在 8–52f 慢收(EASE.out,**44f,全片最慢的一条曲线**);主圈 0.22°/f 自转,
25
+ 点亮那一刻刹停("锁定"),内圈继续慢转让 hold 段画面仍在呼吸
26
+ - 左右水平虚线(`dasharray 14 12`):28–46f 从画框边缘内伸到圆边外 28px,线端带准星点;
27
+ 线上方 mono 读数「BEFORE 1 week」/「AFTER 4 hrs」——把"更快"讲成一组前后对比数据(手 K 一周 vs video-shotcraft 一下午出片)
28
+ - 描边预热:44–53f 暖灰 → 亮橙白并带一点外发光,给硬切一个"充能"前奏
29
+ - **瞬时填充**:第 54 帧 `lit = frame >= 54 ? 1 : 0`,solid 与 outline 透明度硬切,不存在中间态;
30
+ 同帧圆 / 水平线锁定成橙色、右侧读数变橙
31
+ - 一闪即逝的辉光:`flash = lit · (1 − ramp(f, 54, 8))`,白 14px + 橙 60px 两层 text-shadow,8f 衰完后
32
+ 只留极弱橙晕;一道冲击环从圆边外扩 160px、14f 消散(只此一次);舞台主光同步脉冲一下
33
+ - 落定:56–70f 圆内眉题(小号 video-shotcraft 标志 + 全小写 mono 字标)/ 副行(40px,"One prompt to a finished promo.")升起,70–90f hold,全程极缓推进 1→1.015
34
+
35
+ ## 参数表
36
+ | 参数 | 典型值 | 调节手感 |
37
+ |------|--------|----------|
38
+ | 收缩 | `scale 3.2 → 1`,窗 11f,snappy | 3.2 倍是"从脸前退开"的量;<2 倍读作普通缩放;窗 >20f 就成了缓慢 zoom,冲击全失 |
39
+ | 字重字号 | 220px / **500**,占画宽约三分之一 | 空心字上 700+ 会让细描边包住一大块空白,读作气球字;500 是空心字的甜点 |
40
+ | 描边 | 2px 暖灰(138,118,104),点亮前预热到亮橙白 | 细描边是"制图"语汇;>4px 变涂鸦;预热那一档删了硬切显得没由来 |
41
+ | 虚线圆 | r=410、`dash 22 18`、scale 2.8→1(44f)、0.22°/f 自转,点亮时刹停 | 44f 慢收缩是全片的"呼吸",与 11f 的字收缩形成快慢对比;窗压到 20f 两者撞在一起 |
42
+ | 水平虚线 | `dash 14 12`,28–46f 内伸到圆边外 28px | 内伸终点要停在圆边外(不进圆内);伸满全宽读作十字准星,过头了 |
43
+ | 瞬时填充 | 第 54 帧硬切(按帧判断,不用归一化时间窗) | **这一下是全卡的目的**:任何形式的慢扫(>3f)都会把钉子降级成美化动画 |
44
+ | 辉光 | 白 14px + 橙 60px,8f 衰完;冲击环 14f | 一闪即逝才像"点亮";持续辉光读作发光字体,质感立刻廉价 |
45
+ | 时长 | 90f(3.0s):点亮后 hold 36f | 点亮后 <20f 观众来不及读副行与读数 |
46
+
47
+ ## 已知坑
48
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
49
+ 首次实战须以真实素材回验
50
+ - **只适合单个短词(demo `Faster`,6 字母)**:字号 220 与虚线圆 r=410 是写死的
51
+ 一组坐标,字一长就顶穿圆、水平虚线内伸终点也会压到字上——换成
52
+ 两个词或中文四字须同步调 `SIZE` / `R` / 内伸终点三处
53
+ - `-webkit-text-stroke` 是前缀属性,Chromium/WebKit 才生效;Firefox 下
54
+ outline 层是全透明(词直到点亮帧才突然出现)。Remotion 走 Chromium 无碍
55
+ - 瞬时填充必须按**帧**硬切(demo `frame >= POP`)。早期版本用归一化时间窗 `seg(0.742, 0.762)`,
56
+ 片长一拉长这个窗就会变成几帧的可见渐变——改时长时只挪 `POP` 帧号
57
+ - 深底专用:暖黑底 + 细描边 + 辉光是效果的全部;浅底上空心字
58
+ 几乎不可见,需整套重配
59
+ - 声音强依赖:点亮那一帧必须有一记短促重音(金属/开关/低频撞击),
60
+ 这是本卡"钉子"感的一半,配法纪律见 sound-design.md;与
61
+ word-relay-geometry 分工:那卡是三词接力(本卡是它第一段的独立化 +
62
+ 升级版),同片二者不并置
63
+
64
+ ## 参考实现
65
+ demos/typography/outline-word-fill/
66
+ (OutlineWordFill.tsx)
@@ -1,38 +1,38 @@
1
- ---
2
- name: paper-title-card
3
- 一句话: 一句话逐词压印上纸、一个词标强调色斜体、短划线收束
4
- 适用: 章节转场/价值主张字卡;重要功能出场前的引导卡;全片呼吸位
5
- 时长: 1.7–1.8s(50–55f)
6
- 能量: 低(呼吸位,隔开两段高能镜头)
7
- 标签: transition、rhythm
8
- ---
9
-
10
- ## 意图
11
- 在两段产品画面之间给观众一句话的喘息:说清"接下来看什么、它值什么"。letterpress 压印质感让字卡与纸墨风格的产品画面同属一个世界。
12
-
13
- ## 动效核心
14
- - 单句文案逐词入场:scale 从大压到 1 + blur→0 + opacity(letterpress 压印配方);demo 文案为 video-shotcraft 口号
15
- "Direct the film. / Let the agent shoot it."(强调词 *shoot*),词表可标 `br` 强制换行,两行长度接近、不留孤词
16
- - 每句恰好一个重点词:italic + 强调色(模板片为琥珀)
17
- - 强调色短下划线 scaleX 0→1 收束
18
- - 尾部整卡淡出交棒;可挂 mono 小字副行 + DigitRoll 数字
19
-
20
- ## 参数表
21
- | 参数 | 典型值 | 调节手感 |
22
- |------|--------|----------|
23
- | 逐词入场 | 第 i 词 delay = 4 + i·4、9f,bezier(0.2,0.75,0.3,1);scale 1.28→1 + blur 7px→0 + opacity | scale 起点 1.28 是"压印"读感的甜点——对照暗场版 TitleCard 用 40px 上移+blur 10,同配方明暗两版 |
24
- | 重点词 | italic + 强调色 oklch(52% 0.115 65),一句恰好一个 accent | 两个 accent 等于没有 accent;重点词选功能名/收益词(C2) |
25
- | 下划线 | 16→34f scaleX 0→1,220×6px 强调色 | 下划线是收束信号,出现即预告本卡快结束 |
26
- | 时长 | 全片 4 张字卡均 50–55f(≈1.8s) | 字卡时长定式化——观众读一句话的时间,长了拖节奏短了读不完 |
27
- | 版式 | 字号 116/serif;纸底 oklch(97.5% 0.008 82) + 中心暖光 radial;尾部 8f 淡出 | 纸底+暖光与产品画面同色系,字卡才不像广告插播 |
28
- | 副行 | mono 小字 + DigitRoll(demo "12 shots rendered today");digit-roll 参数见 list-stack-press 卡计数器行 | 副行给具体数字最有说服力;数字滚动必须在本卡淡出前落定(教训)——排节拍从本卡淡出帧倒推 |
29
-
30
- ## 声音
31
- 字卡出场统一钉 swoosh-quick(模板片四张字卡钉在 f220/565/725/885 同音)——同类元素同音是词汇表纪律(S2);字卡本身无落地重音,能量留给前后镜头。
32
-
33
- ## 已知坑
34
- - 文案要具体:带产品功能名+具体收益,抽象隐喻词被用户逐字改掉(C2——"one board"→"one place to go"、加 "Paper Radar");文案在画面锁定后按最终镜头重写一遍(C1)
35
- - 重要功能出场前要有引导字卡(C2 判例:文档镜头前应加一句引导,如 "Every project, linked to your weekly report")——字卡不是装饰,是章节路标
36
-
37
- ## 参考实现
38
- demos/typography/paper-title-card/PaperTitleCard.tsx(原 template/src/aifl/PaperTitleCard.tsx,参数化:words/sub/subDigits 可换文案)
1
+ ---
2
+ name: paper-title-card
3
+ 一句话: 一句话逐词压印上纸、一个词标强调色斜体、短划线收束
4
+ 适用: 章节转场/价值主张字卡;重要功能出场前的引导卡;全片呼吸位
5
+ 时长: 1.7–1.8s(50–55f)
6
+ 能量: 低(呼吸位,隔开两段高能镜头)
7
+ 标签: transition、rhythm
8
+ ---
9
+
10
+ ## 意图
11
+ 在两段产品画面之间给观众一句话的喘息:说清"接下来看什么、它值什么"。letterpress 压印质感让字卡与纸墨风格的产品画面同属一个世界。
12
+
13
+ ## 动效核心
14
+ - 单句文案逐词入场:scale 从大压到 1 + blur→0 + opacity(letterpress 压印配方);demo 文案为 video-shotcraft 口号
15
+ "Direct the film. / Let the agent shoot it."(强调词 *shoot*),词表可标 `br` 强制换行,两行长度接近、不留孤词
16
+ - 每句恰好一个重点词:italic + 强调色(模板片为琥珀)
17
+ - 强调色短下划线 scaleX 0→1 收束
18
+ - 尾部整卡淡出交棒;可挂 mono 小字副行 + DigitRoll 数字
19
+
20
+ ## 参数表
21
+ | 参数 | 典型值 | 调节手感 |
22
+ |------|--------|----------|
23
+ | 逐词入场 | 第 i 词 delay = 4 + i·4、9f,bezier(0.2,0.75,0.3,1);scale 1.28→1 + blur 7px→0 + opacity | scale 起点 1.28 是"压印"读感的甜点——对照暗场版 TitleCard 用 40px 上移+blur 10,同配方明暗两版 |
24
+ | 重点词 | italic + 强调色 oklch(52% 0.115 65),一句恰好一个 accent | 两个 accent 等于没有 accent;重点词选功能名/收益词(C2) |
25
+ | 下划线 | 16→34f scaleX 0→1,220×6px 强调色 | 下划线是收束信号,出现即预告本卡快结束 |
26
+ | 时长 | 全片 4 张字卡均 50–55f(≈1.8s) | 字卡时长定式化——观众读一句话的时间,长了拖节奏短了读不完 |
27
+ | 版式 | 字号 116/serif;纸底 oklch(97.5% 0.008 82) + 中心暖光 radial;尾部 8f 淡出 | 纸底+暖光与产品画面同色系,字卡才不像广告插播 |
28
+ | 副行 | mono 小字 + DigitRoll(demo "12 shots rendered today");digit-roll 参数见 list-stack-press 卡计数器行 | 副行给具体数字最有说服力;数字滚动必须在本卡淡出前落定(教训)——排节拍从本卡淡出帧倒推 |
29
+
30
+ ## 声音
31
+ 字卡出场统一钉 swoosh-quick(模板片四张字卡钉在 f220/565/725/885 同音)——同类元素同音是词汇表纪律(S2);字卡本身无落地重音,能量留给前后镜头。
32
+
33
+ ## 已知坑
34
+ - 文案要具体:带产品功能名+具体收益,抽象隐喻词被用户逐字改掉(C2——"one board"→"one place to go"、加 "Paper Radar");文案在画面锁定后按最终镜头重写一遍(C1)
35
+ - 重要功能出场前要有引导字卡(C2 判例:文档镜头前应加一句引导,如 "Every project, linked to your weekly report")——字卡不是装饰,是章节路标
36
+
37
+ ## 参考实现
38
+ demos/typography/paper-title-card/PaperTitleCard.tsx(原 template/src/aifl/PaperTitleCard.tsx,参数化:words/sub/subDigits 可换文案)
@@ -1,66 +1,66 @@
1
- ---
2
- name: pill-chip-slot-cycle-handled
3
- 一句话: 白底句式 "Your `chip` Handled" 里深色胶囊内词竖向滚轮轮换,胶囊宽度按预量文本宽插值平滑伸缩、两侧文字被自然挤开收拢,胶囊上下露出 13% 透明度的灰色幽灵项
4
- 适用: "我们替你搞定 ___" 这类句式卖点;SaaS 功能列举的一句话收口;浅底品牌片主视觉一拍
5
- 时长: 约 5.0s(150f@30fps:静置 → 3 次切换(0.25/0.47/0.69)→ 尾部静置)
6
- 能量: 中(三拍稳定节拍,宽度伸缩是唯一的连续运动)
7
- ---
8
-
9
- ## 意图
10
- 词槽轮换有两派:让句子躲开变化(宽度固定的滚轮),或者让句子**接受**
11
- 变化(胶囊撑宽、两侧文字被挤开)。这卡是后者,代价是必须把宽度算准,
12
- 回报是句子读起来活的——"Your" 和 "Handled" 被推着走,观众感到胶囊里
13
- 的词有分量。上下露出的灰色幽灵项是第二个记号:它明示"这是个可以滚的
14
- 列表",让观众预期还有下一个词。
15
-
16
- ## 动效核心
17
- - 宽度预量:setup 期用隐藏 `<span>` 逐词量 `offsetWidth`,各加 74px 内边距
18
- 存成 `widths[]`(带 `o.w.length·13` 兜底,防 setup 时未挂载量不到)
19
- - 位置量 `pos` 由 3 段窗累加:切换点 `[0.25, 0.47, 0.69]`,每窗 0.12
20
- (≈18f),缓动 `E.inOutCubic`——**两头都缓**,对应"滚轮起步与停稳"
21
- - 内列 `colIn` 竖移 `-pos·48`px(行高 48 = 胶囊高);胶囊宽度取
22
- `lerp(frac, widths[ci], widths[ci+1])`,**帧内插值**所以伸缩是连续的,
23
- 两侧 `flex:none` 的文字被 flex 布局自然挤开
24
- - 幽灵项在胶囊外(chipWrap 内)上 -38px / 下 58px,取 `near = round(pos)`
25
- 的前后邻居文本,随滚动微移 `(pos-near)·48·0.5`(**半速视差**,比胶囊内
26
- 的词慢一半,才像"外圈")
27
- - 幽灵项透明度 `0.13 · (0.4 + settle·0.6)`,`settle = 1 - min(1, |pos-near|·3)`
28
- ——滚动中途更淡、落定时最清楚
29
- - 每行内是 emoji + 词的两段结构(emoji 18px、词 700 22px 白字),
30
- 胶囊 `#1a1c24` 底 + `0 8px 24px rgba(20,22,40,.22)` 投影 + `overflow:hidden`
31
-
32
- ## 参数表
33
- | 参数 | 典型值 | 调节手感 |
34
- |------|--------|----------|
35
- | 词表 | 4 词 + emoji(Shots/Camera/Sound/Renders——video-shotcraft 包办的镜头/运镜/音效/渲染),3 次切换 | 词长差决定挤开幅度的观感:demo 最短 5 字母最长 7 字母;差 >2 倍胶囊跳变太猛,句子重心左右甩 |
36
- | 切换点 | `[0.25, 0.47, 0.69]`,窗 0.12(≈18f) | 段间约 0.10(≈15f)静置读词;起手 0.25 前的静置让观众先认出句式 |
37
- | 缓动 | `E.inOutCubic` | 两头缓才像滚轮起停;outCubic(只后缓)读作被甩上来,胶囊宽度也会跟着突变 |
38
- | 胶囊 | 高 48px、圆角 99、`#1a1c24`、宽 = 文本宽 + 74 | +74 是左右内边距 + emoji 位;<50 词贴边,>100 胶囊胖成按钮 |
39
- | 幽灵项 | 上 -38 / 下 58px,基础透明度 0.13 | 0.13 是"看得见但不抢"的甜点;>0.25 读作三行并列文字,不是幽灵;删了列表暗示就没了 |
40
- | 幽灵视差 | `(pos-near)·48·0.5`(半速) | 半速是"外圈更远"的立体感来源;同速则三行像一整块滑动,幽灵失去意义 |
41
- | 句子字号 | 两侧 30px/800、胶囊内 22px/700 | 胶囊内比句子小是正确层级(徽章依附句子);等大或更大就读作两个标题打架 |
42
- | 配色 | 底 `#fbfbfd`、句子 `#15171d`、胶囊白字 | 浅底 + 单一深色块是本卡的身份证;深底版会让胶囊消失,需整套重配 |
43
-
44
- ## 已知坑
45
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
46
- 首次实战须以真实素材回验
47
- - **宽度靠 setup 期 `offsetWidth` 实测**:字体没加载完时量到的是回退字体
48
- 的宽度,胶囊会偏窄或偏宽——移植时须确保 webfont 就绪后再量,或改用
49
- 离屏 canvas `measureText`;`length·13` 那条兜底只保证不崩,不保证准
50
- - 词长差要控制在 2 倍内:宽度自适应是本卡的卖点也是风险,
51
- 5→8 字母(如 `Sales`→`Workflow`)这一跳已经是可接受上限,再大句子两侧甩得晃眼
52
- - 两侧文字必须 `flex:none`:不然 flex 会去压缩它们而不是移动它们,
53
- "挤开"变成"字被压扁"
54
- - 幽灵项文本取 `round(pos)` 的邻居,所以在切换的正中间(pos=x.5)会
55
- **跳一次文本**——被 `settle` 压到最淡时发生,肉眼基本不可察;但若把
56
- 透明度调高到 0.25+,这一跳就会露出来
57
- - emoji 在不同平台字形宽度不一(尤其 `⚙️` 带变体选择符),会让实测宽度
58
- 漂移几像素;实战建议换成项目自己的单色图标,别依赖系统 emoji
59
- - 与 vertical-word-roll-blur-cycle 分工:那卡宽度固定、裸词、带滚筒 blur
60
- (词是句子成分),本卡宽度自适应、深色胶囊、带幽灵项(词是徽章)——
61
- 同片只留一个;声音上三次落定是三个节奏点,配轻质开关/胶囊贴合音,
62
- 连发交替双样本,配法纪律见 sound-design.md
63
-
64
- ## 参考实现
65
- demos/typography/pill-chip-slot-cycle-handled/
66
- (PillChipSlotCycleHandled.tsx)
1
+ ---
2
+ name: pill-chip-slot-cycle-handled
3
+ 一句话: 白底句式 "Your `chip` Handled" 里深色胶囊内词竖向滚轮轮换,胶囊宽度按预量文本宽插值平滑伸缩、两侧文字被自然挤开收拢,胶囊上下露出 13% 透明度的灰色幽灵项
4
+ 适用: "我们替你搞定 ___" 这类句式卖点;SaaS 功能列举的一句话收口;浅底品牌片主视觉一拍
5
+ 时长: 约 5.0s(150f@30fps:静置 → 3 次切换(0.25/0.47/0.69)→ 尾部静置)
6
+ 能量: 中(三拍稳定节拍,宽度伸缩是唯一的连续运动)
7
+ ---
8
+
9
+ ## 意图
10
+ 词槽轮换有两派:让句子躲开变化(宽度固定的滚轮),或者让句子**接受**
11
+ 变化(胶囊撑宽、两侧文字被挤开)。这卡是后者,代价是必须把宽度算准,
12
+ 回报是句子读起来活的——"Your" 和 "Handled" 被推着走,观众感到胶囊里
13
+ 的词有分量。上下露出的灰色幽灵项是第二个记号:它明示"这是个可以滚的
14
+ 列表",让观众预期还有下一个词。
15
+
16
+ ## 动效核心
17
+ - 宽度预量:setup 期用隐藏 `<span>` 逐词量 `offsetWidth`,各加 74px 内边距
18
+ 存成 `widths[]`(带 `o.w.length·13` 兜底,防 setup 时未挂载量不到)
19
+ - 位置量 `pos` 由 3 段窗累加:切换点 `[0.25, 0.47, 0.69]`,每窗 0.12
20
+ (≈18f),缓动 `E.inOutCubic`——**两头都缓**,对应"滚轮起步与停稳"
21
+ - 内列 `colIn` 竖移 `-pos·48`px(行高 48 = 胶囊高);胶囊宽度取
22
+ `lerp(frac, widths[ci], widths[ci+1])`,**帧内插值**所以伸缩是连续的,
23
+ 两侧 `flex:none` 的文字被 flex 布局自然挤开
24
+ - 幽灵项在胶囊外(chipWrap 内)上 -38px / 下 58px,取 `near = round(pos)`
25
+ 的前后邻居文本,随滚动微移 `(pos-near)·48·0.5`(**半速视差**,比胶囊内
26
+ 的词慢一半,才像"外圈")
27
+ - 幽灵项透明度 `0.13 · (0.4 + settle·0.6)`,`settle = 1 - min(1, |pos-near|·3)`
28
+ ——滚动中途更淡、落定时最清楚
29
+ - 每行内是 emoji + 词的两段结构(emoji 18px、词 700 22px 白字),
30
+ 胶囊 `#1a1c24` 底 + `0 8px 24px rgba(20,22,40,.22)` 投影 + `overflow:hidden`
31
+
32
+ ## 参数表
33
+ | 参数 | 典型值 | 调节手感 |
34
+ |------|--------|----------|
35
+ | 词表 | 4 词 + emoji(Shots/Camera/Sound/Renders——video-shotcraft 包办的镜头/运镜/音效/渲染),3 次切换 | 词长差决定挤开幅度的观感:demo 最短 5 字母最长 7 字母;差 >2 倍胶囊跳变太猛,句子重心左右甩 |
36
+ | 切换点 | `[0.25, 0.47, 0.69]`,窗 0.12(≈18f) | 段间约 0.10(≈15f)静置读词;起手 0.25 前的静置让观众先认出句式 |
37
+ | 缓动 | `E.inOutCubic` | 两头缓才像滚轮起停;outCubic(只后缓)读作被甩上来,胶囊宽度也会跟着突变 |
38
+ | 胶囊 | 高 48px、圆角 99、`#1a1c24`、宽 = 文本宽 + 74 | +74 是左右内边距 + emoji 位;<50 词贴边,>100 胶囊胖成按钮 |
39
+ | 幽灵项 | 上 -38 / 下 58px,基础透明度 0.13 | 0.13 是"看得见但不抢"的甜点;>0.25 读作三行并列文字,不是幽灵;删了列表暗示就没了 |
40
+ | 幽灵视差 | `(pos-near)·48·0.5`(半速) | 半速是"外圈更远"的立体感来源;同速则三行像一整块滑动,幽灵失去意义 |
41
+ | 句子字号 | 两侧 30px/800、胶囊内 22px/700 | 胶囊内比句子小是正确层级(徽章依附句子);等大或更大就读作两个标题打架 |
42
+ | 配色 | 底 `#fbfbfd`、句子 `#15171d`、胶囊白字 | 浅底 + 单一深色块是本卡的身份证;深底版会让胶囊消失,需整套重配 |
43
+
44
+ ## 已知坑
45
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
46
+ 首次实战须以真实素材回验
47
+ - **宽度靠 setup 期 `offsetWidth` 实测**:字体没加载完时量到的是回退字体
48
+ 的宽度,胶囊会偏窄或偏宽——移植时须确保 webfont 就绪后再量,或改用
49
+ 离屏 canvas `measureText`;`length·13` 那条兜底只保证不崩,不保证准
50
+ - 词长差要控制在 2 倍内:宽度自适应是本卡的卖点也是风险,
51
+ 5→8 字母(如 `Sales`→`Workflow`)这一跳已经是可接受上限,再大句子两侧甩得晃眼
52
+ - 两侧文字必须 `flex:none`:不然 flex 会去压缩它们而不是移动它们,
53
+ "挤开"变成"字被压扁"
54
+ - 幽灵项文本取 `round(pos)` 的邻居,所以在切换的正中间(pos=x.5)会
55
+ **跳一次文本**——被 `settle` 压到最淡时发生,肉眼基本不可察;但若把
56
+ 透明度调高到 0.25+,这一跳就会露出来
57
+ - emoji 在不同平台字形宽度不一(尤其 `⚙️` 带变体选择符),会让实测宽度
58
+ 漂移几像素;实战建议换成项目自己的单色图标,别依赖系统 emoji
59
+ - 与 vertical-word-roll-blur-cycle 分工:那卡宽度固定、裸词、带滚筒 blur
60
+ (词是句子成分),本卡宽度自适应、深色胶囊、带幽灵项(词是徽章)——
61
+ 同片只留一个;声音上三次落定是三个节奏点,配轻质开关/胶囊贴合音,
62
+ 连发交替双样本,配法纪律见 sound-design.md
63
+
64
+ ## 参考实现
65
+ demos/typography/pill-chip-slot-cycle-handled/
66
+ (PillChipSlotCycleHandled.tsx)
@@ -1,58 +1,58 @@
1
- ---
2
- name: pill-slot-cycle
3
- 一句话: 句中词槽轮换——固定句干钉死不动,句尾 pill 徽章每 ~0.7s 老虎机滚一格(旧的上飞加速淡出、新的从下带模糊滑入),连换 N 个功能词后落成完整句子收束
4
- 适用: "功能列举"类文案的最优雅解法(比逐条列表快、比字符级滚动有语义);一句话卖点 + 多个动词短语的段落
5
- 时长: 入场 12f + 每拍 21f × 词数 + 收束 14f + hold;6 词约 6.7s(demo 200f,含 48f 完整句 hold)
6
- 能量: 中(稳定节拍器,无峰值)
7
- ---
8
-
9
- ## 意图
10
- 罗列六个功能,列表要六行、逐条淡入要六拍还占满屏。词槽轮换把它们
11
- 塞进**一句话的一个槽位**里:句干 "One skill to ___"(demo 讲 video-shotcraft:Storyboard it → Capture the page →
12
- Move the camera → Cut on the beat → Design the sound → Render the film)是承诺,槽里
13
- 滚过的每个 pill 是证据,最后 pill 飞走、"do it all." 落位——证据
14
- 列举完毕,结论盖章。结构自带三幕:承诺→列举→收束。命门是句干
15
- **纹丝不动**:观众的眼睛全程钉在槽位上,句干一晃列举感就散。
16
-
17
- ## 动效核心
18
- - 句干绝对定位左端锚死——**不能用 flex 居中**,pill 宽度变化会带着
19
- 句干重排(首轮踩过的坑,已是判例)
20
- - 每拍 21f(~0.7s),前 8f 完成换位、后 13f 静置——静置段是给观众
21
- 读词的,读不完的拍子等于没换
22
- - 入场:translateY 120→0 + blur 14→4→0,Easing.out(cubic);
23
- 离场:translateY 0→-130 + blur 0→10,Easing.in(cubic) 加速飞出
24
- ——新来的减速落定、旧的加速逃走,方向感是"向上翻页"
25
- - 槽内用隐形占位 pill(visibility hidden)撑宽度,新旧两枚绝对定位
26
- 叠放——槽宽随当前词自然变化但不抖
27
- - 收束拍:末 pill 上飞(7f ease-in),"do it all." 从下 90px 带
28
- Easing.back(1.4) 过冲落位——全片唯一一次过冲,留给结论;落位后整行用 smooth 26f 缓缓居中
29
- (列举期间句干仍左锚死,只在结论句完整后才移动),"to do" 之间收回普通词距
30
-
31
- ## 参数表
32
- | 参数 | 典型值 | 调节手感 |
33
- |------|--------|----------|
34
- | 拍长 | 21f/词,5–7 词 | <16f 读不完短语;>28f 节拍器感散掉;8+ 词观众开始数数 |
35
- | 换位窗 | 拍内前 8f | 拉长到 12f+ 新旧同屏太久,读作两个 pill 打架 |
36
- | 飞行距离 | 入 +120 / 出 -130px | <80px 读作原地闪换;入出不对称(出略远)让离场更决绝 |
37
- | 运动模糊 | 入 ≤14 / 出 ≤12px 竖向 blur,按真实速度计算(静止为 0);入 rotateX -38°→0、出 0→34° 绕滚筒翻页 | 去掉 blur 换位读作硬弹;>20px 中间帧糊成色块 |
38
- | 收束过冲 | Easing.back(1.4),14f | >2 结论落位像卡通;无过冲结论与列举没有档次差 |
39
- | 收尾 hold | 完整句静置 ≥45f | 这句话是全段目的,不 hold 等于白列举 |
40
-
41
- ## 已知坑
42
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
43
- 首次实战须以真实素材回验
44
- - 本卡是整词级 pill 轮换且嵌在活句子里(不是字符/数位级机械滚动)——文案是
45
- "句干+动词短语"结构才用本卡,纯数字/纯标题词别硬套
46
- - 与 typewriter-moves 分工:打字机是"一个字一个字造句",本卡是
47
- "句子造好了换零件"——同片可共存但别在同一句文案上连用
48
- - 与 type-rhythm-sync 分工:那是既有文字随音轨变属性(不换内容),
49
- 本卡换内容——绑音轨时本卡拍点对鼓点即可,别再叠字重脉冲
50
- - pill 短语长度要接近(demo 最长 "Capture the page" / "Design the sound")——长短差 >2 倍
51
- 槽宽跳变太猛,句子重心左右甩
52
- - 收束句与句干字号字重必须完全一致(demo 都是 96px/800)——
53
- "do it all." 若比句干大,读作新标题而非句子补完
54
-
55
- ## 参考实现
56
- demos/typography/pill-slot-cycle/
57
- (PillSlotCycle.tsx)
58
- 原片出处:notion-ai 4.5–8.5s
1
+ ---
2
+ name: pill-slot-cycle
3
+ 一句话: 句中词槽轮换——固定句干钉死不动,句尾 pill 徽章每 ~0.7s 老虎机滚一格(旧的上飞加速淡出、新的从下带模糊滑入),连换 N 个功能词后落成完整句子收束
4
+ 适用: "功能列举"类文案的最优雅解法(比逐条列表快、比字符级滚动有语义);一句话卖点 + 多个动词短语的段落
5
+ 时长: 入场 12f + 每拍 21f × 词数 + 收束 14f + hold;6 词约 6.7s(demo 200f,含 48f 完整句 hold)
6
+ 能量: 中(稳定节拍器,无峰值)
7
+ ---
8
+
9
+ ## 意图
10
+ 罗列六个功能,列表要六行、逐条淡入要六拍还占满屏。词槽轮换把它们
11
+ 塞进**一句话的一个槽位**里:句干 "One skill to ___"(demo 讲 video-shotcraft:Storyboard it → Capture the page →
12
+ Move the camera → Cut on the beat → Design the sound → Render the film)是承诺,槽里
13
+ 滚过的每个 pill 是证据,最后 pill 飞走、"do it all." 落位——证据
14
+ 列举完毕,结论盖章。结构自带三幕:承诺→列举→收束。命门是句干
15
+ **纹丝不动**:观众的眼睛全程钉在槽位上,句干一晃列举感就散。
16
+
17
+ ## 动效核心
18
+ - 句干绝对定位左端锚死——**不能用 flex 居中**,pill 宽度变化会带着
19
+ 句干重排(首轮踩过的坑,已是判例)
20
+ - 每拍 21f(~0.7s),前 8f 完成换位、后 13f 静置——静置段是给观众
21
+ 读词的,读不完的拍子等于没换
22
+ - 入场:translateY 120→0 + blur 14→4→0,Easing.out(cubic);
23
+ 离场:translateY 0→-130 + blur 0→10,Easing.in(cubic) 加速飞出
24
+ ——新来的减速落定、旧的加速逃走,方向感是"向上翻页"
25
+ - 槽内用隐形占位 pill(visibility hidden)撑宽度,新旧两枚绝对定位
26
+ 叠放——槽宽随当前词自然变化但不抖
27
+ - 收束拍:末 pill 上飞(7f ease-in),"do it all." 从下 90px 带
28
+ Easing.back(1.4) 过冲落位——全片唯一一次过冲,留给结论;落位后整行用 smooth 26f 缓缓居中
29
+ (列举期间句干仍左锚死,只在结论句完整后才移动),"to do" 之间收回普通词距
30
+
31
+ ## 参数表
32
+ | 参数 | 典型值 | 调节手感 |
33
+ |------|--------|----------|
34
+ | 拍长 | 21f/词,5–7 词 | <16f 读不完短语;>28f 节拍器感散掉;8+ 词观众开始数数 |
35
+ | 换位窗 | 拍内前 8f | 拉长到 12f+ 新旧同屏太久,读作两个 pill 打架 |
36
+ | 飞行距离 | 入 +120 / 出 -130px | <80px 读作原地闪换;入出不对称(出略远)让离场更决绝 |
37
+ | 运动模糊 | 入 ≤14 / 出 ≤12px 竖向 blur,按真实速度计算(静止为 0);入 rotateX -38°→0、出 0→34° 绕滚筒翻页 | 去掉 blur 换位读作硬弹;>20px 中间帧糊成色块 |
38
+ | 收束过冲 | Easing.back(1.4),14f | >2 结论落位像卡通;无过冲结论与列举没有档次差 |
39
+ | 收尾 hold | 完整句静置 ≥45f | 这句话是全段目的,不 hold 等于白列举 |
40
+
41
+ ## 已知坑
42
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
43
+ 首次实战须以真实素材回验
44
+ - 本卡是整词级 pill 轮换且嵌在活句子里(不是字符/数位级机械滚动)——文案是
45
+ "句干+动词短语"结构才用本卡,纯数字/纯标题词别硬套
46
+ - 与 typewriter-moves 分工:打字机是"一个字一个字造句",本卡是
47
+ "句子造好了换零件"——同片可共存但别在同一句文案上连用
48
+ - 与 type-rhythm-sync 分工:那是既有文字随音轨变属性(不换内容),
49
+ 本卡换内容——绑音轨时本卡拍点对鼓点即可,别再叠字重脉冲
50
+ - pill 短语长度要接近(demo 最长 "Capture the page" / "Design the sound")——长短差 >2 倍
51
+ 槽宽跳变太猛,句子重心左右甩
52
+ - 收束句与句干字号字重必须完全一致(demo 都是 96px/800)——
53
+ "do it all." 若比句干大,读作新标题而非句子补完
54
+
55
+ ## 参考实现
56
+ demos/typography/pill-slot-cycle/
57
+ (PillSlotCycle.tsx)
58
+ 原片出处:notion-ai 4.5–8.5s
@@ -1,61 +1,61 @@
1
- ---
2
- name: text-column-converge
3
- 一句话: 双词对峙合拢——左"NEW"右特性词钉死在等屏边距两侧硬切轮换、全程零收缩,换到最后一词才唯一一次 ease-in-out 滑到居中咬合成短语,下方小字近乎硬切浮现;收尾揭晓型文字卡
4
- 适用: 特性清单收束到产品名/口号的段落("NEW × 一串特性 → NEW <产品名>"式);发布会式 recap、版本号揭晓
5
- 时长: 轮换 7–16f/词 × 8–9 词 + 合拢 ~36f + 小字后静置;全段约 5–6s
6
- 能量: 中低(机器节奏、小字规格清单气质,不是砸字)
7
- 标签: outro
8
- ---
9
-
10
- ## 意图
11
- 两词分踞左右像目录页对峙,观众以为只是轮换字幕;直到最后一词
12
- 停稳才发现左右其实是同一句话的两半——唯一一次连续合拢把整段
13
- 轮换追认为"悬念铺垫"。命门是**钉死**:轮换期两词位置一像素不动、
14
- 左右屏边距完全相等(原片实测 412 vs 413@1280),任何渐进收缩都会
15
- 提前剧透合拢、把揭晓稀释成进度条。合拢只许发生一次,且必须在
16
- 最后一词之后——这是收尾揭晓,不是持续动效。
17
-
18
- ## 动效核心
19
- - 左词左缘、右词右缘各自钉死在等屏边距处(原片实测 412/413px
20
- @1280,×1.5 → 618/1302@1920);右词换长换短一律右缘定位
21
- - 词轮换纯硬切,停留帧数不均(16/12/9/8/7/8/10/12f,机器节奏
22
- 带人味);轮换全程间距零收缩(判例:渐进收缩版被用户驳回重做)
23
- - **唯一一次合拢**:末词停稳 ~10f 后,~1.2s(36f)ease-in-out
24
- (cubic)连续滑动,两词滑到以屏幕中线居中定格
25
- - 合拢终点按等宽字体实际步进算(0.6em+letterSpacing × 字符数),
26
- 两词恰好一空格咬合,无重叠无缝隙;无 stamp 缩放、无二次补偿移动
27
- (demo:video-shotcraft 八个特性词轮换,末词为全小写字标 video-shotcraft,终点按 `NEW ` + 字标字符数算;
28
- 小字为品牌短句后半 "CRAFT THE SHOT.")
29
- - 定格 ~18f 后斜体小字近乎硬切浮现(4f 快淡、零位移),与整行
30
- 同左缘、字号同正文
31
- - 质感:冷色深底 + 极淡顶光 + 暗角/颗粒;词换瞬间 1 帧提亮;NEW 轮换期为次级灰、
32
- 合拢中随进度提亮到主色;合拢滑动按速度加水平运动模糊(≤4px,静止为 0);
33
- demo 全长 180f(导出 `TEXT_COLUMN_CONVERGE_DURATION`)
34
-
35
- ## 参数表
36
- | 参数 | 典型值 | 调节手感 |
37
- |------|--------|----------|
38
- | 屏边距 | 618px@1920(**原片实测** 412/413@1280 ×1.5) | 左右差 >2px 读作没对齐;边距是本卡身份,别改成黄金分割 |
39
- | 词停留 | 7–16f 不均 | 均匀停留读作节拍器;<7f 读不完词 |
40
- | 合拢触发 | 末词停稳 +10f(原片 32.4→32.7s 实测) | 停稳期太短,观众没意识到"这词不换了"就开始滑 |
41
- | 合拢时长 | 36f ease-in-out cubic(**原片实测** ~1.2s 连续滑动) | <24f 读作弹跳归位;>50f 读作拖 |
42
- | 咬合步进 | 0.6em+letterSpacing/字符,等宽字体 | 非等宽字体步进不可预测,会重叠或漏缝 |
43
- | 字号 | 42@1080p(**原片实测**字高 ~20/720) | 这段是小字规格清单气质,放大到 60+ 就成了砸字(单词重锤去用 outline-word-fill) |
44
- | 小字浮现 | 定格 +18f,4f 快淡零位移(原片 34.4→34.6s 间直接出现) | 加滑入/长淡入就抢了合拢的戏 |
45
-
46
- ## 已知坑
47
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
48
- 首次实战须以真实素材回验
49
- - 与 type-rhythm-sync(字属性节拍)/beat-cut-moves(硬切节拍)撞
50
- 领域:那两张是"轮换本身即内容";本卡命门是**位置钉死 + 末次合拢**
51
- 的收尾揭晓,轮换只是铺垫。若段落没有"合拢揭晓"就别用本卡
52
- - 合拢只许一次——每切一词收一档的渐进收缩版已被原片对照证伪并
53
- 删除,别复活
54
- - 必须等宽字体(demo 用 SF Mono);比例字体下咬合终点算不准
55
- - 原片词换瞬间带 1 帧亮度闪烁(打字机换行感),demo 已加回 1f 提亮;
56
- 闪烁 >1f 会读作故障
57
-
58
- ## 参考实现
59
- demos/typography/text-column-converge/
60
- (TextColumnConverge.tsx)
61
- 原片出处:raycast-teams.mp4 28–36s
1
+ ---
2
+ name: text-column-converge
3
+ 一句话: 双词对峙合拢——左"NEW"右特性词钉死在等屏边距两侧硬切轮换、全程零收缩,换到最后一词才唯一一次 ease-in-out 滑到居中咬合成短语,下方小字近乎硬切浮现;收尾揭晓型文字卡
4
+ 适用: 特性清单收束到产品名/口号的段落("NEW × 一串特性 → NEW <产品名>"式);发布会式 recap、版本号揭晓
5
+ 时长: 轮换 7–16f/词 × 8–9 词 + 合拢 ~36f + 小字后静置;全段约 5–6s
6
+ 能量: 中低(机器节奏、小字规格清单气质,不是砸字)
7
+ 标签: outro
8
+ ---
9
+
10
+ ## 意图
11
+ 两词分踞左右像目录页对峙,观众以为只是轮换字幕;直到最后一词
12
+ 停稳才发现左右其实是同一句话的两半——唯一一次连续合拢把整段
13
+ 轮换追认为"悬念铺垫"。命门是**钉死**:轮换期两词位置一像素不动、
14
+ 左右屏边距完全相等(原片实测 412 vs 413@1280),任何渐进收缩都会
15
+ 提前剧透合拢、把揭晓稀释成进度条。合拢只许发生一次,且必须在
16
+ 最后一词之后——这是收尾揭晓,不是持续动效。
17
+
18
+ ## 动效核心
19
+ - 左词左缘、右词右缘各自钉死在等屏边距处(原片实测 412/413px
20
+ @1280,×1.5 → 618/1302@1920);右词换长换短一律右缘定位
21
+ - 词轮换纯硬切,停留帧数不均(16/12/9/8/7/8/10/12f,机器节奏
22
+ 带人味);轮换全程间距零收缩(判例:渐进收缩版被用户驳回重做)
23
+ - **唯一一次合拢**:末词停稳 ~10f 后,~1.2s(36f)ease-in-out
24
+ (cubic)连续滑动,两词滑到以屏幕中线居中定格
25
+ - 合拢终点按等宽字体实际步进算(0.6em+letterSpacing × 字符数),
26
+ 两词恰好一空格咬合,无重叠无缝隙;无 stamp 缩放、无二次补偿移动
27
+ (demo:video-shotcraft 八个特性词轮换,末词为全小写字标 video-shotcraft,终点按 `NEW ` + 字标字符数算;
28
+ 小字为品牌短句后半 "CRAFT THE SHOT.")
29
+ - 定格 ~18f 后斜体小字近乎硬切浮现(4f 快淡、零位移),与整行
30
+ 同左缘、字号同正文
31
+ - 质感:冷色深底 + 极淡顶光 + 暗角/颗粒;词换瞬间 1 帧提亮;NEW 轮换期为次级灰、
32
+ 合拢中随进度提亮到主色;合拢滑动按速度加水平运动模糊(≤4px,静止为 0);
33
+ demo 全长 180f(导出 `TEXT_COLUMN_CONVERGE_DURATION`)
34
+
35
+ ## 参数表
36
+ | 参数 | 典型值 | 调节手感 |
37
+ |------|--------|----------|
38
+ | 屏边距 | 618px@1920(**原片实测** 412/413@1280 ×1.5) | 左右差 >2px 读作没对齐;边距是本卡身份,别改成黄金分割 |
39
+ | 词停留 | 7–16f 不均 | 均匀停留读作节拍器;<7f 读不完词 |
40
+ | 合拢触发 | 末词停稳 +10f(原片 32.4→32.7s 实测) | 停稳期太短,观众没意识到"这词不换了"就开始滑 |
41
+ | 合拢时长 | 36f ease-in-out cubic(**原片实测** ~1.2s 连续滑动) | <24f 读作弹跳归位;>50f 读作拖 |
42
+ | 咬合步进 | 0.6em+letterSpacing/字符,等宽字体 | 非等宽字体步进不可预测,会重叠或漏缝 |
43
+ | 字号 | 42@1080p(**原片实测**字高 ~20/720) | 这段是小字规格清单气质,放大到 60+ 就成了砸字(单词重锤去用 outline-word-fill) |
44
+ | 小字浮现 | 定格 +18f,4f 快淡零位移(原片 34.4→34.6s 间直接出现) | 加滑入/长淡入就抢了合拢的戏 |
45
+
46
+ ## 已知坑
47
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
48
+ 首次实战须以真实素材回验
49
+ - 与 type-rhythm-sync(字属性节拍)/beat-cut-moves(硬切节拍)撞
50
+ 领域:那两张是"轮换本身即内容";本卡命门是**位置钉死 + 末次合拢**
51
+ 的收尾揭晓,轮换只是铺垫。若段落没有"合拢揭晓"就别用本卡
52
+ - 合拢只许一次——每切一词收一档的渐进收缩版已被原片对照证伪并
53
+ 删除,别复活
54
+ - 必须等宽字体(demo 用 SF Mono);比例字体下咬合终点算不准
55
+ - 原片词换瞬间带 1 帧亮度闪烁(打字机换行感),demo 已加回 1f 提亮;
56
+ 闪烁 >1f 会读作故障
57
+
58
+ ## 参考实现
59
+ demos/typography/text-column-converge/
60
+ (TextColumnConverge.tsx)
61
+ 原片出处:raycast-teams.mp4 28–36s