dsh-drawai 0.4.1 → 0.4.3

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 (365) hide show
  1. package/README.md +96 -253
  2. package/lib/client.js +28 -7
  3. package/lib/index.js +474 -97
  4. package/lib/motion/asset-pack.js +109 -50
  5. package/lib/motion/assets.js +291 -291
  6. package/lib/motion/demo-assets-lock.js +10 -0
  7. package/lib/motion/mgstyles/vendor/README.md +28 -0
  8. package/lib/motion/mgstyles/vendor/modules/d3/LICENSE +13 -0
  9. package/lib/motion/mgstyles/vendor/modules/d3/dist/d3.min.js +2 -0
  10. package/lib/motion/mgstyles/vendor/modules/opentype.js/LICENSE +20 -0
  11. package/lib/motion/mgstyles/vendor/modules/opentype.js/dist/opentype.mjs +14460 -0
  12. package/lib/motion/mgstyles/vendor/modules/simplex-noise/LICENSE +21 -0
  13. package/lib/motion/mgstyles/vendor/modules/simplex-noise/dist/esm/simplex-noise.js +466 -0
  14. package/lib/motion/mgstyles/vendor/modules/topojson-client/LICENSE +13 -0
  15. package/lib/motion/mgstyles/vendor/modules/topojson-client/dist/topojson-client.min.js +2 -0
  16. package/lib/motion/preview.js +10 -3
  17. package/lib/motion/render.js +19 -1
  18. package/lib/motion/shotcraft/upstream/SKILL.md +286 -286
  19. package/lib/motion/shotcraft/upstream/assets/lib/Caption.tsx +54 -54
  20. package/lib/motion/shotcraft/upstream/assets/lib/ClipCard.tsx +200 -200
  21. package/lib/motion/shotcraft/upstream/assets/lib/DigitRoll.tsx +45 -45
  22. package/lib/motion/shotcraft/upstream/assets/lib/FlashCut.tsx +20 -20
  23. package/lib/motion/shotcraft/upstream/assets/lib/FlatPanel.tsx +65 -65
  24. package/lib/motion/shotcraft/upstream/assets/lib/PageCam.tsx +151 -151
  25. package/lib/motion/shotcraft/upstream/assets/lib/VerticalTicker.tsx +129 -129
  26. package/lib/motion/shotcraft/upstream/assets/lib/helpers/camera.tsx +75 -75
  27. package/lib/motion/shotcraft/upstream/assets/lib/helpers/motion.ts +40 -40
  28. package/lib/motion/shotcraft/upstream/assets/lib/helpers/rand.ts +11 -11
  29. package/lib/motion/shotcraft/upstream/assets/lib/helpers/shake.ts +10 -10
  30. package/lib/motion/shotcraft/upstream/assets/scripts/build-readme-cover.mjs +49 -49
  31. package/lib/motion/shotcraft/upstream/assets/scripts/capture-template.mjs +210 -210
  32. package/lib/motion/shotcraft/upstream/assets/scripts/sfx-source.py +423 -423
  33. package/lib/motion/shotcraft/upstream/assets/scripts/smoke-render-demos.py +170 -170
  34. package/lib/motion/shotcraft/upstream/assets/scripts/test_sfx_source.py +157 -157
  35. package/lib/motion/shotcraft/upstream/demos/README.md +120 -120
  36. package/lib/motion/shotcraft/upstream/demos/_fixtures/Brand.tsx +112 -112
  37. package/lib/motion/shotcraft/upstream/demos/_fixtures/Fixtures.tsx +647 -647
  38. package/lib/motion/shotcraft/upstream/demos/_fixtures/Look.tsx +316 -316
  39. package/lib/motion/shotcraft/upstream/demos/_fixtures/Motion.tsx +82 -82
  40. package/lib/motion/shotcraft/upstream/demos/_fixtures/PageCam2D.tsx +115 -115
  41. package/lib/motion/shotcraft/upstream/demos/_fixtures/Polish.tsx +243 -243
  42. package/lib/motion/shotcraft/upstream/demos/_textures/live-layout.json +388 -388
  43. package/lib/motion/shotcraft/upstream/demos/camera/basic-3d-scene/Basic3DScene.tsx +250 -250
  44. package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashImpactReal.tsx +305 -305
  45. package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashZoomReal.tsx +246 -246
  46. package/lib/motion/shotcraft/upstream/demos/camera/cursor-flyover/CursorFlyover.tsx +390 -390
  47. package/lib/motion/shotcraft/upstream/demos/camera/depth-layer-moves/MultiplaneReal.tsx +138 -138
  48. package/lib/motion/shotcraft/upstream/demos/camera/graze-face-tour/GrazeFaceTour.tsx +542 -542
  49. package/lib/motion/shotcraft/upstream/demos/camera/overhead-camera-moves/OverheadTabletopDrop.tsx +315 -315
  50. package/lib/motion/shotcraft/upstream/demos/camera/overhead-camera-moves/TiltReveal.tsx +299 -299
  51. package/lib/motion/shotcraft/upstream/demos/camera/space-camera-moves/DroneDiveLanding.tsx +173 -173
  52. package/lib/motion/shotcraft/upstream/demos/camera/space-camera-moves/ExplodedView.tsx +348 -348
  53. package/lib/motion/shotcraft/upstream/demos/camera/steep-tilt-glide/SteepTiltGlide.tsx +366 -366
  54. package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/BulletTimeFreezeOrbit.tsx +279 -279
  55. package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/PullBackIsolation.tsx +184 -184
  56. package/lib/motion/shotcraft/upstream/demos/camera/terminal-3d/Terminal3D.tsx +390 -390
  57. package/lib/motion/shotcraft/upstream/demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.tsx +155 -155
  58. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/AxisRescaleShockV2.tsx +303 -303
  59. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/OscilloscopeStreamV2.tsx +290 -290
  60. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx +278 -278
  61. package/lib/motion/shotcraft/upstream/demos/data/gauge-readout-moves/NeedleSweepSelftest.tsx +307 -307
  62. package/lib/motion/shotcraft/upstream/demos/data/gauge-readout-moves/TapeScrollFixedPointer.tsx +215 -215
  63. package/lib/motion/shotcraft/upstream/demos/data/scroll-brake-moves/BrakeReticleLock.tsx +299 -299
  64. package/lib/motion/shotcraft/upstream/demos/data/scroll-brake-moves/ChangelogScrollBrake.tsx +232 -232
  65. package/lib/motion/shotcraft/upstream/demos/data/timeline-travel/TimelineTravel.tsx +290 -290
  66. package/lib/motion/shotcraft/upstream/demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx +273 -273
  67. package/lib/motion/shotcraft/upstream/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx +167 -167
  68. package/lib/motion/shotcraft/upstream/demos/effects/brand-frame-snap/BrandFrameSnap.tsx +536 -536
  69. package/lib/motion/shotcraft/upstream/demos/effects/fui-hud-moves/ReticleLockOn.tsx +164 -164
  70. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/FlylineArc.tsx +175 -175
  71. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx +197 -197
  72. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/OrbFlylineRelay.tsx +241 -241
  73. package/lib/motion/shotcraft/upstream/demos/effects/icon-performance-moves/AttentionBounce.tsx +279 -279
  74. package/lib/motion/shotcraft/upstream/demos/effects/impact-feedback/AnimeImpact.tsx +230 -230
  75. package/lib/motion/shotcraft/upstream/demos/effects/impact-feedback/HitCounter.tsx +345 -345
  76. package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SheenSweepRetry.tsx +275 -275
  77. package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SpotlightSweepReveal.tsx +229 -229
  78. package/lib/motion/shotcraft/upstream/demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.tsx +312 -312
  79. package/lib/motion/shotcraft/upstream/demos/effects/riso-print-hits/RisoMisregistrationHit.tsx +222 -222
  80. package/lib/motion/shotcraft/upstream/demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx +295 -295
  81. package/lib/motion/shotcraft/upstream/demos/effects/scanline-annotate-focus/ScanlineAnnotateFocus.tsx +329 -329
  82. package/lib/motion/shotcraft/upstream/demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx +315 -315
  83. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ImpactBurstKit.tsx +264 -264
  84. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/KanadaPerspectiveSnap.tsx +260 -260
  85. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ScoreSlam.tsx +263 -263
  86. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx +123 -123
  87. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx +187 -187
  88. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx +175 -175
  89. package/lib/motion/shotcraft/upstream/demos/interaction/autolayout-gap-dial/AutolayoutGapDial.tsx +305 -305
  90. package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx +350 -350
  91. package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.tsx +352 -352
  92. package/lib/motion/shotcraft/upstream/demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx +218 -218
  93. package/lib/motion/shotcraft/upstream/demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx +297 -297
  94. package/lib/motion/shotcraft/upstream/demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx +157 -157
  95. package/lib/motion/shotcraft/upstream/demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx +218 -218
  96. package/lib/motion/shotcraft/upstream/demos/interaction/picker-carousel-feature-cycle/PickerCarouselFeatureCycle.tsx +202 -202
  97. package/lib/motion/shotcraft/upstream/demos/interaction/segmented-thumb-hero/SegmentedThumbHero.tsx +265 -265
  98. package/lib/motion/shotcraft/upstream/demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx +457 -457
  99. package/lib/motion/shotcraft/upstream/demos/interaction/theme-switch-moves/ThemeSweepToggle.tsx +446 -446
  100. package/lib/motion/shotcraft/upstream/demos/interaction/type-and-filter/TypeAndFilter.tsx +249 -249
  101. package/lib/motion/shotcraft/upstream/demos/interaction/voice-waveform-live/VoiceWaveformLive.tsx +278 -278
  102. package/lib/motion/shotcraft/upstream/demos/opening/crane-rise-reveal/CraneRiseReveal.tsx +332 -332
  103. package/lib/motion/shotcraft/upstream/demos/opening/dataviz-landscape-open/DatavizLandscapeOpen.tsx +358 -358
  104. package/lib/motion/shotcraft/upstream/demos/opening/fracture/Fracture.tsx +201 -201
  105. package/lib/motion/shotcraft/upstream/demos/opening/icon-field-colorize/IconFieldColorize.tsx +200 -200
  106. package/lib/motion/shotcraft/upstream/demos/opening/letterspace-materialize/LetterspaceMaterialize.tsx +208 -208
  107. package/lib/motion/shotcraft/upstream/demos/opening/magician-card-flourish/MagicianCardFlourish.tsx +341 -341
  108. package/lib/motion/shotcraft/upstream/demos/opening/orbit-ring-title-open/OrbitRingTitleOpen.tsx +389 -389
  109. package/lib/motion/shotcraft/upstream/demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx +293 -293
  110. package/lib/motion/shotcraft/upstream/demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx +183 -183
  111. package/lib/motion/shotcraft/upstream/demos/opening/text-as-mask/TextAsMask.tsx +245 -245
  112. package/lib/motion/shotcraft/upstream/demos/outro/grain-dissolve/GrainDissolve.tsx +222 -222
  113. package/lib/motion/shotcraft/upstream/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx +223 -223
  114. package/lib/motion/shotcraft/upstream/demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx +217 -217
  115. package/lib/motion/shotcraft/upstream/demos/outro/outro-group-photo-launch/OutroGroupPhotoLaunch.tsx +343 -343
  116. package/lib/motion/shotcraft/upstream/demos/outro/ui-strip-away-outro/UiStripAwayOutro.tsx +357 -357
  117. package/lib/motion/shotcraft/upstream/demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx +187 -187
  118. package/lib/motion/shotcraft/upstream/demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.tsx +333 -333
  119. package/lib/motion/shotcraft/upstream/demos/rhythm/beat-cut-moves/PaparazziFlash.tsx +274 -274
  120. package/lib/motion/shotcraft/upstream/demos/rhythm/beat-step-list-theme-cycle/BeatStepListThemeCycle.tsx +270 -270
  121. package/lib/motion/shotcraft/upstream/demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx +430 -430
  122. package/lib/motion/shotcraft/upstream/demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx +252 -252
  123. package/lib/motion/shotcraft/upstream/demos/rhythm/rhythm-interrupt-moves/JumpCutPunchIn.tsx +106 -106
  124. package/lib/motion/shotcraft/upstream/demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx +288 -288
  125. package/lib/motion/shotcraft/upstream/demos/rhythm/speed-ramp-freeze/FreezeAnnotateReal.tsx +362 -362
  126. package/lib/motion/shotcraft/upstream/demos/rhythm/trailer-grammar-moves/TrailerBumper.tsx +168 -168
  127. package/lib/motion/shotcraft/upstream/demos/transition/bottom-push-stack-wipe/BottomPushStackWipe.tsx +310 -310
  128. package/lib/motion/shotcraft/upstream/demos/transition/card-flip-reveal/CardFlipReveal.tsx +261 -261
  129. package/lib/motion/shotcraft/upstream/demos/transition/card-flock-tumble/CardFlockTumble.tsx +459 -459
  130. package/lib/motion/shotcraft/upstream/demos/transition/circle-match-iris/CircleMatchIris.tsx +294 -294
  131. package/lib/motion/shotcraft/upstream/demos/transition/gradient-transition/GradientTransition.tsx +161 -161
  132. package/lib/motion/shotcraft/upstream/demos/transition/line-carry-transition/LineCarryTransition.tsx +248 -248
  133. package/lib/motion/shotcraft/upstream/demos/transition/mosaic-reframe/MosaicReframe.tsx +359 -359
  134. package/lib/motion/shotcraft/upstream/demos/transition/page-turn-transitions/BarnDoorSplit.tsx +227 -227
  135. package/lib/motion/shotcraft/upstream/demos/transition/print-texture-transitions/InkBleedReveal.tsx +162 -162
  136. package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/PortalWipeV2.tsx +248 -248
  137. package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/WhipBrakeReal.tsx +186 -186
  138. package/lib/motion/shotcraft/upstream/demos/transition/tear-streak-transitions/GlitchDisplace.tsx +355 -355
  139. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/InvisibleCut.tsx +272 -272
  140. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/LightLeakBurn.tsx +262 -262
  141. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/VersusSlam.tsx +217 -217
  142. package/lib/motion/shotcraft/upstream/demos/transition/transition-travel/LetterformZoom.tsx +285 -285
  143. package/lib/motion/shotcraft/upstream/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx +205 -205
  144. package/lib/motion/shotcraft/upstream/demos/transition/wipe-transitions/BlindsSlice.tsx +178 -178
  145. package/lib/motion/shotcraft/upstream/demos/typography/blur-slide/BlurSlide.tsx +147 -147
  146. package/lib/motion/shotcraft/upstream/demos/typography/brace-expand/BraceExpand.tsx +143 -143
  147. package/lib/motion/shotcraft/upstream/demos/typography/brand-ink-open/BrandInkOpen.tsx +134 -134
  148. package/lib/motion/shotcraft/upstream/demos/typography/countdown-arc-scatter/CountdownArcScatter.tsx +217 -217
  149. package/lib/motion/shotcraft/upstream/demos/typography/flying-words/FlyingWords.tsx +198 -198
  150. package/lib/motion/shotcraft/upstream/demos/typography/glitch-cycle/GlitchCycle.tsx +221 -221
  151. package/lib/motion/shotcraft/upstream/demos/typography/gradient-word-sweep/GradientWordSweep.tsx +312 -312
  152. package/lib/motion/shotcraft/upstream/demos/typography/lead-word-zoom-assemble/LeadWordZoomAssemble.tsx +261 -261
  153. package/lib/motion/shotcraft/upstream/demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx +121 -121
  154. package/lib/motion/shotcraft/upstream/demos/typography/outline-word-fill/OutlineWordFill.tsx +153 -153
  155. package/lib/motion/shotcraft/upstream/demos/typography/paper-title-card/PaperTitleCard.tsx +179 -179
  156. package/lib/motion/shotcraft/upstream/demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx +140 -140
  157. package/lib/motion/shotcraft/upstream/demos/typography/pill-slot-cycle/PillSlotCycle.tsx +309 -309
  158. package/lib/motion/shotcraft/upstream/demos/typography/text-column-converge/TextColumnConverge.tsx +191 -191
  159. package/lib/motion/shotcraft/upstream/demos/typography/title-demote-to-label/TitleDemoteToLabel.tsx +292 -292
  160. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx +135 -135
  161. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/SplitTextStagger.tsx +124 -124
  162. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/TextOnPath.tsx +255 -255
  163. package/lib/motion/shotcraft/upstream/demos/typography/type-entrance-moves/LetterDropPhysics.tsx +173 -173
  164. package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/FontWeightPump.tsx +225 -225
  165. package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/KaraokeFillSync.tsx +141 -141
  166. package/lib/motion/shotcraft/upstream/demos/typography/typewriter-moves/TypewriterErrorRetype.tsx +137 -137
  167. package/lib/motion/shotcraft/upstream/demos/typography/vertical-word-roll-blur-cycle/VerticalWordRollBlurCycle.tsx +147 -147
  168. package/lib/motion/shotcraft/upstream/demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx +409 -409
  169. package/lib/motion/shotcraft/upstream/demos/typography/word-relay-geometry/WordRelayGeometry.tsx +280 -280
  170. package/lib/motion/shotcraft/upstream/demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx +271 -271
  171. package/lib/motion/shotcraft/upstream/demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx +385 -385
  172. package/lib/motion/shotcraft/upstream/demos/ui-entrance/card-stack/CardStack.tsx +312 -312
  173. package/lib/motion/shotcraft/upstream/demos/ui-entrance/carousel-3d/Carousel3D.tsx +303 -303
  174. package/lib/motion/shotcraft/upstream/demos/ui-entrance/clipcard-looping/ClipCardLooping.tsx +77 -77
  175. package/lib/motion/shotcraft/upstream/demos/ui-entrance/cloner-depth-echo/ClonerDepthEcho.tsx +311 -311
  176. package/lib/motion/shotcraft/upstream/demos/ui-entrance/deck-deal-flyin/DeckDealFlyin.tsx +307 -307
  177. package/lib/motion/shotcraft/upstream/demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx +349 -349
  178. package/lib/motion/shotcraft/upstream/demos/ui-entrance/document-typewriter-reveal/DocumentTypewriterReveal.tsx +255 -255
  179. package/lib/motion/shotcraft/upstream/demos/ui-entrance/draw-svg-trace/DrawSvgTrace.tsx +244 -244
  180. package/lib/motion/shotcraft/upstream/demos/ui-entrance/element-body-moves/ContactShadowLift.tsx +217 -217
  181. package/lib/motion/shotcraft/upstream/demos/ui-entrance/integration-hub-map/IntegrationHubMap.tsx +652 -652
  182. package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-reveal/ListReveal.tsx +153 -153
  183. package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-stack-press/ListStackPress.tsx +238 -238
  184. package/lib/motion/shotcraft/upstream/demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.tsx +324 -324
  185. package/lib/motion/shotcraft/upstream/demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx +354 -354
  186. package/lib/motion/shotcraft/upstream/demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx +101 -101
  187. package/lib/motion/shotcraft/upstream/demos/ui-entrance/page-waterfall-wall/VerticalTicker.tsx +129 -129
  188. package/lib/motion/shotcraft/upstream/demos/ui-entrance/product-card-progressive-assemble/ProductCardProgressiveAssemble.tsx +297 -297
  189. package/lib/motion/shotcraft/upstream/demos/ui-entrance/radial-wave/RadialWave.tsx +57 -57
  190. package/lib/motion/shotcraft/upstream/demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx +155 -155
  191. package/lib/motion/shotcraft/upstream/demos/ui-entrance/row-embed/RowEmbed.tsx +175 -175
  192. package/lib/motion/shotcraft/upstream/demos/ui-entrance/value-stagger-gradient/ValueStaggerGradient.tsx +153 -153
  193. package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx +146 -146
  194. package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.tsx +226 -226
  195. package/lib/motion/shotcraft/upstream/gallery/api/library.json +1 -1
  196. package/lib/motion/shotcraft/upstream/references/aesthetic-rules.md +193 -193
  197. package/lib/motion/shotcraft/upstream/references/final-review.md +121 -121
  198. package/lib/motion/shotcraft/upstream/references/guided-free-creation.md +199 -199
  199. package/lib/motion/shotcraft/upstream/references/jianying-export.md +183 -183
  200. package/lib/motion/shotcraft/upstream/references/music-beat-sync.md +257 -257
  201. package/lib/motion/shotcraft/upstream/references/pipeline.md +382 -382
  202. package/lib/motion/shotcraft/upstream/references/publish-upload-post.md +111 -111
  203. package/lib/motion/shotcraft/upstream/references/sequences/promo-energy-arc.md +50 -50
  204. package/lib/motion/shotcraft/upstream/references/sfx-sourcing.md +95 -95
  205. package/lib/motion/shotcraft/upstream/references/shots/camera/basic-3d-scene.md +41 -41
  206. package/lib/motion/shotcraft/upstream/references/shots/camera/crash-zoom-punch.md +52 -52
  207. package/lib/motion/shotcraft/upstream/references/shots/camera/cursor-flyover.md +39 -39
  208. package/lib/motion/shotcraft/upstream/references/shots/camera/depth-layer-moves.md +39 -39
  209. package/lib/motion/shotcraft/upstream/references/shots/camera/graze-face-tour.md +57 -57
  210. package/lib/motion/shotcraft/upstream/references/shots/camera/overhead-camera-moves.md +51 -51
  211. package/lib/motion/shotcraft/upstream/references/shots/camera/space-camera-moves.md +46 -46
  212. package/lib/motion/shotcraft/upstream/references/shots/camera/steep-tilt-glide.md +52 -52
  213. package/lib/motion/shotcraft/upstream/references/shots/camera/tension-camera-moves.md +43 -43
  214. package/lib/motion/shotcraft/upstream/references/shots/camera/terminal-3d.md +42 -42
  215. package/lib/motion/shotcraft/upstream/references/shots/data/before-after-slider-scrub.md +48 -48
  216. package/lib/motion/shotcraft/upstream/references/shots/data/chart-live-moves.md +52 -52
  217. package/lib/motion/shotcraft/upstream/references/shots/data/gauge-readout-moves.md +45 -45
  218. package/lib/motion/shotcraft/upstream/references/shots/data/scroll-brake-moves.md +46 -46
  219. package/lib/motion/shotcraft/upstream/references/shots/data/timeline-travel.md +44 -44
  220. package/lib/motion/shotcraft/upstream/references/shots/effects/assemble-then-type-flyin.md +63 -63
  221. package/lib/motion/shotcraft/upstream/references/shots/effects/aurora-bloom-bg-flip.md +54 -54
  222. package/lib/motion/shotcraft/upstream/references/shots/effects/brand-frame-snap.md +58 -58
  223. package/lib/motion/shotcraft/upstream/references/shots/effects/fui-hud-moves.md +35 -35
  224. package/lib/motion/shotcraft/upstream/references/shots/effects/glow-flyline-moves.md +53 -53
  225. package/lib/motion/shotcraft/upstream/references/shots/effects/icon-performance-moves.md +42 -42
  226. package/lib/motion/shotcraft/upstream/references/shots/effects/impact-feedback.md +50 -50
  227. package/lib/motion/shotcraft/upstream/references/shots/effects/light-play-moves.md +46 -46
  228. package/lib/motion/shotcraft/upstream/references/shots/effects/radial-ripple-phone-chips.md +56 -56
  229. package/lib/motion/shotcraft/upstream/references/shots/effects/riso-print-hits.md +49 -49
  230. package/lib/motion/shotcraft/upstream/references/shots/effects/scan-bracket-sweep.md +50 -50
  231. package/lib/motion/shotcraft/upstream/references/shots/effects/scanline-annotate-focus.md +53 -53
  232. package/lib/motion/shotcraft/upstream/references/shots/effects/scanline-assemble-flyin.md +53 -53
  233. package/lib/motion/shotcraft/upstream/references/shots/effects/slam-entrance-moves.md +55 -55
  234. package/lib/motion/shotcraft/upstream/references/shots/effects/spotlight-sweep-moves.md +52 -52
  235. package/lib/motion/shotcraft/upstream/references/shots/interaction/autolayout-gap-dial.md +60 -60
  236. package/lib/motion/shotcraft/upstream/references/shots/interaction/canvas-materialize-moves.md +57 -57
  237. package/lib/motion/shotcraft/upstream/references/shots/interaction/chip-grid-single-select-blackout.md +51 -51
  238. package/lib/motion/shotcraft/upstream/references/shots/interaction/collab-cursor-moves.md +41 -41
  239. package/lib/motion/shotcraft/upstream/references/shots/interaction/glass-pill-dictation-typing.md +53 -53
  240. package/lib/motion/shotcraft/upstream/references/shots/interaction/hashtag-to-pill-materialize.md +60 -60
  241. package/lib/motion/shotcraft/upstream/references/shots/interaction/picker-carousel-feature-cycle.md +55 -55
  242. package/lib/motion/shotcraft/upstream/references/shots/interaction/segmented-thumb-hero.md +57 -57
  243. package/lib/motion/shotcraft/upstream/references/shots/interaction/theme-switch-moves.md +47 -47
  244. package/lib/motion/shotcraft/upstream/references/shots/interaction/type-and-filter.md +37 -37
  245. package/lib/motion/shotcraft/upstream/references/shots/interaction/voice-waveform-live.md +54 -54
  246. package/lib/motion/shotcraft/upstream/references/shots/opening/brand-ink-open.md +36 -36
  247. package/lib/motion/shotcraft/upstream/references/shots/opening/crane-rise-reveal.md +56 -56
  248. package/lib/motion/shotcraft/upstream/references/shots/opening/dataviz-landscape-open.md +56 -56
  249. package/lib/motion/shotcraft/upstream/references/shots/opening/fracture.md +40 -40
  250. package/lib/motion/shotcraft/upstream/references/shots/opening/icon-field-colorize.md +60 -60
  251. package/lib/motion/shotcraft/upstream/references/shots/opening/letterspace-materialize.md +57 -57
  252. package/lib/motion/shotcraft/upstream/references/shots/opening/magician-card-flourish.md +73 -73
  253. package/lib/motion/shotcraft/upstream/references/shots/opening/orbit-ring-title-open.md +87 -87
  254. package/lib/motion/shotcraft/upstream/references/shots/opening/spotlight-hero-card.md +55 -55
  255. package/lib/motion/shotcraft/upstream/references/shots/opening/stroke-segment-build.md +50 -50
  256. package/lib/motion/shotcraft/upstream/references/shots/opening/text-as-mask.md +59 -59
  257. package/lib/motion/shotcraft/upstream/references/shots/outro/grain-dissolve.md +38 -38
  258. package/lib/motion/shotcraft/upstream/references/shots/outro/logo-shrink-wordmark-lockup.md +38 -38
  259. package/lib/motion/shotcraft/upstream/references/shots/outro/neon-triple-marquee.md +59 -59
  260. package/lib/motion/shotcraft/upstream/references/shots/outro/outro-group-photo-launch.md +39 -39
  261. package/lib/motion/shotcraft/upstream/references/shots/outro/ui-strip-away-outro.md +61 -61
  262. package/lib/motion/shotcraft/upstream/references/shots/outro/ui-to-brand-morph.md +52 -52
  263. package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-cut-moves.md +50 -50
  264. package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-step-list-theme-cycle.md +66 -66
  265. package/lib/motion/shotcraft/upstream/references/shots/rhythm/panel-grid-moves.md +43 -43
  266. package/lib/motion/shotcraft/upstream/references/shots/rhythm/quad-split-parallel-scenes.md +38 -38
  267. package/lib/motion/shotcraft/upstream/references/shots/rhythm/rhythm-interrupt-moves.md +38 -38
  268. package/lib/motion/shotcraft/upstream/references/shots/rhythm/sakuga-timing-shift.md +56 -56
  269. package/lib/motion/shotcraft/upstream/references/shots/rhythm/speed-ramp-freeze.md +44 -44
  270. package/lib/motion/shotcraft/upstream/references/shots/rhythm/trailer-grammar-moves.md +38 -38
  271. package/lib/motion/shotcraft/upstream/references/shots/transition/bottom-push-stack-wipe.md +63 -63
  272. package/lib/motion/shotcraft/upstream/references/shots/transition/card-flip-reveal.md +57 -57
  273. package/lib/motion/shotcraft/upstream/references/shots/transition/card-flock-tumble.md +63 -63
  274. package/lib/motion/shotcraft/upstream/references/shots/transition/circle-match-iris.md +58 -58
  275. package/lib/motion/shotcraft/upstream/references/shots/transition/gradient-transition.md +45 -45
  276. package/lib/motion/shotcraft/upstream/references/shots/transition/line-carry-transition.md +55 -55
  277. package/lib/motion/shotcraft/upstream/references/shots/transition/mosaic-reframe.md +49 -49
  278. package/lib/motion/shotcraft/upstream/references/shots/transition/page-turn-transitions.md +42 -42
  279. package/lib/motion/shotcraft/upstream/references/shots/transition/print-texture-transitions.md +42 -42
  280. package/lib/motion/shotcraft/upstream/references/shots/transition/shot-transitions.md +45 -45
  281. package/lib/motion/shotcraft/upstream/references/shots/transition/tear-streak-transitions.md +48 -48
  282. package/lib/motion/shotcraft/upstream/references/shots/transition/transition-hidden-cut.md +55 -55
  283. package/lib/motion/shotcraft/upstream/references/shots/transition/transition-travel.md +43 -43
  284. package/lib/motion/shotcraft/upstream/references/shots/transition/white-flash-logo-simplify-cut.md +41 -41
  285. package/lib/motion/shotcraft/upstream/references/shots/transition/wipe-transitions.md +42 -42
  286. package/lib/motion/shotcraft/upstream/references/shots/typography/blur-slide.md +59 -59
  287. package/lib/motion/shotcraft/upstream/references/shots/typography/brace-expand.md +55 -55
  288. package/lib/motion/shotcraft/upstream/references/shots/typography/countdown-arc-scatter.md +65 -65
  289. package/lib/motion/shotcraft/upstream/references/shots/typography/document-typewriter-reveal.md +42 -42
  290. package/lib/motion/shotcraft/upstream/references/shots/typography/flying-words.md +64 -64
  291. package/lib/motion/shotcraft/upstream/references/shots/typography/glitch-cycle.md +64 -64
  292. package/lib/motion/shotcraft/upstream/references/shots/typography/gradient-word-sweep.md +54 -54
  293. package/lib/motion/shotcraft/upstream/references/shots/typography/lead-word-zoom-assemble.md +91 -91
  294. package/lib/motion/shotcraft/upstream/references/shots/typography/marker-underline-title.md +51 -51
  295. package/lib/motion/shotcraft/upstream/references/shots/typography/outline-word-fill.md +66 -66
  296. package/lib/motion/shotcraft/upstream/references/shots/typography/paper-title-card.md +38 -38
  297. package/lib/motion/shotcraft/upstream/references/shots/typography/pill-chip-slot-cycle-handled.md +66 -66
  298. package/lib/motion/shotcraft/upstream/references/shots/typography/pill-slot-cycle.md +58 -58
  299. package/lib/motion/shotcraft/upstream/references/shots/typography/text-column-converge.md +61 -61
  300. package/lib/motion/shotcraft/upstream/references/shots/typography/title-demote-to-label.md +64 -64
  301. package/lib/motion/shotcraft/upstream/references/shots/typography/type-assembly-moves.md +45 -45
  302. package/lib/motion/shotcraft/upstream/references/shots/typography/type-entrance-moves.md +41 -41
  303. package/lib/motion/shotcraft/upstream/references/shots/typography/type-rhythm-sync.md +51 -51
  304. package/lib/motion/shotcraft/upstream/references/shots/typography/typewriter-moves.md +42 -42
  305. package/lib/motion/shotcraft/upstream/references/shots/typography/vertical-word-roll-blur-cycle.md +63 -63
  306. package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-filmstrip.md +57 -57
  307. package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-geometry.md +75 -75
  308. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/avatar-bracket-carousel.md +59 -59
  309. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/bezier-source-converge-merge.md +67 -67
  310. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/card-stack.md +60 -60
  311. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/carousel-3d.md +66 -66
  312. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/cloner-depth-echo.md +40 -40
  313. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/deck-deal-flyin.md +45 -45
  314. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/doc-park-left-pill-deal.md +62 -62
  315. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/draw-svg-trace.md +55 -55
  316. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/element-body-moves.md +37 -37
  317. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/integration-hub-map.md +55 -55
  318. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/list-reveal.md +50 -50
  319. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/list-stack-press.md +43 -43
  320. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/neon-frame-forerun.md +55 -55
  321. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/neon-frame-orbit-drop.md +51 -51
  322. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/page-waterfall-wall.md +51 -51
  323. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/product-card-progressive-assemble.md +56 -56
  324. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/radial-wave.md +49 -49
  325. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/research-card-stack-scroll.md +57 -57
  326. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/row-embed.md +36 -36
  327. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/value-stagger-gradient.md +64 -64
  328. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/wall-reveal-moves.md +47 -47
  329. package/lib/motion/shotcraft/upstream/references/sound-design.md +170 -170
  330. package/lib/motion/shotcraft/upstream/references/workbench.md +157 -157
  331. package/lib/motion/shotcraft/upstream/template/TEMPLATE.md +103 -103
  332. package/lib/motion/shotcraft/upstream/template/THEMES.md +44 -44
  333. package/lib/motion/shotcraft/upstream/template/package.json +20 -20
  334. package/lib/motion/shotcraft/upstream/template/remotion.config.ts +6 -6
  335. package/lib/motion/shotcraft/upstream/template/src/Root.tsx +17 -17
  336. package/lib/motion/shotcraft/upstream/template/src/aifl/Caption.tsx +65 -65
  337. package/lib/motion/shotcraft/upstream/template/src/aifl/DigitRoll.tsx +48 -48
  338. package/lib/motion/shotcraft/upstream/template/src/aifl/FlashCut.tsx +24 -24
  339. package/lib/motion/shotcraft/upstream/template/src/aifl/Main.tsx +192 -192
  340. package/lib/motion/shotcraft/upstream/template/src/aifl/PaperTitleCard.tsx +111 -111
  341. package/lib/motion/shotcraft/upstream/template/src/aifl/live/PageCam.tsx +150 -150
  342. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneDetail.tsx +158 -158
  343. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneFlyIn.tsx +468 -468
  344. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOpen.tsx +552 -552
  345. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOutroLive.tsx +411 -411
  346. package/lib/motion/shotcraft/upstream/template/src/aifl/live/ScenePapers.tsx +200 -200
  347. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneWbr.tsx +324 -324
  348. package/lib/motion/shotcraft/upstream/template/src/aifl/live-layout.json +388 -388
  349. package/lib/motion/shotcraft/upstream/template/src/index.ts +4 -4
  350. package/lib/motion/shotcraft/upstream/template/src/themes/ThemedFilm.tsx +7 -7
  351. package/lib/motion/shotcraft/upstream/template/src/themes/manifest.tsx +68 -68
  352. package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.json +1 -1
  353. package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.ts +24 -24
  354. package/lib/motion/shotcraft/upstream/template/src/themes/palettes.json +74 -74
  355. package/lib/motion/shotcraft/upstream/template/src/themes/visual-theme.tsx +91 -91
  356. package/lib/motion/shotcraft/upstream/template/src/workbench.ts +213 -213
  357. package/lib/motion/shotcraft/upstream/template/tsconfig.json +15 -15
  358. package/lib/motion/style-frames.js +47 -12
  359. package/lib/motion-project.js +22 -3
  360. package/lib/motion-render-worker.js +31 -9
  361. package/lib/routing/router.js +12 -1
  362. package/lib/style-kernel.js +16 -6
  363. package/lib/video-trace-pool.js +128 -128
  364. package/package.json +1 -1
  365. package/LICENSE +0 -4175
