dsh-drawai 0.4.2 → 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 (366) hide show
  1. package/README.md +4 -3
  2. package/lib/index.js +7777 -7719
  3. package/lib/motion/asset-pack.js +394 -394
  4. package/lib/motion/assets.js +291 -291
  5. package/lib/motion/demo-assets-lock.js +10 -10
  6. package/lib/motion/mgstyles/vendor/README.md +28 -28
  7. package/lib/motion/mgstyles/vendor/modules/d3/LICENSE +13 -13
  8. package/lib/motion/mgstyles/vendor/modules/d3/dist/d3.min.js +2 -2
  9. package/lib/motion/mgstyles/vendor/modules/opentype.js/LICENSE +20 -20
  10. package/lib/motion/mgstyles/vendor/modules/opentype.js/dist/opentype.mjs +14460 -14460
  11. package/lib/motion/mgstyles/vendor/modules/simplex-noise/LICENSE +21 -21
  12. package/lib/motion/mgstyles/vendor/modules/simplex-noise/dist/esm/simplex-noise.js +465 -465
  13. package/lib/motion/mgstyles/vendor/modules/topojson-client/LICENSE +13 -13
  14. package/lib/motion/mgstyles/vendor/modules/topojson-client/dist/topojson-client.min.js +2 -2
  15. package/lib/motion/render.js +179 -179
  16. package/lib/motion/shotcraft/upstream/SKILL.md +286 -286
  17. package/lib/motion/shotcraft/upstream/assets/lib/Caption.tsx +54 -54
  18. package/lib/motion/shotcraft/upstream/assets/lib/ClipCard.tsx +200 -200
  19. package/lib/motion/shotcraft/upstream/assets/lib/DigitRoll.tsx +45 -45
  20. package/lib/motion/shotcraft/upstream/assets/lib/FlashCut.tsx +20 -20
  21. package/lib/motion/shotcraft/upstream/assets/lib/FlatPanel.tsx +65 -65
  22. package/lib/motion/shotcraft/upstream/assets/lib/PageCam.tsx +151 -151
  23. package/lib/motion/shotcraft/upstream/assets/lib/VerticalTicker.tsx +129 -129
  24. package/lib/motion/shotcraft/upstream/assets/lib/helpers/camera.tsx +75 -75
  25. package/lib/motion/shotcraft/upstream/assets/lib/helpers/motion.ts +40 -40
  26. package/lib/motion/shotcraft/upstream/assets/lib/helpers/rand.ts +11 -11
  27. package/lib/motion/shotcraft/upstream/assets/lib/helpers/shake.ts +10 -10
  28. package/lib/motion/shotcraft/upstream/assets/scripts/build-readme-cover.mjs +49 -49
  29. package/lib/motion/shotcraft/upstream/assets/scripts/capture-template.mjs +210 -210
  30. package/lib/motion/shotcraft/upstream/assets/scripts/sfx-source.py +423 -423
  31. package/lib/motion/shotcraft/upstream/assets/scripts/smoke-render-demos.py +170 -170
  32. package/lib/motion/shotcraft/upstream/assets/scripts/test_sfx_source.py +157 -157
  33. package/lib/motion/shotcraft/upstream/demos/README.md +120 -120
  34. package/lib/motion/shotcraft/upstream/demos/_fixtures/Brand.tsx +112 -112
  35. package/lib/motion/shotcraft/upstream/demos/_fixtures/Fixtures.tsx +647 -647
  36. package/lib/motion/shotcraft/upstream/demos/_fixtures/Look.tsx +316 -316
  37. package/lib/motion/shotcraft/upstream/demos/_fixtures/Motion.tsx +82 -82
  38. package/lib/motion/shotcraft/upstream/demos/_fixtures/PageCam2D.tsx +115 -115
  39. package/lib/motion/shotcraft/upstream/demos/_fixtures/Polish.tsx +243 -243
  40. package/lib/motion/shotcraft/upstream/demos/_textures/live-layout.json +388 -388
  41. package/lib/motion/shotcraft/upstream/demos/camera/basic-3d-scene/Basic3DScene.tsx +250 -250
  42. package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashImpactReal.tsx +305 -305
  43. package/lib/motion/shotcraft/upstream/demos/camera/crash-zoom-punch/CrashZoomReal.tsx +246 -246
  44. package/lib/motion/shotcraft/upstream/demos/camera/cursor-flyover/CursorFlyover.tsx +390 -390
  45. package/lib/motion/shotcraft/upstream/demos/camera/depth-layer-moves/MultiplaneReal.tsx +138 -138
  46. package/lib/motion/shotcraft/upstream/demos/camera/graze-face-tour/GrazeFaceTour.tsx +542 -542
  47. package/lib/motion/shotcraft/upstream/demos/camera/overhead-camera-moves/OverheadTabletopDrop.tsx +315 -315
  48. package/lib/motion/shotcraft/upstream/demos/camera/overhead-camera-moves/TiltReveal.tsx +299 -299
  49. package/lib/motion/shotcraft/upstream/demos/camera/space-camera-moves/DroneDiveLanding.tsx +173 -173
  50. package/lib/motion/shotcraft/upstream/demos/camera/space-camera-moves/ExplodedView.tsx +348 -348
  51. package/lib/motion/shotcraft/upstream/demos/camera/steep-tilt-glide/SteepTiltGlide.tsx +366 -366
  52. package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/BulletTimeFreezeOrbit.tsx +279 -279
  53. package/lib/motion/shotcraft/upstream/demos/camera/tension-camera-moves/PullBackIsolation.tsx +184 -184
  54. package/lib/motion/shotcraft/upstream/demos/camera/terminal-3d/Terminal3D.tsx +390 -390
  55. package/lib/motion/shotcraft/upstream/demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.tsx +155 -155
  56. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/AxisRescaleShockV2.tsx +303 -303
  57. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/OscilloscopeStreamV2.tsx +290 -290
  58. package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx +278 -278
  59. package/lib/motion/shotcraft/upstream/demos/data/gauge-readout-moves/NeedleSweepSelftest.tsx +307 -307
  60. package/lib/motion/shotcraft/upstream/demos/data/gauge-readout-moves/TapeScrollFixedPointer.tsx +215 -215
  61. package/lib/motion/shotcraft/upstream/demos/data/scroll-brake-moves/BrakeReticleLock.tsx +299 -299
  62. package/lib/motion/shotcraft/upstream/demos/data/scroll-brake-moves/ChangelogScrollBrake.tsx +232 -232
  63. package/lib/motion/shotcraft/upstream/demos/data/timeline-travel/TimelineTravel.tsx +290 -290
  64. package/lib/motion/shotcraft/upstream/demos/effects/assemble-then-type-flyin/AssembleThenTypeFlyin.tsx +273 -273
  65. package/lib/motion/shotcraft/upstream/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx +167 -167
  66. package/lib/motion/shotcraft/upstream/demos/effects/brand-frame-snap/BrandFrameSnap.tsx +536 -536
  67. package/lib/motion/shotcraft/upstream/demos/effects/fui-hud-moves/ReticleLockOn.tsx +164 -164
  68. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/FlylineArc.tsx +175 -175
  69. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/GlowOrbAmbient.tsx +197 -197
  70. package/lib/motion/shotcraft/upstream/demos/effects/glow-flyline-moves/OrbFlylineRelay.tsx +241 -241
  71. package/lib/motion/shotcraft/upstream/demos/effects/icon-performance-moves/AttentionBounce.tsx +279 -279
  72. package/lib/motion/shotcraft/upstream/demos/effects/impact-feedback/AnimeImpact.tsx +230 -230
  73. package/lib/motion/shotcraft/upstream/demos/effects/impact-feedback/HitCounter.tsx +345 -345
  74. package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SheenSweepRetry.tsx +275 -275
  75. package/lib/motion/shotcraft/upstream/demos/effects/light-play-moves/SpotlightSweepReveal.tsx +229 -229
  76. package/lib/motion/shotcraft/upstream/demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.tsx +312 -312
  77. package/lib/motion/shotcraft/upstream/demos/effects/riso-print-hits/RisoMisregistrationHit.tsx +222 -222
  78. package/lib/motion/shotcraft/upstream/demos/effects/scan-bracket-sweep/ScanBracketSweep.tsx +295 -295
  79. package/lib/motion/shotcraft/upstream/demos/effects/scanline-annotate-focus/ScanlineAnnotateFocus.tsx +329 -329
  80. package/lib/motion/shotcraft/upstream/demos/effects/scanline-assemble-flyin/ScanlineAssembleFlyin.tsx +315 -315
  81. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ImpactBurstKit.tsx +264 -264
  82. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/KanadaPerspectiveSnap.tsx +260 -260
  83. package/lib/motion/shotcraft/upstream/demos/effects/slam-entrance-moves/ScoreSlam.tsx +263 -263
  84. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx +123 -123
  85. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx +187 -187
  86. package/lib/motion/shotcraft/upstream/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx +175 -175
  87. package/lib/motion/shotcraft/upstream/demos/interaction/autolayout-gap-dial/AutolayoutGapDial.tsx +305 -305
  88. package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx +350 -350
  89. package/lib/motion/shotcraft/upstream/demos/interaction/canvas-materialize-moves/PanelToCanvasMaterialize.tsx +352 -352
  90. package/lib/motion/shotcraft/upstream/demos/interaction/chip-grid-single-select-blackout/ChipGridSingleSelectBlackout.tsx +218 -218
  91. package/lib/motion/shotcraft/upstream/demos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx +297 -297
  92. package/lib/motion/shotcraft/upstream/demos/interaction/glass-pill-dictation-typing/GlassPillDictationTyping.tsx +157 -157
  93. package/lib/motion/shotcraft/upstream/demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx +218 -218
  94. package/lib/motion/shotcraft/upstream/demos/interaction/picker-carousel-feature-cycle/PickerCarouselFeatureCycle.tsx +202 -202
  95. package/lib/motion/shotcraft/upstream/demos/interaction/segmented-thumb-hero/SegmentedThumbHero.tsx +265 -265
  96. package/lib/motion/shotcraft/upstream/demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx +457 -457
  97. package/lib/motion/shotcraft/upstream/demos/interaction/theme-switch-moves/ThemeSweepToggle.tsx +446 -446
  98. package/lib/motion/shotcraft/upstream/demos/interaction/type-and-filter/TypeAndFilter.tsx +249 -249
  99. package/lib/motion/shotcraft/upstream/demos/interaction/voice-waveform-live/VoiceWaveformLive.tsx +278 -278
  100. package/lib/motion/shotcraft/upstream/demos/opening/crane-rise-reveal/CraneRiseReveal.tsx +332 -332
  101. package/lib/motion/shotcraft/upstream/demos/opening/dataviz-landscape-open/DatavizLandscapeOpen.tsx +358 -358
  102. package/lib/motion/shotcraft/upstream/demos/opening/fracture/Fracture.tsx +201 -201
  103. package/lib/motion/shotcraft/upstream/demos/opening/icon-field-colorize/IconFieldColorize.tsx +200 -200
  104. package/lib/motion/shotcraft/upstream/demos/opening/letterspace-materialize/LetterspaceMaterialize.tsx +208 -208
  105. package/lib/motion/shotcraft/upstream/demos/opening/magician-card-flourish/MagicianCardFlourish.tsx +341 -341
  106. package/lib/motion/shotcraft/upstream/demos/opening/orbit-ring-title-open/OrbitRingTitleOpen.tsx +389 -389
  107. package/lib/motion/shotcraft/upstream/demos/opening/spotlight-hero-card/SpotlightHeroCard.tsx +293 -293
  108. package/lib/motion/shotcraft/upstream/demos/opening/stroke-segment-build/StrokeSegmentBuild.tsx +183 -183
  109. package/lib/motion/shotcraft/upstream/demos/opening/text-as-mask/TextAsMask.tsx +245 -245
  110. package/lib/motion/shotcraft/upstream/demos/outro/grain-dissolve/GrainDissolve.tsx +222 -222
  111. package/lib/motion/shotcraft/upstream/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx +223 -223
  112. package/lib/motion/shotcraft/upstream/demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx +217 -217
  113. package/lib/motion/shotcraft/upstream/demos/outro/outro-group-photo-launch/OutroGroupPhotoLaunch.tsx +343 -343
  114. package/lib/motion/shotcraft/upstream/demos/outro/ui-strip-away-outro/UiStripAwayOutro.tsx +357 -357
  115. package/lib/motion/shotcraft/upstream/demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx +187 -187
  116. package/lib/motion/shotcraft/upstream/demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.tsx +333 -333
  117. package/lib/motion/shotcraft/upstream/demos/rhythm/beat-cut-moves/PaparazziFlash.tsx +274 -274
  118. package/lib/motion/shotcraft/upstream/demos/rhythm/beat-step-list-theme-cycle/BeatStepListThemeCycle.tsx +270 -270
  119. package/lib/motion/shotcraft/upstream/demos/rhythm/panel-grid-moves/ComicPanelSplit.tsx +430 -430
  120. package/lib/motion/shotcraft/upstream/demos/rhythm/quad-split-parallel-scenes/QuadSplitParallelScenes.tsx +252 -252
  121. package/lib/motion/shotcraft/upstream/demos/rhythm/rhythm-interrupt-moves/JumpCutPunchIn.tsx +106 -106
  122. package/lib/motion/shotcraft/upstream/demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx +288 -288
  123. package/lib/motion/shotcraft/upstream/demos/rhythm/speed-ramp-freeze/FreezeAnnotateReal.tsx +362 -362
  124. package/lib/motion/shotcraft/upstream/demos/rhythm/trailer-grammar-moves/TrailerBumper.tsx +168 -168
  125. package/lib/motion/shotcraft/upstream/demos/transition/bottom-push-stack-wipe/BottomPushStackWipe.tsx +310 -310
  126. package/lib/motion/shotcraft/upstream/demos/transition/card-flip-reveal/CardFlipReveal.tsx +261 -261
  127. package/lib/motion/shotcraft/upstream/demos/transition/card-flock-tumble/CardFlockTumble.tsx +459 -459
  128. package/lib/motion/shotcraft/upstream/demos/transition/circle-match-iris/CircleMatchIris.tsx +294 -294
  129. package/lib/motion/shotcraft/upstream/demos/transition/gradient-transition/GradientTransition.tsx +161 -161
  130. package/lib/motion/shotcraft/upstream/demos/transition/line-carry-transition/LineCarryTransition.tsx +248 -248
  131. package/lib/motion/shotcraft/upstream/demos/transition/mosaic-reframe/MosaicReframe.tsx +359 -359
  132. package/lib/motion/shotcraft/upstream/demos/transition/page-turn-transitions/BarnDoorSplit.tsx +227 -227
  133. package/lib/motion/shotcraft/upstream/demos/transition/print-texture-transitions/InkBleedReveal.tsx +162 -162
  134. package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/PortalWipeV2.tsx +248 -248
  135. package/lib/motion/shotcraft/upstream/demos/transition/shot-transitions/WhipBrakeReal.tsx +186 -186
  136. package/lib/motion/shotcraft/upstream/demos/transition/tear-streak-transitions/GlitchDisplace.tsx +355 -355
  137. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/InvisibleCut.tsx +272 -272
  138. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/LightLeakBurn.tsx +262 -262
  139. package/lib/motion/shotcraft/upstream/demos/transition/transition-hidden-cut/VersusSlam.tsx +217 -217
  140. package/lib/motion/shotcraft/upstream/demos/transition/transition-travel/LetterformZoom.tsx +285 -285
  141. package/lib/motion/shotcraft/upstream/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx +205 -205
  142. package/lib/motion/shotcraft/upstream/demos/transition/wipe-transitions/BlindsSlice.tsx +178 -178
  143. package/lib/motion/shotcraft/upstream/demos/typography/blur-slide/BlurSlide.tsx +147 -147
  144. package/lib/motion/shotcraft/upstream/demos/typography/brace-expand/BraceExpand.tsx +143 -143
  145. package/lib/motion/shotcraft/upstream/demos/typography/brand-ink-open/BrandInkOpen.tsx +134 -134
  146. package/lib/motion/shotcraft/upstream/demos/typography/countdown-arc-scatter/CountdownArcScatter.tsx +217 -217
  147. package/lib/motion/shotcraft/upstream/demos/typography/flying-words/FlyingWords.tsx +198 -198
  148. package/lib/motion/shotcraft/upstream/demos/typography/glitch-cycle/GlitchCycle.tsx +221 -221
  149. package/lib/motion/shotcraft/upstream/demos/typography/gradient-word-sweep/GradientWordSweep.tsx +312 -312
  150. package/lib/motion/shotcraft/upstream/demos/typography/lead-word-zoom-assemble/LeadWordZoomAssemble.tsx +261 -261
  151. package/lib/motion/shotcraft/upstream/demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx +121 -121
  152. package/lib/motion/shotcraft/upstream/demos/typography/outline-word-fill/OutlineWordFill.tsx +153 -153
  153. package/lib/motion/shotcraft/upstream/demos/typography/paper-title-card/PaperTitleCard.tsx +179 -179
  154. package/lib/motion/shotcraft/upstream/demos/typography/pill-chip-slot-cycle-handled/PillChipSlotCycleHandled.tsx +140 -140
  155. package/lib/motion/shotcraft/upstream/demos/typography/pill-slot-cycle/PillSlotCycle.tsx +309 -309
  156. package/lib/motion/shotcraft/upstream/demos/typography/text-column-converge/TextColumnConverge.tsx +191 -191
  157. package/lib/motion/shotcraft/upstream/demos/typography/title-demote-to-label/TitleDemoteToLabel.tsx +292 -292
  158. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx +135 -135
  159. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/SplitTextStagger.tsx +124 -124
  160. package/lib/motion/shotcraft/upstream/demos/typography/type-assembly-moves/TextOnPath.tsx +255 -255
  161. package/lib/motion/shotcraft/upstream/demos/typography/type-entrance-moves/LetterDropPhysics.tsx +173 -173
  162. package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/FontWeightPump.tsx +225 -225
  163. package/lib/motion/shotcraft/upstream/demos/typography/type-rhythm-sync/KaraokeFillSync.tsx +141 -141
  164. package/lib/motion/shotcraft/upstream/demos/typography/typewriter-moves/TypewriterErrorRetype.tsx +137 -137
  165. package/lib/motion/shotcraft/upstream/demos/typography/vertical-word-roll-blur-cycle/VerticalWordRollBlurCycle.tsx +147 -147
  166. package/lib/motion/shotcraft/upstream/demos/typography/word-relay-filmstrip/WordRelayFilmstrip.tsx +409 -409
  167. package/lib/motion/shotcraft/upstream/demos/typography/word-relay-geometry/WordRelayGeometry.tsx +280 -280
  168. package/lib/motion/shotcraft/upstream/demos/ui-entrance/avatar-bracket-carousel/AvatarBracketCarousel.tsx +271 -271
  169. package/lib/motion/shotcraft/upstream/demos/ui-entrance/bezier-source-converge-merge/BezierSourceConvergeMerge.tsx +385 -385
  170. package/lib/motion/shotcraft/upstream/demos/ui-entrance/card-stack/CardStack.tsx +312 -312
  171. package/lib/motion/shotcraft/upstream/demos/ui-entrance/carousel-3d/Carousel3D.tsx +303 -303
  172. package/lib/motion/shotcraft/upstream/demos/ui-entrance/clipcard-looping/ClipCardLooping.tsx +77 -77
  173. package/lib/motion/shotcraft/upstream/demos/ui-entrance/cloner-depth-echo/ClonerDepthEcho.tsx +311 -311
  174. package/lib/motion/shotcraft/upstream/demos/ui-entrance/deck-deal-flyin/DeckDealFlyin.tsx +307 -307
  175. package/lib/motion/shotcraft/upstream/demos/ui-entrance/doc-park-left-pill-deal/DocParkLeftPillDeal.tsx +349 -349
  176. package/lib/motion/shotcraft/upstream/demos/ui-entrance/document-typewriter-reveal/DocumentTypewriterReveal.tsx +255 -255
  177. package/lib/motion/shotcraft/upstream/demos/ui-entrance/draw-svg-trace/DrawSvgTrace.tsx +244 -244
  178. package/lib/motion/shotcraft/upstream/demos/ui-entrance/element-body-moves/ContactShadowLift.tsx +217 -217
  179. package/lib/motion/shotcraft/upstream/demos/ui-entrance/integration-hub-map/IntegrationHubMap.tsx +652 -652
  180. package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-reveal/ListReveal.tsx +153 -153
  181. package/lib/motion/shotcraft/upstream/demos/ui-entrance/list-stack-press/ListStackPress.tsx +238 -238
  182. package/lib/motion/shotcraft/upstream/demos/ui-entrance/neon-frame-forerun/NeonFrameForerun.tsx +324 -324
  183. package/lib/motion/shotcraft/upstream/demos/ui-entrance/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx +354 -354
  184. package/lib/motion/shotcraft/upstream/demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx +101 -101
  185. package/lib/motion/shotcraft/upstream/demos/ui-entrance/page-waterfall-wall/VerticalTicker.tsx +129 -129
  186. package/lib/motion/shotcraft/upstream/demos/ui-entrance/product-card-progressive-assemble/ProductCardProgressiveAssemble.tsx +297 -297
  187. package/lib/motion/shotcraft/upstream/demos/ui-entrance/radial-wave/RadialWave.tsx +57 -57
  188. package/lib/motion/shotcraft/upstream/demos/ui-entrance/research-card-stack-scroll/ResearchCardStackScroll.tsx +155 -155
  189. package/lib/motion/shotcraft/upstream/demos/ui-entrance/row-embed/RowEmbed.tsx +175 -175
  190. package/lib/motion/shotcraft/upstream/demos/ui-entrance/value-stagger-gradient/ValueStaggerGradient.tsx +153 -153
  191. package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx +146 -146
  192. package/lib/motion/shotcraft/upstream/demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.tsx +226 -226
  193. package/lib/motion/shotcraft/upstream/gallery/api/library.json +1 -1
  194. package/lib/motion/shotcraft/upstream/references/aesthetic-rules.md +193 -193
  195. package/lib/motion/shotcraft/upstream/references/final-review.md +121 -121
  196. package/lib/motion/shotcraft/upstream/references/guided-free-creation.md +199 -199
  197. package/lib/motion/shotcraft/upstream/references/jianying-export.md +183 -183
  198. package/lib/motion/shotcraft/upstream/references/music-beat-sync.md +257 -257
  199. package/lib/motion/shotcraft/upstream/references/pipeline.md +382 -382
  200. package/lib/motion/shotcraft/upstream/references/publish-upload-post.md +111 -111
  201. package/lib/motion/shotcraft/upstream/references/sequences/promo-energy-arc.md +50 -50
  202. package/lib/motion/shotcraft/upstream/references/sfx-sourcing.md +95 -95
  203. package/lib/motion/shotcraft/upstream/references/shots/camera/basic-3d-scene.md +41 -41
  204. package/lib/motion/shotcraft/upstream/references/shots/camera/crash-zoom-punch.md +52 -52
  205. package/lib/motion/shotcraft/upstream/references/shots/camera/cursor-flyover.md +39 -39
  206. package/lib/motion/shotcraft/upstream/references/shots/camera/depth-layer-moves.md +39 -39
  207. package/lib/motion/shotcraft/upstream/references/shots/camera/graze-face-tour.md +57 -57
  208. package/lib/motion/shotcraft/upstream/references/shots/camera/overhead-camera-moves.md +51 -51
  209. package/lib/motion/shotcraft/upstream/references/shots/camera/space-camera-moves.md +46 -46
  210. package/lib/motion/shotcraft/upstream/references/shots/camera/steep-tilt-glide.md +52 -52
  211. package/lib/motion/shotcraft/upstream/references/shots/camera/tension-camera-moves.md +43 -43
  212. package/lib/motion/shotcraft/upstream/references/shots/camera/terminal-3d.md +42 -42
  213. package/lib/motion/shotcraft/upstream/references/shots/data/before-after-slider-scrub.md +48 -48
  214. package/lib/motion/shotcraft/upstream/references/shots/data/chart-live-moves.md +52 -52
  215. package/lib/motion/shotcraft/upstream/references/shots/data/gauge-readout-moves.md +45 -45
  216. package/lib/motion/shotcraft/upstream/references/shots/data/scroll-brake-moves.md +46 -46
  217. package/lib/motion/shotcraft/upstream/references/shots/data/timeline-travel.md +44 -44
  218. package/lib/motion/shotcraft/upstream/references/shots/effects/assemble-then-type-flyin.md +63 -63
  219. package/lib/motion/shotcraft/upstream/references/shots/effects/aurora-bloom-bg-flip.md +54 -54
  220. package/lib/motion/shotcraft/upstream/references/shots/effects/brand-frame-snap.md +58 -58
  221. package/lib/motion/shotcraft/upstream/references/shots/effects/fui-hud-moves.md +35 -35
  222. package/lib/motion/shotcraft/upstream/references/shots/effects/glow-flyline-moves.md +53 -53
  223. package/lib/motion/shotcraft/upstream/references/shots/effects/icon-performance-moves.md +42 -42
  224. package/lib/motion/shotcraft/upstream/references/shots/effects/impact-feedback.md +50 -50
  225. package/lib/motion/shotcraft/upstream/references/shots/effects/light-play-moves.md +46 -46
  226. package/lib/motion/shotcraft/upstream/references/shots/effects/radial-ripple-phone-chips.md +56 -56
  227. package/lib/motion/shotcraft/upstream/references/shots/effects/riso-print-hits.md +49 -49
  228. package/lib/motion/shotcraft/upstream/references/shots/effects/scan-bracket-sweep.md +50 -50
  229. package/lib/motion/shotcraft/upstream/references/shots/effects/scanline-annotate-focus.md +53 -53
  230. package/lib/motion/shotcraft/upstream/references/shots/effects/scanline-assemble-flyin.md +53 -53
  231. package/lib/motion/shotcraft/upstream/references/shots/effects/slam-entrance-moves.md +55 -55
  232. package/lib/motion/shotcraft/upstream/references/shots/effects/spotlight-sweep-moves.md +52 -52
  233. package/lib/motion/shotcraft/upstream/references/shots/interaction/autolayout-gap-dial.md +60 -60
  234. package/lib/motion/shotcraft/upstream/references/shots/interaction/canvas-materialize-moves.md +57 -57
  235. package/lib/motion/shotcraft/upstream/references/shots/interaction/chip-grid-single-select-blackout.md +51 -51
  236. package/lib/motion/shotcraft/upstream/references/shots/interaction/collab-cursor-moves.md +41 -41
  237. package/lib/motion/shotcraft/upstream/references/shots/interaction/glass-pill-dictation-typing.md +53 -53
  238. package/lib/motion/shotcraft/upstream/references/shots/interaction/hashtag-to-pill-materialize.md +60 -60
  239. package/lib/motion/shotcraft/upstream/references/shots/interaction/picker-carousel-feature-cycle.md +55 -55
  240. package/lib/motion/shotcraft/upstream/references/shots/interaction/segmented-thumb-hero.md +57 -57
  241. package/lib/motion/shotcraft/upstream/references/shots/interaction/theme-switch-moves.md +47 -47
  242. package/lib/motion/shotcraft/upstream/references/shots/interaction/type-and-filter.md +37 -37
  243. package/lib/motion/shotcraft/upstream/references/shots/interaction/voice-waveform-live.md +54 -54
  244. package/lib/motion/shotcraft/upstream/references/shots/opening/brand-ink-open.md +36 -36
  245. package/lib/motion/shotcraft/upstream/references/shots/opening/crane-rise-reveal.md +56 -56
  246. package/lib/motion/shotcraft/upstream/references/shots/opening/dataviz-landscape-open.md +56 -56
  247. package/lib/motion/shotcraft/upstream/references/shots/opening/fracture.md +40 -40
  248. package/lib/motion/shotcraft/upstream/references/shots/opening/icon-field-colorize.md +60 -60
  249. package/lib/motion/shotcraft/upstream/references/shots/opening/letterspace-materialize.md +57 -57
  250. package/lib/motion/shotcraft/upstream/references/shots/opening/magician-card-flourish.md +73 -73
  251. package/lib/motion/shotcraft/upstream/references/shots/opening/orbit-ring-title-open.md +87 -87
  252. package/lib/motion/shotcraft/upstream/references/shots/opening/spotlight-hero-card.md +55 -55
  253. package/lib/motion/shotcraft/upstream/references/shots/opening/stroke-segment-build.md +50 -50
  254. package/lib/motion/shotcraft/upstream/references/shots/opening/text-as-mask.md +59 -59
  255. package/lib/motion/shotcraft/upstream/references/shots/outro/grain-dissolve.md +38 -38
  256. package/lib/motion/shotcraft/upstream/references/shots/outro/logo-shrink-wordmark-lockup.md +38 -38
  257. package/lib/motion/shotcraft/upstream/references/shots/outro/neon-triple-marquee.md +59 -59
  258. package/lib/motion/shotcraft/upstream/references/shots/outro/outro-group-photo-launch.md +39 -39
  259. package/lib/motion/shotcraft/upstream/references/shots/outro/ui-strip-away-outro.md +61 -61
  260. package/lib/motion/shotcraft/upstream/references/shots/outro/ui-to-brand-morph.md +52 -52
  261. package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-cut-moves.md +50 -50
  262. package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-step-list-theme-cycle.md +66 -66
  263. package/lib/motion/shotcraft/upstream/references/shots/rhythm/panel-grid-moves.md +43 -43
  264. package/lib/motion/shotcraft/upstream/references/shots/rhythm/quad-split-parallel-scenes.md +38 -38
  265. package/lib/motion/shotcraft/upstream/references/shots/rhythm/rhythm-interrupt-moves.md +38 -38
  266. package/lib/motion/shotcraft/upstream/references/shots/rhythm/sakuga-timing-shift.md +56 -56
  267. package/lib/motion/shotcraft/upstream/references/shots/rhythm/speed-ramp-freeze.md +44 -44
  268. package/lib/motion/shotcraft/upstream/references/shots/rhythm/trailer-grammar-moves.md +38 -38
  269. package/lib/motion/shotcraft/upstream/references/shots/transition/bottom-push-stack-wipe.md +63 -63
  270. package/lib/motion/shotcraft/upstream/references/shots/transition/card-flip-reveal.md +57 -57
  271. package/lib/motion/shotcraft/upstream/references/shots/transition/card-flock-tumble.md +63 -63
  272. package/lib/motion/shotcraft/upstream/references/shots/transition/circle-match-iris.md +58 -58
  273. package/lib/motion/shotcraft/upstream/references/shots/transition/gradient-transition.md +45 -45
  274. package/lib/motion/shotcraft/upstream/references/shots/transition/line-carry-transition.md +55 -55
  275. package/lib/motion/shotcraft/upstream/references/shots/transition/mosaic-reframe.md +49 -49
  276. package/lib/motion/shotcraft/upstream/references/shots/transition/page-turn-transitions.md +42 -42
  277. package/lib/motion/shotcraft/upstream/references/shots/transition/print-texture-transitions.md +42 -42
  278. package/lib/motion/shotcraft/upstream/references/shots/transition/shot-transitions.md +45 -45
  279. package/lib/motion/shotcraft/upstream/references/shots/transition/tear-streak-transitions.md +48 -48
  280. package/lib/motion/shotcraft/upstream/references/shots/transition/transition-hidden-cut.md +55 -55
  281. package/lib/motion/shotcraft/upstream/references/shots/transition/transition-travel.md +43 -43
  282. package/lib/motion/shotcraft/upstream/references/shots/transition/white-flash-logo-simplify-cut.md +41 -41
  283. package/lib/motion/shotcraft/upstream/references/shots/transition/wipe-transitions.md +42 -42
  284. package/lib/motion/shotcraft/upstream/references/shots/typography/blur-slide.md +59 -59
  285. package/lib/motion/shotcraft/upstream/references/shots/typography/brace-expand.md +55 -55
  286. package/lib/motion/shotcraft/upstream/references/shots/typography/countdown-arc-scatter.md +65 -65
  287. package/lib/motion/shotcraft/upstream/references/shots/typography/document-typewriter-reveal.md +42 -42
  288. package/lib/motion/shotcraft/upstream/references/shots/typography/flying-words.md +64 -64
  289. package/lib/motion/shotcraft/upstream/references/shots/typography/glitch-cycle.md +64 -64
  290. package/lib/motion/shotcraft/upstream/references/shots/typography/gradient-word-sweep.md +54 -54
  291. package/lib/motion/shotcraft/upstream/references/shots/typography/lead-word-zoom-assemble.md +91 -91
  292. package/lib/motion/shotcraft/upstream/references/shots/typography/marker-underline-title.md +51 -51
  293. package/lib/motion/shotcraft/upstream/references/shots/typography/outline-word-fill.md +66 -66
  294. package/lib/motion/shotcraft/upstream/references/shots/typography/paper-title-card.md +38 -38
  295. package/lib/motion/shotcraft/upstream/references/shots/typography/pill-chip-slot-cycle-handled.md +66 -66
  296. package/lib/motion/shotcraft/upstream/references/shots/typography/pill-slot-cycle.md +58 -58
  297. package/lib/motion/shotcraft/upstream/references/shots/typography/text-column-converge.md +61 -61
  298. package/lib/motion/shotcraft/upstream/references/shots/typography/title-demote-to-label.md +64 -64
  299. package/lib/motion/shotcraft/upstream/references/shots/typography/type-assembly-moves.md +45 -45
  300. package/lib/motion/shotcraft/upstream/references/shots/typography/type-entrance-moves.md +41 -41
  301. package/lib/motion/shotcraft/upstream/references/shots/typography/type-rhythm-sync.md +51 -51
  302. package/lib/motion/shotcraft/upstream/references/shots/typography/typewriter-moves.md +42 -42
  303. package/lib/motion/shotcraft/upstream/references/shots/typography/vertical-word-roll-blur-cycle.md +63 -63
  304. package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-filmstrip.md +57 -57
  305. package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-geometry.md +75 -75
  306. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/avatar-bracket-carousel.md +59 -59
  307. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/bezier-source-converge-merge.md +67 -67
  308. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/card-stack.md +60 -60
  309. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/carousel-3d.md +66 -66
  310. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/cloner-depth-echo.md +40 -40
  311. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/deck-deal-flyin.md +45 -45
  312. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/doc-park-left-pill-deal.md +62 -62
  313. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/draw-svg-trace.md +55 -55
  314. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/element-body-moves.md +37 -37
  315. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/integration-hub-map.md +55 -55
  316. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/list-reveal.md +50 -50
  317. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/list-stack-press.md +43 -43
  318. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/neon-frame-forerun.md +55 -55
  319. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/neon-frame-orbit-drop.md +51 -51
  320. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/page-waterfall-wall.md +51 -51
  321. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/product-card-progressive-assemble.md +56 -56
  322. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/radial-wave.md +49 -49
  323. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/research-card-stack-scroll.md +57 -57
  324. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/row-embed.md +36 -36
  325. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/value-stagger-gradient.md +64 -64
  326. package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/wall-reveal-moves.md +47 -47
  327. package/lib/motion/shotcraft/upstream/references/sound-design.md +170 -170
  328. package/lib/motion/shotcraft/upstream/references/workbench.md +157 -157
  329. package/lib/motion/shotcraft/upstream/template/TEMPLATE.md +103 -103
  330. package/lib/motion/shotcraft/upstream/template/THEMES.md +44 -44
  331. package/lib/motion/shotcraft/upstream/template/package.json +20 -20
  332. package/lib/motion/shotcraft/upstream/template/remotion.config.ts +6 -6
  333. package/lib/motion/shotcraft/upstream/template/src/Root.tsx +17 -17
  334. package/lib/motion/shotcraft/upstream/template/src/aifl/Caption.tsx +65 -65
  335. package/lib/motion/shotcraft/upstream/template/src/aifl/DigitRoll.tsx +48 -48
  336. package/lib/motion/shotcraft/upstream/template/src/aifl/FlashCut.tsx +24 -24
  337. package/lib/motion/shotcraft/upstream/template/src/aifl/Main.tsx +192 -192
  338. package/lib/motion/shotcraft/upstream/template/src/aifl/PaperTitleCard.tsx +111 -111
  339. package/lib/motion/shotcraft/upstream/template/src/aifl/live/PageCam.tsx +150 -150
  340. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneDetail.tsx +158 -158
  341. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneFlyIn.tsx +468 -468
  342. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOpen.tsx +552 -552
  343. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneOutroLive.tsx +411 -411
  344. package/lib/motion/shotcraft/upstream/template/src/aifl/live/ScenePapers.tsx +200 -200
  345. package/lib/motion/shotcraft/upstream/template/src/aifl/live/SceneWbr.tsx +324 -324
  346. package/lib/motion/shotcraft/upstream/template/src/aifl/live-layout.json +388 -388
  347. package/lib/motion/shotcraft/upstream/template/src/index.ts +4 -4
  348. package/lib/motion/shotcraft/upstream/template/src/themes/ThemedFilm.tsx +7 -7
  349. package/lib/motion/shotcraft/upstream/template/src/themes/manifest.tsx +68 -68
  350. package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.json +1 -1
  351. package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.ts +24 -24
  352. package/lib/motion/shotcraft/upstream/template/src/themes/palettes.json +74 -74
  353. package/lib/motion/shotcraft/upstream/template/src/themes/visual-theme.tsx +91 -91
  354. package/lib/motion/shotcraft/upstream/template/src/workbench.ts +213 -213
  355. package/lib/motion/shotcraft/upstream/template/tsconfig.json +15 -15
  356. package/lib/motion/style-frames.js +306 -306
  357. package/lib/motion/sync.js +214 -214
  358. package/lib/motion-project.js +105 -105
  359. package/lib/motion-render-worker.js +174 -174
  360. package/lib/routing/router.js +222 -222
  361. package/lib/routing/vendor/README.md +96 -96
  362. package/lib/routing/vendor/libavoid-routing.js +753 -753
  363. package/lib/routing/vendor/libavoid.min.js +59 -59
  364. package/lib/video-trace-pool.js +128 -128
  365. package/package.json +1 -1
  366. package/LICENSE +0 -4175
@@ -1,59 +1,59 @@
1
- ---
2
- name: neon-triple-marquee
3
- 一句话: 三行对向霓虹跑马灯 recap——三连词空心霓虹灯管巨字上中下排满一面斜拍的砖墙,奇偶行反向匀速无限横滚,三行按 1/3 相位轮流点亮,结尾逐行断电
4
- 适用: 片尾主题词复读机段落;三连词口号的"余韵"拍法;音乐段无旁白铺陈
5
- 时长: 4–5s(demo 150f:18f 逐行点火上电 + 循环体 + 18f 逐行断电 + 8f 熄灯 hold)
6
- 能量: 中高(持续流动 + 逐行脉冲,无瞬时冲击)
7
- 标签: typography
8
- ---
9
-
10
- ## 意图
11
- 一行 marquee 只是网页装饰;三行叠起来、奇偶反向、再让亮度按相位轮流
12
- 走,就成了"主题词在观众眼前列队巡游"。命门是**明暗轮唱**:任一时刻
13
- 只有一行是霓虹主角,其余压暗成细描边背景——三行全亮是灯牌事故,
14
- 轮流亮才是 recap。反向对滚制造"包围感":上下行向右、中行向左,
15
- 视线被夹在中间,词从两侧源源不断流过,读作"这三个词说不完"。
16
-
17
- ## 动效核心
18
- - 无缝回绕:副本按固定 unitW 等距绝对定位,`(frame*speed) % unitW`
19
- 取模平移——匀速 linear(marquee 类是库内 linear 豁免项)
20
- - 空心灯管字三层:`-webkit-text-stroke`,color transparent——暗态玻璃管(同色 0.3 透明度、常亮,三行结构永远在)
21
- → 通电彩色管体(描边 6→10px + 三层 drop-shadow 辉光 9/36/90px)→ 近白热芯(2→3.8px);亮度同时驱动
22
- 身后砖墙上的同色溢光(screen 叠加,砖缝被照出来)——只调 opacity 不调辉光读不出"霓虹通电"
23
- - 轮唱:周期 42f,每行一个 14f 槽,槽长 16f(与下一行重叠 2f 交接,不出现全暗空拍);槽内前 2 帧启辉闪烁
24
- (0.6 → 0.25 → 满)、3f 升满、平台、末 5f ease-in 熄灭——保证"一亮俩暗"永远成立
25
- - 机位:整面墙放在 perspective 1700 的 3D 平面里斜拍,rotateY −17°→−9° 全程 smooth 极缓摇近 + scale 1→1.05;
26
- 墙脚下一条湿地面,最下一行的翻转倒影(模糊 3px + 渐隐遮罩)与三行各自的地面色光池随亮度呼吸
27
- - 三行配色冰青/洋红/钠灯琥珀(#38d9ff/#ff3d9a/#ffae34),蓝黑砖墙 #0a0b14;中行反向且略快(9/11/9 px/f)
28
- - 上电 / 断电:开场三行按 0/5/10f 依次跑一段确定性点火闪烁序列;124f 起自上而下每行错峰 6f 闪两下熄灭,
29
- 落到只剩暗态玻璃管的熄灯海报(不淡到死黑)
30
- - 字体 Avenir Next Condensed Heavy 286px(回退 DIN Condensed / Impact),词距按 canvas 实测宽度排,分隔用空心菱形 ◇(边框与同层灯管同色同粗)
31
-
32
- ## 参数表
33
- | 参数 | 典型值 | 调节手感 |
34
- |------|--------|----------|
35
- | 字号/行距 | 286px 窄体,行距 290px 排满墙面 | 行间留白 >80px 读作三条横幅广告而非一面词墙 |
36
- | 滚速 | 9/11/9 px/f,中行反向 | 窄体字更密,比宽体慢一档;>20 读不清词只见光带;三行同速同向读作整版平移 |
37
- | 脉冲周期 | 42f,每行 14f 槽 + 2f 交接重叠 | 周期 <30f 三行抢闪读作故障;>70f 轮唱感断掉;不留重叠会每 14f 出现一次全暗空拍 |
38
- | 亮度区间 | 暗态玻璃 0.3 + 通电描边 6→10px + 三层辉光 | 暗态 <0.2 暗行消失,"三行"结构丢了 |
39
- | 辉光 | 三层 drop-shadow,亮态 9/36/90px + 墙面溢光 0.55 | 单层或 <20px 读作普通描边字不读作霓虹;没有墙面溢光读作"屏上的字"不是"墙上的灯" |
40
- | 斜拍 | rotateY −17°→−9°,perspective 1700 | >25° 远端词挤成一团读不清;0° 回到平铺,失去纵深 |
41
- | 上电/断电 | 入:逐行错峰 5f 点火;出:124f 起逐行错峰 6f 断电 | 硬切进出读作素材没铺满;整组同时淡出没有"关灯"的仪式感 |
42
-
43
- ## 已知坑
44
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
45
- 首次实战须以真实素材回验
46
- - 与 page-waterfall-wall 分工:那卡是页面截图纵向瀑布做"内容体量感",
47
- 本卡是文字行横向对滚做"主题词余韵"——素材是词不是页,位置在片尾不在中段
48
- - 与 outro-group-photo-launch 分工:全家福是峰值终镜(元素合影+发布会收场),
49
- 本卡是终镜前的 recap 铺垫或低成本备选终镜,两者可串(本卡→淡出→全家福)不可叠
50
- - 副本数按 `ceil(1920/unitW)+3` 留冗余——短词(≤4 字符)unitW 小,
51
- 副本不足会在回绕瞬间露右侧空缺
52
- - 实战品牌色版:三行可统一品牌色靠明暗区分,但辉光对比须 ≥ demo 的
53
- 暗态 0.3 → 通电满亮 + 三层辉光的幅度,不然轮唱读不出来
54
- - 3D 斜拍平面里的 drop-shadow 辉光开销不小(demo 1080p 约 7s 渲完 150f);倒影层只画管体不画辉光(cheap)
55
-
56
- ## 参考实现
57
- demos/outro/neon-triple-marquee/
58
- (NeonTripleMarquee.tsx)
59
- 原片出处:clickup-30 61–64.5s
1
+ ---
2
+ name: neon-triple-marquee
3
+ 一句话: 三行对向霓虹跑马灯 recap——三连词空心霓虹灯管巨字上中下排满一面斜拍的砖墙,奇偶行反向匀速无限横滚,三行按 1/3 相位轮流点亮,结尾逐行断电
4
+ 适用: 片尾主题词复读机段落;三连词口号的"余韵"拍法;音乐段无旁白铺陈
5
+ 时长: 4–5s(demo 150f:18f 逐行点火上电 + 循环体 + 18f 逐行断电 + 8f 熄灯 hold)
6
+ 能量: 中高(持续流动 + 逐行脉冲,无瞬时冲击)
7
+ 标签: typography
8
+ ---
9
+
10
+ ## 意图
11
+ 一行 marquee 只是网页装饰;三行叠起来、奇偶反向、再让亮度按相位轮流
12
+ 走,就成了"主题词在观众眼前列队巡游"。命门是**明暗轮唱**:任一时刻
13
+ 只有一行是霓虹主角,其余压暗成细描边背景——三行全亮是灯牌事故,
14
+ 轮流亮才是 recap。反向对滚制造"包围感":上下行向右、中行向左,
15
+ 视线被夹在中间,词从两侧源源不断流过,读作"这三个词说不完"。
16
+
17
+ ## 动效核心
18
+ - 无缝回绕:副本按固定 unitW 等距绝对定位,`(frame*speed) % unitW`
19
+ 取模平移——匀速 linear(marquee 类是库内 linear 豁免项)
20
+ - 空心灯管字三层:`-webkit-text-stroke`,color transparent——暗态玻璃管(同色 0.3 透明度、常亮,三行结构永远在)
21
+ → 通电彩色管体(描边 6→10px + 三层 drop-shadow 辉光 9/36/90px)→ 近白热芯(2→3.8px);亮度同时驱动
22
+ 身后砖墙上的同色溢光(screen 叠加,砖缝被照出来)——只调 opacity 不调辉光读不出"霓虹通电"
23
+ - 轮唱:周期 42f,每行一个 14f 槽,槽长 16f(与下一行重叠 2f 交接,不出现全暗空拍);槽内前 2 帧启辉闪烁
24
+ (0.6 → 0.25 → 满)、3f 升满、平台、末 5f ease-in 熄灭——保证"一亮俩暗"永远成立
25
+ - 机位:整面墙放在 perspective 1700 的 3D 平面里斜拍,rotateY −17°→−9° 全程 smooth 极缓摇近 + scale 1→1.05;
26
+ 墙脚下一条湿地面,最下一行的翻转倒影(模糊 3px + 渐隐遮罩)与三行各自的地面色光池随亮度呼吸
27
+ - 三行配色冰青/洋红/钠灯琥珀(#38d9ff/#ff3d9a/#ffae34),蓝黑砖墙 #0a0b14;中行反向且略快(9/11/9 px/f)
28
+ - 上电 / 断电:开场三行按 0/5/10f 依次跑一段确定性点火闪烁序列;124f 起自上而下每行错峰 6f 闪两下熄灭,
29
+ 落到只剩暗态玻璃管的熄灯海报(不淡到死黑)
30
+ - 字体 Avenir Next Condensed Heavy 286px(回退 DIN Condensed / Impact),词距按 canvas 实测宽度排,分隔用空心菱形 ◇(边框与同层灯管同色同粗)
31
+
32
+ ## 参数表
33
+ | 参数 | 典型值 | 调节手感 |
34
+ |------|--------|----------|
35
+ | 字号/行距 | 286px 窄体,行距 290px 排满墙面 | 行间留白 >80px 读作三条横幅广告而非一面词墙 |
36
+ | 滚速 | 9/11/9 px/f,中行反向 | 窄体字更密,比宽体慢一档;>20 读不清词只见光带;三行同速同向读作整版平移 |
37
+ | 脉冲周期 | 42f,每行 14f 槽 + 2f 交接重叠 | 周期 <30f 三行抢闪读作故障;>70f 轮唱感断掉;不留重叠会每 14f 出现一次全暗空拍 |
38
+ | 亮度区间 | 暗态玻璃 0.3 + 通电描边 6→10px + 三层辉光 | 暗态 <0.2 暗行消失,"三行"结构丢了 |
39
+ | 辉光 | 三层 drop-shadow,亮态 9/36/90px + 墙面溢光 0.55 | 单层或 <20px 读作普通描边字不读作霓虹;没有墙面溢光读作"屏上的字"不是"墙上的灯" |
40
+ | 斜拍 | rotateY −17°→−9°,perspective 1700 | >25° 远端词挤成一团读不清;0° 回到平铺,失去纵深 |
41
+ | 上电/断电 | 入:逐行错峰 5f 点火;出:124f 起逐行错峰 6f 断电 | 硬切进出读作素材没铺满;整组同时淡出没有"关灯"的仪式感 |
42
+
43
+ ## 已知坑
44
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
45
+ 首次实战须以真实素材回验
46
+ - 与 page-waterfall-wall 分工:那卡是页面截图纵向瀑布做"内容体量感",
47
+ 本卡是文字行横向对滚做"主题词余韵"——素材是词不是页,位置在片尾不在中段
48
+ - 与 outro-group-photo-launch 分工:全家福是峰值终镜(元素合影+发布会收场),
49
+ 本卡是终镜前的 recap 铺垫或低成本备选终镜,两者可串(本卡→淡出→全家福)不可叠
50
+ - 副本数按 `ceil(1920/unitW)+3` 留冗余——短词(≤4 字符)unitW 小,
51
+ 副本不足会在回绕瞬间露右侧空缺
52
+ - 实战品牌色版:三行可统一品牌色靠明暗区分,但辉光对比须 ≥ demo 的
53
+ 暗态 0.3 → 通电满亮 + 三层辉光的幅度,不然轮唱读不出来
54
+ - 3D 斜拍平面里的 drop-shadow 辉光开销不小(demo 1080p 约 7s 渲完 150f);倒影层只画管体不画辉光(cheap)
55
+
56
+ ## 参考实现
57
+ demos/outro/neon-triple-marquee/
58
+ (NeonTripleMarquee.tsx)
59
+ 原片出处:clickup-30 61–64.5s
@@ -1,39 +1,39 @@
1
- ---
2
- name: outro-group-photo-launch
3
- 一句话: 全片元素从四面八方飞来围住字标合影,crane 落机位+舞台光+金尘做成发布会收场
4
- 适用: outro/品牌收尾;多功能产品的"全家福"式终镜
5
- 时长: 约 4.8s(145f)
6
- 能量: 峰值(全片最高点)
7
- ---
8
-
9
- ## 意图
10
- 把看过的每个功能各抽一个代表元素叫回来合影,字标压轴登场——观众离场前最后记住的是"这些东西属于同一个产品"。规格必须是发布会级:能量推到全片最高。
11
-
12
- ## 动效核心
13
- - 9 个页面元素(nav/卡片/内容条/搜索框/统计条/文档头)从四方带旋转飞入,飞行段按速度做方向性运动模糊,落地压实(接触影收紧 + 1.5% 轻压,不逐个发光,Q4)
14
- - 字标(demo:video-shotcraft 标志 + 字标,眉题是品牌短句)letterpress 逐字登场,全员"退后排"让主角;rule 长出、延长线射出
15
- - crane 运镜:合影层整体 rotateX 4°→0 + scale 落下,之后缓推
16
- - 发布会氛围三件套:开场光带扫过、字标背后舞台光、金尘上飘
17
- - 背景页面 blur 化作景深
18
-
19
- ## 参数表
20
- | 参数 | 典型值 | 调节手感 |
21
- |------|--------|----------|
22
- | 元素飞入 | 9 元素 cue 从 4 起每 3f 一个,各飞 12f;起点偏移 ±360–500px;渲染顺序=cue 顺序,后到者叠上 | 每个已展示过的功能都要有代表元素(Q8 自检项),缺谁观众都会察觉 |
23
- | 飞入缓动 | bezier(0.34,1.4,0.44,1) | 代码注释点名教训:旧 bezier(0.25,0.9,0.3,1) "never crossed 1" 没有真过冲——落地要弹 y1 必须 >1 |
24
- | 飞行姿态 | 飞行中 rot×2→settled rot(±5° 内)、scale ×1.12→1;按屏幕速度的方向性运动模糊(0.3×px/帧,封顶 22);落地 cue+9→16f 接触影收紧 + 1.5% 轻压 | 落定角度收进 ±5° 内——合影要整齐但不刻板 |
25
- | 退后排 | 字标登场时 42–50f 全员 opacity −12%、saturate −8% | 主角登场配角必须让位,不让位字标压不住 9 个元素 |
26
- | crane 运镜 | `perspective(1400px) rotateX(4°→0) scale(1.06→1)` 前 40f 落下,之后缓推 +0.035(36f 起 in-out 零速起步,接 crane 不突变) | crane 幅度就这么小(4°)已经够"落机位"读感,大了会晕(推测) |
27
- | 氛围三件套 | 光带 2–14f(600px 宽 overlay 峰值 opacity 0.12);舞台光 42→50→58f 0→0.5→0.25;金尘 20 颗 2.4–4.2px 带暖光晕、opacity 0.35–0.7 微闪 + 6 颗前景失焦光斑、全参数 index 派生确定性 | 粒子/光效参数必须确定性派生(硬规则:渲染必须可复现);金尘超过 30 颗开始像雪(推测) |
28
- | 字标 | demo 为 video-shotcraft 标志 + 全小写字标(品牌字体 118px):标志 38f 先压,字母 delay=42+i·1.8、8f,同一套 letterpress;rule 58→70f 长出、两端 190px 延长线 8f 射出 6f 淡去;字距 62–66f 呼吸;背景页 24f 内 blur 0→14;落定后 sign-off hold 30f | 字标落定 hold 满 1 秒(R1 定案);outro 不加解说 caption 保持干净(C1 例外项) |
29
-
30
- ## 声音
31
- 固定三拍句式:riser-cine 铺进组装(模板片钉在 f945)→ impact-deep-whoosh 钉字标 stamp(f980,vol 0.55 全片峰值)→ sparkle 点 rule(f1005)。这是模板片定稿后唯一从未改动的段落句式(S2;详见 sound-design 4.3)。
32
-
33
- ## 已知坑
34
- - 初版收尾几乎总是偏保守(Q8:安静签名式→合影→发布会三级加码)——起稿就按"像一个产品发布"的规格给足 crane/舞台光/粒子
35
- - 结构先于特效:先有"四方飞入合影"结构再加码氛围;直接堆特效没有骨架
36
- - outro tagline 与字标下方文案查重(P4 dedupe 判例),同一句话全片只出现一次
37
-
38
- ## 参考实现
39
- demos/outro/outro-group-photo-launch/OutroGroupPhotoLaunch.tsx(原 template/src/aifl/live/SceneOutroLive.tsx;30f sign-off hold 时长见 template/src/aifl/Main.tsx 时间线)
1
+ ---
2
+ name: outro-group-photo-launch
3
+ 一句话: 全片元素从四面八方飞来围住字标合影,crane 落机位+舞台光+金尘做成发布会收场
4
+ 适用: outro/品牌收尾;多功能产品的"全家福"式终镜
5
+ 时长: 约 4.8s(145f)
6
+ 能量: 峰值(全片最高点)
7
+ ---
8
+
9
+ ## 意图
10
+ 把看过的每个功能各抽一个代表元素叫回来合影,字标压轴登场——观众离场前最后记住的是"这些东西属于同一个产品"。规格必须是发布会级:能量推到全片最高。
11
+
12
+ ## 动效核心
13
+ - 9 个页面元素(nav/卡片/内容条/搜索框/统计条/文档头)从四方带旋转飞入,飞行段按速度做方向性运动模糊,落地压实(接触影收紧 + 1.5% 轻压,不逐个发光,Q4)
14
+ - 字标(demo:video-shotcraft 标志 + 字标,眉题是品牌短句)letterpress 逐字登场,全员"退后排"让主角;rule 长出、延长线射出
15
+ - crane 运镜:合影层整体 rotateX 4°→0 + scale 落下,之后缓推
16
+ - 发布会氛围三件套:开场光带扫过、字标背后舞台光、金尘上飘
17
+ - 背景页面 blur 化作景深
18
+
19
+ ## 参数表
20
+ | 参数 | 典型值 | 调节手感 |
21
+ |------|--------|----------|
22
+ | 元素飞入 | 9 元素 cue 从 4 起每 3f 一个,各飞 12f;起点偏移 ±360–500px;渲染顺序=cue 顺序,后到者叠上 | 每个已展示过的功能都要有代表元素(Q8 自检项),缺谁观众都会察觉 |
23
+ | 飞入缓动 | bezier(0.34,1.4,0.44,1) | 代码注释点名教训:旧 bezier(0.25,0.9,0.3,1) "never crossed 1" 没有真过冲——落地要弹 y1 必须 >1 |
24
+ | 飞行姿态 | 飞行中 rot×2→settled rot(±5° 内)、scale ×1.12→1;按屏幕速度的方向性运动模糊(0.3×px/帧,封顶 22);落地 cue+9→16f 接触影收紧 + 1.5% 轻压 | 落定角度收进 ±5° 内——合影要整齐但不刻板 |
25
+ | 退后排 | 字标登场时 42–50f 全员 opacity −12%、saturate −8% | 主角登场配角必须让位,不让位字标压不住 9 个元素 |
26
+ | crane 运镜 | `perspective(1400px) rotateX(4°→0) scale(1.06→1)` 前 40f 落下,之后缓推 +0.035(36f 起 in-out 零速起步,接 crane 不突变) | crane 幅度就这么小(4°)已经够"落机位"读感,大了会晕(推测) |
27
+ | 氛围三件套 | 光带 2–14f(600px 宽 overlay 峰值 opacity 0.12);舞台光 42→50→58f 0→0.5→0.25;金尘 20 颗 2.4–4.2px 带暖光晕、opacity 0.35–0.7 微闪 + 6 颗前景失焦光斑、全参数 index 派生确定性 | 粒子/光效参数必须确定性派生(硬规则:渲染必须可复现);金尘超过 30 颗开始像雪(推测) |
28
+ | 字标 | demo 为 video-shotcraft 标志 + 全小写字标(品牌字体 118px):标志 38f 先压,字母 delay=42+i·1.8、8f,同一套 letterpress;rule 58→70f 长出、两端 190px 延长线 8f 射出 6f 淡去;字距 62–66f 呼吸;背景页 24f 内 blur 0→14;落定后 sign-off hold 30f | 字标落定 hold 满 1 秒(R1 定案);outro 不加解说 caption 保持干净(C1 例外项) |
29
+
30
+ ## 声音
31
+ 固定三拍句式:riser-cine 铺进组装(模板片钉在 f945)→ impact-deep-whoosh 钉字标 stamp(f980,vol 0.55 全片峰值)→ sparkle 点 rule(f1005)。这是模板片定稿后唯一从未改动的段落句式(S2;详见 sound-design 4.3)。
32
+
33
+ ## 已知坑
34
+ - 初版收尾几乎总是偏保守(Q8:安静签名式→合影→发布会三级加码)——起稿就按"像一个产品发布"的规格给足 crane/舞台光/粒子
35
+ - 结构先于特效:先有"四方飞入合影"结构再加码氛围;直接堆特效没有骨架
36
+ - outro tagline 与字标下方文案查重(P4 dedupe 判例),同一句话全片只出现一次
37
+
38
+ ## 参考实现
39
+ demos/outro/outro-group-photo-launch/OutroGroupPhotoLaunch.tsx(原 template/src/aifl/live/SceneOutroLive.tsx;30f sign-off hold 时长见 template/src/aifl/Main.tsx 时间线)
@@ -1,61 +1,61 @@
1
- ---
2
- name: ui-strip-away-outro
3
- 一句话: 减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发,黑场上只剩那颗按钮滑到屏心放大,按钮再淡出交棒字标定版
4
- 适用: "发布/完成"语义的 outro;想讲"一键之后一切复杂性消失"的产品收尾
5
- 时长: ~4.8s(144f:光标就位 34f → 蒸发 ~40f → 按钮独占 → 字标接棒 → 字标 hold ≥1s)
6
- 能量: 中(前段安静操作,中段持续退场,无瞬时冲击)
7
- ---
8
-
9
- ## 意图
10
- 库内收尾全是"加法":outro-group-photo-launch 元素飞来合影,logo
11
- sting 是定住再彩蛋。本卡是唯一的"减法"路线——点击引爆全 UI 退场,
12
- 黑场只留语义焦点(那颗被点的按钮),把"发布 = 复杂性归零"翻译成
13
- 动效叙事。命门有二:**蒸发要有秩序**——从外围到中心每 4f 一层、
14
- 每层带方向性位移(各自往画外散),乱序或同帧齐灭读作断电故障;
15
- **按钮是唯一幸存者且必须迁移**——蒸发期间从工具条角落滑到屏心
16
- 放大 1.5 倍、白晕随黑场增强,完成从"UI 控件"到"仪式主角"的升格,
17
- 最后淡出把黑场交给字标。
18
-
19
- ## 动效核心
20
- - 6 个蒸发层:侧栏→属性面板→画布卡→工具条两端→画布底→工具条中段,
21
- 点击后 +4f 起每 4f 一层;每层 STRIP_DUR 14f,Easing.in(quad)
22
- 离场加速,fade + 方向性位移 + 0→7px 蒸发模糊(侧栏 −140,0 / 面板 −90,20 /
23
- 工具条两端 ∓80,−60 / 画布底 0,40 / 工具条中段 0,−50)
24
- - 画布内 4 张卡再各错峰 3f,位移左右交替(±70px)——大块整体消失
25
- 会读作图层被删,碎开走才是"蒸发"
26
- - 背景压黑:随画布底层蒸发(+20f 起 20f)灰底 → #111110
27
- - 按钮:点击 spring(damping 12, stiffness 220) 压缩脉冲;蒸发期
28
- 位置/尺寸插值滑向屏心(18f,inOut cubic),scale ×1.5,白晕
29
- 30→70px 随黑场增强;+52f 起 12f 淡出
30
- - 字标接棒:+62f spring(damping 14, stiffness 90) 淡入 +
31
- 86%→100% 缩放,黑场定版
32
- - 光标点击后 10f 内淡出——主角换人,光标必须退场
33
-
34
- ## 参数表
35
- | 参数 | 典型值 | 调节手感 |
36
- |------|--------|----------|
37
- | 层间错峰 | 4f × 6 层 | 同帧齐灭读作断电;>8f 拖成慢拆迁,仪式感散 |
38
- | 单层时长 | 14f,ease-in 加速 | ease-out 离场读作"飘走"不读作"蒸发";>20f 黏 |
39
- | 蒸发顺序 | 外围 → 中心,按钮所在层最后 | 中心先空读作故障;按钮层先走全卡崩塌 |
40
- | 位移幅度 | 50–140px,方向各自向画外 | 无位移纯 fade 读作调透明度;同方向读作整屏平移 |
41
- | 按钮迁移 | 18f 滑到屏心 + scale ×1.5 + 晕光增强 | 不迁移则黑场上一颗角落小钮,读作漏删;先迁后灭顺序不可反 |
42
- | 字标接棒 | 按钮淡出后 ~10f 进,spring 定版 | 与按钮同屏抢戏;黑场空窗 >20f 像放完了 |
43
-
44
- ## 已知坑
45
- - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
46
- 首次实战须以真实素材回验
47
- - 与 outro-group-photo-launch 分工:全家福是"加法"峰值终镜(多功能
48
- 产品全员谢幕),本卡是"减法"收尾(单一动作语义、越走越静)——按
49
- 产品气质二选一,不可同片双收尾
50
- - 蒸发的每层必须是**语义完整的 UI 区块**(侧栏/面板/工具条),按
51
- 像素区域切层会在错峰时露出结构不合理的残缺态
52
- - 按钮迁移全程 zIndex 压最顶——任何蒸发层从按钮前面飘过都是穿帮
53
- - 触发动作必须是"终结性"语义(Publish/Ship/Done);拿 Save 或普通
54
- 确认触发全 UI 蒸发,语义配不上排场
55
- - 实战按钮用品牌高亮色(原片是 Framer 蓝),demo 用强调色靛蓝占位
56
- ——黑场上按钮与晕光的对比是主角光环,颜色弱则升格失败
57
-
58
- ## 参考实现
59
- demos/outro/ui-strip-away-outro/
60
- (UiStripAwayOutro.tsx)
61
- 原片出处:framer-ai 33–36.5s
1
+ ---
2
+ name: ui-strip-away-outro
3
+ 一句话: 减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发,黑场上只剩那颗按钮滑到屏心放大,按钮再淡出交棒字标定版
4
+ 适用: "发布/完成"语义的 outro;想讲"一键之后一切复杂性消失"的产品收尾
5
+ 时长: ~4.8s(144f:光标就位 34f → 蒸发 ~40f → 按钮独占 → 字标接棒 → 字标 hold ≥1s)
6
+ 能量: 中(前段安静操作,中段持续退场,无瞬时冲击)
7
+ ---
8
+
9
+ ## 意图
10
+ 库内收尾全是"加法":outro-group-photo-launch 元素飞来合影,logo
11
+ sting 是定住再彩蛋。本卡是唯一的"减法"路线——点击引爆全 UI 退场,
12
+ 黑场只留语义焦点(那颗被点的按钮),把"发布 = 复杂性归零"翻译成
13
+ 动效叙事。命门有二:**蒸发要有秩序**——从外围到中心每 4f 一层、
14
+ 每层带方向性位移(各自往画外散),乱序或同帧齐灭读作断电故障;
15
+ **按钮是唯一幸存者且必须迁移**——蒸发期间从工具条角落滑到屏心
16
+ 放大 1.5 倍、白晕随黑场增强,完成从"UI 控件"到"仪式主角"的升格,
17
+ 最后淡出把黑场交给字标。
18
+
19
+ ## 动效核心
20
+ - 6 个蒸发层:侧栏→属性面板→画布卡→工具条两端→画布底→工具条中段,
21
+ 点击后 +4f 起每 4f 一层;每层 STRIP_DUR 14f,Easing.in(quad)
22
+ 离场加速,fade + 方向性位移 + 0→7px 蒸发模糊(侧栏 −140,0 / 面板 −90,20 /
23
+ 工具条两端 ∓80,−60 / 画布底 0,40 / 工具条中段 0,−50)
24
+ - 画布内 4 张卡再各错峰 3f,位移左右交替(±70px)——大块整体消失
25
+ 会读作图层被删,碎开走才是"蒸发"
26
+ - 背景压黑:随画布底层蒸发(+20f 起 20f)灰底 → #111110
27
+ - 按钮:点击 spring(damping 12, stiffness 220) 压缩脉冲;蒸发期
28
+ 位置/尺寸插值滑向屏心(18f,inOut cubic),scale ×1.5,白晕
29
+ 30→70px 随黑场增强;+52f 起 12f 淡出
30
+ - 字标接棒:+62f spring(damping 14, stiffness 90) 淡入 +
31
+ 86%→100% 缩放,黑场定版
32
+ - 光标点击后 10f 内淡出——主角换人,光标必须退场
33
+
34
+ ## 参数表
35
+ | 参数 | 典型值 | 调节手感 |
36
+ |------|--------|----------|
37
+ | 层间错峰 | 4f × 6 层 | 同帧齐灭读作断电;>8f 拖成慢拆迁,仪式感散 |
38
+ | 单层时长 | 14f,ease-in 加速 | ease-out 离场读作"飘走"不读作"蒸发";>20f 黏 |
39
+ | 蒸发顺序 | 外围 → 中心,按钮所在层最后 | 中心先空读作故障;按钮层先走全卡崩塌 |
40
+ | 位移幅度 | 50–140px,方向各自向画外 | 无位移纯 fade 读作调透明度;同方向读作整屏平移 |
41
+ | 按钮迁移 | 18f 滑到屏心 + scale ×1.5 + 晕光增强 | 不迁移则黑场上一颗角落小钮,读作漏删;先迁后灭顺序不可反 |
42
+ | 字标接棒 | 按钮淡出后 ~10f 进,spring 定版 | 与按钮同屏抢戏;黑场空窗 >20f 像放完了 |
43
+
44
+ ## 已知坑
45
+ - demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
46
+ 首次实战须以真实素材回验
47
+ - 与 outro-group-photo-launch 分工:全家福是"加法"峰值终镜(多功能
48
+ 产品全员谢幕),本卡是"减法"收尾(单一动作语义、越走越静)——按
49
+ 产品气质二选一,不可同片双收尾
50
+ - 蒸发的每层必须是**语义完整的 UI 区块**(侧栏/面板/工具条),按
51
+ 像素区域切层会在错峰时露出结构不合理的残缺态
52
+ - 按钮迁移全程 zIndex 压最顶——任何蒸发层从按钮前面飘过都是穿帮
53
+ - 触发动作必须是"终结性"语义(Publish/Ship/Done);拿 Save 或普通
54
+ 确认触发全 UI 蒸发,语义配不上排场
55
+ - 实战按钮用品牌高亮色(原片是 Framer 蓝),demo 用强调色靛蓝占位
56
+ ——黑场上按钮与晕光的对比是主角光环,颜色弱则升格失败
57
+
58
+ ## 参考实现
59
+ demos/outro/ui-strip-away-outro/
60
+ (UiStripAwayOutro.tsx)
61
+ 原片出处:framer-ai 33–36.5s
@@ -1,52 +1,52 @@
1
- ---
2
- name: ui-to-brand-morph
3
- 一句话: UI 变品牌两式——icon-flip-bloom 图标 Y 轴翻扁成竖线、从竖线撑开成品牌标志(琥珀斜切随后划入)+ wordmark 逐字落定,与 input-morph-assemble 输入框收缩成取景框竖笔、三块图元落进构造槽位拼成完整标志
4
- 适用: 品牌收尾/outro 前最后一拍;"你每天用的那个 UI 就是这个品牌"的视觉论证
5
- 时长: A ~4.3s(130f)/ B ~5.6s(168f)
6
- 能量: 中高(收尾点睛,一次完整变形讲完)
7
- ---
8
-
9
- ## 意图
10
- 品牌收尾库里已有两条路:brand-ink-open 是开场描画压印、
11
- outro-group-photo-launch 是元素围拢合影(聚而不变)。本卡补第三条:
12
- **产品 UI 元素自己变形成品牌符号**——A 式是图标翻一个身变成 logo
13
- (同位实体交换),B 式是全片反复出现的输入框在最后一次发送后集结成
14
- 品牌标志(多元素落位拼装)。观众看到的不是"logo 出现了",而是
15
- "刚才用的东西原来就是它",因果链本身就是品牌论证。
16
-
17
- ## 两式选型
18
- | 式 | 做法 | 适用 |
19
- |----|------|------|
20
- | A icon-flip-bloom | 图标 anticipation 晃两下→Y 轴 scaleX 压扁成竖线(双层拖影+blur)→最薄处实体交换、标志按过冲 spring 从竖线撑开、琥珀斜切随后沿 45° 划入→mark 左移让位、wordmark 逐字落定 | 单图标产品;图标与 logo 形态差异大、需要"翻过去变身"的魔术感 |
21
- | B input-morph-assemble | 光标点发送→文字飞走、标志墨色从发送键漫开灌满输入框→x/y/w/h/r 五量 spring 收成取景框竖笔→上横 / 下横 / 琥珀斜切错峰从画外落进虚线构造槽位拼成标志→让位出字标 | 输入框/卡片等矩形 UI 是全片主角的片子;logo 可拆解为几何图元组合 |
22
-
23
- ## 参数表
24
- | 参数 | 典型值 | 调节手感 |
25
- |------|--------|----------|
26
- | A anticipation | 12–34f 倾斜 -12°/+14°/-18°→0°,inOut(sin),transformOrigin 钉底部 78%;接地软影随倾斜偏移、翻扁时收窄 | 幅度递增才读作"蓄力";只晃一下读不出预备动作 |
27
- | A 翻扁 | 34–46f Easing.in(cubic),scaleX 1→0.04;两层残影 opacity 0.22/0.14 + blur 6px 滞后 0.12/0.24 | 加速入是"甩"的关键;匀速翻读作 flip 卡片。0.04 是最薄处,实体交换在这帧做 |
28
- | A 撑开 | 46f 起 spring(damping 11, stiffness 130) 驱动标志 scaleX 0.04→1(带过冲);53f 起斜切 spring(damping 16, stiffness 170) 沿 45° 划入(cutProgress 0→1) | 标志从闭合竖线撑开才接得住"翻过最薄处";直接 scale 整个标志会断因果。斜切晚 7f 是第二拍,与取景框同时出现读不出"刻" |
29
- | A wordmark | mark 64–82f 左移 -471px 让位(字标起点 mark+187,整组居中);逐字 2.6f 错峰、每字 12f:scale 1.9→1 + blur 14→0(snappy),原点钉基线;字标 112px 品牌字体 700、+0.03em(标志高 ≈ 字号 2.1 倍) | 对照原片:各字母由大变小落位,大的时候模糊、落位时清晰(scale+blur 联动逐字落定),不是横向扫出;错峰 <2.4f 每字的"由大变小"读不清 |
30
- | B 发送反馈 | 光标 20f 移入按下 scale 0.84 + 按钮闪白 6f;文字 11f ease-in 加速右上飞出(+760,-420)+ rotate -9° + 拖影 | 飞走必须加速——匀速飞读作平移不读作"发出去了" |
31
- | B 灌色 | 28–40f 标志墨色从发送键位置圆形 clip-path 漫开灌满输入框(全程实色) | 用 opacity 渐变填色会经过一段发灰的半透明态;文字要先飞离再灌色,否则深字压在墨上 |
32
- | B morph | 30f 起 spring(damping 15, stiffness 95),1040×132 r34 → 89×330 直角(取景框竖笔,横条直接挤成竖条)五量同步,按 spring 速度加 ≤3px 拖影;输入框投影随 morph 收掉 | 五量必须同一个 spring 驱动,分开插值会中途散架 |
33
- | B 三块落下 | 上横 / 下横 / 琥珀斜切 58/72/86f 错峰 14f,各自 spring(damping 13) 从画外 -760px 落到槽位;落前 10f 槽位先沿轮廓画出虚线构造框(外扩 10px),落定 14f 后淡出;按速度拉伸 / 回弹压扁(原点钉底部),空中带落影、落定即平 | 错峰是"集结"的节奏感;齐落读作下雨;没有槽位预示,落点读作随机 |
34
- | B 落定 | 108f 起 mark 20f 左移让位并收到 0.7(给 15 字符字标腾地方)、构造网格退场,字标 110px 逐字(1.5f 错峰)从基线升起、口号逐词;124f 起整组极缓推近 2% | 落定后整段不动即死帧;逐拍 scale 呼吸容易读作抖动 |
35
-
36
- ## 已知坑
37
- - demo 终点 logo 是 video-shotcraft「镜刻」标志(A:柔光亮场 + 琥珀斜切;B:瑞士网格亮场 + 钴蓝构造线)——
38
- 参数是调校起点非实战定稿,首次实战须以真实素材回验
39
- - A 式实体交换必须发生在 scaleX ≤0.05 的最薄帧——提前换观众看见两个图形叠影,魔术穿帮
40
- - A 式 wordmark 已改为逐字 scale+blur 落定,错峰 2.2→2.6f;换更长的字标时按可感性判例正常速度看片再定间隔
41
- - B 式把标志拆成竖笔(= 输入框)+ 上横 + 下横 + 斜切四块——实战换成自家 logo 的图元分解,图元数 3–4 粒为宜,多了读作粒子不读作拼装
42
- - B 式同色图元叠合处抗锯齿会叠加(边缘那一行像素更深),拼缝出 1px 台阶;拼齐后(108f)把竖笔 + 上下横换成同几何的单一取景框路径
43
- - 变形中途别叠其他动画:morph 本身是全部信息
44
- - 与 outro-group-photo-launch 分工:那是全片元素飞来围住字标合影(聚),本卡是 UI 元素自己变成品牌符号(变);同片收尾二选一
45
- - 声音:A 翻扁一声"唰"、撑开落定"嗒";B 发送一声 send、每块落位一声 pop、字标段静
46
-
47
- ## 参考实现
48
- demos/outro/ui-to-brand-morph/
49
- (IconFlipBloomLogo.tsx / InputMorphsIntoLogo.tsx)
50
- 原片出处:A perplexity-promo 88–91.5s / B slack-promo 40–41s
51
-
52
- 实现状态:两式均有参考实现与 Gallery 动态样片。
1
+ ---
2
+ name: ui-to-brand-morph
3
+ 一句话: UI 变品牌两式——icon-flip-bloom 图标 Y 轴翻扁成竖线、从竖线撑开成品牌标志(琥珀斜切随后划入)+ wordmark 逐字落定,与 input-morph-assemble 输入框收缩成取景框竖笔、三块图元落进构造槽位拼成完整标志
4
+ 适用: 品牌收尾/outro 前最后一拍;"你每天用的那个 UI 就是这个品牌"的视觉论证
5
+ 时长: A ~4.3s(130f)/ B ~5.6s(168f)
6
+ 能量: 中高(收尾点睛,一次完整变形讲完)
7
+ ---
8
+
9
+ ## 意图
10
+ 品牌收尾库里已有两条路:brand-ink-open 是开场描画压印、
11
+ outro-group-photo-launch 是元素围拢合影(聚而不变)。本卡补第三条:
12
+ **产品 UI 元素自己变形成品牌符号**——A 式是图标翻一个身变成 logo
13
+ (同位实体交换),B 式是全片反复出现的输入框在最后一次发送后集结成
14
+ 品牌标志(多元素落位拼装)。观众看到的不是"logo 出现了",而是
15
+ "刚才用的东西原来就是它",因果链本身就是品牌论证。
16
+
17
+ ## 两式选型
18
+ | 式 | 做法 | 适用 |
19
+ |----|------|------|
20
+ | A icon-flip-bloom | 图标 anticipation 晃两下→Y 轴 scaleX 压扁成竖线(双层拖影+blur)→最薄处实体交换、标志按过冲 spring 从竖线撑开、琥珀斜切随后沿 45° 划入→mark 左移让位、wordmark 逐字落定 | 单图标产品;图标与 logo 形态差异大、需要"翻过去变身"的魔术感 |
21
+ | B input-morph-assemble | 光标点发送→文字飞走、标志墨色从发送键漫开灌满输入框→x/y/w/h/r 五量 spring 收成取景框竖笔→上横 / 下横 / 琥珀斜切错峰从画外落进虚线构造槽位拼成标志→让位出字标 | 输入框/卡片等矩形 UI 是全片主角的片子;logo 可拆解为几何图元组合 |
22
+
23
+ ## 参数表
24
+ | 参数 | 典型值 | 调节手感 |
25
+ |------|--------|----------|
26
+ | A anticipation | 12–34f 倾斜 -12°/+14°/-18°→0°,inOut(sin),transformOrigin 钉底部 78%;接地软影随倾斜偏移、翻扁时收窄 | 幅度递增才读作"蓄力";只晃一下读不出预备动作 |
27
+ | A 翻扁 | 34–46f Easing.in(cubic),scaleX 1→0.04;两层残影 opacity 0.22/0.14 + blur 6px 滞后 0.12/0.24 | 加速入是"甩"的关键;匀速翻读作 flip 卡片。0.04 是最薄处,实体交换在这帧做 |
28
+ | A 撑开 | 46f 起 spring(damping 11, stiffness 130) 驱动标志 scaleX 0.04→1(带过冲);53f 起斜切 spring(damping 16, stiffness 170) 沿 45° 划入(cutProgress 0→1) | 标志从闭合竖线撑开才接得住"翻过最薄处";直接 scale 整个标志会断因果。斜切晚 7f 是第二拍,与取景框同时出现读不出"刻" |
29
+ | A wordmark | mark 64–82f 左移 -471px 让位(字标起点 mark+187,整组居中);逐字 2.6f 错峰、每字 12f:scale 1.9→1 + blur 14→0(snappy),原点钉基线;字标 112px 品牌字体 700、+0.03em(标志高 ≈ 字号 2.1 倍) | 对照原片:各字母由大变小落位,大的时候模糊、落位时清晰(scale+blur 联动逐字落定),不是横向扫出;错峰 <2.4f 每字的"由大变小"读不清 |
30
+ | B 发送反馈 | 光标 20f 移入按下 scale 0.84 + 按钮闪白 6f;文字 11f ease-in 加速右上飞出(+760,-420)+ rotate -9° + 拖影 | 飞走必须加速——匀速飞读作平移不读作"发出去了" |
31
+ | B 灌色 | 28–40f 标志墨色从发送键位置圆形 clip-path 漫开灌满输入框(全程实色) | 用 opacity 渐变填色会经过一段发灰的半透明态;文字要先飞离再灌色,否则深字压在墨上 |
32
+ | B morph | 30f 起 spring(damping 15, stiffness 95),1040×132 r34 → 89×330 直角(取景框竖笔,横条直接挤成竖条)五量同步,按 spring 速度加 ≤3px 拖影;输入框投影随 morph 收掉 | 五量必须同一个 spring 驱动,分开插值会中途散架 |
33
+ | B 三块落下 | 上横 / 下横 / 琥珀斜切 58/72/86f 错峰 14f,各自 spring(damping 13) 从画外 -760px 落到槽位;落前 10f 槽位先沿轮廓画出虚线构造框(外扩 10px),落定 14f 后淡出;按速度拉伸 / 回弹压扁(原点钉底部),空中带落影、落定即平 | 错峰是"集结"的节奏感;齐落读作下雨;没有槽位预示,落点读作随机 |
34
+ | B 落定 | 108f 起 mark 20f 左移让位并收到 0.7(给 15 字符字标腾地方)、构造网格退场,字标 110px 逐字(1.5f 错峰)从基线升起、口号逐词;124f 起整组极缓推近 2% | 落定后整段不动即死帧;逐拍 scale 呼吸容易读作抖动 |
35
+
36
+ ## 已知坑
37
+ - demo 终点 logo 是 video-shotcraft「镜刻」标志(A:柔光亮场 + 琥珀斜切;B:瑞士网格亮场 + 钴蓝构造线)——
38
+ 参数是调校起点非实战定稿,首次实战须以真实素材回验
39
+ - A 式实体交换必须发生在 scaleX ≤0.05 的最薄帧——提前换观众看见两个图形叠影,魔术穿帮
40
+ - A 式 wordmark 已改为逐字 scale+blur 落定,错峰 2.2→2.6f;换更长的字标时按可感性判例正常速度看片再定间隔
41
+ - B 式把标志拆成竖笔(= 输入框)+ 上横 + 下横 + 斜切四块——实战换成自家 logo 的图元分解,图元数 3–4 粒为宜,多了读作粒子不读作拼装
42
+ - B 式同色图元叠合处抗锯齿会叠加(边缘那一行像素更深),拼缝出 1px 台阶;拼齐后(108f)把竖笔 + 上下横换成同几何的单一取景框路径
43
+ - 变形中途别叠其他动画:morph 本身是全部信息
44
+ - 与 outro-group-photo-launch 分工:那是全片元素飞来围住字标合影(聚),本卡是 UI 元素自己变成品牌符号(变);同片收尾二选一
45
+ - 声音:A 翻扁一声"唰"、撑开落定"嗒";B 发送一声 send、每块落位一声 pop、字标段静
46
+
47
+ ## 参考实现
48
+ demos/outro/ui-to-brand-morph/
49
+ (IconFlipBloomLogo.tsx / InputMorphsIntoLogo.tsx)
50
+ 原片出处:A perplexity-promo 88–91.5s / B slack-promo 40–41s
51
+
52
+ 实现状态:两式均有参考实现与 Gallery 动态样片。
@@ -1,50 +1,50 @@
1
- ---
2
- name: beat-cut-moves
3
- 一句话: 硬切当节拍乐器——连闪定格:三次白闪各硬切同一画面的一个裁切(全景→卡片→特写),快门余韵沉降后停在特写收束
4
- 适用: 高光段落把"切"本身打成鼓点;颁奖连拍式的仪式感、关键信息的加冕
5
- 时长: 全程 140f ≈4.7s(活素材 30f + 三闪 + hold 70f)
6
- 能量: 高
7
- 标签: transition
8
- ---
9
-
10
- ## 意图
11
- 库内节奏词汇一直只管"一条运动内"的速率(speed-ramp-freeze 是同一条 take
12
- 里定格再解冻)和"落定后停多久"(R 系呼吸判例),没有词管**多镜之间切点
13
- 怎么排**。本卡补这一块:硬切不做任何过渡,切点间隔本身就是乐谱——
14
- 三次白闪、间隔渐紧(22f→18f),读作快门连拍(A)。与 R 系不
15
- 冲突:R 管落定后的停,本卡管切点排布,切串结束必须接足量 hold 把
16
- 呼吸还回去。注意这是刻意的例外——节奏偏好判例是单向"放慢",硬切
17
- 串切得越狠,切完的 hold 要比平常更长。
18
-
19
- ## 选型
20
- | 式 | 做法 | 适用 |
21
- |----|------|------|
22
- | A paparazzi-flash 连闪定格 | 三次白闪各硬切同素材不同裁切(全景→卡片特写→「Take 1」特写),闪前对焦框锁定下一张裁切,快门余韵沉降,第三闪停在特写收束(demo:video-shotcraft 的「Shot of the Year」奖牌卡,背板是 video-shotcraft 标志 / 字标平铺) | 高光时刻仪式感:颁奖连拍、关键数字 / 关键句的加冕 |
23
-
24
- ## 参数表
25
- | 参数 | 典型值 | 调节手感 |
26
- |------|--------|----------|
27
- | 三闪切点 | 30/52/70(间隔 22f→18f 渐紧),闪前 30f 慢推"活素材"(背板上别家相机的小闪光)衬托闪后定格 | 闪前必须是活的,全片死素材三闪读不出"定格" |
28
- | 白闪层 | 每闪 opacity 0.95→0 走 4f ease-out 衰减;闪帧 ±2px seed 哈希全屏抖动 | 0.95 起步才有闪光灯的爆点;衰减 >6f 变柔光转场,失去快门感 |
29
- | 快门余韵 | 切入视图 scale 1.03→1 走 6f ease-out 回落 + −16px 沉降归零 | 余韵是"被拍到晃了一下";去掉后三闪读作幻灯片翻页 |
30
- | 三裁切 | 同一画面换 CSS zoom 焦点:1.0 全景 / 1.6 卡片 / 2.8 特写(「Take 1」) | 层层逼近有叙事方向;乱序(特写→全景→特写)读作剪错;裁切边缘别切到半行字 |
31
- | 对焦预备 | 下一闪前 8f 对焦框从 1.3 倍收到下一张裁切范围(屏幕坐标投影),闪前 3f 转香槟色锁定 | 这是"预备拍":观众提前知道下一张拍哪里,闪光才像被按下的快门 |
32
- | 末段收束 | 第三闪后特写 hold 70f,只有 1→1.015 极缓推近 + HUD「SAVED」淡入 | 三闪是重击,hold 要给足平常两倍以上;定格是照片,不加画内运动 |
33
-
34
- ## 已知坑
35
- - **demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
36
- 首次实战须以真实素材回验**
37
- - **声音强依赖**手法:切点必须钉在音轨拍点上,每闪一声快门咔嚓,
38
- 无声版只剩画面乱跳;钉帧走 sound-design.md §4.5 相对 shot 起点,不钉绝对帧
39
- - 三个裁切要是"同一画面的层层逼近"而非三个无关画面——观众要在连闪
40
- 中始终认得这是谁;跨产品/跨场景的素材别用这式
41
- - 切串全片 ≤1 次(P4 克制原则):这是全片最响的一记,第二次出现
42
- 第一次就白打了
43
- - 节奏偏好判例是单向"放慢",本卡是刻意例外——切完的 hold(70f)
44
- 是底线不是建议,宁多勿少
45
- - 真硬切 = frame 落区间渲染对应视图,无任何过渡帧;手滑加 2f 交叉
46
- 淡化就不是硬切了,节拍感立即糊掉
47
-
48
- ## 参考实现
49
- demos/rhythm/beat-cut-moves/
50
- (PaparazziFlash.tsx)
1
+ ---
2
+ name: beat-cut-moves
3
+ 一句话: 硬切当节拍乐器——连闪定格:三次白闪各硬切同一画面的一个裁切(全景→卡片→特写),快门余韵沉降后停在特写收束
4
+ 适用: 高光段落把"切"本身打成鼓点;颁奖连拍式的仪式感、关键信息的加冕
5
+ 时长: 全程 140f ≈4.7s(活素材 30f + 三闪 + hold 70f)
6
+ 能量: 高
7
+ 标签: transition
8
+ ---
9
+
10
+ ## 意图
11
+ 库内节奏词汇一直只管"一条运动内"的速率(speed-ramp-freeze 是同一条 take
12
+ 里定格再解冻)和"落定后停多久"(R 系呼吸判例),没有词管**多镜之间切点
13
+ 怎么排**。本卡补这一块:硬切不做任何过渡,切点间隔本身就是乐谱——
14
+ 三次白闪、间隔渐紧(22f→18f),读作快门连拍(A)。与 R 系不
15
+ 冲突:R 管落定后的停,本卡管切点排布,切串结束必须接足量 hold 把
16
+ 呼吸还回去。注意这是刻意的例外——节奏偏好判例是单向"放慢",硬切
17
+ 串切得越狠,切完的 hold 要比平常更长。
18
+
19
+ ## 选型
20
+ | 式 | 做法 | 适用 |
21
+ |----|------|------|
22
+ | A paparazzi-flash 连闪定格 | 三次白闪各硬切同素材不同裁切(全景→卡片特写→「Take 1」特写),闪前对焦框锁定下一张裁切,快门余韵沉降,第三闪停在特写收束(demo:video-shotcraft 的「Shot of the Year」奖牌卡,背板是 video-shotcraft 标志 / 字标平铺) | 高光时刻仪式感:颁奖连拍、关键数字 / 关键句的加冕 |
23
+
24
+ ## 参数表
25
+ | 参数 | 典型值 | 调节手感 |
26
+ |------|--------|----------|
27
+ | 三闪切点 | 30/52/70(间隔 22f→18f 渐紧),闪前 30f 慢推"活素材"(背板上别家相机的小闪光)衬托闪后定格 | 闪前必须是活的,全片死素材三闪读不出"定格" |
28
+ | 白闪层 | 每闪 opacity 0.95→0 走 4f ease-out 衰减;闪帧 ±2px seed 哈希全屏抖动 | 0.95 起步才有闪光灯的爆点;衰减 >6f 变柔光转场,失去快门感 |
29
+ | 快门余韵 | 切入视图 scale 1.03→1 走 6f ease-out 回落 + −16px 沉降归零 | 余韵是"被拍到晃了一下";去掉后三闪读作幻灯片翻页 |
30
+ | 三裁切 | 同一画面换 CSS zoom 焦点:1.0 全景 / 1.6 卡片 / 2.8 特写(「Take 1」) | 层层逼近有叙事方向;乱序(特写→全景→特写)读作剪错;裁切边缘别切到半行字 |
31
+ | 对焦预备 | 下一闪前 8f 对焦框从 1.3 倍收到下一张裁切范围(屏幕坐标投影),闪前 3f 转香槟色锁定 | 这是"预备拍":观众提前知道下一张拍哪里,闪光才像被按下的快门 |
32
+ | 末段收束 | 第三闪后特写 hold 70f,只有 1→1.015 极缓推近 + HUD「SAVED」淡入 | 三闪是重击,hold 要给足平常两倍以上;定格是照片,不加画内运动 |
33
+
34
+ ## 已知坑
35
+ - **demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿,
36
+ 首次实战须以真实素材回验**
37
+ - **声音强依赖**手法:切点必须钉在音轨拍点上,每闪一声快门咔嚓,
38
+ 无声版只剩画面乱跳;钉帧走 sound-design.md §4.5 相对 shot 起点,不钉绝对帧
39
+ - 三个裁切要是"同一画面的层层逼近"而非三个无关画面——观众要在连闪
40
+ 中始终认得这是谁;跨产品/跨场景的素材别用这式
41
+ - 切串全片 ≤1 次(P4 克制原则):这是全片最响的一记,第二次出现
42
+ 第一次就白打了
43
+ - 节奏偏好判例是单向"放慢",本卡是刻意例外——切完的 hold(70f)
44
+ 是底线不是建议,宁多勿少
45
+ - 真硬切 = frame 落区间渲染对应视图,无任何过渡帧;手滑加 2f 交叉
46
+ 淡化就不是硬切了,节拍感立即糊掉
47
+
48
+ ## 参考实现
49
+ demos/rhythm/beat-cut-moves/
50
+ (PaparazziFlash.tsx)