@@ -1,64 +1,64 @@
1
- ---
2
- name: title-demote-to-label
3
- 一句话: 大标题降格为节标签两式——A 大标题居中显影站稳一拍后连续缩小 0.3x 平移到左上角落成小节标签、内容区在其下生长;B 同套路但登场时带文本选中态高亮块扫入再撤掉
4
- 适用: 章节开场(标题先当主角再让位给内容);教程/功能演示片的小节交接;B 式给"文字/编辑"类产品加身份暗示
5
- 时长: A ~3.7s(112f)/ B ~4.5s(134f);demo 两式串播 246f
6
- 能量: 低中(版式变换型,氛围镜头)
7
- 标签: transition
8
- ---
9
-
10
- ## 意图
11
- 章节标题的常规命运是"出现→消失→内容登场",标题和内容互不认识。
12
- 本卡让标题**降格而不退场**:居中大字站稳一拍宣告主题,然后一次连续
13
- 补间缩到 0.3x 飞到左上角,落成这一节的栏目标签——它还在屏幕上,
14
- 只是从主角变成了门牌。观众获得免费的空间记忆:刚才那个大词就是
15
- 现在左上角那个小词,本节讲的就是它。内容骨架在降格进行中就开始
16
- 生长,交接零空档。
17
-
18
- ## 动效核心
19
- - 降格是**单次连续补间**,26f 不对称 in-out(bezier(0.6,0,0.18,1):起步果断、落点很软):
20
- scale 1→0.22(220px 标题 → ≈48px 标签)+ 位置 (960,540)→(216,196) 同一条曲线——分两段(先缩后飞)读作两个动作
21
- - transform-origin 左中;居中修正量 translate(-50%) 随补间同步归零
22
- (`translate(${-(1-dem)*50}%, -50%)`)——不归零终点会偏一个半宽
23
- - 登场显影:标题逐字从遮罩线下升起(rise,16f/字、1.6f 错峰),朱红句点晚 10f 过冲弹出;
24
- mono 眉题「CHAPTER 01」字距由宽收紧。显影后必须站稳 ≥18f 再降格(demo 20f,期间 1.5% 极缓推近)——
25
- 没站稳就缩,宣告拍被吃掉。眉题随起飞 6f 淡出,落位前标签前缀「01 /」从左擦入接班
26
- - 内容错峰生长(demo 为 video-shotcraft 的分镜工作台页,两节标题取品牌短句「Frame.」「Craft.」:
27
- A = 60px 导语 + 三张卡(镜头配方卡 / 用户评价 / 卡点节拍);B = 58px 分镜脚本 + 句内选区 → 连线 → 旁注匹配镜头卡):每块裁切从左揭开(宽 0.3→1,字不压扁)+ 上移 30px 淡入,
28
- 先密后疏错峰;生长起点在降格进行到 12f 时,标题还在飞内容已在长——这个重叠是"交接无空档"的来源。
29
- 横跨全宽的分隔线晚几帧再画,别让它在标题飞行路径上同帧生长
30
- - B 式选中高亮:左缘/宽度两个百分比分别补间——扫入时宽度 0→100%
31
- (盖住,10f),撤掉时左缘 0→100%(从左让开,8f);高亮撤净后再起降格
32
- - 降格飞行按位置差分速度加方向性运动模糊(静止为 0);B 式选区用强调色 20% 透明 + 跟随右缘的插入光标
33
- - 两式串播不再白闪:共用一个舞台,A 内容 ease-in 上移 12f 退场 → B 大标题原地显影;
34
- B 降格前 A 标签上移一行、缩到 0.7、变灰成"上一节",B 标签落进同一个槽位(多节连用不叠放的做法)
35
- (demo 导出 `TITLE_DEMOTE_TO_LABEL_DURATION` = 246f,look = paper)
36
-
37
- ## 参数表
38
- | 参数 | 典型值 | 调节手感 |
39
- |------|--------|----------|
40
- | 降格补间 | 26f 不对称 in-out,scale→0.22(落成 ≈48px) | <14f 读作标题被弹走;终点 >0.45 标签太大压内容;标签 <40px 不可读 |
41
- | 站稳拍 | 显影后 ≥18f 静置 | 省掉这拍,观众没读完标题它就跑了,降格白做 |
42
- | 内容错峰 | 先密后疏,块 18–22f,宽 0.3→1 | 全部同时长出读作页面刷新而非"生长" |
43
- | 生长起点 | 降格开始后 +12f | 等标题完全落位才生长会空 8f 冷场 |
44
- | 选中高亮 | 扫入 10f / hold 10f / 撤 8f,强调色 20% 透明 | 高亮 hold <5f 读作闪烁 bug;不撤干净就降格,色块跟着飞很脏 |
45
- | 两节交接 | 旧内容 exit 12f 上移退场;旧标签 16f 上移一行变灰 | 旧标签不让位,新标签落在它身上 = 标签坟场 |
46
-
47
- ## 已知坑
48
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
49
- 首次实战须以真实素材回验
50
- - 与"标题钉进 3D 空间随相机透视变形"的场景锁定拍法(已退役)分工
51
- (空间型),本卡是 2D 版式层级的连续降格(版式型)——要"标题住进
52
- 产品空间"用那卡,要"标题变栏目名"用本卡,同片选一
53
- - 降格路径上不许有其他元素动——标题飞行是全屏唯一焦点,骨架生长
54
- 在它落点下方不抢(起点错开),但弹窗/光标类同帧入场必抢
55
- - 多节连用(每节一次降格)时左上角标签要**换行不叠放**:新标签落位
56
- 旧标签上移让位,否则第二节起左上角变成标签坟场
57
- - B 式的选中高亮是"文字可被选中"的产品暗示,非编辑器/文档类产品
58
- 用了语义空转,别为了好看加
59
- - 标题文案 ≤3 个词——降格到 0.3x 后还要当可读标签,长句缩完就是一条灰线
60
-
61
- ## 参考实现
62
- demos/typography/title-demote-to-label/
63
- (TitleDemoteToLabel.tsx)
64
- 原片出处:perplexity-promo 16–18.5s;B 式变体源自 framer text-selection-title
1
+ ---
2
+ name: title-demote-to-label
3
+ 一句话: 大标题降格为节标签两式——A 大标题居中显影站稳一拍后连续缩小 0.3x 平移到左上角落成小节标签、内容区在其下生长;B 同套路但登场时带文本选中态高亮块扫入再撤掉
4
+ 适用: 章节开场(标题先当主角再让位给内容);教程/功能演示片的小节交接;B 式给"文字/编辑"类产品加身份暗示
5
+ 时长: A ~3.7s(112f)/ B ~4.5s(134f);demo 两式串播 246f
6
+ 能量: 低中(版式变换型,氛围镜头)
7
+ 标签: transition
8
+ ---
9
+
10
+ ## 意图
11
+ 章节标题的常规命运是"出现→消失→内容登场",标题和内容互不认识。
12
+ 本卡让标题**降格而不退场**:居中大字站稳一拍宣告主题,然后一次连续
13
+ 补间缩到 0.3x 飞到左上角,落成这一节的栏目标签——它还在屏幕上,
14
+ 只是从主角变成了门牌。观众获得免费的空间记忆:刚才那个大词就是
15
+ 现在左上角那个小词,本节讲的就是它。内容骨架在降格进行中就开始
16
+ 生长,交接零空档。
17
+
18
+ ## 动效核心
19
+ - 降格是**单次连续补间**,26f 不对称 in-out(bezier(0.6,0,0.18,1):起步果断、落点很软):
20
+ scale 1→0.22(220px 标题 → ≈48px 标签)+ 位置 (960,540)→(216,196) 同一条曲线——分两段(先缩后飞)读作两个动作
21
+ - transform-origin 左中;居中修正量 translate(-50%) 随补间同步归零
22
+ (`translate(${-(1-dem)*50}%, -50%)`)——不归零终点会偏一个半宽
23
+ - 登场显影:标题逐字从遮罩线下升起(rise,16f/字、1.6f 错峰),朱红句点晚 10f 过冲弹出;
24
+ mono 眉题「CHAPTER 01」字距由宽收紧。显影后必须站稳 ≥18f 再降格(demo 20f,期间 1.5% 极缓推近)——
25
+ 没站稳就缩,宣告拍被吃掉。眉题随起飞 6f 淡出,落位前标签前缀「01 /」从左擦入接班
26
+ - 内容错峰生长(demo 为 video-shotcraft 的分镜工作台页,两节标题取品牌短句「Frame.」「Craft.」:
27
+ A = 60px 导语 + 三张卡(镜头配方卡 / 用户评价 / 卡点节拍);B = 58px 分镜脚本 + 句内选区 → 连线 → 旁注匹配镜头卡):每块裁切从左揭开(宽 0.3→1,字不压扁)+ 上移 30px 淡入,
28
+ 先密后疏错峰;生长起点在降格进行到 12f 时,标题还在飞内容已在长——这个重叠是"交接无空档"的来源。
29
+ 横跨全宽的分隔线晚几帧再画,别让它在标题飞行路径上同帧生长
30
+ - B 式选中高亮:左缘/宽度两个百分比分别补间——扫入时宽度 0→100%
31
+ (盖住,10f),撤掉时左缘 0→100%(从左让开,8f);高亮撤净后再起降格
32
+ - 降格飞行按位置差分速度加方向性运动模糊(静止为 0);B 式选区用强调色 20% 透明 + 跟随右缘的插入光标
33
+ - 两式串播不再白闪:共用一个舞台,A 内容 ease-in 上移 12f 退场 → B 大标题原地显影;
34
+ B 降格前 A 标签上移一行、缩到 0.7、变灰成"上一节",B 标签落进同一个槽位(多节连用不叠放的做法)
35
+ (demo 导出 `TITLE_DEMOTE_TO_LABEL_DURATION` = 246f,look = paper)
36
+
37
+ ## 参数表
38
+ | 参数 | 典型值 | 调节手感 |
39
+ |------|--------|----------|
40
+ | 降格补间 | 26f 不对称 in-out,scale→0.22(落成 ≈48px) | <14f 读作标题被弹走;终点 >0.45 标签太大压内容;标签 <40px 不可读 |
41
+ | 站稳拍 | 显影后 ≥18f 静置 | 省掉这拍,观众没读完标题它就跑了,降格白做 |
42
+ | 内容错峰 | 先密后疏,块 18–22f,宽 0.3→1 | 全部同时长出读作页面刷新而非"生长" |
43
+ | 生长起点 | 降格开始后 +12f | 等标题完全落位才生长会空 8f 冷场 |
44
+ | 选中高亮 | 扫入 10f / hold 10f / 撤 8f,强调色 20% 透明 | 高亮 hold <5f 读作闪烁 bug;不撤干净就降格,色块跟着飞很脏 |
45
+ | 两节交接 | 旧内容 exit 12f 上移退场;旧标签 16f 上移一行变灰 | 旧标签不让位,新标签落在它身上 = 标签坟场 |
46
+
47
+ ## 已知坑
48
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
49
+ 首次实战须以真实素材回验
50
+ - 与"标题钉进 3D 空间随相机透视变形"的场景锁定拍法(已退役)分工
51
+ (空间型),本卡是 2D 版式层级的连续降格(版式型)——要"标题住进
52
+ 产品空间"用那卡,要"标题变栏目名"用本卡,同片选一
53
+ - 降格路径上不许有其他元素动——标题飞行是全屏唯一焦点,骨架生长
54
+ 在它落点下方不抢(起点错开),但弹窗/光标类同帧入场必抢
55
+ - 多节连用(每节一次降格)时左上角标签要**换行不叠放**:新标签落位
56
+ 旧标签上移让位,否则第二节起左上角变成标签坟场
57
+ - B 式的选中高亮是"文字可被选中"的产品暗示,非编辑器/文档类产品
58
+ 用了语义空转,别为了好看加
59
+ - 标题文案 ≤3 个词——降格到 0.3x 后还要当可读标签,长句缩完就是一条灰线
60
+
61
+ ## 参考实现
62
+ demos/typography/title-demote-to-label/
63
+ (TitleDemoteToLabel.tsx)
64
+ 原片出处:perplexity-promo 16–18.5s;B 式变体源自 framer text-selection-title
@@ -1,45 +1,45 @@
1
- ---
2
- name: type-assembly-moves
3
- 一句话: 文字集结三式——split-text-stagger 逐字裂升、letterform-drift-assembly 漂移合拢、text-on-path 沿线流入
4
- 适用: 大标题/标语的入场;与 type-entrance-moves、document-typewriter-reveal 同属标题入场大品类,全片 ≤2 种
5
- 时长: 单式 4–5.5s(动作段 A ~56f / B ~104f / C ~110f;demo 全长含 hold:A 130f / B 150f / C 160f,各自导出 `*_DURATION`)
6
- 能量: A 中 / B 中高 / C 中
7
- ---
8
-
9
- ## 意图
10
- 标题入场已有"原位变形系"(字符坠落/打字机——字在原地换形态)。本卡补"集结系":字符从别处**汇聚成**标题,运动轨迹
11
- 本身有戏。A 琴键式——每字从看不见的裁切线下滑升,理性利落,通用度
12
- 最高;B 片头式——字符四散带模糊漂入、逐个锁定加深,Stranger Things
13
- 的仪式感,适合品牌名亮相;C 语义式——字符沿一条上升曲线鱼贯流入
14
- 再摆正,曲线可以正好描着图表增长线走,文字与数据同框叙事。
15
-
16
- ## 三式选型
17
- | 式 | 做法 | 适用 |
18
- |----|------|------|
19
- | A split-text-stagger 裂升 | 每字 overflow 盒内 translateY(115%→0) 带 10% 过冲,delay i×2f,基线同步生长(demo:亮场 136px 品牌短句「FRAME MOTION.」) | 通用默认;利落理性 |
20
- | B drift-assembly 漂移合拢 | 字符 seed 方向 ±260–360px + blur 8px + 旋转 ±24° + 纵深 1.22 漂入错峰归位,锁定帧加深脉冲,合体后整词呼吸 1.04(demo:亮场 148px 品牌名「Shotcraft」) | 品牌名/片头级亮相 |
21
- | C text-on-path 沿线流入 | 整串字按真实步进沿弧长刚性推进(末字领跑、切线角旋转,行进中可读),到达后逐字沿弧线抬升到左上标题位(demo:midnight 暗场营收增长线 + 数值牌) | 曲线有语义时(增长线/流程线) |
22
-
23
- ## 参数表
24
- | 参数 | 典型值 | 调节手感 |
25
- |------|--------|----------|
26
- | A 过冲 | 10%(14f out-cubic 升到 −10% 再 6f 回落;原案 6% 可测不可感,实渲加码) | 正常速度要看得见回落那一下;升起快段按竖向速度加 y 向模糊 |
27
- | B 锁定脉冲 | 字色深到 #000 + 描边 0→3px→0 / 8f | 白底上加深+描边,不用发光(判例) |
28
- | B 漂移绑定 | 位移 (1−p)、旋转、纵深缩放、blur 8(1−p)、opacity 0.35→1 共用一条 p(Easing.out(cubic),每字 45f、错峰 3f) | 分曲线走,字会"到了还糊着" |
29
- | C 摆正 | 到达停 8f 再从左到右 1.1f 错峰、18f 抬升:y 用带 ~4% 过冲的快曲线、x 用 in-out、旋转晚 2f 收敛 → 轨迹是弧;终位按实测字宽排版 | 不摆正就永远是"挂在线上",读不出标题;抬升行程大时过冲 >5% 会顶进眉题 |
30
- | C 曲线 | evolve(dashoffset 按弧长比例)随车头字符同步生长;demo 做成图表增长线(电光蓝 5px 描边 + 外发光 + 线下渐变面积 + 青色车头光点与到顶脉冲 + 网格刻度 + 季度标记) | 曲线先画完字再走,读作两个动画 |
31
- | 收尾 | 全员落定真静止 ≥30f | R1 |
32
-
33
- ## 已知坑
34
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
35
- 首次实战须以真实素材回验
36
- - 标题入场大品类现已五式(本卡三式 + type-entrance-moves + document-typewriter-reveal),
37
- **同片 ≤2 种**(P4)铁律不变
38
- - B 式与 C 式都是高注意力入场,别再叠相机动作——字在飞的时候镜头必须稳
39
- - C 式别让字符各自起跑:后面的字要追越前面的字,曲线低段必然挤成一团(原版踩过);
40
- 按弧长刚性推进、字间距取真实步进才读得出整句;字号 >80px 时曲线拐弯处字会互相啃角,
41
- 大字改用更平缓的曲线或减字数
42
-
43
- ## 参考实现
44
- demos/typography/type-assembly-moves/
45
- (LetterformDriftAssembly.tsx / SplitTextStagger.tsx / TextOnPath.tsx)
1
+ ---
2
+ name: type-assembly-moves
3
+ 一句话: 文字集结三式——split-text-stagger 逐字裂升、letterform-drift-assembly 漂移合拢、text-on-path 沿线流入
4
+ 适用: 大标题/标语的入场;与 type-entrance-moves、document-typewriter-reveal 同属标题入场大品类,全片 ≤2 种
5
+ 时长: 单式 4–5.5s(动作段 A ~56f / B ~104f / C ~110f;demo 全长含 hold:A 130f / B 150f / C 160f,各自导出 `*_DURATION`)
6
+ 能量: A 中 / B 中高 / C 中
7
+ ---
8
+
9
+ ## 意图
10
+ 标题入场已有"原位变形系"(字符坠落/打字机——字在原地换形态)。本卡补"集结系":字符从别处**汇聚成**标题,运动轨迹
11
+ 本身有戏。A 琴键式——每字从看不见的裁切线下滑升,理性利落,通用度
12
+ 最高;B 片头式——字符四散带模糊漂入、逐个锁定加深,Stranger Things
13
+ 的仪式感,适合品牌名亮相;C 语义式——字符沿一条上升曲线鱼贯流入
14
+ 再摆正,曲线可以正好描着图表增长线走,文字与数据同框叙事。
15
+
16
+ ## 三式选型
17
+ | 式 | 做法 | 适用 |
18
+ |----|------|------|
19
+ | A split-text-stagger 裂升 | 每字 overflow 盒内 translateY(115%→0) 带 10% 过冲,delay i×2f,基线同步生长(demo:亮场 136px 品牌短句「FRAME MOTION.」) | 通用默认;利落理性 |
20
+ | B drift-assembly 漂移合拢 | 字符 seed 方向 ±260–360px + blur 8px + 旋转 ±24° + 纵深 1.22 漂入错峰归位,锁定帧加深脉冲,合体后整词呼吸 1.04(demo:亮场 148px 品牌名「Shotcraft」) | 品牌名/片头级亮相 |
21
+ | C text-on-path 沿线流入 | 整串字按真实步进沿弧长刚性推进(末字领跑、切线角旋转,行进中可读),到达后逐字沿弧线抬升到左上标题位(demo:midnight 暗场营收增长线 + 数值牌) | 曲线有语义时(增长线/流程线) |
22
+
23
+ ## 参数表
24
+ | 参数 | 典型值 | 调节手感 |
25
+ |------|--------|----------|
26
+ | A 过冲 | 10%(14f out-cubic 升到 −10% 再 6f 回落;原案 6% 可测不可感,实渲加码) | 正常速度要看得见回落那一下;升起快段按竖向速度加 y 向模糊 |
27
+ | B 锁定脉冲 | 字色深到 #000 + 描边 0→3px→0 / 8f | 白底上加深+描边,不用发光(判例) |
28
+ | B 漂移绑定 | 位移 (1−p)、旋转、纵深缩放、blur 8(1−p)、opacity 0.35→1 共用一条 p(Easing.out(cubic),每字 45f、错峰 3f) | 分曲线走,字会"到了还糊着" |
29
+ | C 摆正 | 到达停 8f 再从左到右 1.1f 错峰、18f 抬升:y 用带 ~4% 过冲的快曲线、x 用 in-out、旋转晚 2f 收敛 → 轨迹是弧;终位按实测字宽排版 | 不摆正就永远是"挂在线上",读不出标题;抬升行程大时过冲 >5% 会顶进眉题 |
30
+ | C 曲线 | evolve(dashoffset 按弧长比例)随车头字符同步生长;demo 做成图表增长线(电光蓝 5px 描边 + 外发光 + 线下渐变面积 + 青色车头光点与到顶脉冲 + 网格刻度 + 季度标记) | 曲线先画完字再走,读作两个动画 |
31
+ | 收尾 | 全员落定真静止 ≥30f | R1 |
32
+
33
+ ## 已知坑
34
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
35
+ 首次实战须以真实素材回验
36
+ - 标题入场大品类现已五式(本卡三式 + type-entrance-moves + document-typewriter-reveal),
37
+ **同片 ≤2 种**(P4)铁律不变
38
+ - B 式与 C 式都是高注意力入场,别再叠相机动作——字在飞的时候镜头必须稳
39
+ - C 式别让字符各自起跑:后面的字要追越前面的字,曲线低段必然挤成一团(原版踩过);
40
+ 按弧长刚性推进、字间距取真实步进才读得出整句;字号 >80px 时曲线拐弯处字会互相啃角,
41
+ 大字改用更平缓的曲线或减字数
42
+
43
+ ## 参考实现
44
+ demos/typography/type-assembly-moves/
45
+ (LetterformDriftAssembly.tsx / SplitTextStagger.tsx / TextOnPath.tsx)
@@ -1,41 +1,41 @@
1
- ---
2
- name: type-entrance-moves
3
- 一句话: 标题文字入场一式——letter-drop-physics 字符坠落(重力砸落、弹跳、歪斜站定,最后一拍集体立正归位)
4
- 适用: 大标题/章节字卡的入场;与 type-assembly-moves(集结系)、document-typewriter-reveal(打字机)同品类互斥选用
5
- 时长: 单式 5s(含 hold 与静止收尾;动作段 ~116f,demo 150f)
6
- 能量: 中高(物理趣味)
7
- ---
8
-
9
- ## 意图
10
- 标题入场库内已有打字机(沉稳文档感)和集结系(字从别处汇聚),本卡补
11
- 物理喜剧感——字符从天而降、砸地弹跳、歪歪扭扭站定,最后一拍
12
- 集体立正归位,适合轻松调性的开场破冰(demo 让品牌名「Shotcraft」砸落站定,
13
- 副标题「Every shot lands on the beat.」随归位一拍浮出)。标题入场同片 ≤2 种(P4)。
14
-
15
- ## 做法
16
- | 式 | 做法 | 适用 |
17
- |----|------|------|
18
- | A letter-drop-physics 字符坠落 | 字符错峰从顶砸落,重力加速+两次衰减弹跳+落地歪斜站定,最后一拍全体齐整回正 | 轻松调性开场;"活物感"的标题破冰 |
19
-
20
- ## 参数表
21
- | 参数 | 典型值 | 调节手感 |
22
- |------|--------|----------|
23
- | 坠落 | 第 i 字符帧 4+36·(1−(1−i/(n−1))^1.5) 起跳(首末字固定在 4f / 40f,间隔越来越密;demo 9 字符 6.5→1.6f);y = −DROP + DROP·(t/24)²(重力)→ 4u(1−u) 抛物线弹跳 30% → 二跳 9% | 弹跳衰减比 30%/9% 是"有弹性但不闹"的甜点;三跳以上读作果冻 |
24
- | 歪斜 | 落地瞬间 rotate 到 seed hash ±6° 并保持 | 歪角是"物理感"的一半;全体笔直落地读作普通位移入场 |
25
- | 归位一拍 | 全员落定后(如帧 110)6f ease-out 集体 rotate→0 + scale 1.06→1 | 集体归位是句号——错峰归位会把"立正"的仪式感拆散 |
26
- | 收尾 | 动作完毕真静止 ≥20f | R1:静止期所有属性锁死(含歪角归零后) |
27
-
28
- ## 已知坑
29
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
30
- 首次实战须以真实素材回验
31
- - 落地砸声是声音强依赖候选位(sound-design §4.5):逐字钉帧会让重量感翻倍,
32
- 无声版也成立但少一半劲
33
- - 字符间不做真实碰撞(demo 为各字符独立轨迹)——字距排开即可;
34
- 想要"互相撞歪"需预烘焙轨迹,成本高收益薄
35
- - 选词避开带下行笔画的字母(g/j/p/q/y)或按字形单独校地面——demo 按基线贴地,
36
- 下行笔画会"插进"地面
37
- - 标题入场自带高注意力——别和其他高能量入场同帧抢戏
38
-
39
- ## 参考实现
40
- demos/typography/type-entrance-moves/
41
- (LetterDropPhysics.tsx)
1
+ ---
2
+ name: type-entrance-moves
3
+ 一句话: 标题文字入场一式——letter-drop-physics 字符坠落(重力砸落、弹跳、歪斜站定,最后一拍集体立正归位)
4
+ 适用: 大标题/章节字卡的入场;与 type-assembly-moves(集结系)、document-typewriter-reveal(打字机)同品类互斥选用
5
+ 时长: 单式 5s(含 hold 与静止收尾;动作段 ~116f,demo 150f)
6
+ 能量: 中高(物理趣味)
7
+ ---
8
+
9
+ ## 意图
10
+ 标题入场库内已有打字机(沉稳文档感)和集结系(字从别处汇聚),本卡补
11
+ 物理喜剧感——字符从天而降、砸地弹跳、歪歪扭扭站定,最后一拍
12
+ 集体立正归位,适合轻松调性的开场破冰(demo 让品牌名「Shotcraft」砸落站定,
13
+ 副标题「Every shot lands on the beat.」随归位一拍浮出)。标题入场同片 ≤2 种(P4)。
14
+
15
+ ## 做法
16
+ | 式 | 做法 | 适用 |
17
+ |----|------|------|
18
+ | A letter-drop-physics 字符坠落 | 字符错峰从顶砸落,重力加速+两次衰减弹跳+落地歪斜站定,最后一拍全体齐整回正 | 轻松调性开场;"活物感"的标题破冰 |
19
+
20
+ ## 参数表
21
+ | 参数 | 典型值 | 调节手感 |
22
+ |------|--------|----------|
23
+ | 坠落 | 第 i 字符帧 4+36·(1−(1−i/(n−1))^1.5) 起跳(首末字固定在 4f / 40f,间隔越来越密;demo 9 字符 6.5→1.6f);y = −DROP + DROP·(t/24)²(重力)→ 4u(1−u) 抛物线弹跳 30% → 二跳 9% | 弹跳衰减比 30%/9% 是"有弹性但不闹"的甜点;三跳以上读作果冻 |
24
+ | 歪斜 | 落地瞬间 rotate 到 seed hash ±6° 并保持 | 歪角是"物理感"的一半;全体笔直落地读作普通位移入场 |
25
+ | 归位一拍 | 全员落定后(如帧 110)6f ease-out 集体 rotate→0 + scale 1.06→1 | 集体归位是句号——错峰归位会把"立正"的仪式感拆散 |
26
+ | 收尾 | 动作完毕真静止 ≥20f | R1:静止期所有属性锁死(含歪角归零后) |
27
+
28
+ ## 已知坑
29
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
30
+ 首次实战须以真实素材回验
31
+ - 落地砸声是声音强依赖候选位(sound-design §4.5):逐字钉帧会让重量感翻倍,
32
+ 无声版也成立但少一半劲
33
+ - 字符间不做真实碰撞(demo 为各字符独立轨迹)——字距排开即可;
34
+ 想要"互相撞歪"需预烘焙轨迹,成本高收益薄
35
+ - 选词避开带下行笔画的字母(g/j/p/q/y)或按字形单独校地面——demo 按基线贴地,
36
+ 下行笔画会"插进"地面
37
+ - 标题入场自带高注意力——别和其他高能量入场同帧抢戏
38
+
39
+ ## 参考实现
40
+ demos/typography/type-entrance-moves/
41
+ (LetterDropPhysics.tsx)
@@ -1,51 +1,51 @@
1
- ---
2
- name: type-rhythm-sync
3
- 一句话: 文字随声同步两式——font-weight-pump 字重脉冲(笔画随鼓点变粗弹回)与 karaoke-fill-sync 卡拉OK填色(词随旁白逐个点亮)
4
- 适用: 标题/标语与音轨强绑定的段落;A 绑节拍(鼓点),B 绑语音(旁白逐词)
5
- 时长: A FontWeightPump 165f / B KaraokeFillSync 150f;A 128 BPM 每拍 14f、衰减窗 9–13f,B 每词按语速 18–33f
6
- 能量: A 高(蹦迪感)/ B 中(跟读引导)
7
- 标签: rhythm
8
- ---
9
-
10
- ## 意图
11
- 文字动效库内此前全是"入场怎么进",没有词管"在场的字怎么跟着声音活"。
12
- 这两式补上:A 让标题变成节奏器官——笔画随低音鼓抽动变粗又弹回,
13
- 文字在蹦迪,适合高能段落的视觉低音炮;B 让标语变成跟读字幕——
14
- 旁白读到哪个词哪个词从左到右填色点亮,视线被牵着走,适合口播/
15
- 标语强调段。共同点是**字不动、属性动**:无位移、无入退场,
16
- 纯粹是字重/颜色在声音的拍点上呼吸。
17
-
18
- ## 两式选型
19
- | 式 | 做法 | 适用 |
20
- |----|------|------|
21
- | A font-weight-pump 字重脉冲 | 命中帧细体字瞬间撑成黑体(可变字重连续插值),9–13f 衰减弹回;重音拍额外撑宽 6%;第 2 小节长出上下描边回声行跟拍,drop 拍落定成粗体渐变海报 | 音乐驱动的高能段;标题当低音炮 |
22
- | B karaoke-fill-sync 填色随读 | 浅底两行标语(demo「FRAME MOTION / CRAFT SHOTS」),每词从左到右柔边填亮,进度跟语速,正在读的词填强调色、读完退成主墨色并保持;活跃词下带读指下划线 | 旁白/口播强调段;多词标语的视线引导 |
23
-
24
- ## 参数表
25
- | 参数 | 典型值 | 调节手感 |
26
- |------|--------|----------|
27
- | A 脉冲包络 | `env=(1−t/D)^0.8`(t=命中后帧数;demo 逐字中心 9f→边缘 13f 错开回弹,≥D 精确归 0);fontWeight `250+650·env` 连续插值(SF Pro 可变字重);每个字钉在 **900 字重**排好的槽位里——静止时细体字间留缝、命中时笔画撑满槽位"合拢",整行不重排;无可变字体时退回 env>0.15 窗口 300↔900 跳变 + `-webkit-text-stroke` 连续衰减补过渡 | 槽位按最粗字重排是关键:按常规字重排,峰值时字会互相挤压重叠 |
28
- | A 节拍 | 128 BPM 每 14f 一拍(16/30/…/114)+ 第 9 拍 drop(128f);每小节第 1 拍重音 `scaleX = 1+0.06·env` 并染粉;drop 冲到 900 后不回细,~16f 回落定格在 780 字重 + 紫→粉逐字渐变 + 一道横向光带 | 拍距必须 > 最长衰减窗(14>13),两拍重叠读作抽搐 |
29
- | A 回声行 | 第 2 小节起上下各一行 2px 描边同字,晚 2f 跟拍脉冲、每拍被推开 26px(drop 推开 60px 后归位) | 递进靠"加层"而不是加大幅度;第 1 小节就上回声,后面没牌可打 |
30
- | A 节拍参照物 | 画面下方 8+1 格步进音序器(两小节 + DROP 格),命中哪拍哪格亮起放大 12%,已过的格保留暗亮 | 静音环境(预览/静帧)没有这排格子就读不出"在跟拍";只让格子和字动,不做整画面逐拍泵 |
31
- | B 词级时间表 | 逐词 [start,end] 帧区间,词内 linear 填充;词间留 4–10f 停顿(换气) | 时间戳实战来自旁白打点表;均匀分配读作机器朗读 |
32
- | B 词级时间表(demo) | FRAME 20–38、MOTION 42–75(长词慢读)、CRAFT 85–103、SHOTS 107–130;0–19f 预备、130–149f 真静止 | 长词给更长的读窗,读作真人语速 |
33
- | B 填色实现 | 每词双层同文本叠放:底层浅灰(13% 透明墨色)+ 上层按进度揭开:`mask-image: linear-gradient(90deg, #000 e−4%, transparent e+4%)`,e=p·108−4(±4% 柔边前沿;硬切可用 `clipPath: inset(0 (1−p)·100% 0 0)`);正在读的词填强调色,读完 10f 退成主墨色 | 逐词独立叠层免量测词宽占比;整行单层 clip 需精确像素表、易漂 |
34
- | B 读指 | 活跃词下 8px 圆角下划线(demo 用强调色),宽度 = p·100%;读完 6f 从左往右收掉 | 4px 浅灰在 1080p 缩略下不可见(本批实渲踩坑);读完的词不留线 |
35
- | B 旁白参照物 | 标语下方 48 根竖条旁白波形:读词处起伏、换气处回落,已播部分染强调色 | 静音预览/静帧没有这条波形就读不出"在跟读" |
36
- | 收尾 | A 末拍衰减归零后 / B 末词填完后真静止 ≥20f | R1 呼吸判例 |
37
-
38
- ## 已知坑
39
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
40
- 首次实战须以真实素材回验
41
- - 两式都是**声音强依赖**手法:A 命中帧必须与鼓点同帧、B 填色区间必须
42
- 跟旁白词边界(钉帧走 sound-design §4.5 相对起点)——无声上片则 A 读作
43
- 抽风、B 读作莫名变色,别在无音轨段落用
44
- - A 式依赖系统可变字体(macOS SF Pro)做 wght 连续插值;换字体或在无可变字体的渲染机上
45
- 会退成几档跳变,先确认字体加载与渲染器支持,不行就走 stroke+跳变兜底
46
- - A 式全片 ≤1 段(P4)——标题蹦迪是抢戏大户,两段同片互相拆台
47
- - B 式词数 ≤6/屏:更多词时填色进度读不过来,拆行或拆镜
48
-
49
- ## 参考实现
50
- demos/typography/type-rhythm-sync/
51
- (FontWeightPump.tsx / KaraokeFillSync.tsx)
1
+ ---
2
+ name: type-rhythm-sync
3
+ 一句话: 文字随声同步两式——font-weight-pump 字重脉冲(笔画随鼓点变粗弹回)与 karaoke-fill-sync 卡拉OK填色(词随旁白逐个点亮)
4
+ 适用: 标题/标语与音轨强绑定的段落;A 绑节拍(鼓点),B 绑语音(旁白逐词)
5
+ 时长: A FontWeightPump 165f / B KaraokeFillSync 150f;A 128 BPM 每拍 14f、衰减窗 9–13f,B 每词按语速 18–33f
6
+ 能量: A 高(蹦迪感)/ B 中(跟读引导)
7
+ 标签: rhythm
8
+ ---
9
+
10
+ ## 意图
11
+ 文字动效库内此前全是"入场怎么进",没有词管"在场的字怎么跟着声音活"。
12
+ 这两式补上:A 让标题变成节奏器官——笔画随低音鼓抽动变粗又弹回,
13
+ 文字在蹦迪,适合高能段落的视觉低音炮;B 让标语变成跟读字幕——
14
+ 旁白读到哪个词哪个词从左到右填色点亮,视线被牵着走,适合口播/
15
+ 标语强调段。共同点是**字不动、属性动**:无位移、无入退场,
16
+ 纯粹是字重/颜色在声音的拍点上呼吸。
17
+
18
+ ## 两式选型
19
+ | 式 | 做法 | 适用 |
20
+ |----|------|------|
21
+ | A font-weight-pump 字重脉冲 | 命中帧细体字瞬间撑成黑体(可变字重连续插值),9–13f 衰减弹回;重音拍额外撑宽 6%;第 2 小节长出上下描边回声行跟拍,drop 拍落定成粗体渐变海报 | 音乐驱动的高能段;标题当低音炮 |
22
+ | B karaoke-fill-sync 填色随读 | 浅底两行标语(demo「FRAME MOTION / CRAFT SHOTS」),每词从左到右柔边填亮,进度跟语速,正在读的词填强调色、读完退成主墨色并保持;活跃词下带读指下划线 | 旁白/口播强调段;多词标语的视线引导 |
23
+
24
+ ## 参数表
25
+ | 参数 | 典型值 | 调节手感 |
26
+ |------|--------|----------|
27
+ | A 脉冲包络 | `env=(1−t/D)^0.8`(t=命中后帧数;demo 逐字中心 9f→边缘 13f 错开回弹,≥D 精确归 0);fontWeight `250+650·env` 连续插值(SF Pro 可变字重);每个字钉在 **900 字重**排好的槽位里——静止时细体字间留缝、命中时笔画撑满槽位"合拢",整行不重排;无可变字体时退回 env>0.15 窗口 300↔900 跳变 + `-webkit-text-stroke` 连续衰减补过渡 | 槽位按最粗字重排是关键:按常规字重排,峰值时字会互相挤压重叠 |
28
+ | A 节拍 | 128 BPM 每 14f 一拍(16/30/…/114)+ 第 9 拍 drop(128f);每小节第 1 拍重音 `scaleX = 1+0.06·env` 并染粉;drop 冲到 900 后不回细,~16f 回落定格在 780 字重 + 紫→粉逐字渐变 + 一道横向光带 | 拍距必须 > 最长衰减窗(14>13),两拍重叠读作抽搐 |
29
+ | A 回声行 | 第 2 小节起上下各一行 2px 描边同字,晚 2f 跟拍脉冲、每拍被推开 26px(drop 推开 60px 后归位) | 递进靠"加层"而不是加大幅度;第 1 小节就上回声,后面没牌可打 |
30
+ | A 节拍参照物 | 画面下方 8+1 格步进音序器(两小节 + DROP 格),命中哪拍哪格亮起放大 12%,已过的格保留暗亮 | 静音环境(预览/静帧)没有这排格子就读不出"在跟拍";只让格子和字动,不做整画面逐拍泵 |
31
+ | B 词级时间表 | 逐词 [start,end] 帧区间,词内 linear 填充;词间留 4–10f 停顿(换气) | 时间戳实战来自旁白打点表;均匀分配读作机器朗读 |
32
+ | B 词级时间表(demo) | FRAME 20–38、MOTION 42–75(长词慢读)、CRAFT 85–103、SHOTS 107–130;0–19f 预备、130–149f 真静止 | 长词给更长的读窗,读作真人语速 |
33
+ | B 填色实现 | 每词双层同文本叠放:底层浅灰(13% 透明墨色)+ 上层按进度揭开:`mask-image: linear-gradient(90deg, #000 e−4%, transparent e+4%)`,e=p·108−4(±4% 柔边前沿;硬切可用 `clipPath: inset(0 (1−p)·100% 0 0)`);正在读的词填强调色,读完 10f 退成主墨色 | 逐词独立叠层免量测词宽占比;整行单层 clip 需精确像素表、易漂 |
34
+ | B 读指 | 活跃词下 8px 圆角下划线(demo 用强调色),宽度 = p·100%;读完 6f 从左往右收掉 | 4px 浅灰在 1080p 缩略下不可见(本批实渲踩坑);读完的词不留线 |
35
+ | B 旁白参照物 | 标语下方 48 根竖条旁白波形:读词处起伏、换气处回落,已播部分染强调色 | 静音预览/静帧没有这条波形就读不出"在跟读" |
36
+ | 收尾 | A 末拍衰减归零后 / B 末词填完后真静止 ≥20f | R1 呼吸判例 |
37
+
38
+ ## 已知坑
39
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
40
+ 首次实战须以真实素材回验
41
+ - 两式都是**声音强依赖**手法:A 命中帧必须与鼓点同帧、B 填色区间必须
42
+ 跟旁白词边界(钉帧走 sound-design §4.5 相对起点)——无声上片则 A 读作
43
+ 抽风、B 读作莫名变色,别在无音轨段落用
44
+ - A 式依赖系统可变字体(macOS SF Pro)做 wght 连续插值;换字体或在无可变字体的渲染机上
45
+ 会退成几档跳变,先确认字体加载与渲染器支持,不行就走 stroke+跳变兜底
46
+ - A 式全片 ≤1 段(P4)——标题蹦迪是抢戏大户,两段同片互相拆台
47
+ - B 式词数 ≤6/屏:更多词时填色进度读不过来,拆行或拆镜
48
+
49
+ ## 参考实现
50
+ demos/typography/type-rhythm-sync/
51
+ (FontWeightPump.tsx / KaraokeFillSync.tsx)
@@ -1,42 +1,42 @@
1
- ---
2
- name: typewriter-moves
3
- 一句话: 打字机 error-retype——误删重打的"改口"三幕剧:打出平庸词 → 犹豫 → 退格删掉 → 更快打出卖点词
4
- 适用: slogan/卖点字卡、否定式文案;文字自带时间性的入场
5
- 时长: ~5.3s(160f)
6
- 能量: 中低
7
- 标签: opening
8
- ---
9
-
10
- ## 意图
11
- 打字是唯一自带时间性的文字入场——字符一个个到来本身就是节奏,
12
- 不需要额外动效。A 式把打字当**独白**:逐字打出平庸词
13
- (demo 眉题 Introducing video-shotcraft 下的 "just a slideshow")→ 停顿犹豫
14
- → 退格删掉 → 更快打出卖点词("your cinematic crew"),犹豫-否定-宣言的
15
- 三幕剧,戏全在三档速度差里。
16
-
17
- ## 式
18
- | 式 | 做法 | 适用 |
19
- |----|------|------|
20
- | A error-retype | 打 2f/字符 → 停顿 16f 光标闪两下 → 退 1.5f/字符 → 重打 1.5f/字符无犹豫;光标打删常亮、停顿才闪 | slogan 字卡的"改口"戏;否定式文案 |
21
-
22
- ## 参数表
23
- | 参数 | 典型值 | 调节手感 |
24
- |------|--------|----------|
25
- | 字符节奏 | substring(0, floor((f-起点)/步长)),帧确定无插值 | 任何缓动打字都读作加载动画 |
26
- | 三档速度 | 打 2f/字符、删 1.5f、重打 1.5f 且零犹豫 | 三档差必须可感——等速改口读作 bug 不是戏,命门 |
27
- | 光标三态 | 打删常亮=果断;停顿 4f 半周期闪两下=犹豫;完稿闪两下后条件摘除 | 光标就是演员的脸,全程等速闪就没有"犹豫" |
28
- | 排版 | 逐字符固定宽 span(60px 等宽槽),左缘锚定 | 变宽字体/整串测宽会逐帧重排抖动 |
29
- | 收尾 | 静止 ≥50f | 光标残留 0.05 opacity 都毁真静止 |
30
-
31
- ## 已知坑
32
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
33
- 首次实战须以真实素材回验
34
- - 声音强依赖:键击声逐字符对齐、退格音调更低(sound-design
35
- §4.5)——无声打字机只剩字幕机
36
- - 全片 ≤1 次——改口是一次性的戏剧转折,改两次口是口吃
37
- - 等宽字体或逐字符 span 二选一必须占一个,否则字符到来时
38
- 整行重排,打字变成抽搐
39
-
40
- ## 参考实现
41
- demos/typography/typewriter-moves/
42
- (TypewriterErrorRetype.tsx)
1
+ ---
2
+ name: typewriter-moves
3
+ 一句话: 打字机 error-retype——误删重打的"改口"三幕剧:打出平庸词 → 犹豫 → 退格删掉 → 更快打出卖点词
4
+ 适用: slogan/卖点字卡、否定式文案;文字自带时间性的入场
5
+ 时长: ~5.3s(160f)
6
+ 能量: 中低
7
+ 标签: opening
8
+ ---
9
+
10
+ ## 意图
11
+ 打字是唯一自带时间性的文字入场——字符一个个到来本身就是节奏,
12
+ 不需要额外动效。A 式把打字当**独白**:逐字打出平庸词
13
+ (demo 眉题 Introducing video-shotcraft 下的 "just a slideshow")→ 停顿犹豫
14
+ → 退格删掉 → 更快打出卖点词("your cinematic crew"),犹豫-否定-宣言的
15
+ 三幕剧,戏全在三档速度差里。
16
+
17
+ ## 式
18
+ | 式 | 做法 | 适用 |
19
+ |----|------|------|
20
+ | A error-retype | 打 2f/字符 → 停顿 16f 光标闪两下 → 退 1.5f/字符 → 重打 1.5f/字符无犹豫;光标打删常亮、停顿才闪 | slogan 字卡的"改口"戏;否定式文案 |
21
+
22
+ ## 参数表
23
+ | 参数 | 典型值 | 调节手感 |
24
+ |------|--------|----------|
25
+ | 字符节奏 | substring(0, floor((f-起点)/步长)),帧确定无插值 | 任何缓动打字都读作加载动画 |
26
+ | 三档速度 | 打 2f/字符、删 1.5f、重打 1.5f 且零犹豫 | 三档差必须可感——等速改口读作 bug 不是戏,命门 |
27
+ | 光标三态 | 打删常亮=果断;停顿 4f 半周期闪两下=犹豫;完稿闪两下后条件摘除 | 光标就是演员的脸,全程等速闪就没有"犹豫" |
28
+ | 排版 | 逐字符固定宽 span(60px 等宽槽),左缘锚定 | 变宽字体/整串测宽会逐帧重排抖动 |
29
+ | 收尾 | 静止 ≥50f | 光标残留 0.05 opacity 都毁真静止 |
30
+
31
+ ## 已知坑
32
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
33
+ 首次实战须以真实素材回验
34
+ - 声音强依赖:键击声逐字符对齐、退格音调更低(sound-design
35
+ §4.5)——无声打字机只剩字幕机
36
+ - 全片 ≤1 次——改口是一次性的戏剧转折,改两次口是口吃
37
+ - 等宽字体或逐字符 span 二选一必须占一个,否则字符到来时
38
+ 整行重排,打字变成抽搐
39
+
40
+ ## 参考实现
41
+ demos/typography/typewriter-moves/
42
+ (TypewriterErrorRetype.tsx)