@cueframe/kernel 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +661 -0
- package/dist/_members/composition/ops/compositionOps.d.ts +1 -0
- package/dist/_members/composition/projection/behind-readiness.d.ts +127 -0
- package/dist/_members/composition/projection/index.d.ts +2 -0
- package/dist/_members/composition/projection/reframe-readiness.d.ts +156 -0
- package/dist/_members/composition/validators/composition.d.ts +42 -25
- package/dist/_members/composition/validators/render.d.ts +32 -0
- package/dist/_members/core/render/compositionRender.d.ts +17 -1
- package/dist/_members/core/render/types.d.ts +31 -0
- package/dist/authoring/build-tools.js +6 -6
- package/dist/authoring/context.js +4 -4
- package/dist/authoring/tools.js +5 -5
- package/dist/authoring.js +11 -9
- package/dist/{chunk-ZB3C3HM7.js → chunk-7FO3ZJ43.js} +3 -0
- package/dist/{chunk-ODL7GQJG.js → chunk-AP6ZIVAV.js} +2 -2
- package/dist/{chunk-IBYQG46O.js → chunk-AQBREB5O.js} +1 -1
- package/dist/{chunk-YIOY2XEO.js → chunk-DK2ODBNT.js} +15 -5
- package/dist/{chunk-JRQVPFLF.js → chunk-HY3RIEZW.js} +1 -1
- package/dist/{chunk-GEA7E2FL.js → chunk-JJ6XD7NG.js} +151 -1
- package/dist/{chunk-COYMZ76S.js → chunk-MBCXCJOE.js} +1 -1
- package/dist/{chunk-37NJ27UU.js → chunk-OCFDUCF4.js} +3 -0
- package/dist/{chunk-VOO5FQSS.js → chunk-PDYO3DOJ.js} +5 -5
- package/dist/{chunk-MXFAADCQ.js → chunk-PODIYN2K.js} +9 -2
- package/dist/{chunk-NFEGPWGS.js → chunk-TOJEXFXL.js} +1 -1
- package/dist/{chunk-LM4WDUQJ.js → chunk-UHGSZZDI.js} +1 -1
- package/dist/{chunk-XWKZB5U5.js → chunk-ZWMV6DD2.js} +24 -1
- package/dist/compose/renderer.js +3 -3
- package/dist/compose.js +6 -6
- package/dist/composition/graphics-plan.js +1 -1
- package/dist/composition/ops.js +3 -3
- package/dist/composition/primitive-catalog.js +1 -1
- package/dist/composition/projection.js +19 -3
- package/dist/composition/validators.js +6 -4
- package/dist/composition-ops.js +8 -6
- package/dist/composition.js +24 -6
- package/dist/{context-OKX3HHFS.js → context-YWUZDG5X.js} +4 -4
- package/dist/core/render.js +3 -3
- package/dist/core/select.js +2 -2
- package/dist/core.js +3 -3
- package/dist/errors.js +1 -1
- package/dist/mcp/adapter.js +1 -0
- package/dist/media-model/testing.js +1071 -718
- package/dist/nle-export/server.js +328 -130
- package/dist/nle-export.js +7 -6
- package/package.json +13 -14
- package/dist/_members/account-model/index.js +0 -4
- package/dist/_members/account-model/testing/conversationStoreContract.js +0 -168
- package/dist/_members/account-model/testing/index.js +0 -7
- package/dist/_members/account-model/testing/restorePointStoreContract.js +0 -69
- package/dist/_members/account-model/types/index.js +0 -1
- package/dist/_members/account-model/validators/contextFile.js +0 -18
- package/dist/_members/account-model/validators/conversation.js +0 -95
- package/dist/_members/account-model/validators/dashboardInsight.js +0 -16
- package/dist/_members/account-model/validators/index.js +0 -7
- package/dist/_members/account-model/validators/sessionToken.js +0 -49
- package/dist/_members/account-model/validators/uploadToken.js +0 -16
- package/dist/_members/account-model/validators/userSettings.js +0 -12
- package/dist/_members/account-model/validators/workingComposition.js +0 -20
- package/dist/_members/brand-derivation/constants.js +0 -20
- package/dist/_members/brand-derivation/contrastSafe.js +0 -114
- package/dist/_members/brand-derivation/index.js +0 -1
- package/dist/_members/cloud-import/chunk-XKO6ZSWI.js +0 -162
- package/dist/_members/cloud-import/chunk-XKO6ZSWI.js.map +0 -1
- package/dist/_members/cloud-import/index.js +0 -241
- package/dist/_members/cloud-import/index.js.map +0 -1
- package/dist/_members/cloud-import/multipartUpload.js +0 -7
- package/dist/_members/cloud-import/multipartUpload.js.map +0 -1
- package/dist/_members/composition/audio/audioMix.js +0 -61
- package/dist/_members/composition/audio/index.js +0 -5
- package/dist/_members/composition/audio/mixStaging.js +0 -195
- package/dist/_members/composition/audio/musicPack.generated.js +0 -136
- package/dist/_members/composition/audio/musicPack.js +0 -36
- package/dist/_members/composition/audio/pack.generated.js +0 -603
- package/dist/_members/composition/audio/pack.js +0 -48
- package/dist/_members/composition/audio/palette.js +0 -134
- package/dist/_members/composition/autozoom/index.js +0 -83
- package/dist/_members/composition/brand-kit.js +0 -45
- package/dist/_members/composition/brief/contract.js +0 -209
- package/dist/_members/composition/color-grade.js +0 -80
- package/dist/_members/composition/depth.js +0 -8
- package/dist/_members/composition/fixtures/index.js +0 -143
- package/dist/_members/composition/fixtures/vaayaErrored.d.ts +0 -25
- package/dist/_members/composition/fixtures/vaayaErrored.js +0 -203
- package/dist/_members/composition/fonts.js +0 -162
- package/dist/_members/composition/graphics-plan/compile.js +0 -221
- package/dist/_members/composition/graphics-plan/index.js +0 -10
- package/dist/_members/composition/graphics-plan/instantiateMotif.js +0 -44
- package/dist/_members/composition/graphics-plan/motion.js +0 -66
- package/dist/_members/composition/graphics-plan/schemas.js +0 -261
- package/dist/_members/composition/graphics-plan/solve.js +0 -145
- package/dist/_members/composition/index.js +0 -5
- package/dist/_members/composition/invariants/clipPlacement.js +0 -69
- package/dist/_members/composition/invariants/composition.js +0 -28
- package/dist/_members/composition/invariants/errors.js +0 -10
- package/dist/_members/composition/invariants/etag.js +0 -38
- package/dist/_members/composition/invariants/ids.js +0 -33
- package/dist/_members/composition/invariants/index.js +0 -9
- package/dist/_members/composition/invariants/keyframes.js +0 -45
- package/dist/_members/composition/invariants/markers.js +0 -29
- package/dist/_members/composition/invariants/time.js +0 -20
- package/dist/_members/composition/invariants/tracks.js +0 -304
- package/dist/_members/composition/ops/compositionOps.js +0 -1056
- package/dist/_members/composition/ops/headlessStore.js +0 -94
- package/dist/_members/composition/ops/index.js +0 -4
- package/dist/_members/composition/ops/selectors.js +0 -118
- package/dist/_members/composition/ops/timeline-word.js +0 -1
- package/dist/_members/composition/ops/transcript.js +0 -77
- package/dist/_members/composition/ops/types.js +0 -16
- package/dist/_members/composition/primitive-catalog/catalogQuery.js +0 -150
- package/dist/_members/composition/primitive-catalog/disabled.js +0 -32
- package/dist/_members/composition/primitive-catalog/generated/meta.js +0 -15161
- package/dist/_members/composition/primitive-catalog/index.js +0 -46
- package/dist/_members/composition/primitive-catalog/paramValidation.js +0 -231
- package/dist/_members/composition/primitive-catalog/projection.js +0 -164
- package/dist/_members/composition/primitive-catalog/types.js +0 -14
- package/dist/_members/composition/projection/behind-placement.js +0 -62
- package/dist/_members/composition/projection/brandKit.js +0 -482
- package/dist/_members/composition/projection/cardTokens.js +0 -209
- package/dist/_members/composition/projection/composition-floor.js +0 -582
- package/dist/_members/composition/projection/cropProjection.js +0 -257
- package/dist/_members/composition/projection/index.js +0 -7
- package/dist/_members/composition/projection/occlusion-budget.js +0 -104
- package/dist/_members/composition/projection/safe-zones.js +0 -99
- package/dist/_members/composition/reframe/aspectLoss.js +0 -115
- package/dist/_members/composition/reframe/coverage.js +0 -62
- package/dist/_members/composition/reframe/derive.js +0 -73
- package/dist/_members/composition/reframe/index.js +0 -109
- package/dist/_members/composition/reframe/kenBurns.js +0 -64
- package/dist/_members/composition/reframe/shotScale.js +0 -176
- package/dist/_members/composition/reframe/trajectory.js +0 -124
- package/dist/_members/composition/timeline/compound.js +0 -134
- package/dist/_members/composition/timeline/index.js +0 -9
- package/dist/_members/composition/timeline/intent.js +0 -228
- package/dist/_members/composition/timeline/keyframes.js +0 -121
- package/dist/_members/composition/timeline/link.js +0 -59
- package/dist/_members/composition/timeline/occupancy.js +0 -36
- package/dist/_members/composition/timeline/placement.js +0 -74
- package/dist/_members/composition/timeline/plan.js +0 -31
- package/dist/_members/composition/timeline/resolve.js +0 -170
- package/dist/_members/composition/timeline/trims.js +0 -278
- package/dist/_members/composition/types/index.js +0 -1
- package/dist/_members/composition/validators/brandKit.js +0 -295
- package/dist/_members/composition/validators/composePlan.js +0 -113
- package/dist/_members/composition/validators/composition.js +0 -703
- package/dist/_members/composition/validators/font.js +0 -34
- package/dist/_members/composition/validators/graphicKinds.js +0 -30
- package/dist/_members/composition/validators/index.js +0 -9
- package/dist/_members/composition/validators/project.js +0 -29
- package/dist/_members/composition/validators/registry.js +0 -41
- package/dist/_members/composition/validators/render.js +0 -139
- package/dist/_members/composition/validators/session.js +0 -37
- package/dist/_members/composition/validators/webhook.js +0 -72
- package/dist/_members/composition-ops/alphaLayers.js +0 -141
- package/dist/_members/composition-ops/index.js +0 -637
- package/dist/_members/composition-ops/materializeGrid.js +0 -99
- package/dist/_members/composition-ops/opRecorder.js +0 -196
- package/dist/_members/composition-ops/recordingStore.js +0 -14
- package/dist/_members/composition-ops/replaceRegion.js +0 -102
- package/dist/_members/composition-ops/testFixtures.js +0 -19
- package/dist/_members/core/index.js +0 -5
- package/dist/_members/core/render/bookends.js +0 -53
- package/dist/_members/core/render/captions.js +0 -127
- package/dist/_members/core/render/compositionRender.js +0 -1249
- package/dist/_members/core/render/deriveTrajectory.js +0 -889
- package/dist/_members/core/render/emphasis.js +0 -16
- package/dist/_members/core/render/eval/cropBox.js +0 -139
- package/dist/_members/core/render/eval/inclusion.js +0 -96
- package/dist/_members/core/render/eval/index.js +0 -146
- package/dist/_members/core/render/eval/metrics.js +0 -94
- package/dist/_members/core/render/exportSettings.js +0 -65
- package/dist/_members/core/render/index.js +0 -20
- package/dist/_members/core/render/mapFaceToPerson.js +0 -73
- package/dist/_members/core/render/types.js +0 -8
- package/dist/_members/core/render/vcam/cameraPath.js +0 -248
- package/dist/_members/core/render/vcam/constants.js +0 -115
- package/dist/_members/core/render/vcam/errorCodes.js +0 -39
- package/dist/_members/core/render/vcam/framing.js +0 -136
- package/dist/_members/core/render/vcam/requiredRegion.js +0 -137
- package/dist/_members/core/render/vcam/shots.js +0 -53
- package/dist/_members/core/render/vcam/subjectSet.js +0 -388
- package/dist/_members/core/select/errorCodes.js +0 -38
- package/dist/_members/core/select/index.js +0 -26
- package/dist/_members/core/select/model.js +0 -18
- package/dist/_members/core/select/select.js +0 -244
- package/dist/_members/core/select/stabilize.js +0 -242
- package/dist/_members/core/types.js +0 -7
- package/dist/_members/errors/index.js +0 -1
- package/dist/_members/errors/registry.js +0 -560
- package/dist/_members/foundation/codes/index.js +0 -31
- package/dist/_members/foundation/index.js +0 -2
- package/dist/_members/foundation/primitives/index.js +0 -5
- package/dist/_members/mcp/adapter.js +0 -771
- package/dist/_members/mcp/burnedNames.js +0 -73
- package/dist/_members/mcp/core.js +0 -390
- package/dist/_members/mcp/curation.js +0 -792
- package/dist/_members/mcp/executor.js +0 -142
- package/dist/_members/mcp/format.js +0 -9
- package/dist/_members/mcp/generated/catalogPreviews.js +0 -95
- package/dist/_members/mcp/generated/harness.js +0 -81
- package/dist/_members/mcp/generated/operations.js +0 -131
- package/dist/_members/mcp/index.js +0 -50
- package/dist/_members/mcp/internalLoopTools.js +0 -109
- package/dist/_members/mcp/prompts.js +0 -45
- package/dist/_members/mcp/resources.js +0 -166
- package/dist/_members/mcp/server.js +0 -340
- package/dist/_members/mcp/wait.js +0 -378
- package/dist/_members/mcp/x402Meta.js +0 -66
- package/dist/_members/media-model/api.js +0 -175
- package/dist/_members/media-model/index.js +0 -1
- package/dist/_members/media-model/media-kind.js +0 -116
- package/dist/_members/media-model/testing/index.js +0 -1
- package/dist/_members/media-model/testing/mediaStoreContract.js +0 -82
- package/dist/_members/media-model/transcriptSearch.js +0 -70
- package/dist/_members/media-model/transcriptSearchCases.json +0 -79
- package/dist/_members/nle-export/compact-timeline.js +0 -73
- package/dist/_members/nle-export/compact-timeline.js.map +0 -1
- package/dist/_members/nle-export/composition-to-input.js +0 -147
- package/dist/_members/nle-export/composition-to-input.js.map +0 -1
- package/dist/_members/nle-export/fcpxml.js +0 -159
- package/dist/_members/nle-export/fcpxml.js.map +0 -1
- package/dist/_members/nle-export/index.js +0 -12
- package/dist/_members/nle-export/index.js.map +0 -1
- package/dist/_members/nle-export/premiere.js +0 -161
- package/dist/_members/nle-export/premiere.js.map +0 -1
- package/dist/_members/nle-export/server/index.js +0 -2
- package/dist/_members/nle-export/server/index.js.map +0 -1
- package/dist/_members/nle-export/server/pack-zip.js +0 -38
- package/dist/_members/nle-export/server/pack-zip.js.map +0 -1
- package/dist/_members/nle-export/srt.js +0 -50
- package/dist/_members/nle-export/srt.js.map +0 -1
- package/dist/_members/nle-export/types.js +0 -9
- package/dist/_members/nle-export/types.js.map +0 -1
- package/dist/_members/nle-export/xml/index.js +0 -11
- package/dist/_members/nle-export/xml/index.js.map +0 -1
- package/dist/_members/nle-export/xml-utils.js +0 -48
- package/dist/_members/nle-export/xml-utils.js.map +0 -1
- package/dist/_members/perception/activeSpeaker.js +0 -103
- package/dist/_members/perception/audioQuality.js +0 -76
- package/dist/_members/perception/energyBeat.js +0 -99
- package/dist/_members/perception/identityMatch.js +0 -91
- package/dist/_members/perception/index.js +0 -48
- package/dist/_members/perception/visualQuality.js +0 -95
- package/dist/_members/plane/conformance.js +0 -90
- package/dist/_members/plane/contract.js +0 -49
- package/dist/_members/plane/index.js +0 -16
- package/dist/_members/primitives/backgrounds/index.js +0 -32
- package/dist/_members/primitives/backgrounds/index.js.map +0 -1
- package/dist/_members/primitives/captions/index.js +0 -398
- package/dist/_members/primitives/captions/index.js.map +0 -1
- package/dist/_members/primitives/chunk-2LVE4UIT.js +0 -139
- package/dist/_members/primitives/chunk-2LVE4UIT.js.map +0 -1
- package/dist/_members/primitives/chunk-3IQUH6KK.js +0 -20
- package/dist/_members/primitives/chunk-3IQUH6KK.js.map +0 -1
- package/dist/_members/primitives/chunk-3OMURV6Q.js +0 -112
- package/dist/_members/primitives/chunk-3OMURV6Q.js.map +0 -1
- package/dist/_members/primitives/chunk-4IS6TMEG.js +0 -21
- package/dist/_members/primitives/chunk-4IS6TMEG.js.map +0 -1
- package/dist/_members/primitives/chunk-5MWGAEGQ.js +0 -1644
- package/dist/_members/primitives/chunk-5MWGAEGQ.js.map +0 -1
- package/dist/_members/primitives/chunk-7RRPFPQK.js +0 -15
- package/dist/_members/primitives/chunk-7RRPFPQK.js.map +0 -1
- package/dist/_members/primitives/chunk-DH5TRZK2.js +0 -125
- package/dist/_members/primitives/chunk-DH5TRZK2.js.map +0 -1
- package/dist/_members/primitives/chunk-E3KNUSFG.js +0 -2337
- package/dist/_members/primitives/chunk-E3KNUSFG.js.map +0 -1
- package/dist/_members/primitives/chunk-G2B3G4HK.js +0 -47
- package/dist/_members/primitives/chunk-G2B3G4HK.js.map +0 -1
- package/dist/_members/primitives/chunk-HFPFGZXT.js +0 -1494
- package/dist/_members/primitives/chunk-HFPFGZXT.js.map +0 -1
- package/dist/_members/primitives/chunk-HIWVFZVH.js +0 -19
- package/dist/_members/primitives/chunk-HIWVFZVH.js.map +0 -1
- package/dist/_members/primitives/chunk-IDAL6G3Y.js +0 -134
- package/dist/_members/primitives/chunk-IDAL6G3Y.js.map +0 -1
- package/dist/_members/primitives/chunk-KNC6JP5F.js +0 -34
- package/dist/_members/primitives/chunk-KNC6JP5F.js.map +0 -1
- package/dist/_members/primitives/chunk-KYRDVZST.js +0 -459
- package/dist/_members/primitives/chunk-KYRDVZST.js.map +0 -1
- package/dist/_members/primitives/chunk-LWLHS2NS.js +0 -3410
- package/dist/_members/primitives/chunk-LWLHS2NS.js.map +0 -1
- package/dist/_members/primitives/chunk-QAQ3P7DR.js +0 -8855
- package/dist/_members/primitives/chunk-QAQ3P7DR.js.map +0 -1
- package/dist/_members/primitives/chunk-ROV2ODWC.js +0 -81
- package/dist/_members/primitives/chunk-ROV2ODWC.js.map +0 -1
- package/dist/_members/primitives/chunk-TCRC2FH3.js +0 -183
- package/dist/_members/primitives/chunk-TCRC2FH3.js.map +0 -1
- package/dist/_members/primitives/chunk-US4YEDAA.js +0 -96
- package/dist/_members/primitives/chunk-US4YEDAA.js.map +0 -1
- package/dist/_members/primitives/chunk-UVKRO5ER.js +0 -13
- package/dist/_members/primitives/chunk-UVKRO5ER.js.map +0 -1
- package/dist/_members/primitives/chunk-W4EIIF2I.js +0 -10
- package/dist/_members/primitives/chunk-W4EIIF2I.js.map +0 -1
- package/dist/_members/primitives/chunk-WPGKIPCO.js +0 -3563
- package/dist/_members/primitives/chunk-WPGKIPCO.js.map +0 -1
- package/dist/_members/primitives/chunk-WZFLEGMD.js +0 -1435
- package/dist/_members/primitives/chunk-WZFLEGMD.js.map +0 -1
- package/dist/_members/primitives/chunk-XHU3WBEI.js +0 -33
- package/dist/_members/primitives/chunk-XHU3WBEI.js.map +0 -1
- package/dist/_members/primitives/chunk-YN7WTZZ7.js +0 -46
- package/dist/_members/primitives/chunk-YN7WTZZ7.js.map +0 -1
- package/dist/_members/primitives/effects/index.js +0 -30
- package/dist/_members/primitives/effects/index.js.map +0 -1
- package/dist/_members/primitives/hero-text/index.js +0 -14
- package/dist/_members/primitives/hero-text/index.js.map +0 -1
- package/dist/_members/primitives/index.js +0 -64
- package/dist/_members/primitives/index.js.map +0 -1
- package/dist/_members/primitives/layouts/index.js +0 -24
- package/dist/_members/primitives/layouts/index.js.map +0 -1
- package/dist/_members/primitives/lib/easings.js +0 -26
- package/dist/_members/primitives/lib/easings.js.map +0 -1
- package/dist/_members/primitives/lib/index.js +0 -74
- package/dist/_members/primitives/lib/index.js.map +0 -1
- package/dist/_members/primitives/lib/palette.js +0 -72
- package/dist/_members/primitives/lib/palette.js.map +0 -1
- package/dist/_members/primitives/lib/preview.js +0 -8
- package/dist/_members/primitives/lib/preview.js.map +0 -1
- package/dist/_members/primitives/lib/schema.js +0 -12
- package/dist/_members/primitives/lib/schema.js.map +0 -1
- package/dist/_members/primitives/lib/seeded-random.js +0 -14
- package/dist/_members/primitives/lib/seeded-random.js.map +0 -1
- package/dist/_members/primitives/lib/text/contrast.js +0 -12
- package/dist/_members/primitives/lib/text/contrast.js.map +0 -1
- package/dist/_members/primitives/lib/text/fill.js +0 -8
- package/dist/_members/primitives/lib/text/fill.js.map +0 -1
- package/dist/_members/primitives/lib/text/fitText.js +0 -10
- package/dist/_members/primitives/lib/text/fitText.js.map +0 -1
- package/dist/_members/primitives/lib/text/marker.js +0 -8
- package/dist/_members/primitives/lib/text/marker.js.map +0 -1
- package/dist/_members/primitives/lib/text/motion.js +0 -16
- package/dist/_members/primitives/lib/text/motion.js.map +0 -1
- package/dist/_members/primitives/lib/text/recolor.js +0 -8
- package/dist/_members/primitives/lib/text/recolor.js.map +0 -1
- package/dist/_members/primitives/lib/text/spec.js +0 -1
- package/dist/_members/primitives/lib/text/spec.js.map +0 -1
- package/dist/_members/primitives/lib/text/stage.js +0 -8
- package/dist/_members/primitives/lib/text/stage.js.map +0 -1
- package/dist/_members/primitives/lib/text/typeface.js +0 -8
- package/dist/_members/primitives/lib/text/typeface.js.map +0 -1
- package/dist/_members/primitives/lib/tokens.js +0 -24
- package/dist/_members/primitives/lib/tokens.js.map +0 -1
- package/dist/_members/primitives/lib/types.js +0 -1
- package/dist/_members/primitives/lib/types.js.map +0 -1
- package/dist/_members/primitives/params-required.json +0 -153
- package/dist/_members/primitives/scenes/index.js +0 -25
- package/dist/_members/primitives/scenes/index.js.map +0 -1
- package/dist/_members/primitives/subject-foreground/index.js +0 -30
- package/dist/_members/primitives/subject-foreground/index.js.map +0 -1
- package/dist/_members/primitives/text/index.js +0 -57
- package/dist/_members/primitives/text/index.js.map +0 -1
- package/dist/_members/primitives/transitions/index.js +0 -67
- package/dist/_members/primitives/transitions/index.js.map +0 -1
- package/dist/_members/primitives/ui-blocks/index.js +0 -76
- package/dist/_members/primitives/ui-blocks/index.js.map +0 -1
- package/dist/_members/primitives/version-map.json +0 -105
- package/dist/_members/primitives/workspace.js +0 -60
- package/dist/_members/primitives/workspace.js.map +0 -1
|
@@ -1,3410 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
recolor
|
|
3
|
-
} from "./chunk-W4EIIF2I.js";
|
|
4
|
-
import {
|
|
5
|
-
TextStage
|
|
6
|
-
} from "./chunk-4IS6TMEG.js";
|
|
7
|
-
import {
|
|
8
|
-
resolveTypeface
|
|
9
|
-
} from "./chunk-3IQUH6KK.js";
|
|
10
|
-
import {
|
|
11
|
-
FLOOR_SHADOW,
|
|
12
|
-
FLOOR_TEXT,
|
|
13
|
-
resolveContrast
|
|
14
|
-
} from "./chunk-7RRPFPQK.js";
|
|
15
|
-
import {
|
|
16
|
-
resolveEasing,
|
|
17
|
-
staggerRise,
|
|
18
|
-
staggerUp
|
|
19
|
-
} from "./chunk-G2B3G4HK.js";
|
|
20
|
-
import {
|
|
21
|
-
ACCENT,
|
|
22
|
-
ACCENT_STRONG,
|
|
23
|
-
BG,
|
|
24
|
-
BLUE,
|
|
25
|
-
DANGER,
|
|
26
|
-
SUCCESS,
|
|
27
|
-
SURFACE,
|
|
28
|
-
TEAL,
|
|
29
|
-
TEXT_HI,
|
|
30
|
-
TEXT_MUTED,
|
|
31
|
-
VIOLET,
|
|
32
|
-
WARNING
|
|
33
|
-
} from "./chunk-3OMURV6Q.js";
|
|
34
|
-
import {
|
|
35
|
-
FitText,
|
|
36
|
-
resolveFitFontSize
|
|
37
|
-
} from "./chunk-ROV2ODWC.js";
|
|
38
|
-
|
|
39
|
-
// src/text/blur-reveal/index.tsx
|
|
40
|
-
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
|
|
41
|
-
import { jsx } from "react/jsx-runtime";
|
|
42
|
-
var BLUR_REVEAL_TEXT_WIDTH = 1500;
|
|
43
|
-
function BlurReveal({
|
|
44
|
-
text,
|
|
45
|
-
blur = 10,
|
|
46
|
-
fontSize = 48,
|
|
47
|
-
color = FLOOR_TEXT,
|
|
48
|
-
fontFamily = resolveTypeface("display"),
|
|
49
|
-
fontWeight = 600,
|
|
50
|
-
speed = 1
|
|
51
|
-
}) {
|
|
52
|
-
const frame = useCurrentFrame() * speed;
|
|
53
|
-
const { durationInFrames } = useVideoConfig();
|
|
54
|
-
const opacity = interpolate(frame, [0, durationInFrames * 0.6], [0, 1], {
|
|
55
|
-
extrapolateRight: "clamp"
|
|
56
|
-
});
|
|
57
|
-
const blurAmount = interpolate(
|
|
58
|
-
frame,
|
|
59
|
-
[0, durationInFrames * 0.6],
|
|
60
|
-
[blur, 0],
|
|
61
|
-
{ extrapolateRight: "clamp" }
|
|
62
|
-
);
|
|
63
|
-
return /* @__PURE__ */ jsx(TextStage, { children: /* @__PURE__ */ jsx(
|
|
64
|
-
FitText,
|
|
65
|
-
{
|
|
66
|
-
maxFontSize: fontSize,
|
|
67
|
-
maxWidth: BLUR_REVEAL_TEXT_WIDTH,
|
|
68
|
-
maxLines: 2,
|
|
69
|
-
fontFamily,
|
|
70
|
-
fontWeight,
|
|
71
|
-
letterSpacing: "-0.05em",
|
|
72
|
-
style: {
|
|
73
|
-
opacity,
|
|
74
|
-
filter: `blur(${blurAmount}px)`,
|
|
75
|
-
color,
|
|
76
|
-
textShadow: resolveContrast().textShadow,
|
|
77
|
-
textAlign: "center"
|
|
78
|
-
},
|
|
79
|
-
children: text
|
|
80
|
-
}
|
|
81
|
-
) });
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// src/text/cinematic-title/index.tsx
|
|
85
|
-
import { useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2, spring, interpolate as interpolate2, AbsoluteFill } from "remotion";
|
|
86
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
87
|
-
var TITLE_TEXT_WIDTH = 1600;
|
|
88
|
-
var CinematicTitle = ({
|
|
89
|
-
text,
|
|
90
|
-
subtitle,
|
|
91
|
-
variant = "default",
|
|
92
|
-
position = "center",
|
|
93
|
-
tokens = {}
|
|
94
|
-
}) => {
|
|
95
|
-
const frame = useCurrentFrame2();
|
|
96
|
-
const { fps, height, durationInFrames } = useVideoConfig2();
|
|
97
|
-
const {
|
|
98
|
-
fontFamily = resolveTypeface("display"),
|
|
99
|
-
fontSize: baseFontSize = 72,
|
|
100
|
-
subtextFontSize = 18,
|
|
101
|
-
textColor = FLOOR_TEXT,
|
|
102
|
-
accentColor = WARNING,
|
|
103
|
-
letterSpacing: baseLetterSpacing = 6
|
|
104
|
-
} = tokens;
|
|
105
|
-
const barHeight = height * 0.13;
|
|
106
|
-
const barSlide = interpolate2(frame, [0, 20], [barHeight, 0], {
|
|
107
|
-
extrapolateLeft: "clamp",
|
|
108
|
-
extrapolateRight: "clamp"
|
|
109
|
-
});
|
|
110
|
-
const exitStart = durationInFrames - 20;
|
|
111
|
-
const exitOpacity = interpolate2(
|
|
112
|
-
frame,
|
|
113
|
-
[exitStart, durationInFrames],
|
|
114
|
-
[1, 0],
|
|
115
|
-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
116
|
-
);
|
|
117
|
-
let textOpacity;
|
|
118
|
-
let textScale;
|
|
119
|
-
let textBlur;
|
|
120
|
-
let fontSize;
|
|
121
|
-
let fontWeight;
|
|
122
|
-
let currentLetterSpacing;
|
|
123
|
-
if (variant === "zoom") {
|
|
124
|
-
const enterSpring = spring({ fps, frame, config: { damping: 12, stiffness: 80 } });
|
|
125
|
-
textOpacity = interpolate2(frame, [10, 30], [0, 1], {
|
|
126
|
-
extrapolateLeft: "clamp",
|
|
127
|
-
extrapolateRight: "clamp"
|
|
128
|
-
});
|
|
129
|
-
textScale = interpolate2(enterSpring, [0, 1], [2.5, 1]);
|
|
130
|
-
textBlur = interpolate2(frame, [10, 35], [12, 0], {
|
|
131
|
-
extrapolateLeft: "clamp",
|
|
132
|
-
extrapolateRight: "clamp"
|
|
133
|
-
});
|
|
134
|
-
fontSize = baseFontSize;
|
|
135
|
-
fontWeight = 700;
|
|
136
|
-
currentLetterSpacing = baseLetterSpacing;
|
|
137
|
-
} else if (variant === "bold") {
|
|
138
|
-
const enterSpring = spring({ fps, frame: Math.max(0, frame - 5), config: { damping: 14, stiffness: 100 } });
|
|
139
|
-
textOpacity = interpolate2(enterSpring, [0, 1], [0, 1]);
|
|
140
|
-
textScale = interpolate2(enterSpring, [0, 1], [1.4, 1]);
|
|
141
|
-
textBlur = 0;
|
|
142
|
-
fontSize = Math.round(baseFontSize * 1.3);
|
|
143
|
-
fontWeight = 900;
|
|
144
|
-
currentLetterSpacing = baseLetterSpacing;
|
|
145
|
-
} else {
|
|
146
|
-
textOpacity = interpolate2(frame, [18, 40], [0, 1], {
|
|
147
|
-
extrapolateLeft: "clamp",
|
|
148
|
-
extrapolateRight: "clamp"
|
|
149
|
-
});
|
|
150
|
-
currentLetterSpacing = interpolate2(frame, [18, 45], [20, baseLetterSpacing], {
|
|
151
|
-
extrapolateLeft: "clamp",
|
|
152
|
-
extrapolateRight: "clamp"
|
|
153
|
-
});
|
|
154
|
-
textScale = 1;
|
|
155
|
-
textBlur = 0;
|
|
156
|
-
fontSize = baseFontSize;
|
|
157
|
-
fontWeight = 700;
|
|
158
|
-
}
|
|
159
|
-
const subtextOpacity = interpolate2(frame, [35, 55], [0, 1], {
|
|
160
|
-
extrapolateLeft: "clamp",
|
|
161
|
-
extrapolateRight: "clamp"
|
|
162
|
-
});
|
|
163
|
-
const justifyContent = position === "top" ? "flex-start" : position === "bottom" ? "flex-end" : "center";
|
|
164
|
-
const padding = position === "center" ? 0 : barHeight + 48;
|
|
165
|
-
const textShadow = resolveContrast().textShadow;
|
|
166
|
-
const barStyle = {
|
|
167
|
-
position: "absolute",
|
|
168
|
-
left: 0,
|
|
169
|
-
right: 0,
|
|
170
|
-
height: barHeight,
|
|
171
|
-
backgroundColor: BG,
|
|
172
|
-
zIndex: 2
|
|
173
|
-
};
|
|
174
|
-
return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { backgroundColor: "transparent", opacity: exitOpacity }, children: [
|
|
175
|
-
/* @__PURE__ */ jsx2("div", { style: { ...barStyle, top: 0, transform: `translateY(-${barSlide}px)` } }),
|
|
176
|
-
/* @__PURE__ */ jsx2("div", { style: { ...barStyle, bottom: 0, transform: `translateY(${barSlide}px)` } }),
|
|
177
|
-
/* @__PURE__ */ jsx2(
|
|
178
|
-
AbsoluteFill,
|
|
179
|
-
{
|
|
180
|
-
style: {
|
|
181
|
-
justifyContent,
|
|
182
|
-
alignItems: "center",
|
|
183
|
-
zIndex: 1,
|
|
184
|
-
paddingTop: padding,
|
|
185
|
-
paddingBottom: padding
|
|
186
|
-
},
|
|
187
|
-
children: /* @__PURE__ */ jsxs(
|
|
188
|
-
"div",
|
|
189
|
-
{
|
|
190
|
-
style: {
|
|
191
|
-
display: "flex",
|
|
192
|
-
flexDirection: "column",
|
|
193
|
-
alignItems: "center",
|
|
194
|
-
textAlign: "center",
|
|
195
|
-
opacity: textOpacity,
|
|
196
|
-
transform: `scale(${textScale})`,
|
|
197
|
-
filter: textBlur > 0 ? `blur(${textBlur}px)` : "none"
|
|
198
|
-
},
|
|
199
|
-
children: [
|
|
200
|
-
/* @__PURE__ */ jsx2(
|
|
201
|
-
FitText,
|
|
202
|
-
{
|
|
203
|
-
maxFontSize: fontSize,
|
|
204
|
-
maxWidth: TITLE_TEXT_WIDTH,
|
|
205
|
-
fontFamily,
|
|
206
|
-
fontWeight,
|
|
207
|
-
letterSpacing: `${baseLetterSpacing}px`,
|
|
208
|
-
textTransform: "uppercase",
|
|
209
|
-
style: {
|
|
210
|
-
color: textColor,
|
|
211
|
-
textShadow,
|
|
212
|
-
textAlign: "center",
|
|
213
|
-
letterSpacing: `${currentLetterSpacing}px`
|
|
214
|
-
},
|
|
215
|
-
children: text
|
|
216
|
-
}
|
|
217
|
-
),
|
|
218
|
-
subtitle ? /* @__PURE__ */ jsx2(
|
|
219
|
-
FitText,
|
|
220
|
-
{
|
|
221
|
-
maxFontSize: subtextFontSize,
|
|
222
|
-
maxWidth: TITLE_TEXT_WIDTH,
|
|
223
|
-
maxLines: 2,
|
|
224
|
-
fontFamily,
|
|
225
|
-
fontWeight: 300,
|
|
226
|
-
letterSpacing: "3px",
|
|
227
|
-
textTransform: "uppercase",
|
|
228
|
-
style: {
|
|
229
|
-
marginTop: 16,
|
|
230
|
-
color: accentColor,
|
|
231
|
-
textShadow,
|
|
232
|
-
opacity: subtextOpacity,
|
|
233
|
-
textAlign: "center"
|
|
234
|
-
},
|
|
235
|
-
children: subtitle
|
|
236
|
-
}
|
|
237
|
-
) : null
|
|
238
|
-
]
|
|
239
|
-
}
|
|
240
|
-
)
|
|
241
|
-
}
|
|
242
|
-
)
|
|
243
|
-
] });
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
// src/text/inline-highlight/index.tsx
|
|
247
|
-
import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
|
|
248
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
249
|
-
function InlineHighlight({
|
|
250
|
-
before,
|
|
251
|
-
highlight,
|
|
252
|
-
after = "",
|
|
253
|
-
baseColor = FLOOR_TEXT,
|
|
254
|
-
highlightColor = ACCENT_STRONG,
|
|
255
|
-
fontFamily = resolveTypeface("display"),
|
|
256
|
-
fontSize = 48,
|
|
257
|
-
fontWeight = 600,
|
|
258
|
-
speed = 1,
|
|
259
|
-
className
|
|
260
|
-
}) {
|
|
261
|
-
const frame = useCurrentFrame3() * speed;
|
|
262
|
-
const { durationInFrames } = useVideoConfig3();
|
|
263
|
-
const progress = interpolate3(
|
|
264
|
-
frame,
|
|
265
|
-
[durationInFrames * 0.2, durationInFrames * 0.7],
|
|
266
|
-
[0, 1],
|
|
267
|
-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
268
|
-
);
|
|
269
|
-
const color = recolor(progress, baseColor, highlightColor);
|
|
270
|
-
return /* @__PURE__ */ jsx3(TextStage, { children: /* @__PURE__ */ jsxs2(
|
|
271
|
-
"span",
|
|
272
|
-
{
|
|
273
|
-
className,
|
|
274
|
-
style: {
|
|
275
|
-
fontSize,
|
|
276
|
-
fontWeight,
|
|
277
|
-
color: baseColor,
|
|
278
|
-
letterSpacing: "-0.03em",
|
|
279
|
-
fontFamily,
|
|
280
|
-
textShadow: resolveContrast().textShadow
|
|
281
|
-
},
|
|
282
|
-
children: [
|
|
283
|
-
before,
|
|
284
|
-
/* @__PURE__ */ jsx3("span", { style: { color }, children: highlight }),
|
|
285
|
-
after
|
|
286
|
-
]
|
|
287
|
-
}
|
|
288
|
-
) });
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
// src/text/karaoke/index.tsx
|
|
292
|
-
import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4, spring as spring2, interpolate as interpolate4, AbsoluteFill as AbsoluteFill2 } from "remotion";
|
|
293
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
294
|
-
var Karaoke = ({
|
|
295
|
-
words,
|
|
296
|
-
position = "center",
|
|
297
|
-
tokens = {}
|
|
298
|
-
}) => {
|
|
299
|
-
const frame = useCurrentFrame4();
|
|
300
|
-
const { fps, durationInFrames } = useVideoConfig4();
|
|
301
|
-
const {
|
|
302
|
-
fontFamily = resolveTypeface("caption"),
|
|
303
|
-
fontSize = 56,
|
|
304
|
-
textColor = FLOOR_TEXT,
|
|
305
|
-
activeColor = ACCENT,
|
|
306
|
-
activeScale = 1.15
|
|
307
|
-
} = tokens;
|
|
308
|
-
const currentTimeMs = frame / fps * 1e3;
|
|
309
|
-
const fadeOut = interpolate4(
|
|
310
|
-
frame,
|
|
311
|
-
[durationInFrames - 15, durationInFrames],
|
|
312
|
-
[1, 0],
|
|
313
|
-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
314
|
-
);
|
|
315
|
-
const justifyContent = position === "center" ? "center" : position === "right" ? "flex-end" : "flex-start";
|
|
316
|
-
const alignItems = position === "bottom" ? "flex-end" : position === "center" ? "center" : position === "right" ? "flex-end" : "flex-start";
|
|
317
|
-
return /* @__PURE__ */ jsx4(
|
|
318
|
-
AbsoluteFill2,
|
|
319
|
-
{
|
|
320
|
-
style: {
|
|
321
|
-
justifyContent: position === "bottom" ? "flex-end" : "center",
|
|
322
|
-
alignItems,
|
|
323
|
-
padding: 60,
|
|
324
|
-
paddingBottom: position === "bottom" ? 120 : 60
|
|
325
|
-
},
|
|
326
|
-
children: /* @__PURE__ */ jsx4("div", { style: { opacity: fadeOut }, children: /* @__PURE__ */ jsx4(
|
|
327
|
-
"div",
|
|
328
|
-
{
|
|
329
|
-
style: {
|
|
330
|
-
display: "flex",
|
|
331
|
-
flexWrap: "wrap",
|
|
332
|
-
justifyContent,
|
|
333
|
-
gap: "4px 12px"
|
|
334
|
-
},
|
|
335
|
-
children: words.map((word, i) => {
|
|
336
|
-
const isActive = currentTimeMs >= word.startMs && currentTimeMs < word.endMs;
|
|
337
|
-
const isPast = currentTimeMs >= word.endMs;
|
|
338
|
-
const isFuture = currentTimeMs < word.startMs;
|
|
339
|
-
const activeFrame = isActive ? Math.round((currentTimeMs - word.startMs) / 1e3 * fps) : 0;
|
|
340
|
-
const scaleSpr = isActive ? spring2({
|
|
341
|
-
fps,
|
|
342
|
-
frame: activeFrame,
|
|
343
|
-
config: { damping: 14, stiffness: 200 }
|
|
344
|
-
}) : isPast ? 1 : 0;
|
|
345
|
-
const scale = isActive ? interpolate4(scaleSpr, [0, 1], [1, activeScale]) : 1;
|
|
346
|
-
const opacity = isFuture ? 0.4 : 1;
|
|
347
|
-
const color = isActive ? activeColor : textColor;
|
|
348
|
-
return /* @__PURE__ */ jsx4(
|
|
349
|
-
"span",
|
|
350
|
-
{
|
|
351
|
-
style: {
|
|
352
|
-
fontSize,
|
|
353
|
-
fontWeight: isActive ? 800 : 600,
|
|
354
|
-
fontFamily,
|
|
355
|
-
color,
|
|
356
|
-
opacity,
|
|
357
|
-
transform: `scale(${scale})`,
|
|
358
|
-
display: "inline-block",
|
|
359
|
-
transition: "color 0.1s",
|
|
360
|
-
textShadow: FLOOR_SHADOW
|
|
361
|
-
},
|
|
362
|
-
children: word.text
|
|
363
|
-
},
|
|
364
|
-
i
|
|
365
|
-
);
|
|
366
|
-
})
|
|
367
|
-
}
|
|
368
|
-
) })
|
|
369
|
-
}
|
|
370
|
-
);
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
// src/text/kinetic-type/index.tsx
|
|
374
|
-
import React from "react";
|
|
375
|
-
import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5, spring as spring3, interpolate as interpolate5, AbsoluteFill as AbsoluteFill3 } from "remotion";
|
|
376
|
-
import { fitTextOnNLines } from "@remotion/layout-utils";
|
|
377
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
378
|
-
var PHRASE_TEXT_WIDTH = 1600;
|
|
379
|
-
var KineticType = ({
|
|
380
|
-
text,
|
|
381
|
-
animation = "fly-in",
|
|
382
|
-
position = "center",
|
|
383
|
-
accentColor = ACCENT,
|
|
384
|
-
tokens = {}
|
|
385
|
-
}) => {
|
|
386
|
-
const frame = useCurrentFrame5();
|
|
387
|
-
const { fps, durationInFrames } = useVideoConfig5();
|
|
388
|
-
const {
|
|
389
|
-
fontFamily = resolveTypeface("display"),
|
|
390
|
-
fontSize = 110,
|
|
391
|
-
textColor = FLOOR_TEXT
|
|
392
|
-
} = tokens;
|
|
393
|
-
const words = text.split(" ").filter(Boolean);
|
|
394
|
-
const staggerFrames = 4;
|
|
395
|
-
const fittedFontSize = React.useMemo(() => {
|
|
396
|
-
if (text.trim().length === 0) return fontSize;
|
|
397
|
-
try {
|
|
398
|
-
const { fontSize: fit } = fitTextOnNLines({
|
|
399
|
-
text,
|
|
400
|
-
maxLines: 2,
|
|
401
|
-
maxBoxWidth: PHRASE_TEXT_WIDTH,
|
|
402
|
-
fontFamily,
|
|
403
|
-
fontWeight: 700,
|
|
404
|
-
maxFontSize: fontSize,
|
|
405
|
-
validateFontIsLoaded: false
|
|
406
|
-
});
|
|
407
|
-
return resolveFitFontSize({
|
|
408
|
-
singleLineFitFontSize: fit,
|
|
409
|
-
minFontSize: Math.round(fontSize * 0.55),
|
|
410
|
-
maxFontSize: fontSize
|
|
411
|
-
}).fontSize;
|
|
412
|
-
} catch {
|
|
413
|
-
return fontSize;
|
|
414
|
-
}
|
|
415
|
-
}, [text, fontFamily, fontSize]);
|
|
416
|
-
const fadeOut = interpolate5(
|
|
417
|
-
frame,
|
|
418
|
-
[durationInFrames - 15, durationInFrames],
|
|
419
|
-
[1, 0],
|
|
420
|
-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
421
|
-
);
|
|
422
|
-
const justifyContent = position === "center" ? "center" : position === "right" ? "flex-end" : "flex-start";
|
|
423
|
-
const getWordStyle = (index) => {
|
|
424
|
-
const delay = index * staggerFrames;
|
|
425
|
-
const spr = spring3({
|
|
426
|
-
fps,
|
|
427
|
-
frame: Math.max(0, frame - delay),
|
|
428
|
-
config: animation === "scale-bounce" ? { damping: 9, stiffness: 130, mass: 0.7 } : { damping: 12, stiffness: 110, mass: 0.8 }
|
|
429
|
-
});
|
|
430
|
-
const opacity = interpolate5(spr, [0, 0.3], [0, 1], {
|
|
431
|
-
extrapolateRight: "clamp"
|
|
432
|
-
});
|
|
433
|
-
switch (animation) {
|
|
434
|
-
case "fly-in": {
|
|
435
|
-
const translateY = interpolate5(spr, [0, 1], [130, 0]);
|
|
436
|
-
const blur = interpolate5(spr, [0, 0.7], [7, 0], { extrapolateRight: "clamp" });
|
|
437
|
-
const scale = interpolate5(spr, [0, 1], [0.92, 1]);
|
|
438
|
-
return { opacity, filter: `blur(${blur}px)`, transform: `translateY(${translateY}px) scale(${scale})` };
|
|
439
|
-
}
|
|
440
|
-
case "rotate": {
|
|
441
|
-
const rotate = interpolate5(spr, [0, 1], [-24, 0]);
|
|
442
|
-
const translateY = interpolate5(spr, [0, 1], [70, 0]);
|
|
443
|
-
return {
|
|
444
|
-
opacity,
|
|
445
|
-
transform: `translateY(${translateY}px) rotate(${rotate}deg)`,
|
|
446
|
-
transformOrigin: "bottom left"
|
|
447
|
-
};
|
|
448
|
-
}
|
|
449
|
-
case "scale-bounce": {
|
|
450
|
-
const scale = interpolate5(spr, [0, 1], [0.2, 1]);
|
|
451
|
-
return { opacity, transform: `scale(${scale})` };
|
|
452
|
-
}
|
|
453
|
-
case "cascade": {
|
|
454
|
-
const translateY = interpolate5(spr, [0, 1], [-150, 0]);
|
|
455
|
-
const blur = interpolate5(spr, [0, 0.7], [7, 0], { extrapolateRight: "clamp" });
|
|
456
|
-
return { opacity, filter: `blur(${blur}px)`, transform: `translateY(${translateY}px)` };
|
|
457
|
-
}
|
|
458
|
-
default:
|
|
459
|
-
return { opacity };
|
|
460
|
-
}
|
|
461
|
-
};
|
|
462
|
-
return /* @__PURE__ */ jsx5(
|
|
463
|
-
AbsoluteFill3,
|
|
464
|
-
{
|
|
465
|
-
style: {
|
|
466
|
-
justifyContent: "center",
|
|
467
|
-
alignItems: position === "center" ? "center" : position === "right" ? "flex-end" : "flex-start",
|
|
468
|
-
padding: 60
|
|
469
|
-
},
|
|
470
|
-
children: /* @__PURE__ */ jsx5(
|
|
471
|
-
"div",
|
|
472
|
-
{
|
|
473
|
-
style: {
|
|
474
|
-
opacity: fadeOut,
|
|
475
|
-
// Idle life: the settled phrase breathes imperceptibly.
|
|
476
|
-
transform: `scale(${1 + Math.sin(2 * Math.PI * 0.06 * frame / fps) * 8e-3})`
|
|
477
|
-
},
|
|
478
|
-
children: /* @__PURE__ */ jsx5(
|
|
479
|
-
"div",
|
|
480
|
-
{
|
|
481
|
-
style: {
|
|
482
|
-
display: "flex",
|
|
483
|
-
flexWrap: "wrap",
|
|
484
|
-
justifyContent,
|
|
485
|
-
gap: "0 14px"
|
|
486
|
-
},
|
|
487
|
-
children: words.map((word, i) => /* @__PURE__ */ jsx5(
|
|
488
|
-
"span",
|
|
489
|
-
{
|
|
490
|
-
style: {
|
|
491
|
-
fontSize: fittedFontSize,
|
|
492
|
-
fontWeight: 800,
|
|
493
|
-
fontFamily,
|
|
494
|
-
color: accentColor && i === words.length - 1 ? accentColor : textColor,
|
|
495
|
-
display: "inline-block",
|
|
496
|
-
textShadow: FLOOR_SHADOW,
|
|
497
|
-
...getWordStyle(i)
|
|
498
|
-
},
|
|
499
|
-
children: word
|
|
500
|
-
},
|
|
501
|
-
i
|
|
502
|
-
))
|
|
503
|
-
}
|
|
504
|
-
)
|
|
505
|
-
}
|
|
506
|
-
)
|
|
507
|
-
}
|
|
508
|
-
);
|
|
509
|
-
};
|
|
510
|
-
|
|
511
|
-
// src/text/lower-third/index.tsx
|
|
512
|
-
import { useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6, spring as spring4, interpolate as interpolate6, AbsoluteFill as AbsoluteFill4 } from "remotion";
|
|
513
|
-
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
514
|
-
var BAR_TEXT_WIDTH = 820;
|
|
515
|
-
var LowerThird = ({
|
|
516
|
-
text,
|
|
517
|
-
subtitle,
|
|
518
|
-
variant = "classic",
|
|
519
|
-
tokens = {}
|
|
520
|
-
}) => {
|
|
521
|
-
const frame = useCurrentFrame6();
|
|
522
|
-
const { fps, durationInFrames } = useVideoConfig6();
|
|
523
|
-
const {
|
|
524
|
-
fontFamily = resolveTypeface("caption"),
|
|
525
|
-
fontSize = 28,
|
|
526
|
-
subtitleFontSize = 20,
|
|
527
|
-
textColor = FLOOR_TEXT,
|
|
528
|
-
accentColor = ACCENT_STRONG,
|
|
529
|
-
backgroundColor = "rgba(0, 0, 0, 0.7)"
|
|
530
|
-
} = tokens;
|
|
531
|
-
const enterSpring = spring4({
|
|
532
|
-
fps,
|
|
533
|
-
frame,
|
|
534
|
-
config: { damping: 15, stiffness: 100 }
|
|
535
|
-
});
|
|
536
|
-
const exitFrame = Math.max(0, frame - (durationInFrames - 15));
|
|
537
|
-
const exitSpring = durationInFrames - frame <= 15 ? spring4({
|
|
538
|
-
fps,
|
|
539
|
-
frame: exitFrame,
|
|
540
|
-
config: { damping: 15, stiffness: 120 }
|
|
541
|
-
}) : 0;
|
|
542
|
-
const slideIn = interpolate6(enterSpring, [0, 1], [-100, 0]);
|
|
543
|
-
const slideOut = interpolate6(exitSpring, [0, 1], [0, 100]);
|
|
544
|
-
const translateX = slideIn + slideOut;
|
|
545
|
-
const opacity = interpolate6(enterSpring, [0, 0.3], [0, 1], {
|
|
546
|
-
extrapolateRight: "clamp"
|
|
547
|
-
}) * (1 - exitSpring);
|
|
548
|
-
const renderContent = () => {
|
|
549
|
-
switch (variant) {
|
|
550
|
-
case "modern":
|
|
551
|
-
return /* @__PURE__ */ jsxs3(
|
|
552
|
-
"div",
|
|
553
|
-
{
|
|
554
|
-
style: {
|
|
555
|
-
display: "flex",
|
|
556
|
-
flexDirection: "column",
|
|
557
|
-
gap: 2,
|
|
558
|
-
background: accentColor,
|
|
559
|
-
padding: "10px 24px",
|
|
560
|
-
borderRadius: 8
|
|
561
|
-
},
|
|
562
|
-
children: [
|
|
563
|
-
/* @__PURE__ */ jsx6(
|
|
564
|
-
FitText,
|
|
565
|
-
{
|
|
566
|
-
maxFontSize: fontSize,
|
|
567
|
-
maxWidth: BAR_TEXT_WIDTH,
|
|
568
|
-
fontFamily,
|
|
569
|
-
fontWeight: 700,
|
|
570
|
-
style: { color: textColor },
|
|
571
|
-
children: text
|
|
572
|
-
}
|
|
573
|
-
),
|
|
574
|
-
subtitle && /* @__PURE__ */ jsx6(
|
|
575
|
-
FitText,
|
|
576
|
-
{
|
|
577
|
-
maxFontSize: subtitleFontSize,
|
|
578
|
-
maxWidth: BAR_TEXT_WIDTH,
|
|
579
|
-
maxLines: 2,
|
|
580
|
-
fontFamily,
|
|
581
|
-
fontWeight: 400,
|
|
582
|
-
style: { color: `${textColor}CC` },
|
|
583
|
-
children: subtitle
|
|
584
|
-
}
|
|
585
|
-
)
|
|
586
|
-
]
|
|
587
|
-
}
|
|
588
|
-
);
|
|
589
|
-
case "cinematic":
|
|
590
|
-
return /* @__PURE__ */ jsxs3(
|
|
591
|
-
"div",
|
|
592
|
-
{
|
|
593
|
-
style: {
|
|
594
|
-
display: "flex",
|
|
595
|
-
flexDirection: "column",
|
|
596
|
-
gap: 4,
|
|
597
|
-
background: backgroundColor,
|
|
598
|
-
padding: "12px 24px",
|
|
599
|
-
borderLeft: `3px solid ${accentColor}`
|
|
600
|
-
},
|
|
601
|
-
children: [
|
|
602
|
-
/* @__PURE__ */ jsx6(
|
|
603
|
-
FitText,
|
|
604
|
-
{
|
|
605
|
-
maxFontSize: fontSize,
|
|
606
|
-
maxWidth: BAR_TEXT_WIDTH,
|
|
607
|
-
fontFamily,
|
|
608
|
-
fontWeight: 600,
|
|
609
|
-
letterSpacing: "1px",
|
|
610
|
-
textTransform: "uppercase",
|
|
611
|
-
style: { color: textColor },
|
|
612
|
-
children: text
|
|
613
|
-
}
|
|
614
|
-
),
|
|
615
|
-
subtitle && /* @__PURE__ */ jsx6(
|
|
616
|
-
FitText,
|
|
617
|
-
{
|
|
618
|
-
maxFontSize: subtitleFontSize,
|
|
619
|
-
maxWidth: BAR_TEXT_WIDTH,
|
|
620
|
-
maxLines: 2,
|
|
621
|
-
fontFamily,
|
|
622
|
-
fontWeight: 300,
|
|
623
|
-
letterSpacing: "0.5px",
|
|
624
|
-
style: { color: `${textColor}99` },
|
|
625
|
-
children: subtitle
|
|
626
|
-
}
|
|
627
|
-
)
|
|
628
|
-
]
|
|
629
|
-
}
|
|
630
|
-
);
|
|
631
|
-
case "classic":
|
|
632
|
-
default:
|
|
633
|
-
return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
|
|
634
|
-
/* @__PURE__ */ jsx6(
|
|
635
|
-
FitText,
|
|
636
|
-
{
|
|
637
|
-
maxFontSize: fontSize,
|
|
638
|
-
maxWidth: BAR_TEXT_WIDTH,
|
|
639
|
-
fontFamily,
|
|
640
|
-
fontWeight: 700,
|
|
641
|
-
style: { background: accentColor, padding: "8px 20px", borderRadius: 4, color: textColor },
|
|
642
|
-
children: text
|
|
643
|
-
}
|
|
644
|
-
),
|
|
645
|
-
subtitle && /* @__PURE__ */ jsx6(
|
|
646
|
-
FitText,
|
|
647
|
-
{
|
|
648
|
-
maxFontSize: subtitleFontSize,
|
|
649
|
-
maxWidth: BAR_TEXT_WIDTH,
|
|
650
|
-
maxLines: 2,
|
|
651
|
-
fontFamily,
|
|
652
|
-
fontWeight: 400,
|
|
653
|
-
style: { background: backgroundColor, padding: "6px 20px", borderRadius: 4, color: `${textColor}E6` },
|
|
654
|
-
children: subtitle
|
|
655
|
-
}
|
|
656
|
-
)
|
|
657
|
-
] });
|
|
658
|
-
}
|
|
659
|
-
};
|
|
660
|
-
return /* @__PURE__ */ jsx6(AbsoluteFill4, { children: /* @__PURE__ */ jsx6(
|
|
661
|
-
"div",
|
|
662
|
-
{
|
|
663
|
-
style: {
|
|
664
|
-
position: "absolute",
|
|
665
|
-
bottom: 80,
|
|
666
|
-
left: 40,
|
|
667
|
-
transform: `translateX(${translateX}%)`,
|
|
668
|
-
opacity
|
|
669
|
-
},
|
|
670
|
-
children: renderContent()
|
|
671
|
-
}
|
|
672
|
-
) });
|
|
673
|
-
};
|
|
674
|
-
|
|
675
|
-
// src/text/marker-highlight/index.tsx
|
|
676
|
-
import { interpolate as interpolate7, spring as spring5, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig7 } from "remotion";
|
|
677
|
-
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
678
|
-
function MarkerHighlight({
|
|
679
|
-
before = "",
|
|
680
|
-
highlight,
|
|
681
|
-
after = "",
|
|
682
|
-
markerColor = WARNING,
|
|
683
|
-
baseColor = FLOOR_TEXT,
|
|
684
|
-
highlightedTextColor = SURFACE,
|
|
685
|
-
fontFamily = resolveTypeface("display"),
|
|
686
|
-
fontSize = 72,
|
|
687
|
-
fontWeight = 600,
|
|
688
|
-
speed = 1,
|
|
689
|
-
className
|
|
690
|
-
}) {
|
|
691
|
-
const frame = useCurrentFrame7() * speed;
|
|
692
|
-
const { fps } = useVideoConfig7();
|
|
693
|
-
const markerScale = spring5({
|
|
694
|
-
frame: frame - 15,
|
|
695
|
-
fps,
|
|
696
|
-
config: { damping: 14 }
|
|
697
|
-
});
|
|
698
|
-
const textColor = recolor(
|
|
699
|
-
interpolate7(markerScale, [0.5, 0.8], [0, 1], {
|
|
700
|
-
extrapolateLeft: "clamp",
|
|
701
|
-
extrapolateRight: "clamp"
|
|
702
|
-
}),
|
|
703
|
-
baseColor,
|
|
704
|
-
highlightedTextColor
|
|
705
|
-
);
|
|
706
|
-
return /* @__PURE__ */ jsx7(TextStage, { children: /* @__PURE__ */ jsxs4(
|
|
707
|
-
"span",
|
|
708
|
-
{
|
|
709
|
-
className,
|
|
710
|
-
style: {
|
|
711
|
-
fontSize,
|
|
712
|
-
fontWeight,
|
|
713
|
-
color: baseColor,
|
|
714
|
-
letterSpacing: "-0.03em",
|
|
715
|
-
fontFamily
|
|
716
|
-
},
|
|
717
|
-
children: [
|
|
718
|
-
before,
|
|
719
|
-
/* @__PURE__ */ jsxs4("span", { style: { position: "relative", display: "inline-block" }, children: [
|
|
720
|
-
/* @__PURE__ */ jsx7(
|
|
721
|
-
"span",
|
|
722
|
-
{
|
|
723
|
-
"aria-hidden": true,
|
|
724
|
-
style: {
|
|
725
|
-
position: "absolute",
|
|
726
|
-
inset: "0 -0.1em",
|
|
727
|
-
background: markerColor,
|
|
728
|
-
transformOrigin: "left center",
|
|
729
|
-
transform: `scaleX(${markerScale})`,
|
|
730
|
-
zIndex: 0
|
|
731
|
-
}
|
|
732
|
-
}
|
|
733
|
-
),
|
|
734
|
-
/* @__PURE__ */ jsx7("span", { style: { position: "relative", zIndex: 1, color: textColor }, children: highlight })
|
|
735
|
-
] }),
|
|
736
|
-
after
|
|
737
|
-
]
|
|
738
|
-
}
|
|
739
|
-
) });
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
// src/text/shimmer-sweep/index.tsx
|
|
743
|
-
import { useMemo } from "react";
|
|
744
|
-
import { interpolate as interpolate8, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig8 } from "remotion";
|
|
745
|
-
import { fitTextOnNLines as fitTextOnNLines2 } from "@remotion/layout-utils";
|
|
746
|
-
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
747
|
-
function ShimmerSweep({
|
|
748
|
-
text,
|
|
749
|
-
baseColor = "#a1a1aa",
|
|
750
|
-
shineColor = "#ffffff",
|
|
751
|
-
fontFamily = resolveTypeface("display"),
|
|
752
|
-
fontSize = 96,
|
|
753
|
-
fontWeight = 700,
|
|
754
|
-
speed = 1,
|
|
755
|
-
className
|
|
756
|
-
}) {
|
|
757
|
-
const frame = useCurrentFrame8() * speed;
|
|
758
|
-
const { durationInFrames } = useVideoConfig8();
|
|
759
|
-
const position = interpolate8(
|
|
760
|
-
frame,
|
|
761
|
-
[0, durationInFrames * 0.8],
|
|
762
|
-
[200, -100],
|
|
763
|
-
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
764
|
-
);
|
|
765
|
-
const fittedFontSize = useMemo(() => {
|
|
766
|
-
const t = (text ?? "").trim();
|
|
767
|
-
if (!t) return fontSize;
|
|
768
|
-
try {
|
|
769
|
-
const { fontSize: fs } = fitTextOnNLines2({
|
|
770
|
-
text: t,
|
|
771
|
-
maxLines: 1,
|
|
772
|
-
maxBoxWidth: 1500,
|
|
773
|
-
fontFamily,
|
|
774
|
-
fontWeight,
|
|
775
|
-
letterSpacing: "-0.03em",
|
|
776
|
-
maxFontSize: fontSize,
|
|
777
|
-
validateFontIsLoaded: false
|
|
778
|
-
});
|
|
779
|
-
return resolveFitFontSize({
|
|
780
|
-
singleLineFitFontSize: fs,
|
|
781
|
-
minFontSize: Math.round(fontSize * 0.5),
|
|
782
|
-
maxFontSize: fontSize
|
|
783
|
-
}).fontSize;
|
|
784
|
-
} catch {
|
|
785
|
-
return fontSize;
|
|
786
|
-
}
|
|
787
|
-
}, [text, fontFamily, fontSize, fontWeight]);
|
|
788
|
-
const textStyle = {
|
|
789
|
-
fontSize: fittedFontSize,
|
|
790
|
-
fontWeight,
|
|
791
|
-
letterSpacing: "-0.03em",
|
|
792
|
-
fontFamily,
|
|
793
|
-
margin: 0,
|
|
794
|
-
lineHeight: 1
|
|
795
|
-
};
|
|
796
|
-
return /* @__PURE__ */ jsx8(TextStage, { children: /* @__PURE__ */ jsxs5("div", { style: { position: "relative", display: "inline-block" }, children: [
|
|
797
|
-
/* @__PURE__ */ jsx8("span", { style: { ...textStyle, color: baseColor }, children: text }),
|
|
798
|
-
/* @__PURE__ */ jsx8(
|
|
799
|
-
"span",
|
|
800
|
-
{
|
|
801
|
-
className,
|
|
802
|
-
style: {
|
|
803
|
-
...textStyle,
|
|
804
|
-
position: "absolute",
|
|
805
|
-
inset: 0,
|
|
806
|
-
color: "transparent",
|
|
807
|
-
backgroundClip: "text",
|
|
808
|
-
WebkitBackgroundClip: "text",
|
|
809
|
-
backgroundImage: `linear-gradient(110deg, transparent 30%, ${shineColor} 50%, transparent 70%)`,
|
|
810
|
-
backgroundSize: "200% 100%",
|
|
811
|
-
backgroundPosition: `${position}% 50%`
|
|
812
|
-
},
|
|
813
|
-
children: text
|
|
814
|
-
}
|
|
815
|
-
)
|
|
816
|
-
] }) });
|
|
817
|
-
}
|
|
818
|
-
|
|
819
|
-
// src/text/staggered-fade-up/index.tsx
|
|
820
|
-
import { useCurrentFrame as useCurrentFrame9, useVideoConfig as useVideoConfig9 } from "remotion";
|
|
821
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
822
|
-
function StaggeredFadeUp({
|
|
823
|
-
text,
|
|
824
|
-
staggerDelay = 4,
|
|
825
|
-
staggerMs,
|
|
826
|
-
easing,
|
|
827
|
-
distance = 20,
|
|
828
|
-
fontSize = 72,
|
|
829
|
-
color = FLOOR_TEXT,
|
|
830
|
-
fontFamily = resolveTypeface("display"),
|
|
831
|
-
fontWeight = 600,
|
|
832
|
-
speed = 1,
|
|
833
|
-
className
|
|
834
|
-
}) {
|
|
835
|
-
const frame = useCurrentFrame9() * speed;
|
|
836
|
-
const { fps } = useVideoConfig9();
|
|
837
|
-
const staggerFrames = staggerMs != null ? Math.round(staggerMs / 1e3 * fps) : staggerDelay;
|
|
838
|
-
const ease = resolveEasing(easing);
|
|
839
|
-
const words = text.split(" ");
|
|
840
|
-
return /* @__PURE__ */ jsx9(TextStage, { children: /* @__PURE__ */ jsx9(
|
|
841
|
-
"span",
|
|
842
|
-
{
|
|
843
|
-
className,
|
|
844
|
-
style: {
|
|
845
|
-
fontSize,
|
|
846
|
-
fontWeight,
|
|
847
|
-
color,
|
|
848
|
-
letterSpacing: "-0.03em",
|
|
849
|
-
fontFamily,
|
|
850
|
-
textShadow: resolveContrast().textShadow
|
|
851
|
-
},
|
|
852
|
-
children: words.map((word, i) => {
|
|
853
|
-
const { opacity: linearO } = staggerUp(frame, i, staggerFrames, 12, distance);
|
|
854
|
-
const opacity = ease(linearO);
|
|
855
|
-
const y = staggerRise(distance, linearO, ease);
|
|
856
|
-
return /* @__PURE__ */ jsx9(
|
|
857
|
-
"span",
|
|
858
|
-
{
|
|
859
|
-
style: {
|
|
860
|
-
display: "inline-block",
|
|
861
|
-
marginRight: "0.25em",
|
|
862
|
-
opacity,
|
|
863
|
-
transform: `translateY(${y}px)`
|
|
864
|
-
},
|
|
865
|
-
children: word
|
|
866
|
-
},
|
|
867
|
-
i
|
|
868
|
-
);
|
|
869
|
-
})
|
|
870
|
-
}
|
|
871
|
-
) });
|
|
872
|
-
}
|
|
873
|
-
|
|
874
|
-
// src/text/text-effect/index.tsx
|
|
875
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
876
|
-
var TextEffect = ({
|
|
877
|
-
type,
|
|
878
|
-
colors = [DANGER, TEAL, BLUE],
|
|
879
|
-
color = ACCENT,
|
|
880
|
-
intensity = 0.8,
|
|
881
|
-
children,
|
|
882
|
-
text
|
|
883
|
-
}) => {
|
|
884
|
-
const getEffectStyle = () => {
|
|
885
|
-
const spread = Math.round(intensity * 30);
|
|
886
|
-
const blur = Math.round(intensity * 20);
|
|
887
|
-
switch (type) {
|
|
888
|
-
case "gradient": {
|
|
889
|
-
const gradient = `linear-gradient(90deg, ${colors.join(", ")})`;
|
|
890
|
-
return {
|
|
891
|
-
background: gradient,
|
|
892
|
-
WebkitBackgroundClip: "text",
|
|
893
|
-
WebkitTextFillColor: "transparent",
|
|
894
|
-
backgroundClip: "text"
|
|
895
|
-
};
|
|
896
|
-
}
|
|
897
|
-
case "neon":
|
|
898
|
-
return {
|
|
899
|
-
textShadow: [
|
|
900
|
-
`0 0 ${Math.round(blur * 0.3)}px ${color}`,
|
|
901
|
-
`0 0 ${Math.round(blur * 0.6)}px ${color}`,
|
|
902
|
-
`0 0 ${blur}px ${color}`,
|
|
903
|
-
`0 0 ${spread}px ${color}80`
|
|
904
|
-
].join(", ")
|
|
905
|
-
};
|
|
906
|
-
case "glow":
|
|
907
|
-
return {
|
|
908
|
-
textShadow: `0 0 ${blur}px ${color}, 0 0 ${spread}px ${color}60`
|
|
909
|
-
};
|
|
910
|
-
case "wave": {
|
|
911
|
-
const gradient = `linear-gradient(90deg, ${colors[0]}, ${colors[1] ?? colors[0]}, ${colors[2] ?? colors[0]}, ${colors[0]})`;
|
|
912
|
-
return {
|
|
913
|
-
background: gradient,
|
|
914
|
-
backgroundSize: "200% 100%",
|
|
915
|
-
WebkitBackgroundClip: "text",
|
|
916
|
-
WebkitTextFillColor: "transparent",
|
|
917
|
-
backgroundClip: "text"
|
|
918
|
-
};
|
|
919
|
-
}
|
|
920
|
-
case "outline":
|
|
921
|
-
return {
|
|
922
|
-
WebkitTextStroke: `${Math.max(1, Math.round(intensity * 3))}px ${color}`,
|
|
923
|
-
color: "transparent"
|
|
924
|
-
};
|
|
925
|
-
case "shadow":
|
|
926
|
-
return {
|
|
927
|
-
textShadow: `${Math.round(intensity * 4)}px ${Math.round(intensity * 4)}px ${Math.round(intensity * 8)}px ${color}`
|
|
928
|
-
};
|
|
929
|
-
default:
|
|
930
|
-
return {};
|
|
931
|
-
}
|
|
932
|
-
};
|
|
933
|
-
const bareStage = children ? {} : {
|
|
934
|
-
position: "absolute",
|
|
935
|
-
inset: 0,
|
|
936
|
-
display: "flex",
|
|
937
|
-
alignItems: "center",
|
|
938
|
-
justifyContent: "center",
|
|
939
|
-
textAlign: "center",
|
|
940
|
-
padding: "0 6%",
|
|
941
|
-
fontSize: 140,
|
|
942
|
-
fontWeight: 800,
|
|
943
|
-
letterSpacing: "-0.02em",
|
|
944
|
-
color: TEXT_HI,
|
|
945
|
-
fontFamily: "inherit"
|
|
946
|
-
};
|
|
947
|
-
return /* @__PURE__ */ jsx10("div", { style: { ...bareStage, ...getEffectStyle() }, children: children ?? text });
|
|
948
|
-
};
|
|
949
|
-
|
|
950
|
-
// src/text/text-fade-replace/index.tsx
|
|
951
|
-
import { interpolate as interpolate9, useCurrentFrame as useCurrentFrame10, useVideoConfig as useVideoConfig10 } from "remotion";
|
|
952
|
-
import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
953
|
-
function TextFadeReplace({
|
|
954
|
-
from,
|
|
955
|
-
to,
|
|
956
|
-
fontSize = 48,
|
|
957
|
-
color = FLOOR_TEXT,
|
|
958
|
-
fontFamily = resolveTypeface("display"),
|
|
959
|
-
fontWeight = 600,
|
|
960
|
-
speed = 1,
|
|
961
|
-
className
|
|
962
|
-
}) {
|
|
963
|
-
const frame = useCurrentFrame10() * speed;
|
|
964
|
-
const { durationInFrames } = useVideoConfig10();
|
|
965
|
-
const stops = [
|
|
966
|
-
0,
|
|
967
|
-
durationInFrames * 0.4,
|
|
968
|
-
durationInFrames * 0.6,
|
|
969
|
-
durationInFrames
|
|
970
|
-
];
|
|
971
|
-
const fromOpacity = interpolate9(frame, stops, [1, 1, 0, 0], {
|
|
972
|
-
extrapolateLeft: "clamp",
|
|
973
|
-
extrapolateRight: "clamp"
|
|
974
|
-
});
|
|
975
|
-
const fromY = interpolate9(frame, stops, [0, 0, -12, -12], {
|
|
976
|
-
extrapolateLeft: "clamp",
|
|
977
|
-
extrapolateRight: "clamp"
|
|
978
|
-
});
|
|
979
|
-
const toOpacity = interpolate9(frame, stops, [0, 0, 1, 1], {
|
|
980
|
-
extrapolateLeft: "clamp",
|
|
981
|
-
extrapolateRight: "clamp"
|
|
982
|
-
});
|
|
983
|
-
const toY = interpolate9(frame, stops, [12, 12, 0, 0], {
|
|
984
|
-
extrapolateLeft: "clamp",
|
|
985
|
-
extrapolateRight: "clamp"
|
|
986
|
-
});
|
|
987
|
-
const baseSpanStyle = {
|
|
988
|
-
position: "absolute",
|
|
989
|
-
left: "50%",
|
|
990
|
-
top: "50%",
|
|
991
|
-
fontSize,
|
|
992
|
-
fontWeight,
|
|
993
|
-
color,
|
|
994
|
-
letterSpacing: "-0.03em",
|
|
995
|
-
fontFamily,
|
|
996
|
-
textShadow: resolveContrast().textShadow,
|
|
997
|
-
whiteSpace: "nowrap"
|
|
998
|
-
};
|
|
999
|
-
return /* @__PURE__ */ jsx11(TextStage, { children: /* @__PURE__ */ jsxs6("div", { style: { position: "relative", width: 0, height: 0 }, children: [
|
|
1000
|
-
/* @__PURE__ */ jsx11(
|
|
1001
|
-
"span",
|
|
1002
|
-
{
|
|
1003
|
-
className,
|
|
1004
|
-
style: {
|
|
1005
|
-
...baseSpanStyle,
|
|
1006
|
-
opacity: fromOpacity,
|
|
1007
|
-
transform: `translate(-50%, calc(-50% + ${fromY}px))`
|
|
1008
|
-
},
|
|
1009
|
-
children: from
|
|
1010
|
-
}
|
|
1011
|
-
),
|
|
1012
|
-
/* @__PURE__ */ jsx11(
|
|
1013
|
-
"span",
|
|
1014
|
-
{
|
|
1015
|
-
className,
|
|
1016
|
-
style: {
|
|
1017
|
-
...baseSpanStyle,
|
|
1018
|
-
opacity: toOpacity,
|
|
1019
|
-
transform: `translate(-50%, calc(-50% + ${toY}px))`
|
|
1020
|
-
},
|
|
1021
|
-
children: to
|
|
1022
|
-
}
|
|
1023
|
-
)
|
|
1024
|
-
] }) });
|
|
1025
|
-
}
|
|
1026
|
-
|
|
1027
|
-
// src/text/tracking-in/index.tsx
|
|
1028
|
-
import React2 from "react";
|
|
1029
|
-
import { interpolate as interpolate10, spring as spring6, useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig11 } from "remotion";
|
|
1030
|
-
import { fitTextOnNLines as fitTextOnNLines3 } from "@remotion/layout-utils";
|
|
1031
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
1032
|
-
var TRACKING_IN_TEXT_WIDTH = 1500;
|
|
1033
|
-
var TRACKING_IN_SETTLED_SPACING = "-0.03em";
|
|
1034
|
-
function TrackingIn({
|
|
1035
|
-
text,
|
|
1036
|
-
startTracking = 0.5,
|
|
1037
|
-
startBlur = 12,
|
|
1038
|
-
fontSize = 96,
|
|
1039
|
-
color = FLOOR_TEXT,
|
|
1040
|
-
fontFamily = resolveTypeface("display"),
|
|
1041
|
-
fontWeight = 700,
|
|
1042
|
-
speed = 1,
|
|
1043
|
-
className
|
|
1044
|
-
}) {
|
|
1045
|
-
const frame = useCurrentFrame11() * speed;
|
|
1046
|
-
const { fps } = useVideoConfig11();
|
|
1047
|
-
const t = spring6({
|
|
1048
|
-
frame,
|
|
1049
|
-
fps,
|
|
1050
|
-
config: { damping: 18, stiffness: 90 }
|
|
1051
|
-
});
|
|
1052
|
-
const letterSpacing = interpolate10(t, [0, 1], [startTracking, -0.03]) + "em";
|
|
1053
|
-
const blurAmount = interpolate10(t, [0, 1], [startBlur, 0]);
|
|
1054
|
-
const opacity = interpolate10(frame, [0, 15], [0, 1], {
|
|
1055
|
-
extrapolateLeft: "clamp",
|
|
1056
|
-
extrapolateRight: "clamp"
|
|
1057
|
-
});
|
|
1058
|
-
const fittedFontSize = React2.useMemo(() => {
|
|
1059
|
-
if (text.trim().length === 0) return fontSize;
|
|
1060
|
-
try {
|
|
1061
|
-
const { fontSize: fit } = fitTextOnNLines3({
|
|
1062
|
-
text,
|
|
1063
|
-
maxLines: 1,
|
|
1064
|
-
maxBoxWidth: TRACKING_IN_TEXT_WIDTH,
|
|
1065
|
-
fontFamily,
|
|
1066
|
-
fontWeight,
|
|
1067
|
-
letterSpacing: TRACKING_IN_SETTLED_SPACING,
|
|
1068
|
-
maxFontSize: fontSize,
|
|
1069
|
-
validateFontIsLoaded: false
|
|
1070
|
-
});
|
|
1071
|
-
return resolveFitFontSize({
|
|
1072
|
-
singleLineFitFontSize: fit,
|
|
1073
|
-
minFontSize: Math.round(fontSize * 0.55),
|
|
1074
|
-
maxFontSize: fontSize
|
|
1075
|
-
}).fontSize;
|
|
1076
|
-
} catch {
|
|
1077
|
-
return fontSize;
|
|
1078
|
-
}
|
|
1079
|
-
}, [text, fontFamily, fontWeight, fontSize]);
|
|
1080
|
-
return /* @__PURE__ */ jsx12(TextStage, { children: /* @__PURE__ */ jsx12(
|
|
1081
|
-
"span",
|
|
1082
|
-
{
|
|
1083
|
-
className,
|
|
1084
|
-
style: {
|
|
1085
|
-
fontSize: fittedFontSize,
|
|
1086
|
-
fontWeight,
|
|
1087
|
-
color,
|
|
1088
|
-
letterSpacing,
|
|
1089
|
-
opacity,
|
|
1090
|
-
filter: `blur(${blurAmount}px)`,
|
|
1091
|
-
fontFamily,
|
|
1092
|
-
textShadow: resolveContrast().textShadow,
|
|
1093
|
-
maxWidth: TRACKING_IN_TEXT_WIDTH,
|
|
1094
|
-
whiteSpace: "nowrap"
|
|
1095
|
-
},
|
|
1096
|
-
children: text
|
|
1097
|
-
}
|
|
1098
|
-
) });
|
|
1099
|
-
}
|
|
1100
|
-
|
|
1101
|
-
// src/text/typewriter/index.tsx
|
|
1102
|
-
import React3 from "react";
|
|
1103
|
-
import { interpolate as interpolate11, useCurrentFrame as useCurrentFrame12, useVideoConfig as useVideoConfig12 } from "remotion";
|
|
1104
|
-
import { fitTextOnNLines as fitTextOnNLines4 } from "@remotion/layout-utils";
|
|
1105
|
-
import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1106
|
-
var TYPEWRITER_TEXT_WIDTH = 1500;
|
|
1107
|
-
var TYPEWRITER_MAX_LINES = 3;
|
|
1108
|
-
var TYPEWRITER_LETTER_SPACING = "-0.03em";
|
|
1109
|
-
function Typewriter({
|
|
1110
|
-
text,
|
|
1111
|
-
cursor = true,
|
|
1112
|
-
charsPerSecond = 20,
|
|
1113
|
-
speed = 1,
|
|
1114
|
-
fontSize = 48,
|
|
1115
|
-
color = FLOOR_TEXT,
|
|
1116
|
-
cursorColor = FLOOR_TEXT,
|
|
1117
|
-
fontFamily = resolveTypeface("display"),
|
|
1118
|
-
fontWeight = 600,
|
|
1119
|
-
className
|
|
1120
|
-
}) {
|
|
1121
|
-
const frame = useCurrentFrame12() * speed;
|
|
1122
|
-
const { fps } = useVideoConfig12();
|
|
1123
|
-
const charsToRevealOver = text.length / charsPerSecond * fps;
|
|
1124
|
-
const revealed = Math.floor(
|
|
1125
|
-
interpolate11(frame, [0, charsToRevealOver], [0, text.length], {
|
|
1126
|
-
extrapolateLeft: "clamp",
|
|
1127
|
-
extrapolateRight: "clamp"
|
|
1128
|
-
})
|
|
1129
|
-
);
|
|
1130
|
-
const visibleText = text.substring(0, revealed);
|
|
1131
|
-
const isCursorVisible = Math.floor(frame / fps * 2) % 2 === 0;
|
|
1132
|
-
const fittedFontSize = React3.useMemo(() => {
|
|
1133
|
-
if (text.trim().length === 0) return fontSize;
|
|
1134
|
-
try {
|
|
1135
|
-
const { fontSize: fit } = fitTextOnNLines4({
|
|
1136
|
-
text,
|
|
1137
|
-
maxLines: TYPEWRITER_MAX_LINES,
|
|
1138
|
-
maxBoxWidth: TYPEWRITER_TEXT_WIDTH,
|
|
1139
|
-
fontFamily,
|
|
1140
|
-
fontWeight,
|
|
1141
|
-
letterSpacing: TYPEWRITER_LETTER_SPACING,
|
|
1142
|
-
maxFontSize: fontSize,
|
|
1143
|
-
validateFontIsLoaded: false
|
|
1144
|
-
});
|
|
1145
|
-
return resolveFitFontSize({
|
|
1146
|
-
singleLineFitFontSize: fit,
|
|
1147
|
-
minFontSize: Math.round(fontSize * 0.55),
|
|
1148
|
-
maxFontSize: fontSize
|
|
1149
|
-
}).fontSize;
|
|
1150
|
-
} catch {
|
|
1151
|
-
return fontSize;
|
|
1152
|
-
}
|
|
1153
|
-
}, [text, fontFamily, fontWeight, fontSize]);
|
|
1154
|
-
return /* @__PURE__ */ jsx13(TextStage, { children: /* @__PURE__ */ jsxs7(
|
|
1155
|
-
"span",
|
|
1156
|
-
{
|
|
1157
|
-
className,
|
|
1158
|
-
style: {
|
|
1159
|
-
fontSize: fittedFontSize,
|
|
1160
|
-
fontWeight,
|
|
1161
|
-
color,
|
|
1162
|
-
letterSpacing: TYPEWRITER_LETTER_SPACING,
|
|
1163
|
-
fontFamily,
|
|
1164
|
-
textShadow: resolveContrast().textShadow,
|
|
1165
|
-
maxWidth: TYPEWRITER_TEXT_WIDTH,
|
|
1166
|
-
whiteSpace: "pre-wrap",
|
|
1167
|
-
overflowWrap: "break-word",
|
|
1168
|
-
textAlign: "center"
|
|
1169
|
-
},
|
|
1170
|
-
children: [
|
|
1171
|
-
visibleText,
|
|
1172
|
-
cursor && /* @__PURE__ */ jsx13(
|
|
1173
|
-
"span",
|
|
1174
|
-
{
|
|
1175
|
-
style: {
|
|
1176
|
-
display: "inline-block",
|
|
1177
|
-
width: "0.08em",
|
|
1178
|
-
height: "1em",
|
|
1179
|
-
marginLeft: "0.04em",
|
|
1180
|
-
verticalAlign: "text-bottom",
|
|
1181
|
-
background: cursorColor,
|
|
1182
|
-
opacity: isCursorVisible ? 1 : 0
|
|
1183
|
-
}
|
|
1184
|
-
}
|
|
1185
|
-
)
|
|
1186
|
-
]
|
|
1187
|
-
}
|
|
1188
|
-
) });
|
|
1189
|
-
}
|
|
1190
|
-
|
|
1191
|
-
// src/text/matrix-decode/index.tsx
|
|
1192
|
-
import { random, useCurrentFrame as useCurrentFrame13, useVideoConfig as useVideoConfig13 } from "remotion";
|
|
1193
|
-
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
1194
|
-
var DECODE_TEXT_WIDTH = 1500;
|
|
1195
|
-
function MatrixDecode({
|
|
1196
|
-
text,
|
|
1197
|
-
charset = "!@#$%^&*()_+-=<>?/\\|",
|
|
1198
|
-
fontSize = 72,
|
|
1199
|
-
color = SUCCESS,
|
|
1200
|
-
fontFamily = resolveTypeface("mono"),
|
|
1201
|
-
fontWeight = 600,
|
|
1202
|
-
revealDuration = 60,
|
|
1203
|
-
speed = 1
|
|
1204
|
-
}) {
|
|
1205
|
-
const frame = useCurrentFrame13() * speed;
|
|
1206
|
-
useVideoConfig13();
|
|
1207
|
-
let output = "";
|
|
1208
|
-
for (let i = 0; i < text.length; i++) {
|
|
1209
|
-
const revealFrame = i / Math.max(text.length, 1) * revealDuration;
|
|
1210
|
-
if (text[i] === " ") {
|
|
1211
|
-
output += " ";
|
|
1212
|
-
} else if (frame >= revealFrame) {
|
|
1213
|
-
output += text[i];
|
|
1214
|
-
} else {
|
|
1215
|
-
const r = random(`${i}-${Math.floor(frame / 2)}`);
|
|
1216
|
-
const ch = charset[Math.floor(r * charset.length)];
|
|
1217
|
-
output += ch;
|
|
1218
|
-
}
|
|
1219
|
-
}
|
|
1220
|
-
return /* @__PURE__ */ jsx14(TextStage, { children: /* @__PURE__ */ jsx14(
|
|
1221
|
-
FitText,
|
|
1222
|
-
{
|
|
1223
|
-
maxFontSize: fontSize,
|
|
1224
|
-
maxWidth: DECODE_TEXT_WIDTH,
|
|
1225
|
-
fontFamily,
|
|
1226
|
-
fontWeight,
|
|
1227
|
-
letterSpacing: "0.05em",
|
|
1228
|
-
style: { color, whiteSpace: "pre" },
|
|
1229
|
-
children: output
|
|
1230
|
-
}
|
|
1231
|
-
) });
|
|
1232
|
-
}
|
|
1233
|
-
|
|
1234
|
-
// src/text/rgb-glitch-text/index.tsx
|
|
1235
|
-
import { random as random2, useCurrentFrame as useCurrentFrame14 } from "remotion";
|
|
1236
|
-
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1237
|
-
var GLITCH_TEXT_WIDTH = 1500;
|
|
1238
|
-
function RGBGlitchText({
|
|
1239
|
-
text,
|
|
1240
|
-
fontSize = 96,
|
|
1241
|
-
color = FLOOR_TEXT,
|
|
1242
|
-
fontFamily = resolveTypeface("display"),
|
|
1243
|
-
fontWeight = 700,
|
|
1244
|
-
glitchAt = 20,
|
|
1245
|
-
glitchDuration = 8,
|
|
1246
|
-
intensity = 6,
|
|
1247
|
-
seed = "glitch",
|
|
1248
|
-
speed = 1,
|
|
1249
|
-
className
|
|
1250
|
-
}) {
|
|
1251
|
-
const frame = useCurrentFrame14() * speed;
|
|
1252
|
-
const isGlitching = frame >= glitchAt && frame < glitchAt + glitchDuration;
|
|
1253
|
-
const offset = (axisSeed, scale) => (random2(`${seed}-${axisSeed}-${frame}`) * 2 - 1) * scale;
|
|
1254
|
-
const rX = isGlitching ? offset("r-x", intensity) : 0;
|
|
1255
|
-
const rY = isGlitching ? offset("r-y", intensity * 0.4) : 0;
|
|
1256
|
-
const gX = isGlitching ? offset("g-x", intensity) : 0;
|
|
1257
|
-
const gY = isGlitching ? offset("g-y", intensity * 0.4) : 0;
|
|
1258
|
-
const bX = isGlitching ? offset("b-x", intensity) : 0;
|
|
1259
|
-
const bY = isGlitching ? offset("b-y", intensity * 0.4) : 0;
|
|
1260
|
-
const copyOpacity = isGlitching ? 1 : 0;
|
|
1261
|
-
const copyBaseStyle = {
|
|
1262
|
-
position: "absolute",
|
|
1263
|
-
top: 0,
|
|
1264
|
-
left: 0,
|
|
1265
|
-
whiteSpace: "pre",
|
|
1266
|
-
mixBlendMode: "screen"
|
|
1267
|
-
};
|
|
1268
|
-
return /* @__PURE__ */ jsx15(TextStage, { children: /* @__PURE__ */ jsxs8(
|
|
1269
|
-
"div",
|
|
1270
|
-
{
|
|
1271
|
-
className,
|
|
1272
|
-
style: { position: "relative", display: "inline-block" },
|
|
1273
|
-
children: [
|
|
1274
|
-
/* @__PURE__ */ jsx15(
|
|
1275
|
-
FitText,
|
|
1276
|
-
{
|
|
1277
|
-
maxFontSize: fontSize,
|
|
1278
|
-
maxWidth: GLITCH_TEXT_WIDTH,
|
|
1279
|
-
fontFamily,
|
|
1280
|
-
fontWeight,
|
|
1281
|
-
letterSpacing: "-0.03em",
|
|
1282
|
-
style: {
|
|
1283
|
-
position: "relative",
|
|
1284
|
-
color,
|
|
1285
|
-
whiteSpace: "pre",
|
|
1286
|
-
textShadow: resolveContrast().textShadow
|
|
1287
|
-
},
|
|
1288
|
-
children: text
|
|
1289
|
-
}
|
|
1290
|
-
),
|
|
1291
|
-
/* @__PURE__ */ jsx15(
|
|
1292
|
-
FitText,
|
|
1293
|
-
{
|
|
1294
|
-
maxFontSize: fontSize,
|
|
1295
|
-
maxWidth: GLITCH_TEXT_WIDTH,
|
|
1296
|
-
fontFamily,
|
|
1297
|
-
fontWeight,
|
|
1298
|
-
letterSpacing: "-0.03em",
|
|
1299
|
-
style: {
|
|
1300
|
-
...copyBaseStyle,
|
|
1301
|
-
color: "#ff0040",
|
|
1302
|
-
opacity: copyOpacity,
|
|
1303
|
-
transform: `translateX(${rX}px) translateY(${rY}px)`
|
|
1304
|
-
},
|
|
1305
|
-
children: text
|
|
1306
|
-
}
|
|
1307
|
-
),
|
|
1308
|
-
/* @__PURE__ */ jsx15(
|
|
1309
|
-
FitText,
|
|
1310
|
-
{
|
|
1311
|
-
maxFontSize: fontSize,
|
|
1312
|
-
maxWidth: GLITCH_TEXT_WIDTH,
|
|
1313
|
-
fontFamily,
|
|
1314
|
-
fontWeight,
|
|
1315
|
-
letterSpacing: "-0.03em",
|
|
1316
|
-
style: {
|
|
1317
|
-
...copyBaseStyle,
|
|
1318
|
-
color: "#00ff80",
|
|
1319
|
-
opacity: copyOpacity,
|
|
1320
|
-
transform: `translateX(${gX}px) translateY(${gY}px)`
|
|
1321
|
-
},
|
|
1322
|
-
children: text
|
|
1323
|
-
}
|
|
1324
|
-
),
|
|
1325
|
-
/* @__PURE__ */ jsx15(
|
|
1326
|
-
FitText,
|
|
1327
|
-
{
|
|
1328
|
-
maxFontSize: fontSize,
|
|
1329
|
-
maxWidth: GLITCH_TEXT_WIDTH,
|
|
1330
|
-
fontFamily,
|
|
1331
|
-
fontWeight,
|
|
1332
|
-
letterSpacing: "-0.03em",
|
|
1333
|
-
style: {
|
|
1334
|
-
...copyBaseStyle,
|
|
1335
|
-
color: "#0080ff",
|
|
1336
|
-
opacity: copyOpacity,
|
|
1337
|
-
transform: `translateX(${bX}px) translateY(${bY}px)`
|
|
1338
|
-
},
|
|
1339
|
-
children: text
|
|
1340
|
-
}
|
|
1341
|
-
)
|
|
1342
|
-
]
|
|
1343
|
-
}
|
|
1344
|
-
) });
|
|
1345
|
-
}
|
|
1346
|
-
|
|
1347
|
-
// src/text/quote-card/index.tsx
|
|
1348
|
-
import { AbsoluteFill as AbsoluteFill5, interpolate as interpolate12, spring as spring7, useCurrentFrame as useCurrentFrame15, useVideoConfig as useVideoConfig14 } from "remotion";
|
|
1349
|
-
import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1350
|
-
var QuoteCard = ({
|
|
1351
|
-
quote,
|
|
1352
|
-
author = "",
|
|
1353
|
-
role = "",
|
|
1354
|
-
accentColor = ACCENT,
|
|
1355
|
-
tokens = {}
|
|
1356
|
-
}) => {
|
|
1357
|
-
const frame = useCurrentFrame15();
|
|
1358
|
-
const { fps } = useVideoConfig14();
|
|
1359
|
-
const t = frame / fps;
|
|
1360
|
-
const {
|
|
1361
|
-
fontFamily = resolveTypeface("display"),
|
|
1362
|
-
fontSize = 62,
|
|
1363
|
-
textColor = FLOOR_TEXT
|
|
1364
|
-
} = tokens;
|
|
1365
|
-
const markIn = spring7({ frame, fps, config: { damping: 13, stiffness: 140, mass: 1.1 } });
|
|
1366
|
-
const markSettled = markIn > 0.98;
|
|
1367
|
-
const markScale = interpolate12(markIn, [0, 1], [1.6, 1]) * (markSettled ? 1 + Math.sin(2 * Math.PI * 0.07 * t) * 0.012 : 1);
|
|
1368
|
-
const words = quote.split(" ").filter(Boolean);
|
|
1369
|
-
const wordStyle = (i) => {
|
|
1370
|
-
const s = spring7({
|
|
1371
|
-
frame: frame - 6 - i * 2,
|
|
1372
|
-
fps,
|
|
1373
|
-
config: { damping: 15, stiffness: 130, mass: 0.7 }
|
|
1374
|
-
});
|
|
1375
|
-
return {
|
|
1376
|
-
display: "inline-block",
|
|
1377
|
-
opacity: interpolate12(s, [0, 0.4], [0, 1], { extrapolateRight: "clamp" }),
|
|
1378
|
-
transform: `translateY(${interpolate12(s, [0, 1], [26, 0])}px)`
|
|
1379
|
-
};
|
|
1380
|
-
};
|
|
1381
|
-
const attribStart = 6 + words.length * 2 + 8;
|
|
1382
|
-
const ruleP = interpolate12(frame, [attribStart, attribStart + 16], [0, 1], {
|
|
1383
|
-
extrapolateLeft: "clamp",
|
|
1384
|
-
extrapolateRight: "clamp"
|
|
1385
|
-
});
|
|
1386
|
-
const attribIn = spring7({
|
|
1387
|
-
frame: frame - attribStart - 6,
|
|
1388
|
-
fps,
|
|
1389
|
-
config: { damping: 15, stiffness: 110, mass: 0.8 }
|
|
1390
|
-
});
|
|
1391
|
-
return /* @__PURE__ */ jsx16(AbsoluteFill5, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxs9("div", { style: { maxWidth: "72%", textAlign: "left" }, children: [
|
|
1392
|
-
/* @__PURE__ */ jsx16(
|
|
1393
|
-
"div",
|
|
1394
|
-
{
|
|
1395
|
-
style: {
|
|
1396
|
-
fontFamily,
|
|
1397
|
-
fontSize: fontSize * 2.6,
|
|
1398
|
-
fontWeight: 800,
|
|
1399
|
-
lineHeight: 0.6,
|
|
1400
|
-
color: accentColor,
|
|
1401
|
-
opacity: interpolate12(markIn, [0, 0.3], [0, 1], { extrapolateRight: "clamp" }),
|
|
1402
|
-
transform: `scale(${markScale})`,
|
|
1403
|
-
transformOrigin: "left bottom",
|
|
1404
|
-
marginBottom: fontSize * 0.2,
|
|
1405
|
-
textShadow: FLOOR_SHADOW
|
|
1406
|
-
},
|
|
1407
|
-
children: "\u201C"
|
|
1408
|
-
}
|
|
1409
|
-
),
|
|
1410
|
-
/* @__PURE__ */ jsx16(
|
|
1411
|
-
"div",
|
|
1412
|
-
{
|
|
1413
|
-
style: {
|
|
1414
|
-
fontFamily,
|
|
1415
|
-
fontSize,
|
|
1416
|
-
fontWeight: 600,
|
|
1417
|
-
lineHeight: 1.32,
|
|
1418
|
-
letterSpacing: "-0.01em",
|
|
1419
|
-
color: textColor,
|
|
1420
|
-
textShadow: FLOOR_SHADOW,
|
|
1421
|
-
display: "flex",
|
|
1422
|
-
flexWrap: "wrap",
|
|
1423
|
-
gap: "0 0.28em"
|
|
1424
|
-
},
|
|
1425
|
-
children: words.map((w, i) => /* @__PURE__ */ jsx16("span", { style: wordStyle(i), children: w }, i))
|
|
1426
|
-
}
|
|
1427
|
-
),
|
|
1428
|
-
(author || role) && /* @__PURE__ */ jsxs9("div", { style: { marginTop: fontSize * 0.7 }, children: [
|
|
1429
|
-
/* @__PURE__ */ jsx16(
|
|
1430
|
-
"div",
|
|
1431
|
-
{
|
|
1432
|
-
style: {
|
|
1433
|
-
height: 3,
|
|
1434
|
-
width: `${ruleP * 12}%`,
|
|
1435
|
-
background: accentColor,
|
|
1436
|
-
borderRadius: 2,
|
|
1437
|
-
marginBottom: fontSize * 0.3
|
|
1438
|
-
}
|
|
1439
|
-
}
|
|
1440
|
-
),
|
|
1441
|
-
/* @__PURE__ */ jsxs9(
|
|
1442
|
-
"div",
|
|
1443
|
-
{
|
|
1444
|
-
style: {
|
|
1445
|
-
fontFamily,
|
|
1446
|
-
opacity: interpolate12(attribIn, [0, 1], [0, 1]),
|
|
1447
|
-
transform: `translateY(${interpolate12(attribIn, [0, 1], [14, 0])}px)`,
|
|
1448
|
-
textShadow: FLOOR_SHADOW
|
|
1449
|
-
},
|
|
1450
|
-
children: [
|
|
1451
|
-
author && /* @__PURE__ */ jsx16("span", { style: { fontSize: fontSize * 0.42, fontWeight: 700, color: textColor }, children: author }),
|
|
1452
|
-
role && /* @__PURE__ */ jsx16(
|
|
1453
|
-
"span",
|
|
1454
|
-
{
|
|
1455
|
-
style: {
|
|
1456
|
-
fontSize: fontSize * 0.38,
|
|
1457
|
-
fontWeight: 400,
|
|
1458
|
-
color: textColor,
|
|
1459
|
-
opacity: 0.6,
|
|
1460
|
-
marginLeft: author ? "0.8em" : 0
|
|
1461
|
-
},
|
|
1462
|
-
children: role
|
|
1463
|
-
}
|
|
1464
|
-
)
|
|
1465
|
-
]
|
|
1466
|
-
}
|
|
1467
|
-
)
|
|
1468
|
-
] })
|
|
1469
|
-
] }) });
|
|
1470
|
-
};
|
|
1471
|
-
|
|
1472
|
-
// src/text/slot-machine-roll/index.tsx
|
|
1473
|
-
import { spring as spring8, useCurrentFrame as useCurrentFrame16, useVideoConfig as useVideoConfig15 } from "remotion";
|
|
1474
|
-
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1475
|
-
function SlotMachineRoll({
|
|
1476
|
-
from = "$99",
|
|
1477
|
-
to = "$199",
|
|
1478
|
-
fontSize = 120,
|
|
1479
|
-
color = FLOOR_TEXT,
|
|
1480
|
-
fontFamily = resolveTypeface("display"),
|
|
1481
|
-
fontWeight = 700,
|
|
1482
|
-
speed = 1,
|
|
1483
|
-
className
|
|
1484
|
-
}) {
|
|
1485
|
-
const frame = useCurrentFrame16() * speed;
|
|
1486
|
-
const { fps } = useVideoConfig15();
|
|
1487
|
-
const len = Math.max(from.length, to.length);
|
|
1488
|
-
const paddedFrom = from.padStart(len, " ");
|
|
1489
|
-
const paddedTo = to.padStart(len, " ");
|
|
1490
|
-
const columns = [];
|
|
1491
|
-
for (let i = 0; i < len; i++) {
|
|
1492
|
-
const raw = spring8({
|
|
1493
|
-
frame: frame - i * 4,
|
|
1494
|
-
fps,
|
|
1495
|
-
config: { damping: 14 }
|
|
1496
|
-
});
|
|
1497
|
-
const t = Math.max(0, Math.min(1, raw));
|
|
1498
|
-
columns.push(
|
|
1499
|
-
/* @__PURE__ */ jsx17(
|
|
1500
|
-
"span",
|
|
1501
|
-
{
|
|
1502
|
-
style: {
|
|
1503
|
-
display: "inline-block",
|
|
1504
|
-
overflow: "hidden",
|
|
1505
|
-
height: "1.1em",
|
|
1506
|
-
lineHeight: "1.1em",
|
|
1507
|
-
verticalAlign: "top",
|
|
1508
|
-
width: "0.7em",
|
|
1509
|
-
textAlign: "center"
|
|
1510
|
-
},
|
|
1511
|
-
children: /* @__PURE__ */ jsxs10(
|
|
1512
|
-
"span",
|
|
1513
|
-
{
|
|
1514
|
-
style: {
|
|
1515
|
-
display: "flex",
|
|
1516
|
-
flexDirection: "column",
|
|
1517
|
-
transform: `translateY(${-t * fontSize * 1.1}px)`
|
|
1518
|
-
},
|
|
1519
|
-
children: [
|
|
1520
|
-
/* @__PURE__ */ jsx17("span", { children: paddedFrom[i] }),
|
|
1521
|
-
/* @__PURE__ */ jsx17("span", { children: paddedTo[i] })
|
|
1522
|
-
]
|
|
1523
|
-
}
|
|
1524
|
-
)
|
|
1525
|
-
},
|
|
1526
|
-
i
|
|
1527
|
-
)
|
|
1528
|
-
);
|
|
1529
|
-
}
|
|
1530
|
-
return /* @__PURE__ */ jsx17(TextStage, { children: /* @__PURE__ */ jsx17(
|
|
1531
|
-
"span",
|
|
1532
|
-
{
|
|
1533
|
-
className,
|
|
1534
|
-
style: {
|
|
1535
|
-
fontSize,
|
|
1536
|
-
fontWeight,
|
|
1537
|
-
color,
|
|
1538
|
-
letterSpacing: "-0.03em",
|
|
1539
|
-
fontFamily,
|
|
1540
|
-
textShadow: resolveContrast().textShadow,
|
|
1541
|
-
lineHeight: 1.1
|
|
1542
|
-
},
|
|
1543
|
-
children: columns
|
|
1544
|
-
}
|
|
1545
|
-
) });
|
|
1546
|
-
}
|
|
1547
|
-
|
|
1548
|
-
// src/text/stat-counter/index.tsx
|
|
1549
|
-
import { AbsoluteFill as AbsoluteFill6, Easing, interpolate as interpolate13, spring as spring9, useCurrentFrame as useCurrentFrame17, useVideoConfig as useVideoConfig16 } from "remotion";
|
|
1550
|
-
import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1551
|
-
var StatCounter = ({
|
|
1552
|
-
value,
|
|
1553
|
-
prefix = "",
|
|
1554
|
-
suffix = "",
|
|
1555
|
-
label = "",
|
|
1556
|
-
accentColor = ACCENT,
|
|
1557
|
-
decimals = 0,
|
|
1558
|
-
countFrames = 45,
|
|
1559
|
-
position = "center",
|
|
1560
|
-
tokens = {}
|
|
1561
|
-
}) => {
|
|
1562
|
-
const frame = useCurrentFrame17();
|
|
1563
|
-
const { fps } = useVideoConfig16();
|
|
1564
|
-
const t = frame / fps;
|
|
1565
|
-
const {
|
|
1566
|
-
fontFamily = resolveTypeface("display"),
|
|
1567
|
-
fontSize = 190,
|
|
1568
|
-
textColor = FLOOR_TEXT
|
|
1569
|
-
} = tokens;
|
|
1570
|
-
const countP = interpolate13(frame, [0, countFrames], [0, 1], {
|
|
1571
|
-
extrapolateLeft: "clamp",
|
|
1572
|
-
extrapolateRight: "clamp",
|
|
1573
|
-
easing: Easing.out(Easing.exp)
|
|
1574
|
-
});
|
|
1575
|
-
const shown = (value * countP).toLocaleString("en-US", {
|
|
1576
|
-
minimumFractionDigits: decimals,
|
|
1577
|
-
maximumFractionDigits: decimals
|
|
1578
|
-
});
|
|
1579
|
-
const enter = spring9({ frame, fps, config: { damping: 16, stiffness: 120, mass: 0.9 } });
|
|
1580
|
-
const scale = interpolate13(enter, [0, 1], [0.94, 1]);
|
|
1581
|
-
const opacity = interpolate13(enter, [0, 0.4], [0, 1], { extrapolateRight: "clamp" });
|
|
1582
|
-
const lineP = interpolate13(frame, [countFrames * 0.6, countFrames * 1.2], [0, 1], {
|
|
1583
|
-
extrapolateLeft: "clamp",
|
|
1584
|
-
extrapolateRight: "clamp",
|
|
1585
|
-
easing: Easing.bezier(0.65, 0, 0.35, 1)
|
|
1586
|
-
});
|
|
1587
|
-
const idleGlow = 0.55 + Math.sin(2 * Math.PI * 0.4 * t) * 0.2;
|
|
1588
|
-
const labelIn = spring9({
|
|
1589
|
-
frame: frame - countFrames * 0.7,
|
|
1590
|
-
fps,
|
|
1591
|
-
config: { damping: 15, stiffness: 110, mass: 0.8 }
|
|
1592
|
-
});
|
|
1593
|
-
const align = position === "center" ? "center" : position === "right" ? "flex-end" : "flex-start";
|
|
1594
|
-
const textAlign = position === "center" ? "center" : position === "right" ? "right" : "left";
|
|
1595
|
-
return /* @__PURE__ */ jsx18(AbsoluteFill6, { style: { justifyContent: "center", alignItems: align, padding: 80 }, children: /* @__PURE__ */ jsxs11("div", { style: { opacity, transform: `scale(${scale})`, textAlign }, children: [
|
|
1596
|
-
/* @__PURE__ */ jsxs11(
|
|
1597
|
-
"div",
|
|
1598
|
-
{
|
|
1599
|
-
style: {
|
|
1600
|
-
fontFamily,
|
|
1601
|
-
fontSize,
|
|
1602
|
-
fontWeight: 800,
|
|
1603
|
-
letterSpacing: "-0.03em",
|
|
1604
|
-
color: textColor,
|
|
1605
|
-
textShadow: FLOOR_SHADOW,
|
|
1606
|
-
fontVariantNumeric: "tabular-nums",
|
|
1607
|
-
lineHeight: 1.05,
|
|
1608
|
-
whiteSpace: "nowrap"
|
|
1609
|
-
},
|
|
1610
|
-
children: [
|
|
1611
|
-
prefix,
|
|
1612
|
-
shown,
|
|
1613
|
-
/* @__PURE__ */ jsx18("span", { style: { color: accentColor }, children: suffix })
|
|
1614
|
-
]
|
|
1615
|
-
}
|
|
1616
|
-
),
|
|
1617
|
-
/* @__PURE__ */ jsx18(
|
|
1618
|
-
"div",
|
|
1619
|
-
{
|
|
1620
|
-
style: {
|
|
1621
|
-
height: Math.max(4, fontSize * 0.035),
|
|
1622
|
-
width: `${lineP * 100}%`,
|
|
1623
|
-
marginTop: fontSize * 0.08,
|
|
1624
|
-
marginLeft: position === "right" ? "auto" : position === "center" ? "auto" : 0,
|
|
1625
|
-
marginRight: position === "left" ? "auto" : position === "center" ? "auto" : 0,
|
|
1626
|
-
background: accentColor,
|
|
1627
|
-
borderRadius: 4,
|
|
1628
|
-
opacity: lineP >= 1 ? idleGlow : 0.9
|
|
1629
|
-
}
|
|
1630
|
-
}
|
|
1631
|
-
),
|
|
1632
|
-
label && /* @__PURE__ */ jsx18(
|
|
1633
|
-
"div",
|
|
1634
|
-
{
|
|
1635
|
-
style: {
|
|
1636
|
-
fontFamily,
|
|
1637
|
-
fontSize: Math.round(fontSize * 0.19),
|
|
1638
|
-
fontWeight: 500,
|
|
1639
|
-
letterSpacing: "0.14em",
|
|
1640
|
-
textTransform: "uppercase",
|
|
1641
|
-
color: textColor,
|
|
1642
|
-
opacity: interpolate13(labelIn, [0, 1], [0, 0.75]),
|
|
1643
|
-
transform: `translateY(${interpolate13(labelIn, [0, 1], [18, 0])}px)`,
|
|
1644
|
-
marginTop: fontSize * 0.12,
|
|
1645
|
-
textShadow: FLOOR_SHADOW
|
|
1646
|
-
},
|
|
1647
|
-
children: label
|
|
1648
|
-
}
|
|
1649
|
-
)
|
|
1650
|
-
] }) });
|
|
1651
|
-
};
|
|
1652
|
-
|
|
1653
|
-
// src/text/token-stream/index.tsx
|
|
1654
|
-
import { AbsoluteFill as AbsoluteFill7, interpolate as interpolate14, useCurrentFrame as useCurrentFrame18, useVideoConfig as useVideoConfig17 } from "remotion";
|
|
1655
|
-
import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1656
|
-
function jitter(i, seed) {
|
|
1657
|
-
let h = Math.imul(i + 1, 374761393) + Math.imul(seed, 668265263);
|
|
1658
|
-
h = Math.imul(h ^ h >>> 13, 1274126177);
|
|
1659
|
-
return ((h ^ h >>> 16) >>> 0) / 4294967295;
|
|
1660
|
-
}
|
|
1661
|
-
var TokenStream = ({
|
|
1662
|
-
text,
|
|
1663
|
-
tokensPerSecond = 9,
|
|
1664
|
-
accentColor = ACCENT,
|
|
1665
|
-
startAt = 8,
|
|
1666
|
-
tokens = {}
|
|
1667
|
-
}) => {
|
|
1668
|
-
const frame = useCurrentFrame18();
|
|
1669
|
-
const { fps } = useVideoConfig17();
|
|
1670
|
-
const {
|
|
1671
|
-
fontFamily = resolveTypeface("display"),
|
|
1672
|
-
fontSize = 54,
|
|
1673
|
-
textColor = FLOOR_TEXT
|
|
1674
|
-
} = tokens;
|
|
1675
|
-
const words = text.split(" ").filter(Boolean);
|
|
1676
|
-
const base = fps / tokensPerSecond;
|
|
1677
|
-
const arrivals = [];
|
|
1678
|
-
let tAcc = startAt;
|
|
1679
|
-
for (let i = 0; i < words.length; i++) {
|
|
1680
|
-
const j = jitter(i, 7);
|
|
1681
|
-
tAcc += base * (0.55 + j * 0.9) + (j > 0.86 ? base * 2.2 : 0);
|
|
1682
|
-
arrivals.push(tAcc);
|
|
1683
|
-
}
|
|
1684
|
-
const done = arrivals.length ? arrivals[arrivals.length - 1] + 6 : startAt;
|
|
1685
|
-
const streaming = frame < done;
|
|
1686
|
-
const cursorOpacity = streaming ? 0.55 + Math.sin(2 * Math.PI * 2.2 * frame / fps) * 0.45 : frame < done + 24 ? Math.round((frame - done) / 8 % 2) === 0 ? 1 : 0.1 : interpolate14(frame, [done + 24, done + 36], [1, 0], {
|
|
1687
|
-
extrapolateLeft: "clamp",
|
|
1688
|
-
extrapolateRight: "clamp"
|
|
1689
|
-
});
|
|
1690
|
-
const arrivedCount = arrivals.filter((a) => frame >= a).length;
|
|
1691
|
-
const cursorAt = Math.max(0, arrivedCount - 1);
|
|
1692
|
-
return /* @__PURE__ */ jsx19(AbsoluteFill7, { style: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx19(
|
|
1693
|
-
"div",
|
|
1694
|
-
{
|
|
1695
|
-
style: {
|
|
1696
|
-
maxWidth: "68%",
|
|
1697
|
-
fontFamily,
|
|
1698
|
-
fontSize,
|
|
1699
|
-
fontWeight: 500,
|
|
1700
|
-
lineHeight: 1.42,
|
|
1701
|
-
letterSpacing: "-0.005em",
|
|
1702
|
-
color: textColor,
|
|
1703
|
-
textShadow: FLOOR_SHADOW
|
|
1704
|
-
},
|
|
1705
|
-
children: words.map((w, i) => {
|
|
1706
|
-
const a = arrivals[i];
|
|
1707
|
-
const o = interpolate14(frame, [a, a + 4], [0, 1], {
|
|
1708
|
-
extrapolateLeft: "clamp",
|
|
1709
|
-
extrapolateRight: "clamp"
|
|
1710
|
-
});
|
|
1711
|
-
const rise = interpolate14(frame, [a, a + 5], [6, 0], {
|
|
1712
|
-
extrapolateLeft: "clamp",
|
|
1713
|
-
extrapolateRight: "clamp"
|
|
1714
|
-
});
|
|
1715
|
-
return /* @__PURE__ */ jsxs12(
|
|
1716
|
-
"span",
|
|
1717
|
-
{
|
|
1718
|
-
style: {
|
|
1719
|
-
display: "inline-block",
|
|
1720
|
-
position: "relative",
|
|
1721
|
-
transform: `translateY(${rise}px)`,
|
|
1722
|
-
marginRight: "0.26em"
|
|
1723
|
-
},
|
|
1724
|
-
children: [
|
|
1725
|
-
/* @__PURE__ */ jsx19("span", { style: { opacity: o }, children: w }),
|
|
1726
|
-
i === cursorAt && /* @__PURE__ */ jsx19(
|
|
1727
|
-
"span",
|
|
1728
|
-
{
|
|
1729
|
-
style: {
|
|
1730
|
-
position: "absolute",
|
|
1731
|
-
left: arrivedCount === 0 ? 0 : "100%",
|
|
1732
|
-
marginLeft: arrivedCount === 0 ? 0 : "0.13em",
|
|
1733
|
-
bottom: fontSize * -0.08,
|
|
1734
|
-
width: fontSize * 0.5,
|
|
1735
|
-
height: fontSize * 1.02,
|
|
1736
|
-
background: accentColor,
|
|
1737
|
-
borderRadius: 3,
|
|
1738
|
-
opacity: cursorOpacity
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
|
-
)
|
|
1742
|
-
]
|
|
1743
|
-
},
|
|
1744
|
-
i
|
|
1745
|
-
);
|
|
1746
|
-
})
|
|
1747
|
-
}
|
|
1748
|
-
) });
|
|
1749
|
-
};
|
|
1750
|
-
|
|
1751
|
-
// src/text/strikethrough-replace/index.tsx
|
|
1752
|
-
import { useMemo as useMemo2 } from "react";
|
|
1753
|
-
import { interpolate as interpolate15, useCurrentFrame as useCurrentFrame19, useVideoConfig as useVideoConfig18 } from "remotion";
|
|
1754
|
-
import { fitTextOnNLines as fitTextOnNLines5 } from "@remotion/layout-utils";
|
|
1755
|
-
import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1756
|
-
function StrikethroughReplace({
|
|
1757
|
-
from,
|
|
1758
|
-
to,
|
|
1759
|
-
lineColor = "#ff5e3a",
|
|
1760
|
-
fontSize = 48,
|
|
1761
|
-
color = FLOOR_TEXT,
|
|
1762
|
-
fontFamily = resolveTypeface("display"),
|
|
1763
|
-
fontWeight = 600,
|
|
1764
|
-
speed = 1,
|
|
1765
|
-
className
|
|
1766
|
-
}) {
|
|
1767
|
-
const frame = useCurrentFrame19() * speed;
|
|
1768
|
-
const { durationInFrames } = useVideoConfig18();
|
|
1769
|
-
const strikeEnd = durationInFrames * 0.4;
|
|
1770
|
-
const fadeStart = durationInFrames * 0.4;
|
|
1771
|
-
const fadeEnd = durationInFrames * 0.6;
|
|
1772
|
-
const linePct = interpolate15(frame, [0, strikeEnd], [0, 100], {
|
|
1773
|
-
extrapolateLeft: "clamp",
|
|
1774
|
-
extrapolateRight: "clamp"
|
|
1775
|
-
});
|
|
1776
|
-
const fromOpacity = interpolate15(frame, [fadeStart, fadeEnd], [1, 0], {
|
|
1777
|
-
extrapolateLeft: "clamp",
|
|
1778
|
-
extrapolateRight: "clamp"
|
|
1779
|
-
});
|
|
1780
|
-
const toOpacity = interpolate15(frame, [fadeStart, fadeEnd], [0, 1], {
|
|
1781
|
-
extrapolateLeft: "clamp",
|
|
1782
|
-
extrapolateRight: "clamp"
|
|
1783
|
-
});
|
|
1784
|
-
const toY = interpolate15(frame, [fadeStart, fadeEnd], [8, 0], {
|
|
1785
|
-
extrapolateLeft: "clamp",
|
|
1786
|
-
extrapolateRight: "clamp"
|
|
1787
|
-
});
|
|
1788
|
-
const fittedFontSize = useMemo2(() => {
|
|
1789
|
-
const longest = [from, to].map((s) => (s ?? "").trim()).sort((a, b) => b.length - a.length)[0] || "";
|
|
1790
|
-
if (!longest) return fontSize;
|
|
1791
|
-
try {
|
|
1792
|
-
const { fontSize: fs } = fitTextOnNLines5({
|
|
1793
|
-
text: longest,
|
|
1794
|
-
maxLines: 1,
|
|
1795
|
-
maxBoxWidth: 1400,
|
|
1796
|
-
fontFamily,
|
|
1797
|
-
fontWeight,
|
|
1798
|
-
letterSpacing: "-0.03em",
|
|
1799
|
-
maxFontSize: fontSize,
|
|
1800
|
-
validateFontIsLoaded: false
|
|
1801
|
-
});
|
|
1802
|
-
return resolveFitFontSize({
|
|
1803
|
-
singleLineFitFontSize: fs,
|
|
1804
|
-
minFontSize: Math.round(fontSize * 0.5),
|
|
1805
|
-
maxFontSize: fontSize
|
|
1806
|
-
}).fontSize;
|
|
1807
|
-
} catch {
|
|
1808
|
-
return fontSize;
|
|
1809
|
-
}
|
|
1810
|
-
}, [from, to, fontFamily, fontSize, fontWeight]);
|
|
1811
|
-
const textStyle = {
|
|
1812
|
-
fontSize: fittedFontSize,
|
|
1813
|
-
fontWeight,
|
|
1814
|
-
color,
|
|
1815
|
-
letterSpacing: "-0.03em",
|
|
1816
|
-
fontFamily,
|
|
1817
|
-
whiteSpace: "nowrap",
|
|
1818
|
-
textShadow: resolveContrast().textShadow
|
|
1819
|
-
};
|
|
1820
|
-
return /* @__PURE__ */ jsx20(TextStage, { children: /* @__PURE__ */ jsxs13(
|
|
1821
|
-
"div",
|
|
1822
|
-
{
|
|
1823
|
-
style: {
|
|
1824
|
-
position: "relative",
|
|
1825
|
-
display: "inline-flex",
|
|
1826
|
-
alignItems: "center",
|
|
1827
|
-
justifyContent: "center"
|
|
1828
|
-
},
|
|
1829
|
-
children: [
|
|
1830
|
-
/* @__PURE__ */ jsxs13(
|
|
1831
|
-
"span",
|
|
1832
|
-
{
|
|
1833
|
-
className,
|
|
1834
|
-
style: {
|
|
1835
|
-
...textStyle,
|
|
1836
|
-
position: "absolute",
|
|
1837
|
-
opacity: fromOpacity
|
|
1838
|
-
},
|
|
1839
|
-
children: [
|
|
1840
|
-
from,
|
|
1841
|
-
/* @__PURE__ */ jsx20(
|
|
1842
|
-
"span",
|
|
1843
|
-
{
|
|
1844
|
-
"aria-hidden": true,
|
|
1845
|
-
style: {
|
|
1846
|
-
position: "absolute",
|
|
1847
|
-
left: 0,
|
|
1848
|
-
top: "50%",
|
|
1849
|
-
height: Math.max(2, Math.round(fittedFontSize * 0.08)),
|
|
1850
|
-
width: `${linePct}%`,
|
|
1851
|
-
background: lineColor,
|
|
1852
|
-
transform: "translateY(-50%)",
|
|
1853
|
-
borderRadius: 2
|
|
1854
|
-
}
|
|
1855
|
-
}
|
|
1856
|
-
)
|
|
1857
|
-
]
|
|
1858
|
-
}
|
|
1859
|
-
),
|
|
1860
|
-
/* @__PURE__ */ jsx20(
|
|
1861
|
-
"span",
|
|
1862
|
-
{
|
|
1863
|
-
className,
|
|
1864
|
-
style: {
|
|
1865
|
-
...textStyle,
|
|
1866
|
-
opacity: toOpacity,
|
|
1867
|
-
transform: `translateY(${toY}px)`
|
|
1868
|
-
},
|
|
1869
|
-
children: to
|
|
1870
|
-
}
|
|
1871
|
-
)
|
|
1872
|
-
]
|
|
1873
|
-
}
|
|
1874
|
-
) });
|
|
1875
|
-
}
|
|
1876
|
-
|
|
1877
|
-
// src/text/masked-slide-reveal/index.tsx
|
|
1878
|
-
import { useMemo as useMemo3 } from "react";
|
|
1879
|
-
import { spring as spring10, useCurrentFrame as useCurrentFrame20, useVideoConfig as useVideoConfig19 } from "remotion";
|
|
1880
|
-
import { fitTextOnNLines as fitTextOnNLines6 } from "@remotion/layout-utils";
|
|
1881
|
-
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1882
|
-
function MaskedSlideReveal({
|
|
1883
|
-
text,
|
|
1884
|
-
staggerDelay = 3,
|
|
1885
|
-
fontSize = 72,
|
|
1886
|
-
color = FLOOR_TEXT,
|
|
1887
|
-
fontFamily = resolveTypeface("display"),
|
|
1888
|
-
fontWeight = 700,
|
|
1889
|
-
speed = 1,
|
|
1890
|
-
className
|
|
1891
|
-
}) {
|
|
1892
|
-
const frame = useCurrentFrame20() * speed;
|
|
1893
|
-
const { fps } = useVideoConfig19();
|
|
1894
|
-
const words = text.split(" ");
|
|
1895
|
-
const fittedFontSize = useMemo3(() => {
|
|
1896
|
-
const t = (text ?? "").trim();
|
|
1897
|
-
if (!t) return fontSize;
|
|
1898
|
-
try {
|
|
1899
|
-
const { fontSize: fs } = fitTextOnNLines6({
|
|
1900
|
-
text: t,
|
|
1901
|
-
maxLines: 2,
|
|
1902
|
-
maxBoxWidth: 1500,
|
|
1903
|
-
fontFamily,
|
|
1904
|
-
fontWeight,
|
|
1905
|
-
letterSpacing: "-0.03em",
|
|
1906
|
-
maxFontSize: fontSize,
|
|
1907
|
-
validateFontIsLoaded: false
|
|
1908
|
-
});
|
|
1909
|
-
return resolveFitFontSize({
|
|
1910
|
-
singleLineFitFontSize: fs,
|
|
1911
|
-
minFontSize: Math.round(fontSize * 0.5),
|
|
1912
|
-
maxFontSize: fontSize
|
|
1913
|
-
}).fontSize;
|
|
1914
|
-
} catch {
|
|
1915
|
-
return fontSize;
|
|
1916
|
-
}
|
|
1917
|
-
}, [text, fontFamily, fontSize, fontWeight]);
|
|
1918
|
-
return /* @__PURE__ */ jsx21(TextStage, { children: /* @__PURE__ */ jsx21(
|
|
1919
|
-
"span",
|
|
1920
|
-
{
|
|
1921
|
-
className,
|
|
1922
|
-
style: {
|
|
1923
|
-
fontSize: fittedFontSize,
|
|
1924
|
-
fontWeight,
|
|
1925
|
-
color,
|
|
1926
|
-
letterSpacing: "-0.03em",
|
|
1927
|
-
fontFamily,
|
|
1928
|
-
textShadow: resolveContrast().textShadow
|
|
1929
|
-
},
|
|
1930
|
-
children: words.map((word, i) => {
|
|
1931
|
-
const t = spring10({
|
|
1932
|
-
frame: frame - i * staggerDelay,
|
|
1933
|
-
fps,
|
|
1934
|
-
config: { damping: 14 }
|
|
1935
|
-
});
|
|
1936
|
-
return /* @__PURE__ */ jsx21(
|
|
1937
|
-
"span",
|
|
1938
|
-
{
|
|
1939
|
-
style: {
|
|
1940
|
-
display: "inline-block",
|
|
1941
|
-
overflow: "hidden",
|
|
1942
|
-
verticalAlign: "bottom",
|
|
1943
|
-
lineHeight: 1,
|
|
1944
|
-
marginRight: "0.25em"
|
|
1945
|
-
},
|
|
1946
|
-
children: /* @__PURE__ */ jsx21(
|
|
1947
|
-
"span",
|
|
1948
|
-
{
|
|
1949
|
-
style: {
|
|
1950
|
-
display: "inline-block",
|
|
1951
|
-
transform: `translateY(${(1 - t) * 100}%)`
|
|
1952
|
-
},
|
|
1953
|
-
children: word
|
|
1954
|
-
}
|
|
1955
|
-
)
|
|
1956
|
-
},
|
|
1957
|
-
i
|
|
1958
|
-
);
|
|
1959
|
-
})
|
|
1960
|
-
}
|
|
1961
|
-
) });
|
|
1962
|
-
}
|
|
1963
|
-
|
|
1964
|
-
// src/text/blur-reveal/config.ts
|
|
1965
|
-
import { z } from "zod";
|
|
1966
|
-
var paramsSchema = z.object({
|
|
1967
|
-
text: z.string().min(1).max(160).describe(
|
|
1968
|
-
"The text to reveal. Shorter reads best \u2014 longer strings make the focus-pull feel slow. Auto-fits: long copy shrinks to fit the frame (then wraps), so it no longer overflows."
|
|
1969
|
-
),
|
|
1970
|
-
blur: z.number().min(0).max(40).default(10).describe(
|
|
1971
|
-
"Initial blur radius in pixels. Higher = more dramatic focus-pull. 6\u201314 is the sweet spot."
|
|
1972
|
-
),
|
|
1973
|
-
fontSize: z.number().min(16).max(240).default(96).describe(
|
|
1974
|
-
"Font size in pixels at the canonical 1920\xD71080 frame."
|
|
1975
|
-
),
|
|
1976
|
-
fontWeight: z.number().min(100).max(900).default(600).describe(
|
|
1977
|
-
"CSS font weight. 600 reads as confident; 800+ feels like a headline."
|
|
1978
|
-
),
|
|
1979
|
-
color: z.string().default(FLOOR_TEXT).describe(
|
|
1980
|
-
"Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."
|
|
1981
|
-
),
|
|
1982
|
-
fontFamily: z.string().default(resolveTypeface("display")).describe(
|
|
1983
|
-
"Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it."
|
|
1984
|
-
),
|
|
1985
|
-
speed: z.number().min(0.25).max(4).default(1).describe(
|
|
1986
|
-
"Playback speed multiplier. 1 = normal; 2 = twice as fast."
|
|
1987
|
-
)
|
|
1988
|
-
}).passthrough();
|
|
1989
|
-
var config = {
|
|
1990
|
-
id: "blur-reveal",
|
|
1991
|
-
component: BlurReveal,
|
|
1992
|
-
name: "Blur Reveal",
|
|
1993
|
-
category: "text",
|
|
1994
|
-
kind: "component",
|
|
1995
|
-
version: "0.1.1",
|
|
1996
|
-
intent: "reveal-text",
|
|
1997
|
-
description: 'Single line of text fades in from a heavy gaussian blur into sharp focus. The "focus pull" feel makes it ideal for cinematic title cards, brand reveals, and product taglines where the audience should land on one phrase.',
|
|
1998
|
-
useWhen: "Hero opens, brand statements, single-line callouts. Avoid for >40-character strings (the blur duration scales with content and starts feeling sluggish), and avoid combining with another text primitive that also fades \u2014 pick one focal element per beat.",
|
|
1999
|
-
pairsWith: ["mesh-gradient-bg", "dynamic-grid", "success-confetti"],
|
|
2000
|
-
avoidWith: ["typewriter", "staggered-fade-up"],
|
|
2001
|
-
tier: "standard",
|
|
2002
|
-
useCase: ["title-over-footage", "full-scene"],
|
|
2003
|
-
tags: ["text", "reveal", "blur", "cinematic", "title", "hero"],
|
|
2004
|
-
mood: ["cinematic", "editorial", "minimal", "soft"],
|
|
2005
|
-
paramsSchema,
|
|
2006
|
-
propDefaults: { blur: 10, fontSize: 96, fontWeight: 600, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), speed: 1 },
|
|
2007
|
-
examples: [
|
|
2008
|
-
{
|
|
2009
|
-
name: "editorial",
|
|
2010
|
-
mood: ["editorial", "minimal"],
|
|
2011
|
-
params: { text: "A film by someone", blur: 8, fontSize: 96, fontWeight: 600, color: FLOOR_TEXT, speed: 1 },
|
|
2012
|
-
description: "Calm, magazine-style reveal over footage. Default values; safest pick."
|
|
2013
|
-
},
|
|
2014
|
-
{
|
|
2015
|
-
name: "cinematic-bold",
|
|
2016
|
-
mood: ["cinematic", "aggressive"],
|
|
2017
|
-
params: { text: "CINEMATIC", blur: 14, fontSize: 144, fontWeight: 800, color: TEXT_HI, speed: 0.85 },
|
|
2018
|
-
description: "Heavier blur + bigger weight + slower speed \u2014 feels like a film opening."
|
|
2019
|
-
},
|
|
2020
|
-
{
|
|
2021
|
-
name: "product-tagline",
|
|
2022
|
-
mood: ["corporate", "minimal"],
|
|
2023
|
-
params: { text: "Built for builders.", blur: 6, fontSize: 72, fontWeight: 500, color: FLOOR_TEXT, speed: 1.2 },
|
|
2024
|
-
description: "Subtle product-page tagline. Lower blur, lighter weight, slightly faster."
|
|
2025
|
-
}
|
|
2026
|
-
],
|
|
2027
|
-
textParam: "text",
|
|
2028
|
-
subtextParam: null,
|
|
2029
|
-
tokens: [
|
|
2030
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2031
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2032
|
-
],
|
|
2033
|
-
durationInFrames: 90,
|
|
2034
|
-
fps: 30,
|
|
2035
|
-
width: 1920,
|
|
2036
|
-
height: 1080,
|
|
2037
|
-
preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "editorial" }
|
|
2038
|
-
};
|
|
2039
|
-
|
|
2040
|
-
// src/text/cinematic-title/config.ts
|
|
2041
|
-
import { z as z2 } from "zod";
|
|
2042
|
-
var tokensSchema = z2.object({
|
|
2043
|
-
fontFamily: z2.string().default(resolveTypeface("display")),
|
|
2044
|
-
fontSize: z2.number().optional(),
|
|
2045
|
-
subtextFontSize: z2.number().optional(),
|
|
2046
|
-
textColor: z2.string().default(FLOOR_TEXT),
|
|
2047
|
-
accentColor: z2.string().optional(),
|
|
2048
|
-
letterSpacing: z2.number().optional()
|
|
2049
|
-
}).passthrough();
|
|
2050
|
-
var paramsSchema2 = z2.object({
|
|
2051
|
-
text: z2.string().min(1).max(80).describe("Primary title text. Auto-fits: long copy shrinks to fit the frame (then wraps/ellipsizes), so you are not capped at a cramped line."),
|
|
2052
|
-
subtitle: z2.string().max(140).optional().describe('Optional subtitle line. Used for byline / film-credit style ("a film by ..."). Auto-fits and wraps to 2 lines.'),
|
|
2053
|
-
variant: z2.enum(["default", "bold", "zoom"]).default("default").describe(
|
|
2054
|
-
"Visual variant. default: letterboxed fade with letter-spacing tighten. bold: heavier weight + spring entrance. zoom: scale-from-blur with overshoot."
|
|
2055
|
-
),
|
|
2056
|
-
position: z2.enum(["center", "top", "bottom"]).default("center").describe("Vertical position of the title block."),
|
|
2057
|
-
tokens: tokensSchema.default({}).describe("Visual tokens. fontFamily, fontSize, textColor, accentColor, letterSpacing.")
|
|
2058
|
-
}).passthrough();
|
|
2059
|
-
var config2 = {
|
|
2060
|
-
id: "cinematic-title",
|
|
2061
|
-
component: CinematicTitle,
|
|
2062
|
-
name: "Cinematic Title",
|
|
2063
|
-
category: "text",
|
|
2064
|
-
kind: "component",
|
|
2065
|
-
version: "0.1.1",
|
|
2066
|
-
intent: "name-card",
|
|
2067
|
-
description: "Full-screen title card with cinematic letterbox bars sliding in, primary text fading up, and optional subtitle. Three variants tune the entrance physics: default (subtle), bold (heavy spring), zoom (scale-from-blur with overshoot).",
|
|
2068
|
-
useWhen: "Film opens, brand intros, dramatic chapter cards. Avoid for in-story callouts or quick beats \u2014 the letterbox bars and exit animation eat 40+ frames.",
|
|
2069
|
-
pairsWith: ["light-leak", "mesh-gradient-bg", "parallax", "vignette"],
|
|
2070
|
-
avoidWith: ["lower-third", "kinetic-type"],
|
|
2071
|
-
tier: "standard",
|
|
2072
|
-
useCase: ["intro", "full-scene"],
|
|
2073
|
-
tags: ["text", "title", "cinematic", "letterbox", "hero", "card"],
|
|
2074
|
-
mood: ["cinematic", "editorial"],
|
|
2075
|
-
paramsSchema: paramsSchema2,
|
|
2076
|
-
propDefaults: { variant: "default", position: "center" },
|
|
2077
|
-
examples: [
|
|
2078
|
-
{
|
|
2079
|
-
name: "classic",
|
|
2080
|
-
mood: ["cinematic"],
|
|
2081
|
-
params: { text: "CINEMATIC", subtitle: "A film by someone", variant: "default", position: "center" }
|
|
2082
|
-
},
|
|
2083
|
-
{
|
|
2084
|
-
name: "bold-impact",
|
|
2085
|
-
mood: ["cinematic", "aggressive"],
|
|
2086
|
-
params: { text: "CHAPTER ONE", variant: "bold", position: "center" }
|
|
2087
|
-
},
|
|
2088
|
-
{
|
|
2089
|
-
name: "zoom-reveal",
|
|
2090
|
-
mood: ["cinematic"],
|
|
2091
|
-
params: { text: "NEXT", variant: "zoom", position: "center" }
|
|
2092
|
-
}
|
|
2093
|
-
],
|
|
2094
|
-
textParam: "text",
|
|
2095
|
-
subtextParam: "subtitle",
|
|
2096
|
-
tokens: [
|
|
2097
|
-
{ propPath: "tokens.textColor", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2098
|
-
{ propPath: "tokens.accentColor", cssVar: "--cf-accent", fallback: WARNING, brandKitPath: "colors.accent" },
|
|
2099
|
-
{ propPath: "tokens.fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2100
|
-
],
|
|
2101
|
-
durationInFrames: 120,
|
|
2102
|
-
fps: 30,
|
|
2103
|
-
width: 1920,
|
|
2104
|
-
height: 1080,
|
|
2105
|
-
preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "classic" }
|
|
2106
|
-
};
|
|
2107
|
-
|
|
2108
|
-
// src/text/inline-highlight/config.ts
|
|
2109
|
-
import { z as z3 } from "zod";
|
|
2110
|
-
var paramsSchema3 = z3.object({
|
|
2111
|
-
// `before` was required; relaxed to optional with empty default so a
|
|
2112
|
-
// degenerate "single highlighted word, no preceding context" pick is
|
|
2113
|
-
// valid. The renderer treats empty `before` as no-op text. Agent
|
|
2114
|
-
// picks where the highlighted word is the entire phrase (a common
|
|
2115
|
-
// editorial choice on short hooks) no longer crash the render with
|
|
2116
|
-
// `inline-highlight: invalid params — before: Required`. See Block 2
|
|
2117
|
-
// (editorial intelligence) for the upstream fix: validate agent tool
|
|
2118
|
-
// calls against the registry's paramsSchema before accepting them,
|
|
2119
|
-
// so the agent self-corrects instead of relying on schema relaxation.
|
|
2120
|
-
before: z3.string().default("").describe('Text leading up to the highlighted word, including trailing space if any. Empty string is valid for "single word" picks.'),
|
|
2121
|
-
highlight: z3.string().min(1).describe("The single word or phrase to emphasize."),
|
|
2122
|
-
after: z3.string().default("").describe("Text after the highlight, including leading space if any."),
|
|
2123
|
-
baseColor: z3.string().default(FLOOR_TEXT).describe("Color of the surrounding (non-highlighted) text. Defaults to a video-safe off-white so it survives over footage; pass $brand:colors.textOnMedia to theme it."),
|
|
2124
|
-
highlightColor: z3.string().default(ACCENT_STRONG).describe("Color of the emphasized word. A warm accent by default; use a brand-kit accent for cascade."),
|
|
2125
|
-
fontSize: z3.number().min(16).max(180).default(72).describe("Font size in pixels at 1920\xD71080."),
|
|
2126
|
-
fontWeight: z3.number().min(100).max(900).default(600).describe("CSS font weight applied uniformly."),
|
|
2127
|
-
speed: z3.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
|
|
2128
|
-
fontFamily: z3.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
|
|
2129
|
-
}).passthrough();
|
|
2130
|
-
var config3 = {
|
|
2131
|
-
id: "inline-highlight",
|
|
2132
|
-
component: InlineHighlight,
|
|
2133
|
-
name: "Inline Highlight",
|
|
2134
|
-
category: "text",
|
|
2135
|
-
kind: "component",
|
|
2136
|
-
version: "0.1.1",
|
|
2137
|
-
intent: "emphasize-word",
|
|
2138
|
-
description: "Single sentence with one word color-shifting from a muted base color to a brand accent. The eye lands on the highlighted word naturally because the surrounding text fades to background.",
|
|
2139
|
-
useWhen: 'Caption callouts (e.g., "the user said {important_word}"), pull-quotes from a transcript, when you want to draw the eye to one specific word in a longer phrase. Avoid for short text where the highlight has nothing to contrast against.',
|
|
2140
|
-
pairsWith: ["marker-highlight", "shimmer-sweep", "mesh-gradient-bg"],
|
|
2141
|
-
avoidWith: ["marker-highlight"],
|
|
2142
|
-
tier: "standard",
|
|
2143
|
-
useCase: ["emphasis"],
|
|
2144
|
-
tags: ["text", "highlight", "emphasis", "word", "caption", "callout"],
|
|
2145
|
-
mood: ["editorial", "minimal", "corporate"],
|
|
2146
|
-
paramsSchema: paramsSchema3,
|
|
2147
|
-
propDefaults: { before: "", after: "", baseColor: FLOOR_TEXT, highlightColor: ACCENT_STRONG, fontSize: 72, fontWeight: 600, speed: 1, fontFamily: resolveTypeface("display") },
|
|
2148
|
-
examples: [
|
|
2149
|
-
{
|
|
2150
|
-
name: "product-emphasis",
|
|
2151
|
-
mood: ["corporate"],
|
|
2152
|
-
params: { before: "Built for ", highlight: "builders", after: ".", baseColor: FLOOR_TEXT, highlightColor: ACCENT_STRONG, fontSize: 80, fontWeight: 700, speed: 1 }
|
|
2153
|
-
},
|
|
2154
|
-
{
|
|
2155
|
-
name: "quote-pull",
|
|
2156
|
-
mood: ["editorial"],
|
|
2157
|
-
params: { before: "It just ", highlight: "works", after: ".", baseColor: TEXT_MUTED, highlightColor: TEAL, fontSize: 96, fontWeight: 500, speed: 0.9 }
|
|
2158
|
-
}
|
|
2159
|
-
],
|
|
2160
|
-
textParam: "highlight",
|
|
2161
|
-
subtextParam: null,
|
|
2162
|
-
tokens: [
|
|
2163
|
-
{ propPath: "baseColor", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2164
|
-
{ propPath: "highlightColor", cssVar: "--cf-accent", fallback: ACCENT_STRONG, brandKitPath: "colors.accent" },
|
|
2165
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2166
|
-
],
|
|
2167
|
-
durationInFrames: 90,
|
|
2168
|
-
fps: 30,
|
|
2169
|
-
width: 1920,
|
|
2170
|
-
height: 1080,
|
|
2171
|
-
preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "product-emphasis" }
|
|
2172
|
-
};
|
|
2173
|
-
|
|
2174
|
-
// src/text/karaoke/config.ts
|
|
2175
|
-
import { z as z4 } from "zod";
|
|
2176
|
-
var wordSchema = z4.object({
|
|
2177
|
-
text: z4.string().min(1),
|
|
2178
|
-
startMs: z4.number().min(0),
|
|
2179
|
-
endMs: z4.number().min(0)
|
|
2180
|
-
});
|
|
2181
|
-
var tokensSchema2 = z4.object({
|
|
2182
|
-
fontFamily: z4.string().default(resolveTypeface("caption")),
|
|
2183
|
-
fontSize: z4.number().optional(),
|
|
2184
|
-
textColor: z4.string().default(FLOOR_TEXT),
|
|
2185
|
-
activeColor: z4.string().optional(),
|
|
2186
|
-
activeScale: z4.number().optional()
|
|
2187
|
-
}).passthrough();
|
|
2188
|
-
var paramsSchema4 = z4.object({
|
|
2189
|
-
words: z4.array(wordSchema).min(1).describe(
|
|
2190
|
-
"Array of timed words. Each word has text + startMs/endMs in milliseconds relative to the clip start. Source from the transcript."
|
|
2191
|
-
),
|
|
2192
|
-
position: z4.enum(["center", "left", "right", "bottom"]).default("center").describe('Block position. "bottom" is canonical for caption-style overlays.'),
|
|
2193
|
-
tokens: tokensSchema2.default({}).describe("Visual tokens. fontFamily, fontSize, textColor, activeColor, activeScale.")
|
|
2194
|
-
}).passthrough();
|
|
2195
|
-
var config4 = {
|
|
2196
|
-
id: "karaoke",
|
|
2197
|
-
component: Karaoke,
|
|
2198
|
-
name: "Karaoke",
|
|
2199
|
-
category: "text",
|
|
2200
|
-
kind: "component",
|
|
2201
|
-
version: "0.1.1",
|
|
2202
|
-
intent: "caption-sync",
|
|
2203
|
-
description: "Word-by-word highlighted captions synced to speech timing. Each word gets a spring scale boost and accent color when its timestamp is active. Past words stay full-opacity; future words dim to 0.4. Reads as confident, transcript-backed captioning.",
|
|
2204
|
-
useWhen: "Podcast clips, interview reels, any video where the audio is the source and the captions need to land word-perfect. Requires structured `words[]` from a transcript pipeline (Groq Whisper, AssemblyAI, etc.) \u2014 do NOT use plain text. For non-synced text, use typewriter or staggered-fade-up.",
|
|
2205
|
-
pairsWith: ["lower-third", "mesh-gradient-bg", "pulsing-indicator"],
|
|
2206
|
-
avoidWith: ["typewriter", "staggered-fade-up", "kinetic-type"],
|
|
2207
|
-
tier: "niche",
|
|
2208
|
-
useCase: ["title-over-footage"],
|
|
2209
|
-
tags: ["text", "captions", "karaoke", "synced", "transcript", "word-level", "podcast"],
|
|
2210
|
-
mood: ["editorial", "breaking-news", "minimal"],
|
|
2211
|
-
paramsSchema: paramsSchema4,
|
|
2212
|
-
propDefaults: { position: "center" },
|
|
2213
|
-
examples: [
|
|
2214
|
-
{
|
|
2215
|
-
name: "podcast-bottom",
|
|
2216
|
-
mood: ["editorial"],
|
|
2217
|
-
params: {
|
|
2218
|
-
words: [
|
|
2219
|
-
{ text: "The", startMs: 0, endMs: 200 },
|
|
2220
|
-
{ text: "whole", startMs: 200, endMs: 500 },
|
|
2221
|
-
{ text: "point", startMs: 500, endMs: 800 },
|
|
2222
|
-
{ text: "is", startMs: 800, endMs: 1e3 },
|
|
2223
|
-
{ text: "distribution.", startMs: 1e3, endMs: 1600 }
|
|
2224
|
-
],
|
|
2225
|
-
position: "bottom"
|
|
2226
|
-
},
|
|
2227
|
-
description: "Standard podcast-clip caption position with 5 words sample."
|
|
2228
|
-
}
|
|
2229
|
-
],
|
|
2230
|
-
textParam: null,
|
|
2231
|
-
subtextParam: null,
|
|
2232
|
-
tokens: [
|
|
2233
|
-
{ propPath: "tokens.textColor", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2234
|
-
{ propPath: "tokens.activeColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
|
|
2235
|
-
{ propPath: "tokens.fontFamily", cssVar: "--cf-font-caption", fallback: resolveTypeface("caption"), brandKitPath: "fonts.caption" }
|
|
2236
|
-
],
|
|
2237
|
-
durationInFrames: 60,
|
|
2238
|
-
fps: 30,
|
|
2239
|
-
width: 1080,
|
|
2240
|
-
height: 1920,
|
|
2241
|
-
preview: { thumbnailFrame: 30, mode: "loop", defaultExample: "podcast-bottom" }
|
|
2242
|
-
};
|
|
2243
|
-
|
|
2244
|
-
// src/text/kinetic-type/config.ts
|
|
2245
|
-
import { z as z5 } from "zod";
|
|
2246
|
-
var tokensSchema3 = z5.object({
|
|
2247
|
-
fontFamily: z5.string().default(resolveTypeface("display")),
|
|
2248
|
-
fontSize: z5.number().optional(),
|
|
2249
|
-
textColor: z5.string().default(FLOOR_TEXT)
|
|
2250
|
-
}).passthrough();
|
|
2251
|
-
var paramsSchema5 = z5.object({
|
|
2252
|
-
text: z5.string().min(1).max(200).describe("Multi-word phrase. Each word animates independently with stagger. Auto-fits: the phrase shrinks to fit the frame (then wraps) so you are not capped at a short line."),
|
|
2253
|
-
animation: z5.enum(["fly-in", "rotate", "scale-bounce", "cascade"]).default("fly-in").describe(
|
|
2254
|
-
"Per-word animation style. fly-in: slide up. rotate: rotate from tilt. scale-bounce: spring scale pop. cascade: drop from above."
|
|
2255
|
-
),
|
|
2256
|
-
position: z5.enum(["center", "left", "right"]).default("center").describe("Horizontal alignment of the word block."),
|
|
2257
|
-
accentColor: z5.string().default(ACCENT).describe("Accent for the payoff (last) word. Empty string disables."),
|
|
2258
|
-
tokens: tokensSchema3.default({}).describe("Visual tokens. fontFamily, fontSize, textColor.")
|
|
2259
|
-
}).passthrough();
|
|
2260
|
-
var config5 = {
|
|
2261
|
-
id: "kinetic-type",
|
|
2262
|
-
component: KineticType,
|
|
2263
|
-
name: "Kinetic Type",
|
|
2264
|
-
category: "text",
|
|
2265
|
-
kind: "component",
|
|
2266
|
-
version: "0.2.1",
|
|
2267
|
-
intent: "reveal-text",
|
|
2268
|
-
description: "Per-word motion typography with four animation styles. Each word springs in with stagger, bringing energy and pace to multi-word phrases. Different from staggered-fade-up: words have actual rotation/scale dynamics, not just position+fade.",
|
|
2269
|
-
useWhen: "Hype reels, kinetic intros, brand statements that need movement. 3\u201310 words is the sweet spot. Avoid for read-along captions (use karaoke) or single words (use blur-reveal/tracking-in). The cascade and rotate variants feel playful \u2014 pick fly-in for editorial work.",
|
|
2270
|
-
pairsWith: ["mesh-gradient-bg", "success-confetti", "spring-pop-in"],
|
|
2271
|
-
avoidWith: ["karaoke", "cinematic-title", "staggered-fade-up"],
|
|
2272
|
-
tier: "niche",
|
|
2273
|
-
useCase: ["emphasis", "intro"],
|
|
2274
|
-
tags: ["text", "kinetic", "typography", "motion", "words", "energetic"],
|
|
2275
|
-
mood: ["playful", "aggressive", "breaking-news"],
|
|
2276
|
-
paramsSchema: paramsSchema5,
|
|
2277
|
-
propDefaults: { animation: "fly-in", position: "center", accentColor: ACCENT },
|
|
2278
|
-
examples: [
|
|
2279
|
-
{
|
|
2280
|
-
name: "fly-in-statement",
|
|
2281
|
-
mood: ["editorial"],
|
|
2282
|
-
params: { text: "Built for builders", animation: "fly-in", position: "center" }
|
|
2283
|
-
},
|
|
2284
|
-
{
|
|
2285
|
-
name: "cascade-drama",
|
|
2286
|
-
mood: ["cinematic", "aggressive"],
|
|
2287
|
-
params: { text: "EVERYTHING CHANGES NOW", animation: "cascade", position: "center" }
|
|
2288
|
-
},
|
|
2289
|
-
{
|
|
2290
|
-
name: "playful-bounce",
|
|
2291
|
-
mood: ["playful"],
|
|
2292
|
-
params: { text: "It just works!", animation: "scale-bounce", position: "center" }
|
|
2293
|
-
}
|
|
2294
|
-
],
|
|
2295
|
-
textParam: "text",
|
|
2296
|
-
subtextParam: null,
|
|
2297
|
-
tokens: [
|
|
2298
|
-
{ propPath: "tokens.textColor", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2299
|
-
{ propPath: "tokens.fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2300
|
-
],
|
|
2301
|
-
durationInFrames: 90,
|
|
2302
|
-
fps: 30,
|
|
2303
|
-
width: 1920,
|
|
2304
|
-
height: 1080,
|
|
2305
|
-
preview: { thumbnailFrame: 45, mode: "oneshot", defaultExample: "fly-in-statement" }
|
|
2306
|
-
};
|
|
2307
|
-
|
|
2308
|
-
// src/text/lower-third/config.ts
|
|
2309
|
-
import { z as z6 } from "zod";
|
|
2310
|
-
var tokensSchema4 = z6.object({
|
|
2311
|
-
fontFamily: z6.string().default(resolveTypeface("caption")),
|
|
2312
|
-
fontSize: z6.number().optional(),
|
|
2313
|
-
subtitleFontSize: z6.number().optional(),
|
|
2314
|
-
textColor: z6.string().default(FLOOR_TEXT),
|
|
2315
|
-
accentColor: z6.string().optional(),
|
|
2316
|
-
backgroundColor: z6.string().optional()
|
|
2317
|
-
}).passthrough();
|
|
2318
|
-
var paramsSchema6 = z6.object({
|
|
2319
|
-
text: z6.string().min(1).max(80).describe("Primary line \u2014 speaker name or topic. Auto-fits (shrinks) to the bar."),
|
|
2320
|
-
subtitle: z6.string().max(120).optional().describe("Secondary line \u2014 title, role, or affiliation. Auto-fits (shrinks + wraps to 2 lines)."),
|
|
2321
|
-
variant: z6.enum(["classic", "modern", "cinematic"]).default("classic").describe(
|
|
2322
|
-
"Visual variant. classic: split accent + dark sub bar. modern: full accent rounded bg. cinematic: borderLeft accent + translucent dark."
|
|
2323
|
-
),
|
|
2324
|
-
tokens: tokensSchema4.default({}).describe("Visual tokens. fontFamily, fontSize, subtitleFontSize, textColor, accentColor, backgroundColor.")
|
|
2325
|
-
}).passthrough();
|
|
2326
|
-
var config6 = {
|
|
2327
|
-
id: "lower-third",
|
|
2328
|
-
component: LowerThird,
|
|
2329
|
-
name: "Lower Third",
|
|
2330
|
-
category: "text",
|
|
2331
|
-
kind: "component",
|
|
2332
|
-
version: "0.1.2",
|
|
2333
|
-
intent: "name-card",
|
|
2334
|
-
description: "Broadcast-style speaker identification bar at the lower-left. Spring slide-in from the left, spring slide-out at end. Three variants for different aesthetics: classic (TV news split-bar), modern (rounded accent block), cinematic (translucent with accent stripe).",
|
|
2335
|
-
useWhen: "Identify the on-screen speaker, attribute a quote, name a location. Persistent throughout a 4\u20138 second beat. Avoid for content that needs full attention to the imagery \u2014 lower-thirds anchor the eye to the bottom-left.",
|
|
2336
|
-
pairsWith: ["karaoke", "parallax", "vignette", "color-grade"],
|
|
2337
|
-
avoidWith: ["cinematic-title", "changelog-bite"],
|
|
2338
|
-
tier: "standard",
|
|
2339
|
-
useCase: ["title-over-footage"],
|
|
2340
|
-
tags: ["text", "lower-third", "broadcast", "speaker", "name", "attribution"],
|
|
2341
|
-
mood: ["editorial", "corporate", "breaking-news"],
|
|
2342
|
-
paramsSchema: paramsSchema6,
|
|
2343
|
-
propDefaults: { variant: "classic" },
|
|
2344
|
-
examples: [
|
|
2345
|
-
{
|
|
2346
|
-
name: "classic-broadcast",
|
|
2347
|
-
mood: ["breaking-news"],
|
|
2348
|
-
params: { text: "Maya Alvarez", subtitle: "Head of Product", variant: "classic" }
|
|
2349
|
-
},
|
|
2350
|
-
{
|
|
2351
|
-
name: "modern-rounded",
|
|
2352
|
-
mood: ["corporate"],
|
|
2353
|
-
params: { text: "Karan", subtitle: "MindPump Podcast", variant: "modern" }
|
|
2354
|
-
},
|
|
2355
|
-
{
|
|
2356
|
-
name: "cinematic-stripe",
|
|
2357
|
-
mood: ["cinematic"],
|
|
2358
|
-
params: { text: "The Speaker", subtitle: "Topic of the moment", variant: "cinematic" }
|
|
2359
|
-
}
|
|
2360
|
-
],
|
|
2361
|
-
textParam: "text",
|
|
2362
|
-
subtextParam: "subtitle",
|
|
2363
|
-
tokens: [
|
|
2364
|
-
{ propPath: "tokens.textColor", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2365
|
-
{ propPath: "tokens.accentColor", cssVar: "--cf-accent", fallback: ACCENT_STRONG, brandKitPath: "colors.accent" },
|
|
2366
|
-
{ propPath: "tokens.backgroundColor", cssVar: "--cf-overlay", fallback: "rgba(0, 0, 0, 0.7)", brandKitPath: "colors.overlay" },
|
|
2367
|
-
{ propPath: "tokens.fontFamily", cssVar: "--cf-font-sans", fallback: resolveTypeface("caption"), brandKitPath: "fonts.body" }
|
|
2368
|
-
],
|
|
2369
|
-
durationInFrames: 150,
|
|
2370
|
-
fps: 30,
|
|
2371
|
-
width: 1920,
|
|
2372
|
-
height: 1080,
|
|
2373
|
-
preview: { thumbnailFrame: 60, mode: "loop", defaultExample: "classic-broadcast" }
|
|
2374
|
-
};
|
|
2375
|
-
|
|
2376
|
-
// src/text/marker-highlight/config.ts
|
|
2377
|
-
import { z as z7 } from "zod";
|
|
2378
|
-
var paramsSchema7 = z7.object({
|
|
2379
|
-
before: z7.string().default("").describe("Text leading up to the highlighted phrase."),
|
|
2380
|
-
highlight: z7.string().min(1).describe("The phrase to highlight with a swept marker."),
|
|
2381
|
-
after: z7.string().default("").describe("Text after the highlight."),
|
|
2382
|
-
markerColor: z7.string().default(WARNING).describe("Marker/highlighter background color. Yellow is the canonical choice."),
|
|
2383
|
-
baseColor: z7.string().default(FLOOR_TEXT).describe("Color of unhighlighted text (sits over footage before the marker sweeps \u2014 video-safe off-white). The marker then recolors it to highlightedTextColor."),
|
|
2384
|
-
highlightedTextColor: z7.string().default(SURFACE).describe("Color of text inside the marker (often same as base for contrast)."),
|
|
2385
|
-
fontSize: z7.number().min(16).max(180).default(72).describe("Font size in pixels at 1920\xD71080."),
|
|
2386
|
-
fontWeight: z7.number().min(100).max(900).default(600).describe("CSS font weight applied uniformly."),
|
|
2387
|
-
speed: z7.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
|
|
2388
|
-
fontFamily: z7.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
|
|
2389
|
-
}).passthrough();
|
|
2390
|
-
var config7 = {
|
|
2391
|
-
id: "marker-highlight",
|
|
2392
|
-
component: MarkerHighlight,
|
|
2393
|
-
name: "Marker Highlight",
|
|
2394
|
-
category: "text",
|
|
2395
|
-
kind: "component",
|
|
2396
|
-
version: "0.1.1",
|
|
2397
|
-
intent: "emphasize-word",
|
|
2398
|
-
description: "A highlighter-style colored bar sweeps across a phrase, leaving a marker background behind it. Feels like physically marking up a transcript or note.",
|
|
2399
|
-
useWhen: "Transcript callouts, quote highlighting, study/educational content. Pairs naturally with podcast clips where you want to flag a specific phrase the speaker said. Avoid combining with inline-highlight (both emphasize words; pick one).",
|
|
2400
|
-
pairsWith: ["typewriter", "mesh-gradient-bg", "pulsing-indicator"],
|
|
2401
|
-
avoidWith: ["inline-highlight"],
|
|
2402
|
-
tier: "standard",
|
|
2403
|
-
useCase: ["emphasis"],
|
|
2404
|
-
tags: ["text", "highlight", "marker", "emphasis", "caption", "transcript"],
|
|
2405
|
-
mood: ["editorial", "playful"],
|
|
2406
|
-
paramsSchema: paramsSchema7,
|
|
2407
|
-
propDefaults: { before: "", after: "", markerColor: WARNING, baseColor: FLOOR_TEXT, highlightedTextColor: SURFACE, fontSize: 72, fontWeight: 600, speed: 1, fontFamily: resolveTypeface("display") },
|
|
2408
|
-
examples: [
|
|
2409
|
-
{
|
|
2410
|
-
name: "classic-yellow",
|
|
2411
|
-
mood: ["editorial"],
|
|
2412
|
-
params: { before: "The whole point is ", highlight: "distribution", after: ".", markerColor: WARNING, baseColor: FLOOR_TEXT, highlightedTextColor: SURFACE, fontSize: 80, fontWeight: 600, speed: 1 }
|
|
2413
|
-
},
|
|
2414
|
-
{
|
|
2415
|
-
name: "brand-accent",
|
|
2416
|
-
mood: ["corporate"],
|
|
2417
|
-
params: { before: "It needs to be ", highlight: "fast", after: " and reliable.", markerColor: TEAL, baseColor: FLOOR_TEXT, highlightedTextColor: TEXT_HI, fontSize: 72, fontWeight: 700, speed: 0.9 },
|
|
2418
|
-
description: "Brand-color marker with white text inside. Higher-contrast than the yellow default."
|
|
2419
|
-
}
|
|
2420
|
-
],
|
|
2421
|
-
textParam: "highlight",
|
|
2422
|
-
subtextParam: null,
|
|
2423
|
-
tokens: [
|
|
2424
|
-
{ propPath: "markerColor", cssVar: "--cf-accent", fallback: WARNING, brandKitPath: "colors.accent" },
|
|
2425
|
-
{ propPath: "baseColor", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2426
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2427
|
-
],
|
|
2428
|
-
durationInFrames: 90,
|
|
2429
|
-
fps: 30,
|
|
2430
|
-
width: 1920,
|
|
2431
|
-
height: 1080,
|
|
2432
|
-
preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "classic-yellow" }
|
|
2433
|
-
};
|
|
2434
|
-
|
|
2435
|
-
// src/text/shimmer-sweep/config.ts
|
|
2436
|
-
import { z as z8 } from "zod";
|
|
2437
|
-
var paramsSchema8 = z8.object({
|
|
2438
|
-
text: z8.string().min(1).max(160).describe("The text to shimmer across. Auto-fits (shrinks) to the stage."),
|
|
2439
|
-
baseColor: z8.string().default("#a1a1aa").describe("Resting color of the text. Muted/desaturated reads best."),
|
|
2440
|
-
shineColor: z8.string().default("#ffffff").describe("Color of the sweeping shine. White or near-white feels metallic."),
|
|
2441
|
-
fontSize: z8.number().min(16).max(240).default(96).describe("Font size in pixels at 1920\xD71080."),
|
|
2442
|
-
fontWeight: z8.number().min(100).max(900).default(700).describe("CSS font weight. Bold weights catch the shimmer better."),
|
|
2443
|
-
speed: z8.number().min(0.25).max(4).default(1).describe("Playback speed multiplier \u2014 controls sweep tempo."),
|
|
2444
|
-
fontFamily: z8.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
|
|
2445
|
-
}).passthrough();
|
|
2446
|
-
var config8 = {
|
|
2447
|
-
id: "shimmer-sweep",
|
|
2448
|
-
component: ShimmerSweep,
|
|
2449
|
-
name: "Shimmer Sweep",
|
|
2450
|
-
category: "text",
|
|
2451
|
-
kind: "component",
|
|
2452
|
-
version: "0.1.1",
|
|
2453
|
-
intent: "emphasize-word",
|
|
2454
|
-
description: "A bright shine sweeps left-to-right across the text, briefly catching like light on metal. Subtle motion that adds polish without competing with the content.",
|
|
2455
|
-
useWhen: 'Loop-friendly emphasis when the text needs to feel "alive" but not distract. Logo treatments, premium product names, awards-show vibes. Avoid for time-pressured content (the loop reads as slow).',
|
|
2456
|
-
pairsWith: ["mesh-gradient-bg", "success-confetti", "spring-pop-in"],
|
|
2457
|
-
avoidWith: [],
|
|
2458
|
-
tier: "standard",
|
|
2459
|
-
useCase: ["background", "emphasis"],
|
|
2460
|
-
tags: ["text", "shimmer", "sweep", "shine", "metallic", "loop", "polish"],
|
|
2461
|
-
mood: ["cinematic", "corporate", "minimal"],
|
|
2462
|
-
paramsSchema: paramsSchema8,
|
|
2463
|
-
propDefaults: { baseColor: "#a1a1aa", shineColor: "#ffffff", fontSize: 96, fontWeight: 700, speed: 1, fontFamily: resolveTypeface("display") },
|
|
2464
|
-
examples: [
|
|
2465
|
-
{
|
|
2466
|
-
name: "silver-loop",
|
|
2467
|
-
mood: ["cinematic"],
|
|
2468
|
-
params: { text: "PREMIUM", baseColor: "#a1a1aa", shineColor: "#ffffff", fontSize: 144, fontWeight: 800, speed: 1 }
|
|
2469
|
-
},
|
|
2470
|
-
{
|
|
2471
|
-
name: "brand-shine",
|
|
2472
|
-
mood: ["corporate"],
|
|
2473
|
-
params: { text: "cueframe", baseColor: TEXT_MUTED, shineColor: ACCENT, fontSize: 96, fontWeight: 700, speed: 0.9 }
|
|
2474
|
-
}
|
|
2475
|
-
],
|
|
2476
|
-
textParam: "text",
|
|
2477
|
-
subtextParam: null,
|
|
2478
|
-
tokens: [
|
|
2479
|
-
{ propPath: "baseColor", cssVar: "--cf-text-muted", fallback: "#a1a1aa", brandKitPath: "colors.textMuted" },
|
|
2480
|
-
{ propPath: "shineColor", cssVar: "--cf-accent", fallback: "#ffffff", brandKitPath: "colors.accent" },
|
|
2481
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2482
|
-
],
|
|
2483
|
-
durationInFrames: 90,
|
|
2484
|
-
fps: 30,
|
|
2485
|
-
width: 1920,
|
|
2486
|
-
height: 1080,
|
|
2487
|
-
preview: { thumbnailFrame: 45, mode: "loop", defaultExample: "silver-loop" }
|
|
2488
|
-
};
|
|
2489
|
-
|
|
2490
|
-
// src/text/staggered-fade-up/config.ts
|
|
2491
|
-
import { z as z9 } from "zod";
|
|
2492
|
-
var paramsSchema9 = z9.object({
|
|
2493
|
-
text: z9.string().min(1).describe("Text to split into words and reveal one at a time."),
|
|
2494
|
-
staggerDelay: z9.number().min(0.5).max(20).default(3).describe("Frames between each word's entrance. Lower = faster cascade."),
|
|
2495
|
-
// coerce: a $brand:motion.staggerMs MISS (no kit) falls back to the string '90'; coercion keeps it a number.
|
|
2496
|
-
staggerMs: z9.coerce.number().nonnegative().optional().describe("Per-word stagger gap in ms (overrides staggerDelay). Bind to $brand:motion.staggerMs."),
|
|
2497
|
-
easing: z9.string().optional().describe("Easing keyword for each word's fade/rise (linear/ease/ease-in/ease-out/ease-in-out). Bind to $brand:motion.easing."),
|
|
2498
|
-
distance: z9.number().min(0).max(200).default(40).describe("Pixels each word travels upward as it fades in. 30\u201360 is the sweet spot."),
|
|
2499
|
-
fontSize: z9.number().min(16).max(240).default(96).describe("Font size in pixels at 1920\xD71080."),
|
|
2500
|
-
fontWeight: z9.number().min(100).max(900).default(600).describe("CSS font weight applied uniformly."),
|
|
2501
|
-
color: z9.string().default(FLOOR_TEXT).describe("Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."),
|
|
2502
|
-
fontFamily: z9.string().default(resolveTypeface("display")).describe("Display typeface; pass $brand:fonts.heading to theme."),
|
|
2503
|
-
speed: z9.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
|
|
2504
|
-
}).passthrough();
|
|
2505
|
-
var config9 = {
|
|
2506
|
-
id: "staggered-fade-up",
|
|
2507
|
-
component: StaggeredFadeUp,
|
|
2508
|
-
name: "Staggered Fade Up",
|
|
2509
|
-
category: "text",
|
|
2510
|
-
kind: "component",
|
|
2511
|
-
version: "0.1.0",
|
|
2512
|
-
intent: "reveal-text",
|
|
2513
|
-
description: "Words rise into view one at a time, each fading in with an upward translation. Reads as deliberate, considered prose \u2014 every word lands.",
|
|
2514
|
-
useWhen: "Multi-word headlines (3\u20138 words), poetry/quote reveals, cinematic title cards where each word should register. Avoid for single words (use blur-reveal) or runs longer than ~10 words (cascade gets tedious).",
|
|
2515
|
-
pairsWith: ["mesh-gradient-bg", "dynamic-grid", "success-confetti"],
|
|
2516
|
-
avoidWith: ["blur-reveal", "tracking-in"],
|
|
2517
|
-
tier: "standard",
|
|
2518
|
-
useCase: ["title-over-footage"],
|
|
2519
|
-
tags: ["text", "stagger", "reveal", "fade", "words", "cascade", "cinematic"],
|
|
2520
|
-
mood: ["cinematic", "editorial", "soft"],
|
|
2521
|
-
paramsSchema: paramsSchema9,
|
|
2522
|
-
propDefaults: { staggerDelay: 3, distance: 40, fontSize: 96, fontWeight: 600, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), speed: 1 },
|
|
2523
|
-
examples: [
|
|
2524
|
-
{
|
|
2525
|
-
name: "cinematic-headline",
|
|
2526
|
-
mood: ["cinematic"],
|
|
2527
|
-
params: { text: "Built for builders", staggerDelay: 4, distance: 50, fontSize: 120, fontWeight: 700, color: FLOOR_TEXT, speed: 1 }
|
|
2528
|
-
},
|
|
2529
|
-
{
|
|
2530
|
-
name: "poetic",
|
|
2531
|
-
mood: ["editorial", "soft"],
|
|
2532
|
-
params: { text: "A film by someone, somewhere", staggerDelay: 6, distance: 30, fontSize: 80, fontWeight: 400, color: FLOOR_TEXT, speed: 0.85 }
|
|
2533
|
-
}
|
|
2534
|
-
],
|
|
2535
|
-
textParam: "text",
|
|
2536
|
-
subtextParam: null,
|
|
2537
|
-
tokens: [
|
|
2538
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2539
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" },
|
|
2540
|
-
{ propPath: "staggerMs", cssVar: "--cf-motion-stagger", fallback: "90", brandKitPath: "motion.staggerMs" },
|
|
2541
|
-
{ propPath: "easing", cssVar: "--cf-motion-ease", fallback: "ease-out", brandKitPath: "motion.easing" }
|
|
2542
|
-
],
|
|
2543
|
-
durationInFrames: 120,
|
|
2544
|
-
fps: 30,
|
|
2545
|
-
width: 1920,
|
|
2546
|
-
height: 1080,
|
|
2547
|
-
preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "cinematic-headline" }
|
|
2548
|
-
};
|
|
2549
|
-
|
|
2550
|
-
// src/text/text-fade-replace/config.ts
|
|
2551
|
-
import { z as z10 } from "zod";
|
|
2552
|
-
var paramsSchema10 = z10.object({
|
|
2553
|
-
from: z10.string().min(1).describe("Initial text shown for the first half of the duration."),
|
|
2554
|
-
to: z10.string().min(1).describe("Replacement text shown for the second half."),
|
|
2555
|
-
fontSize: z10.number().min(16).max(240).default(96).describe("Font size in pixels at 1920\xD71080."),
|
|
2556
|
-
color: z10.string().default(FLOOR_TEXT).describe("Text color (applied to both from and to). Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."),
|
|
2557
|
-
fontFamily: z10.string().default(resolveTypeface("display")).describe("Display typeface; pass $brand:fonts.heading to theme."),
|
|
2558
|
-
fontWeight: z10.number().min(100).max(900).default(700).describe("CSS font weight."),
|
|
2559
|
-
speed: z10.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
|
|
2560
|
-
}).passthrough();
|
|
2561
|
-
var config10 = {
|
|
2562
|
-
id: "text-fade-replace",
|
|
2563
|
-
component: TextFadeReplace,
|
|
2564
|
-
name: "Text Fade Replace",
|
|
2565
|
-
category: "text",
|
|
2566
|
-
kind: "component",
|
|
2567
|
-
version: "0.1.0",
|
|
2568
|
-
intent: "cycle-text",
|
|
2569
|
-
description: "Cross-fade between two strings on the same line without layout shift. The first text fades out exactly as the second fades in, both centered on the same baseline.",
|
|
2570
|
-
useWhen: 'Caption beat changes ("Question:" \u2192 "Answer:"), product feature cycles ("for everyone" \u2192 "for engineers"), before/after labels. Avoid for >2 strings (use multiple in sequence) and for strings with very different widths (the lack of layout shift makes the longer one feel cramped).',
|
|
2571
|
-
pairsWith: ["mesh-gradient-bg", "pulsing-indicator", "shimmer-sweep"],
|
|
2572
|
-
avoidWith: ["blur-reveal"],
|
|
2573
|
-
tier: "standard",
|
|
2574
|
-
useCase: ["title-over-footage"],
|
|
2575
|
-
tags: ["text", "cycle", "fade", "replace", "caption", "binary"],
|
|
2576
|
-
mood: ["editorial", "minimal", "corporate"],
|
|
2577
|
-
paramsSchema: paramsSchema10,
|
|
2578
|
-
propDefaults: { fontSize: 96, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), fontWeight: 700, speed: 1 },
|
|
2579
|
-
examples: [
|
|
2580
|
-
{
|
|
2581
|
-
name: "q-to-a",
|
|
2582
|
-
mood: ["editorial"],
|
|
2583
|
-
params: { from: "Question.", to: "Answer.", fontSize: 120, color: FLOOR_TEXT, fontWeight: 800, speed: 1 }
|
|
2584
|
-
},
|
|
2585
|
-
{
|
|
2586
|
-
name: "before-after",
|
|
2587
|
-
mood: ["corporate"],
|
|
2588
|
-
params: { from: "Before", to: "After", fontSize: 144, color: FLOOR_TEXT, fontWeight: 700, speed: 0.9 }
|
|
2589
|
-
}
|
|
2590
|
-
],
|
|
2591
|
-
textParam: "from",
|
|
2592
|
-
subtextParam: "to",
|
|
2593
|
-
tokens: [
|
|
2594
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2595
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2596
|
-
],
|
|
2597
|
-
durationInFrames: 90,
|
|
2598
|
-
fps: 30,
|
|
2599
|
-
width: 1920,
|
|
2600
|
-
height: 1080,
|
|
2601
|
-
preview: { thumbnailFrame: 60, mode: "loop", defaultExample: "q-to-a" }
|
|
2602
|
-
};
|
|
2603
|
-
|
|
2604
|
-
// src/text/tracking-in/config.ts
|
|
2605
|
-
import { z as z11 } from "zod";
|
|
2606
|
-
var paramsSchema11 = z11.object({
|
|
2607
|
-
text: z11.string().min(1).max(90).describe("Text to reveal. 1\u20133 words works best \u2014 letter-tracking changes are most legible at short lengths. Auto-fits: longer copy shrinks to fit the frame so it no longer overflows."),
|
|
2608
|
-
startTracking: z11.number().min(-0.5).max(2).default(0.5).describe("Initial letter-spacing in em units. Higher = more spread at the start of the reveal."),
|
|
2609
|
-
startBlur: z11.number().min(0).max(20).default(8).describe("Initial blur radius in pixels. Cleared as letters condense into place."),
|
|
2610
|
-
fontSize: z11.number().min(16).max(240).default(120).describe("Font size in pixels at 1920\xD71080."),
|
|
2611
|
-
fontWeight: z11.number().min(100).max(900).default(700).describe("CSS font weight."),
|
|
2612
|
-
color: z11.string().default(FLOOR_TEXT).describe("Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."),
|
|
2613
|
-
fontFamily: z11.string().default(resolveTypeface("display")).describe("Display typeface; pass $brand:fonts.heading to theme."),
|
|
2614
|
-
speed: z11.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
|
|
2615
|
-
}).passthrough();
|
|
2616
|
-
var config11 = {
|
|
2617
|
-
id: "tracking-in",
|
|
2618
|
-
component: TrackingIn,
|
|
2619
|
-
name: "Tracking In",
|
|
2620
|
-
category: "text",
|
|
2621
|
-
kind: "component",
|
|
2622
|
-
version: "0.1.0",
|
|
2623
|
-
intent: "reveal-text",
|
|
2624
|
-
description: 'Letters start spread apart and slightly blurred, then condense into final position with sharp focus. The "from-distance-into-place" feel.',
|
|
2625
|
-
useWhen: "Brand reveals, single-word titles, awards-style intros where the letters should feel like they're assembling themselves. Best for 1\u20133 words; longer strings make tracking changes feel jittery.",
|
|
2626
|
-
pairsWith: ["mesh-gradient-bg", "success-confetti", "shimmer-sweep"],
|
|
2627
|
-
avoidWith: ["blur-reveal", "staggered-fade-up"],
|
|
2628
|
-
tier: "standard",
|
|
2629
|
-
useCase: ["intro"],
|
|
2630
|
-
tags: ["text", "tracking", "letter-spacing", "reveal", "condense", "brand"],
|
|
2631
|
-
mood: ["cinematic", "corporate", "minimal"],
|
|
2632
|
-
paramsSchema: paramsSchema11,
|
|
2633
|
-
propDefaults: { startTracking: 0.5, startBlur: 8, fontSize: 120, fontWeight: 700, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), speed: 1 },
|
|
2634
|
-
examples: [
|
|
2635
|
-
{
|
|
2636
|
-
name: "brand-reveal",
|
|
2637
|
-
mood: ["cinematic", "corporate"],
|
|
2638
|
-
params: { text: "CUEFRAME", startTracking: 0.6, startBlur: 10, fontSize: 144, fontWeight: 800, color: FLOOR_TEXT, speed: 0.9 }
|
|
2639
|
-
},
|
|
2640
|
-
{
|
|
2641
|
-
name: "subtle-title",
|
|
2642
|
-
mood: ["minimal"],
|
|
2643
|
-
params: { text: "Welcome", startTracking: 0.3, startBlur: 5, fontSize: 96, fontWeight: 500, color: FLOOR_TEXT, speed: 1 }
|
|
2644
|
-
}
|
|
2645
|
-
],
|
|
2646
|
-
textParam: "text",
|
|
2647
|
-
subtextParam: null,
|
|
2648
|
-
tokens: [
|
|
2649
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2650
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2651
|
-
],
|
|
2652
|
-
durationInFrames: 90,
|
|
2653
|
-
fps: 30,
|
|
2654
|
-
width: 1920,
|
|
2655
|
-
height: 1080,
|
|
2656
|
-
preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "brand-reveal" }
|
|
2657
|
-
};
|
|
2658
|
-
|
|
2659
|
-
// src/text/typewriter/config.ts
|
|
2660
|
-
import { z as z12 } from "zod";
|
|
2661
|
-
var paramsSchema12 = z12.object({
|
|
2662
|
-
text: z12.string().min(1).max(400).describe(
|
|
2663
|
-
"The text to type out. 20\u201380 characters reads best; longer strings risk losing attention before the cursor finishes. Auto-fits: the text shrinks to fit the frame and wraps to a few lines, so length no longer overflows."
|
|
2664
|
-
),
|
|
2665
|
-
cursor: z12.boolean().default(true).describe(
|
|
2666
|
-
"Show a blinking cursor at the end of the revealed text."
|
|
2667
|
-
),
|
|
2668
|
-
charsPerSecond: z12.number().min(2).max(60).default(20).describe(
|
|
2669
|
-
"Typing rate. 20 cps is conversational; 30+ feels urgent; <10 feels deliberate."
|
|
2670
|
-
),
|
|
2671
|
-
speed: z12.number().min(0.25).max(4).default(1).describe(
|
|
2672
|
-
"Playback speed multiplier independent of charsPerSecond."
|
|
2673
|
-
),
|
|
2674
|
-
fontSize: z12.number().min(16).max(240).default(72).describe(
|
|
2675
|
-
"Font size in pixels at the canonical 1920\xD71080 frame."
|
|
2676
|
-
),
|
|
2677
|
-
fontWeight: z12.number().min(100).max(900).default(500).describe(
|
|
2678
|
-
"CSS font weight. 500 keeps a terminal/code feel; 700+ skews toward dramatic quote."
|
|
2679
|
-
),
|
|
2680
|
-
color: z12.string().default(FLOOR_TEXT).describe(
|
|
2681
|
-
"Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."
|
|
2682
|
-
),
|
|
2683
|
-
cursorColor: z12.string().optional().describe("Cursor color. Falls back to text color if unset."),
|
|
2684
|
-
fontFamily: z12.string().default(resolveTypeface("display")).describe(
|
|
2685
|
-
"Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it."
|
|
2686
|
-
)
|
|
2687
|
-
}).passthrough();
|
|
2688
|
-
var config12 = {
|
|
2689
|
-
id: "typewriter",
|
|
2690
|
-
component: Typewriter,
|
|
2691
|
-
name: "Typewriter",
|
|
2692
|
-
category: "text",
|
|
2693
|
-
kind: "component",
|
|
2694
|
-
version: "0.1.1",
|
|
2695
|
-
intent: "reveal-text",
|
|
2696
|
-
description: "Character-by-character text reveal with a deterministic blinking cursor. The classic terminal/typing aesthetic \u2014 feels like the audience is reading along as it types.",
|
|
2697
|
-
useWhen: 'Tech demos, code captions, "the AI is generating something" beats, dialogue/quote reveals. Avoid for hero titles longer than ~80 chars (typing time exceeds attention span) and avoid pairing with another character-by-character animation (matrix-decode, glitch text).',
|
|
2698
|
-
pairsWith: ["glass-code-block", "terminal-simulator", "cursor-flow", "pulsing-indicator"],
|
|
2699
|
-
avoidWith: ["blur-reveal"],
|
|
2700
|
-
tier: "standard",
|
|
2701
|
-
useCase: ["title-over-footage"],
|
|
2702
|
-
tags: ["text", "typewriter", "typing", "terminal", "monospace", "reveal", "progressive"],
|
|
2703
|
-
mood: ["tech-demo", "editorial", "minimal"],
|
|
2704
|
-
paramsSchema: paramsSchema12,
|
|
2705
|
-
propDefaults: { cursor: true, charsPerSecond: 20, speed: 1, fontSize: 72, fontWeight: 500, color: FLOOR_TEXT, fontFamily: resolveTypeface("display") },
|
|
2706
|
-
examples: [
|
|
2707
|
-
{
|
|
2708
|
-
name: "terminal-prompt",
|
|
2709
|
-
mood: ["tech-demo"],
|
|
2710
|
-
params: { text: "$ npm install cueframe", cursor: true, charsPerSecond: 24, fontSize: 64, fontWeight: 500, color: SUCCESS },
|
|
2711
|
-
description: "Green-on-dark terminal prompt feel."
|
|
2712
|
-
},
|
|
2713
|
-
{
|
|
2714
|
-
name: "dialogue",
|
|
2715
|
-
mood: ["editorial", "cinematic"],
|
|
2716
|
-
params: { text: "Hello, world.", cursor: true, charsPerSecond: 12, fontSize: 96, fontWeight: 600, color: FLOOR_TEXT },
|
|
2717
|
-
description: "Slower, larger, dialogue-paced reveal."
|
|
2718
|
-
},
|
|
2719
|
-
{
|
|
2720
|
-
name: "urgent-news",
|
|
2721
|
-
mood: ["breaking-news"],
|
|
2722
|
-
params: { text: "BREAKING:", cursor: false, charsPerSecond: 40, fontSize: 120, fontWeight: 800, color: "#dc2626" },
|
|
2723
|
-
description: "Fast type, no cursor, red. Breaking-news tickers."
|
|
2724
|
-
}
|
|
2725
|
-
],
|
|
2726
|
-
textParam: "text",
|
|
2727
|
-
subtextParam: null,
|
|
2728
|
-
tokens: [
|
|
2729
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2730
|
-
{ propPath: "cursorColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" },
|
|
2731
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2732
|
-
],
|
|
2733
|
-
durationInFrames: 120,
|
|
2734
|
-
fps: 30,
|
|
2735
|
-
width: 1920,
|
|
2736
|
-
height: 1080,
|
|
2737
|
-
preview: { thumbnailFrame: 90, mode: "loop", defaultExample: "terminal-prompt" }
|
|
2738
|
-
};
|
|
2739
|
-
|
|
2740
|
-
// src/text/matrix-decode/config.ts
|
|
2741
|
-
import { z as z13 } from "zod";
|
|
2742
|
-
var paramsSchema13 = z13.object({
|
|
2743
|
-
text: z13.string().min(1).max(220).describe(
|
|
2744
|
-
"The final text that decodes into place. Auto-fits (shrinks to the frame, then ellipsizes). 6\u201340 characters reads cleanly; longer strings spend too long in the scrambled state."
|
|
2745
|
-
),
|
|
2746
|
-
charset: z13.string().min(1).max(80).default("!@#$%^&*()_+-=<>?/\\|").describe(
|
|
2747
|
-
"Pool of characters to scramble through before each glyph resolves. Symbol-heavy charsets feel hacker; alphanumeric feels softer."
|
|
2748
|
-
),
|
|
2749
|
-
fontSize: z13.number().min(16).max(240).default(72).describe(
|
|
2750
|
-
"Font size in pixels at the canonical 1920\xD71080 frame. 64\u201396 reads as headline; 120+ as hero."
|
|
2751
|
-
),
|
|
2752
|
-
fontWeight: z13.number().min(100).max(900).default(600).describe(
|
|
2753
|
-
"CSS font weight. 600 keeps the monospace decode feel; 700+ leans dramatic; 400 feels terminal-quiet."
|
|
2754
|
-
),
|
|
2755
|
-
color: z13.string().default(SUCCESS).describe(
|
|
2756
|
-
"Text color of the resolved glyphs. Green-on-white is the canonical Matrix vibe; high-contrast brand colors also work."
|
|
2757
|
-
),
|
|
2758
|
-
revealDuration: z13.number().min(15).max(240).default(60).describe(
|
|
2759
|
-
"Frames for all glyphs to finish resolving. Shorter (30\u201345) feels snappy; longer (90+) lets the audience savor the scramble."
|
|
2760
|
-
),
|
|
2761
|
-
speed: z13.number().min(0.25).max(4).default(1).describe(
|
|
2762
|
-
"Playback speed multiplier independent of revealDuration."
|
|
2763
|
-
),
|
|
2764
|
-
fontFamily: z13.string().default(resolveTypeface("mono")).describe("Monospace typeface. Fixed to the bundled mono face (Space Mono floor) \u2014 the decode column-shuffle depends on fixed-width glyphs, so brand fonts (serif/display) intentionally do NOT override it.")
|
|
2765
|
-
}).passthrough();
|
|
2766
|
-
var config13 = {
|
|
2767
|
-
id: "matrix-decode",
|
|
2768
|
-
component: MatrixDecode,
|
|
2769
|
-
name: "Matrix Decode",
|
|
2770
|
-
category: "text",
|
|
2771
|
-
kind: "component",
|
|
2772
|
-
version: "0.1.1",
|
|
2773
|
-
intent: "glitch-decode",
|
|
2774
|
-
description: "Per-character scramble that resolves left-to-right into the final text. Each glyph cycles through a charset of symbols before snapping to its true character. Hacker/cypherpunk aesthetic \u2014 feels like the system is being decrypted in real time.",
|
|
2775
|
-
useWhen: 'Tech demos, "AI is thinking" beats, hacker/cypherpunk reveals, codename or version-string drops. Best with monospace-friendly content (commands, hashes, hostnames). Avoid for emotional/editorial copy (wrong tone) and avoid pairing with another character-by-character animation like typewriter or rgb-glitch-text on the same beat.',
|
|
2776
|
-
pairsWith: ["glass-code-block", "terminal-simulator", "pulsing-indicator", "grain"],
|
|
2777
|
-
avoidWith: ["typewriter", "rgb-glitch-text", "blur-reveal"],
|
|
2778
|
-
tier: "niche",
|
|
2779
|
-
useCase: ["emphasis"],
|
|
2780
|
-
tags: ["text", "matrix", "decode", "scramble", "hacker", "cypherpunk", "monospace", "glitch"],
|
|
2781
|
-
mood: ["tech-demo", "glitchy", "aggressive"],
|
|
2782
|
-
paramsSchema: paramsSchema13,
|
|
2783
|
-
propDefaults: {
|
|
2784
|
-
charset: "!@#$%^&*()_+-=<>?/\\|",
|
|
2785
|
-
fontSize: 72,
|
|
2786
|
-
fontWeight: 600,
|
|
2787
|
-
color: SUCCESS,
|
|
2788
|
-
revealDuration: 60,
|
|
2789
|
-
speed: 1,
|
|
2790
|
-
fontFamily: resolveTypeface("mono")
|
|
2791
|
-
},
|
|
2792
|
-
examples: [
|
|
2793
|
-
{
|
|
2794
|
-
name: "classic-matrix",
|
|
2795
|
-
mood: ["tech-demo", "glitchy"],
|
|
2796
|
-
params: { text: "ACCESS GRANTED", charset: "01!@#$%&*<>/\\|", fontSize: 88, fontWeight: 600, color: SUCCESS, revealDuration: 60 },
|
|
2797
|
-
description: "Green-on-white symbol-heavy decode \u2014 the canonical Matrix vibe."
|
|
2798
|
-
},
|
|
2799
|
-
{
|
|
2800
|
-
name: "hash-reveal",
|
|
2801
|
-
mood: ["tech-demo"],
|
|
2802
|
-
params: { text: "0xCAFEBABE", charset: "0123456789abcdef", fontSize: 96, fontWeight: 500, color: FLOOR_TEXT, revealDuration: 45 },
|
|
2803
|
-
description: "Snappy hex decode for hash/address reveals."
|
|
2804
|
-
},
|
|
2805
|
-
{
|
|
2806
|
-
name: "aggressive-codename",
|
|
2807
|
-
mood: ["aggressive", "breaking-news"],
|
|
2808
|
-
params: { text: "PROJECT NEMESIS", charset: "!@#$%^&*()_+-=<>?/\\|", fontSize: 120, fontWeight: 800, color: DANGER, revealDuration: 36 },
|
|
2809
|
-
description: "Fast, large, red \u2014 codename or product reveal."
|
|
2810
|
-
}
|
|
2811
|
-
],
|
|
2812
|
-
textParam: "text",
|
|
2813
|
-
subtextParam: null,
|
|
2814
|
-
tokens: [
|
|
2815
|
-
{ propPath: "color", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" }
|
|
2816
|
-
// No fontFamily brand binding: the decode effect requires fixed-width mono
|
|
2817
|
-
// (Space Mono floor). There is no fonts.mono brand path, and binding to
|
|
2818
|
-
// fonts.heading would let a serif/display brand face break the column shuffle.
|
|
2819
|
-
],
|
|
2820
|
-
durationInFrames: 120,
|
|
2821
|
-
fps: 30,
|
|
2822
|
-
width: 1920,
|
|
2823
|
-
height: 1080,
|
|
2824
|
-
preview: { thumbnailFrame: 45, mode: "oneshot", defaultExample: "classic-matrix" }
|
|
2825
|
-
};
|
|
2826
|
-
|
|
2827
|
-
// src/text/rgb-glitch-text/config.ts
|
|
2828
|
-
import { z as z14 } from "zod";
|
|
2829
|
-
var paramsSchema14 = z14.object({
|
|
2830
|
-
text: z14.string().min(1).max(220).describe(
|
|
2831
|
-
"Text to display. The base text holds steady; RGB-split copies offset on top during the glitch window. 4\u201330 chars reads punchiest."
|
|
2832
|
-
),
|
|
2833
|
-
fontSize: z14.number().min(24).max(320).default(96).describe(
|
|
2834
|
-
"Font size in pixels at the canonical 1920\xD71080 frame. Glitch reads best at hero scale (96\u2013160)."
|
|
2835
|
-
),
|
|
2836
|
-
fontWeight: z14.number().min(100).max(900).default(700).describe(
|
|
2837
|
-
"CSS font weight. 700+ gives the chunky chromatic-split look; lighter weights wash out under the offset copies."
|
|
2838
|
-
),
|
|
2839
|
-
color: z14.string().default(FLOOR_TEXT).describe("Base text color (video-safe off-white). The R/G/B copies are fixed (#ff0040, #00ff80, #0080ff) and screen-blend (additive) so the chromatic split glows over footage."),
|
|
2840
|
-
glitchAt: z14.number().min(0).max(600).default(20).describe(
|
|
2841
|
-
"Frame at which the glitch window begins. Set ~10\u201330 frames in so the audience reads the title before it cracks."
|
|
2842
|
-
),
|
|
2843
|
-
glitchDuration: z14.number().min(2).max(60).default(8).describe(
|
|
2844
|
-
"Length of the glitch window in frames. 6\u201312 frames is a sharp punch; 20+ feels like sustained corruption."
|
|
2845
|
-
),
|
|
2846
|
-
intensity: z14.number().min(0).max(40).default(6).describe(
|
|
2847
|
-
"Pixel offset magnitude for the R/G/B copies. 4\u20138 reads as crisp glitch; 12+ becomes near-illegible. Use sparingly."
|
|
2848
|
-
),
|
|
2849
|
-
seed: z14.string().min(1).max(32).default("glitch").describe(
|
|
2850
|
-
"Deterministic seed for the per-frame jitter. Change it to get a different glitch pattern with the same params."
|
|
2851
|
-
),
|
|
2852
|
-
speed: z14.number().min(0.25).max(4).default(1).describe(
|
|
2853
|
-
"Playback speed multiplier. Note: glitchAt and glitchDuration are in source frames before the speed multiplier."
|
|
2854
|
-
),
|
|
2855
|
-
fontFamily: z14.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme it.")
|
|
2856
|
-
}).passthrough();
|
|
2857
|
-
var config14 = {
|
|
2858
|
-
id: "rgb-glitch-text",
|
|
2859
|
-
component: RGBGlitchText,
|
|
2860
|
-
name: "RGB Glitch Text",
|
|
2861
|
-
category: "text",
|
|
2862
|
-
kind: "component",
|
|
2863
|
-
version: "0.1.1",
|
|
2864
|
-
intent: "glitch-text",
|
|
2865
|
-
description: "Static text that fractures into red/green/blue chromatic-aberration copies during a configurable glitch window. The base text never moves; the offset color copies appear, jitter for `glitchDuration` frames, then disappear. Crisp cyberpunk/CRT-failure aesthetic.",
|
|
2866
|
-
useWhen: 'Hard cuts, beat-drops, "system corrupted" moments, breaking-news stings, hype-reel punctuation. Place the glitch on the audio hit. Avoid for sustained titles (the eye gets tired in <1 second of glitch) and avoid pairing with matrix-decode or another glitch primitive on the same beat \u2014 the effects fight for attention.',
|
|
2867
|
-
pairsWith: ["glitch-cut", "chromatic-aberration-wipe", "grain", "mesh-gradient-bg"],
|
|
2868
|
-
avoidWith: ["matrix-decode", "typewriter", "blur-reveal"],
|
|
2869
|
-
tier: "niche",
|
|
2870
|
-
useCase: ["emphasis"],
|
|
2871
|
-
tags: ["text", "glitch", "rgb", "chromatic-aberration", "cyberpunk", "crt", "corruption"],
|
|
2872
|
-
mood: ["glitchy", "aggressive", "breaking-news", "tech-demo"],
|
|
2873
|
-
paramsSchema: paramsSchema14,
|
|
2874
|
-
propDefaults: {
|
|
2875
|
-
fontSize: 96,
|
|
2876
|
-
fontWeight: 700,
|
|
2877
|
-
color: FLOOR_TEXT,
|
|
2878
|
-
glitchAt: 20,
|
|
2879
|
-
glitchDuration: 8,
|
|
2880
|
-
intensity: 6,
|
|
2881
|
-
seed: "glitch",
|
|
2882
|
-
speed: 1,
|
|
2883
|
-
fontFamily: resolveTypeface("display")
|
|
2884
|
-
},
|
|
2885
|
-
examples: [
|
|
2886
|
-
{
|
|
2887
|
-
name: "beat-drop",
|
|
2888
|
-
mood: ["aggressive", "glitchy"],
|
|
2889
|
-
params: { text: "SYSTEM ONLINE", fontSize: 128, fontWeight: 800, color: FLOOR_TEXT, glitchAt: 24, glitchDuration: 10, intensity: 8 },
|
|
2890
|
-
description: "Hero text that cracks on the audio hit."
|
|
2891
|
-
},
|
|
2892
|
-
{
|
|
2893
|
-
name: "sustained-corruption",
|
|
2894
|
-
mood: ["glitchy"],
|
|
2895
|
-
params: { text: "CORRUPTED", fontSize: 144, fontWeight: 800, color: DANGER, glitchAt: 0, glitchDuration: 30, intensity: 5 },
|
|
2896
|
-
description: 'Long glitch window for "system failure" beats. Use carefully \u2014 eye fatigue.'
|
|
2897
|
-
},
|
|
2898
|
-
{
|
|
2899
|
-
name: "breaking-news-sting",
|
|
2900
|
-
mood: ["breaking-news"],
|
|
2901
|
-
params: { text: "LIVE", fontSize: 160, fontWeight: 900, color: DANGER, glitchAt: 12, glitchDuration: 6, intensity: 7 },
|
|
2902
|
-
description: "Short, hard glitch on a one-word breaking-news ID."
|
|
2903
|
-
}
|
|
2904
|
-
],
|
|
2905
|
-
textParam: "text",
|
|
2906
|
-
subtextParam: null,
|
|
2907
|
-
tokens: [
|
|
2908
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
2909
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
2910
|
-
],
|
|
2911
|
-
durationInFrames: 90,
|
|
2912
|
-
fps: 30,
|
|
2913
|
-
width: 1920,
|
|
2914
|
-
height: 1080,
|
|
2915
|
-
preview: { thumbnailFrame: 28, mode: "oneshot", defaultExample: "beat-drop" }
|
|
2916
|
-
};
|
|
2917
|
-
|
|
2918
|
-
// src/text/quote-card/config.ts
|
|
2919
|
-
import { z as z15 } from "zod";
|
|
2920
|
-
var paramsSchema15 = z15.object({
|
|
2921
|
-
quote: z15.string().min(1).max(220).describe("The quote text (no quote marks \u2014 the card draws its own oversized mark). 8\u201324 words reads best."),
|
|
2922
|
-
author: z15.string().max(60).default("").describe("Attribution name."),
|
|
2923
|
-
role: z15.string().max(80).default("").describe("Attribution role/company line."),
|
|
2924
|
-
accentColor: z15.string().default(ACCENT).describe("Quote mark + attribution rule accent.")
|
|
2925
|
-
}).passthrough();
|
|
2926
|
-
var config15 = {
|
|
2927
|
-
id: "quote-card",
|
|
2928
|
-
component: QuoteCard,
|
|
2929
|
-
name: "Quote Card",
|
|
2930
|
-
category: "text",
|
|
2931
|
-
kind: "component",
|
|
2932
|
-
version: "0.1.1",
|
|
2933
|
-
intent: "name-card",
|
|
2934
|
-
description: "Attributed testimonial: an oversized accent quote mark drops in with weight, the quote reveals word-by-word on a masked rise, an accent rule draws, and the attribution fades up. Idles on a quiet hold with a breathing mark.",
|
|
2935
|
-
useWhen: "Customer testimonials, press quotes, founder statements \u2014 the social-proof beat of a launch video. Over footage of the speaker or a background primitive. For speaker NAME captions during footage use lower-third instead.",
|
|
2936
|
-
pairsWith: ["silk-flow-bg", "dither-gradient-bg", "vignette", "color-grade"],
|
|
2937
|
-
avoidWith: ["lower-third", "cinematic-title"],
|
|
2938
|
-
tier: "recommended",
|
|
2939
|
-
useCase: ["full-scene", "title-over-footage"],
|
|
2940
|
-
tags: ["text", "quote", "testimonial", "attribution", "social-proof"],
|
|
2941
|
-
mood: ["editorial", "corporate", "cinematic"],
|
|
2942
|
-
paramsSchema: paramsSchema15,
|
|
2943
|
-
propDefaults: {
|
|
2944
|
-
quote: "It replaced our entire editing pipeline in a week.",
|
|
2945
|
-
author: "Maya Alvarez",
|
|
2946
|
-
role: "Head of Product",
|
|
2947
|
-
accentColor: ACCENT
|
|
2948
|
-
},
|
|
2949
|
-
examples: [
|
|
2950
|
-
{ name: "customer-proof", mood: ["corporate"], params: { quote: "It replaced our entire editing pipeline in a week.", author: "Maya Alvarez", role: "Head of Product", accentColor: ACCENT } },
|
|
2951
|
-
{ name: "press-pull", mood: ["editorial"], params: { quote: "The most opinionated take on programmatic video yet.", author: "The Weekly Build", role: "", accentColor: SUCCESS } }
|
|
2952
|
-
],
|
|
2953
|
-
textParam: "quote",
|
|
2954
|
-
subtextParam: "author",
|
|
2955
|
-
tokens: [
|
|
2956
|
-
{ propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
|
|
2957
|
-
],
|
|
2958
|
-
durationInFrames: 150,
|
|
2959
|
-
fps: 30,
|
|
2960
|
-
width: 1920,
|
|
2961
|
-
height: 1080,
|
|
2962
|
-
preview: { thumbnailFrame: 80, mode: "oneshot", defaultExample: "customer-proof" }
|
|
2963
|
-
};
|
|
2964
|
-
|
|
2965
|
-
// src/text/slot-machine-roll/config.ts
|
|
2966
|
-
import { z as z16 } from "zod";
|
|
2967
|
-
var paramsSchema16 = z16.object({
|
|
2968
|
-
from: z16.string().min(1).max(20).default("$99").describe(
|
|
2969
|
-
"Starting value (top of the column). Numbers, prices, scores, or short codes work best \u2014 long strings break the slot-reel feel."
|
|
2970
|
-
),
|
|
2971
|
-
to: z16.string().min(1).max(20).default("$199").describe(
|
|
2972
|
-
"Ending value (bottom of the column, where the reel lands). Should be the same character class as `from` for visual coherence."
|
|
2973
|
-
),
|
|
2974
|
-
fontSize: z16.number().min(24).max(320).default(120).describe(
|
|
2975
|
-
"Font size in pixels at the canonical 1920\xD71080 frame. Slot-machine reads as a hero element \u2014 96\u2013160 is the sweet spot."
|
|
2976
|
-
),
|
|
2977
|
-
fontWeight: z16.number().min(100).max(900).default(700).describe(
|
|
2978
|
-
"CSS font weight. 700+ gives the chunky scoreboard look; 500 reads more editorial."
|
|
2979
|
-
),
|
|
2980
|
-
color: z16.string().default(FLOOR_TEXT).describe("Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."),
|
|
2981
|
-
fontFamily: z16.string().default(resolveTypeface("display")).describe("Display typeface; pass $brand:fonts.heading to theme."),
|
|
2982
|
-
speed: z16.number().min(0.25).max(4).default(1).describe(
|
|
2983
|
-
"Playback speed multiplier. Slower (0.5\u20130.75) emphasizes the roll; faster (1.5+) makes it incidental."
|
|
2984
|
-
)
|
|
2985
|
-
}).passthrough();
|
|
2986
|
-
var config16 = {
|
|
2987
|
-
id: "slot-machine-roll",
|
|
2988
|
-
component: SlotMachineRoll,
|
|
2989
|
-
name: "Slot Machine Roll",
|
|
2990
|
-
category: "text",
|
|
2991
|
-
kind: "component",
|
|
2992
|
-
version: "0.1.0",
|
|
2993
|
-
intent: "roll-numbers",
|
|
2994
|
-
description: "Per-column vertical roll from a starting value to an ending value, like a slot reel landing. Each column springs in with stagger, so the rightmost digits land last. Feels like a counter, scoreboard, or price update.",
|
|
2995
|
-
useWhen: 'Price changes, score updates, version bumps, follower-count flips, before/after stat reveals. Both `from` and `to` should be short and the same character class (numbers\u2192numbers, prices\u2192prices). Avoid for prose or multi-word phrases \u2014 use kinetic-type or staggered-fade-up instead. Avoid pairing with strikethrough-replace on the same beat (both communicate "value changed" and read as redundant).',
|
|
2996
|
-
pairsWith: ["lower-third", "success-confetti", "spring-pop-in", "pulsing-indicator"],
|
|
2997
|
-
avoidWith: ["strikethrough-replace", "text-fade-replace"],
|
|
2998
|
-
tier: "standard",
|
|
2999
|
-
useCase: ["emphasis"],
|
|
3000
|
-
tags: ["text", "slot-machine", "roll", "counter", "numbers", "price", "scoreboard", "stat"],
|
|
3001
|
-
mood: ["playful", "corporate", "editorial"],
|
|
3002
|
-
paramsSchema: paramsSchema16,
|
|
3003
|
-
propDefaults: { from: "$99", to: "$199", fontSize: 120, fontWeight: 700, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), speed: 1 },
|
|
3004
|
-
examples: [
|
|
3005
|
-
{
|
|
3006
|
-
name: "price-bump",
|
|
3007
|
-
mood: ["corporate", "editorial"],
|
|
3008
|
-
params: { from: "$99", to: "$199", fontSize: 160, fontWeight: 800, color: FLOOR_TEXT },
|
|
3009
|
-
description: "Classic price-change reveal for promo or pricing-page video."
|
|
3010
|
-
},
|
|
3011
|
-
{
|
|
3012
|
-
name: "follower-count",
|
|
3013
|
-
mood: ["playful"],
|
|
3014
|
-
params: { from: "10K", to: "100K", fontSize: 140, fontWeight: 700, color: "#2563eb" },
|
|
3015
|
-
description: "Milestone counter flip \u2014 followers, downloads, signups."
|
|
3016
|
-
},
|
|
3017
|
-
{
|
|
3018
|
-
name: "version-bump",
|
|
3019
|
-
mood: ["tech-demo"],
|
|
3020
|
-
params: { from: "v2.0", to: "v3.0", fontSize: 120, fontWeight: 600, color: FLOOR_TEXT },
|
|
3021
|
-
description: "Version reveal for changelog/release video."
|
|
3022
|
-
}
|
|
3023
|
-
],
|
|
3024
|
-
textParam: "to",
|
|
3025
|
-
subtextParam: "from",
|
|
3026
|
-
tokens: [
|
|
3027
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
3028
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
3029
|
-
],
|
|
3030
|
-
durationInFrames: 90,
|
|
3031
|
-
fps: 30,
|
|
3032
|
-
width: 1920,
|
|
3033
|
-
height: 1080,
|
|
3034
|
-
preview: { thumbnailFrame: 70, mode: "oneshot", defaultExample: "price-bump" }
|
|
3035
|
-
};
|
|
3036
|
-
|
|
3037
|
-
// src/text/stat-counter/config.ts
|
|
3038
|
-
import { z as z17 } from "zod";
|
|
3039
|
-
var paramsSchema17 = z17.object({
|
|
3040
|
-
value: z17.number().min(0).max(1e12).describe("The number that lands. Counts up from 0 with an expo settle."),
|
|
3041
|
-
prefix: z17.string().max(4).default("").describe("Glyphs before the number ('$', '\u20AC', '~')."),
|
|
3042
|
-
suffix: z17.string().max(6).default("").describe("Glyphs after the number ('+', '%', 'k', 'M') \u2014 rendered in the accent color."),
|
|
3043
|
-
label: z17.string().max(60).default("").describe("Uppercase caption under the number ('ACTIVE USERS', 'ARR'). Rises in after the count lands."),
|
|
3044
|
-
accentColor: z17.string().default(ACCENT).describe("Underline + suffix accent."),
|
|
3045
|
-
decimals: z17.number().int().min(0).max(2).default(0).describe("Decimal places (99.99% \u2192 2)."),
|
|
3046
|
-
countFrames: z17.number().int().min(10).max(150).default(45).describe("Frames the count-up takes."),
|
|
3047
|
-
position: z17.enum(["center", "left", "right"]).default("center").describe("Horizontal placement.")
|
|
3048
|
-
}).passthrough();
|
|
3049
|
-
var config17 = {
|
|
3050
|
-
id: "stat-counter",
|
|
3051
|
-
component: StatCounter,
|
|
3052
|
-
name: "Stat Counter",
|
|
3053
|
-
category: "text",
|
|
3054
|
-
kind: "component",
|
|
3055
|
-
version: "0.1.1",
|
|
3056
|
-
intent: "reveal-text",
|
|
3057
|
-
description: 'The launch-video staple: a big number counts up and LANDS \u2014 expo-eased so the final digits settle, tabular numerals (no jitter), an accent underline that draws in as the count completes and glows gently at idle, and an uppercase label that rises in after. "$2M ARR", "10k+ users", "99.99% uptime".',
|
|
3058
|
-
useWhen: "Traction beats, metric reveals, pricing anchors \u2014 any moment the video needs a number to land with weight. Pair over footage or a background primitive. One stat per beat; for dashboards of many numbers use dashboard-populate instead.",
|
|
3059
|
-
pairsWith: ["silk-flow-bg", "mesh-gradient-bg", "dither-gradient-bg", "vignette", "staggered-fade-up"],
|
|
3060
|
-
avoidWith: ["slot-machine-roll", "dashboard-populate"],
|
|
3061
|
-
tier: "recommended",
|
|
3062
|
-
useCase: ["emphasis", "title-over-footage"],
|
|
3063
|
-
tags: ["text", "number", "counter", "stat", "metric", "count-up", "launch"],
|
|
3064
|
-
mood: ["corporate", "tech-demo", "editorial"],
|
|
3065
|
-
paramsSchema: paramsSchema17,
|
|
3066
|
-
propDefaults: {
|
|
3067
|
-
value: 1e4,
|
|
3068
|
-
prefix: "",
|
|
3069
|
-
suffix: "+",
|
|
3070
|
-
label: "ACTIVE USERS",
|
|
3071
|
-
accentColor: ACCENT,
|
|
3072
|
-
decimals: 0,
|
|
3073
|
-
countFrames: 45,
|
|
3074
|
-
position: "center"
|
|
3075
|
-
},
|
|
3076
|
-
examples: [
|
|
3077
|
-
{ name: "users-landed", mood: ["corporate"], params: { value: 1e4, suffix: "+", label: "ACTIVE USERS", accentColor: ACCENT, countFrames: 45, position: "center" } },
|
|
3078
|
-
{ name: "arr", mood: ["corporate", "editorial"], params: { value: 2, prefix: "$", suffix: "M", label: "ANNUAL RECURRING REVENUE", accentColor: SUCCESS, countFrames: 40, position: "center" } },
|
|
3079
|
-
{ name: "uptime", mood: ["tech-demo"], params: { value: 99.99, suffix: "%", label: "UPTIME", accentColor: ACCENT, decimals: 2, countFrames: 50, position: "center" } }
|
|
3080
|
-
],
|
|
3081
|
-
textParam: "label",
|
|
3082
|
-
subtextParam: null,
|
|
3083
|
-
tokens: [
|
|
3084
|
-
{ propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
|
|
3085
|
-
],
|
|
3086
|
-
durationInFrames: 120,
|
|
3087
|
-
fps: 30,
|
|
3088
|
-
width: 1920,
|
|
3089
|
-
height: 1080,
|
|
3090
|
-
preview: { thumbnailFrame: 70, mode: "oneshot", defaultExample: "users-landed" }
|
|
3091
|
-
};
|
|
3092
|
-
|
|
3093
|
-
// src/text/token-stream/config.ts
|
|
3094
|
-
import { z as z18 } from "zod";
|
|
3095
|
-
var paramsSchema18 = z18.object({
|
|
3096
|
-
text: z18.string().min(1).max(400).describe("The response text that streams in token-by-token. 15\u201350 words reads best."),
|
|
3097
|
-
tokensPerSecond: z18.number().min(2).max(30).default(9).describe("Average streaming cadence. 8\u201312 feels like a fast model; 4\u20136 deliberate."),
|
|
3098
|
-
accentColor: z18.string().default(ACCENT).describe("Cursor accent."),
|
|
3099
|
-
startAt: z18.number().int().min(0).max(90).default(8).describe("Frames of hold before the first token.")
|
|
3100
|
-
}).passthrough();
|
|
3101
|
-
var config18 = {
|
|
3102
|
-
id: "token-stream",
|
|
3103
|
-
component: TokenStream,
|
|
3104
|
-
name: "Token Stream",
|
|
3105
|
-
category: "text",
|
|
3106
|
-
kind: "component",
|
|
3107
|
-
version: "0.1.1",
|
|
3108
|
-
intent: "reveal-text",
|
|
3109
|
-
description: "THE AI visual: a response streams in token-by-token on an irregular, human-feeling cadence \u2014 deterministic jitter with occasional micro-pauses, each token fading up, a block cursor pulsing at the head. On completion the cursor blinks twice and fades. Running text, not a terminal gimmick (that is typewriter).",
|
|
3110
|
-
useWhen: 'Model output reveals, copilot answer beats, "watch it respond" moments in AI product launches. Over footage or a background primitive. For monospace CLI streaming use typewriter; for a full conversation use chat-exchange.',
|
|
3111
|
-
pairsWith: ["dither-gradient-bg", "vector-field", "silk-flow-bg", "vignette"],
|
|
3112
|
-
avoidWith: ["typewriter", "chat-exchange"],
|
|
3113
|
-
tier: "recommended",
|
|
3114
|
-
useCase: ["title-over-footage", "full-scene", "explainer"],
|
|
3115
|
-
tags: ["text", "ai", "llm", "streaming", "tokens", "cursor", "response"],
|
|
3116
|
-
mood: ["tech-demo", "minimal"],
|
|
3117
|
-
paramsSchema: paramsSchema18,
|
|
3118
|
-
propDefaults: {
|
|
3119
|
-
text: "Here is the summary you asked for \u2014 three risks, two of them already mitigated, and one decision that needs you today.",
|
|
3120
|
-
tokensPerSecond: 9,
|
|
3121
|
-
accentColor: ACCENT,
|
|
3122
|
-
startAt: 8
|
|
3123
|
-
},
|
|
3124
|
-
examples: [
|
|
3125
|
-
{ name: "assistant-answer", mood: ["tech-demo"], params: { text: "Here is the summary you asked for \u2014 three risks, two of them already mitigated, and one decision that needs you today.", tokensPerSecond: 9, accentColor: ACCENT } },
|
|
3126
|
-
{ name: "deliberate-reasoning", mood: ["minimal"], params: { text: "Thinking through the tradeoffs: speed favors the cache, correctness favors the queue. Recommending the queue.", tokensPerSecond: 5, accentColor: VIOLET } }
|
|
3127
|
-
],
|
|
3128
|
-
textParam: "text",
|
|
3129
|
-
subtextParam: null,
|
|
3130
|
-
tokens: [
|
|
3131
|
-
{ propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
|
|
3132
|
-
],
|
|
3133
|
-
durationInFrames: 180,
|
|
3134
|
-
fps: 30,
|
|
3135
|
-
width: 1920,
|
|
3136
|
-
height: 1080,
|
|
3137
|
-
preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "assistant-answer" }
|
|
3138
|
-
};
|
|
3139
|
-
|
|
3140
|
-
// src/text/strikethrough-replace/config.ts
|
|
3141
|
-
import { z as z19 } from "zod";
|
|
3142
|
-
var paramsSchema19 = z19.object({
|
|
3143
|
-
from: z19.string().min(1).max(140).describe(
|
|
3144
|
-
'Original phrase. A line draws across it during the first 40% of duration. Keep short \u2014 this is the "wrong/old" half of a comparison.'
|
|
3145
|
-
),
|
|
3146
|
-
to: z19.string().min(1).max(140).describe(
|
|
3147
|
-
'Replacement phrase that fades up after the strikethrough completes. Often the "new/correct/better" half of the comparison.'
|
|
3148
|
-
),
|
|
3149
|
-
lineColor: z19.string().default("#ff5e3a").describe(
|
|
3150
|
-
'Color of the strikethrough bar. Hot orange/red reads as "rejected"; brand color softens the verdict.'
|
|
3151
|
-
),
|
|
3152
|
-
fontSize: z19.number().min(16).max(240).default(48).describe(
|
|
3153
|
-
"Font size in pixels at the canonical 1920\xD71080 frame. 48\u201372 is the lower-third / caption sweet spot for this effect."
|
|
3154
|
-
),
|
|
3155
|
-
fontWeight: z19.number().min(100).max(900).default(600).describe(
|
|
3156
|
-
"CSS font weight. 600 gives editorial weight without overpowering the line."
|
|
3157
|
-
),
|
|
3158
|
-
color: z19.string().default(FLOOR_TEXT).describe("Text color for both `from` and `to` (video-safe off-white over footage); pass $brand:colors.textOnMedia to theme."),
|
|
3159
|
-
fontFamily: z19.string().default(resolveTypeface("display")).describe("Display typeface. Defaults to the brand display face (Bricolage Grotesque floor); pass $brand:fonts.heading to theme."),
|
|
3160
|
-
speed: z19.number().min(0.25).max(4).default(1).describe(
|
|
3161
|
-
"Playback speed multiplier. The effect divides duration into strike (0\u201340%), fade (40\u201360%), hold (60\u2013100%) regardless of speed."
|
|
3162
|
-
)
|
|
3163
|
-
}).passthrough();
|
|
3164
|
-
var config19 = {
|
|
3165
|
-
id: "strikethrough-replace",
|
|
3166
|
-
component: StrikethroughReplace,
|
|
3167
|
-
name: "Strikethrough Replace",
|
|
3168
|
-
category: "text",
|
|
3169
|
-
kind: "component",
|
|
3170
|
-
version: "0.1.0",
|
|
3171
|
-
intent: "replace-text",
|
|
3172
|
-
description: 'Draws a strikethrough across the `from` text, then fades it to the `to` text in place. Three phases: line draws (0\u201340%), crossfade with slight rise (40\u201360%), hold (60\u2013100%). Communicates "this, not that" \u2014 myth-busting, before/after, correction.',
|
|
3173
|
-
useWhen: 'Myth-vs-fact captions, "no, actually" reveals, before/after framing, debunking pull-quotes, marketing comparisons (their thing \u2192 our thing). Both phrases should be roughly the same length so the eye sees the same slot getting overwritten. Avoid for emotional reveals (use blur-reveal or cinematic-title) and avoid pairing with slot-machine-roll on the same beat \u2014 both say "value changed" and read as redundant.',
|
|
3174
|
-
pairsWith: ["lower-third", "inline-highlight", "marker-highlight", "pulsing-indicator"],
|
|
3175
|
-
avoidWith: ["slot-machine-roll", "text-fade-replace"],
|
|
3176
|
-
tier: "standard",
|
|
3177
|
-
useCase: ["emphasis", "title-over-footage"],
|
|
3178
|
-
tags: ["text", "strikethrough", "replace", "before-after", "comparison", "myth-bust", "correction"],
|
|
3179
|
-
mood: ["editorial", "breaking-news", "corporate"],
|
|
3180
|
-
paramsSchema: paramsSchema19,
|
|
3181
|
-
propDefaults: { lineColor: "#ff5e3a", fontSize: 48, fontWeight: 600, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), speed: 1 },
|
|
3182
|
-
examples: [
|
|
3183
|
-
{
|
|
3184
|
-
name: "myth-vs-fact",
|
|
3185
|
-
mood: ["editorial"],
|
|
3186
|
-
params: { from: "AI replaces engineers", to: "AI augments engineers", lineColor: "#ff5e3a", fontSize: 56, fontWeight: 600, color: FLOOR_TEXT },
|
|
3187
|
-
description: "Classic myth-busting caption."
|
|
3188
|
-
},
|
|
3189
|
-
{
|
|
3190
|
-
name: "before-after-pricing",
|
|
3191
|
-
mood: ["corporate"],
|
|
3192
|
-
params: { from: "$199/month", to: "$49/month", lineColor: "#dc2626", fontSize: 72, fontWeight: 700, color: FLOOR_TEXT },
|
|
3193
|
-
description: "Pricing comparison with a hard red line."
|
|
3194
|
-
},
|
|
3195
|
-
{
|
|
3196
|
-
name: "soft-correction",
|
|
3197
|
-
mood: ["editorial", "minimal"],
|
|
3198
|
-
params: { from: "fast", to: "instant", lineColor: "#94a3b8", fontSize: 96, fontWeight: 500, color: FLOOR_TEXT },
|
|
3199
|
-
description: "Subtle gray strike for editorial copy upgrades."
|
|
3200
|
-
}
|
|
3201
|
-
],
|
|
3202
|
-
textParam: "to",
|
|
3203
|
-
subtextParam: "from",
|
|
3204
|
-
tokens: [
|
|
3205
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
3206
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" },
|
|
3207
|
-
{ propPath: "lineColor", cssVar: "--cf-accent", fallback: "#ff5e3a", brandKitPath: "colors.accent" }
|
|
3208
|
-
],
|
|
3209
|
-
durationInFrames: 120,
|
|
3210
|
-
fps: 30,
|
|
3211
|
-
width: 1920,
|
|
3212
|
-
height: 1080,
|
|
3213
|
-
preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "myth-vs-fact" }
|
|
3214
|
-
};
|
|
3215
|
-
|
|
3216
|
-
// src/text/masked-slide-reveal/config.ts
|
|
3217
|
-
import { z as z20 } from "zod";
|
|
3218
|
-
var paramsSchema20 = z20.object({
|
|
3219
|
-
text: z20.string().min(1).max(280).describe(
|
|
3220
|
-
"Phrase to reveal. Words are split on whitespace and each slides up from below its own clipping mask. 3\u201310 words reads cleanest."
|
|
3221
|
-
),
|
|
3222
|
-
staggerDelay: z20.number().min(0).max(20).default(3).describe(
|
|
3223
|
-
"Frames between successive word reveals. 2\u20134 feels brisk; 6+ feels deliberate, almost choreographed."
|
|
3224
|
-
),
|
|
3225
|
-
fontSize: z20.number().min(24).max(320).default(72).describe(
|
|
3226
|
-
"Font size in pixels at the canonical 1920\xD71080 frame. The masked-slide effect needs hero scale to read \u2014 72\u2013120 is the sweet spot."
|
|
3227
|
-
),
|
|
3228
|
-
fontWeight: z20.number().min(100).max(900).default(700).describe(
|
|
3229
|
-
"CSS font weight. 700+ gives the chunky editorial feel that the reveal pattern is built for."
|
|
3230
|
-
),
|
|
3231
|
-
color: z20.string().default(FLOOR_TEXT).describe("Text color. Defaults to a video-safe off-white (text sits over footage); pass $brand:colors.textOnMedia to theme it."),
|
|
3232
|
-
fontFamily: z20.string().default(resolveTypeface("display")).describe("Display typeface; pass $brand:fonts.heading to theme."),
|
|
3233
|
-
speed: z20.number().min(0.25).max(4).default(1).describe(
|
|
3234
|
-
"Playback speed multiplier independent of staggerDelay."
|
|
3235
|
-
)
|
|
3236
|
-
}).passthrough();
|
|
3237
|
-
var config20 = {
|
|
3238
|
-
id: "masked-slide-reveal",
|
|
3239
|
-
component: MaskedSlideReveal,
|
|
3240
|
-
name: "Masked Slide Reveal",
|
|
3241
|
-
category: "text",
|
|
3242
|
-
kind: "component",
|
|
3243
|
-
version: "0.1.0",
|
|
3244
|
-
intent: "reveal-text",
|
|
3245
|
-
description: "Per-word slide-up from a clipping mask, with spring damping and stagger. Each word emerges from beneath an invisible bottom edge, so glyphs appear to be cut by a hard line until they snap into place. Editorial/award-show typography feel.",
|
|
3246
|
-
useWhen: "Hero titles, intro statements, manifesto-style declarations, lecture/conference card reveals. 3\u201310 words is the sweet spot. Avoid for read-along captions (use karaoke), for single words (use blur-reveal or tracking-in), and for content where the bottom edge of the canvas is busy with other elements (the mask becomes visible and looks broken). Don't pair with kinetic-type \u2014 both are per-word reveals and read as competing.",
|
|
3247
|
-
pairsWith: ["mesh-gradient-bg", "cinematic-title", "lower-third", "grain"],
|
|
3248
|
-
avoidWith: ["kinetic-type", "staggered-fade-up", "karaoke"],
|
|
3249
|
-
tier: "recommended",
|
|
3250
|
-
useCase: ["title-over-footage", "intro"],
|
|
3251
|
-
tags: ["text", "masked", "slide", "reveal", "per-word", "editorial", "spring", "hero"],
|
|
3252
|
-
mood: ["editorial", "cinematic", "minimal"],
|
|
3253
|
-
paramsSchema: paramsSchema20,
|
|
3254
|
-
propDefaults: { staggerDelay: 3, fontSize: 72, fontWeight: 700, color: FLOOR_TEXT, fontFamily: resolveTypeface("display"), speed: 1 },
|
|
3255
|
-
examples: [
|
|
3256
|
-
{
|
|
3257
|
-
name: "manifesto-statement",
|
|
3258
|
-
mood: ["editorial", "cinematic"],
|
|
3259
|
-
params: { text: "Built for the next decade", staggerDelay: 4, fontSize: 96, fontWeight: 700, color: FLOOR_TEXT },
|
|
3260
|
-
description: "Hero title with deliberate per-word stagger."
|
|
3261
|
-
},
|
|
3262
|
-
{
|
|
3263
|
-
name: "snappy-intro",
|
|
3264
|
-
mood: ["minimal"],
|
|
3265
|
-
params: { text: "A new way to ship", staggerDelay: 2, fontSize: 80, fontWeight: 600, color: FLOOR_TEXT },
|
|
3266
|
-
description: "Quick stagger for intro/opener cards."
|
|
3267
|
-
},
|
|
3268
|
-
{
|
|
3269
|
-
name: "cinematic-pull-quote",
|
|
3270
|
-
mood: ["cinematic"],
|
|
3271
|
-
params: { text: "The future is uneven", staggerDelay: 6, fontSize: 120, fontWeight: 800, color: FLOOR_TEXT },
|
|
3272
|
-
description: "Slow, large, editorial pull-quote."
|
|
3273
|
-
}
|
|
3274
|
-
],
|
|
3275
|
-
textParam: "text",
|
|
3276
|
-
subtextParam: null,
|
|
3277
|
-
tokens: [
|
|
3278
|
-
{ propPath: "color", cssVar: "--cf-text-onmedia", fallback: FLOOR_TEXT, brandKitPath: "colors.textOnMedia" },
|
|
3279
|
-
{ propPath: "fontFamily", cssVar: "--cf-font-display", fallback: resolveTypeface("display"), brandKitPath: "fonts.heading" }
|
|
3280
|
-
],
|
|
3281
|
-
durationInFrames: 90,
|
|
3282
|
-
fps: 30,
|
|
3283
|
-
width: 1920,
|
|
3284
|
-
height: 1080,
|
|
3285
|
-
preview: { thumbnailFrame: 50, mode: "oneshot", defaultExample: "manifesto-statement" }
|
|
3286
|
-
};
|
|
3287
|
-
|
|
3288
|
-
// src/text/text-effect/config.ts
|
|
3289
|
-
import { z as z21 } from "zod";
|
|
3290
|
-
var paramsSchema21 = z21.object({
|
|
3291
|
-
text: z21.string().min(1).max(80).optional().describe(
|
|
3292
|
-
"Text to style. Required in practice \u2014 the component renders nothing without it (or children in code use)."
|
|
3293
|
-
),
|
|
3294
|
-
type: z21.enum(["gradient", "neon", "glow", "wave", "outline", "shadow"]).describe(
|
|
3295
|
-
"CSS treatment to apply to the wrapped text. gradient/wave bake a color sweep into the glyphs; neon/glow add radial light bleed; outline strokes the glyphs; shadow drops a soft offset shadow."
|
|
3296
|
-
),
|
|
3297
|
-
colors: z21.array(z21.string()).min(2).max(6).default([DANGER, TEAL, BLUE]).describe(
|
|
3298
|
-
"Palette for gradient and wave effects. 2\u20134 colors read cleanly; more becomes a smear. Ignored by neon/glow/outline/shadow."
|
|
3299
|
-
),
|
|
3300
|
-
color: z21.string().default(ACCENT).describe(
|
|
3301
|
-
"Single color for neon/glow/outline/shadow effects. Ignored by gradient/wave."
|
|
3302
|
-
),
|
|
3303
|
-
intensity: z21.number().min(0).max(1).default(0.8).describe(
|
|
3304
|
-
"Effect strength 0\u20131. 0.6\u20130.8 keeps text readable; 1.0 maxes the glow/stroke and starts losing edges."
|
|
3305
|
-
)
|
|
3306
|
-
}).passthrough();
|
|
3307
|
-
var config21 = {
|
|
3308
|
-
id: "text-effect",
|
|
3309
|
-
component: TextEffect,
|
|
3310
|
-
name: "Text Effect",
|
|
3311
|
-
category: "text",
|
|
3312
|
-
kind: "component",
|
|
3313
|
-
version: "0.1.2",
|
|
3314
|
-
intent: "style-text",
|
|
3315
|
-
description: "Composable CSS-only treatment that wraps another text primitive (cinematic-title, kinetic-type, etc.) and applies a styled appearance \u2014 gradient fill, neon glow, color-cycle wave, stroke outline, or drop shadow. Static styling layer; carries no animation of its own. Pairs with any text primitive that renders glyphs.",
|
|
3316
|
-
useWhen: "When a text primitive needs a vibe shift (neon arcade, gradient hype, outline-only minimalism) without rebuilding the underlying animation. Wrap, don't embed. Avoid stacking multiple TextEffect wrappers on the same content (the inner one wins or both fight). Skip for content where readability matters more than vibe (lower-thirds, captions).",
|
|
3317
|
-
pairsWith: ["cinematic-title", "kinetic-type", "tracking-in", "staggered-fade-up"],
|
|
3318
|
-
avoidWith: ["lower-third", "karaoke", "inline-highlight"],
|
|
3319
|
-
tier: "niche",
|
|
3320
|
-
useCase: ["title-over-footage"],
|
|
3321
|
-
tags: ["text", "effect", "style", "gradient", "neon", "glow", "outline", "shadow", "wrapper"],
|
|
3322
|
-
mood: ["playful", "aggressive", "cinematic", "tech-demo"],
|
|
3323
|
-
paramsSchema: paramsSchema21,
|
|
3324
|
-
propDefaults: {
|
|
3325
|
-
colors: [DANGER, TEAL, BLUE],
|
|
3326
|
-
color: ACCENT,
|
|
3327
|
-
intensity: 0.8
|
|
3328
|
-
},
|
|
3329
|
-
examples: [
|
|
3330
|
-
{
|
|
3331
|
-
name: "neon-arcade",
|
|
3332
|
-
mood: ["playful", "aggressive"],
|
|
3333
|
-
params: { text: "GAME ON", type: "neon", color: ACCENT, intensity: 0.9 },
|
|
3334
|
-
description: "Mandarin neon glow \u2014 arcade/synthwave wrapper."
|
|
3335
|
-
},
|
|
3336
|
-
{
|
|
3337
|
-
name: "sunset-gradient",
|
|
3338
|
-
mood: ["cinematic", "editorial"],
|
|
3339
|
-
params: { text: "Golden hour", type: "gradient", colors: [DANGER, ACCENT, WARNING], intensity: 0.8 },
|
|
3340
|
-
description: "Warm gradient fill across the glyphs."
|
|
3341
|
-
},
|
|
3342
|
-
{
|
|
3343
|
-
name: "minimal-outline",
|
|
3344
|
-
mood: ["minimal", "editorial"],
|
|
3345
|
-
params: { text: "MONOCHROME", type: "outline", color: FLOOR_TEXT, intensity: 0.7 },
|
|
3346
|
-
description: "Stroke-only text \u2014 gallery/editorial feel."
|
|
3347
|
-
}
|
|
3348
|
-
],
|
|
3349
|
-
textParam: "text",
|
|
3350
|
-
subtextParam: null,
|
|
3351
|
-
tokens: [
|
|
3352
|
-
{ propPath: "color", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
|
|
3353
|
-
],
|
|
3354
|
-
durationInFrames: 90,
|
|
3355
|
-
fps: 30,
|
|
3356
|
-
width: 1920,
|
|
3357
|
-
height: 1080,
|
|
3358
|
-
preview: { thumbnailFrame: 45, mode: "loop", defaultExample: "neon-arcade" }
|
|
3359
|
-
};
|
|
3360
|
-
|
|
3361
|
-
// src/text/index.ts
|
|
3362
|
-
var catalog = [
|
|
3363
|
-
config,
|
|
3364
|
-
config2,
|
|
3365
|
-
config3,
|
|
3366
|
-
config4,
|
|
3367
|
-
config5,
|
|
3368
|
-
config6,
|
|
3369
|
-
config7,
|
|
3370
|
-
config8,
|
|
3371
|
-
config9,
|
|
3372
|
-
config10,
|
|
3373
|
-
config11,
|
|
3374
|
-
config12,
|
|
3375
|
-
config13,
|
|
3376
|
-
config14,
|
|
3377
|
-
config16,
|
|
3378
|
-
config19,
|
|
3379
|
-
config20,
|
|
3380
|
-
config21,
|
|
3381
|
-
config15,
|
|
3382
|
-
config17,
|
|
3383
|
-
config18
|
|
3384
|
-
];
|
|
3385
|
-
|
|
3386
|
-
export {
|
|
3387
|
-
BlurReveal,
|
|
3388
|
-
CinematicTitle,
|
|
3389
|
-
InlineHighlight,
|
|
3390
|
-
Karaoke,
|
|
3391
|
-
KineticType,
|
|
3392
|
-
LowerThird,
|
|
3393
|
-
MarkerHighlight,
|
|
3394
|
-
ShimmerSweep,
|
|
3395
|
-
StaggeredFadeUp,
|
|
3396
|
-
TextEffect,
|
|
3397
|
-
TextFadeReplace,
|
|
3398
|
-
TrackingIn,
|
|
3399
|
-
Typewriter,
|
|
3400
|
-
MatrixDecode,
|
|
3401
|
-
RGBGlitchText,
|
|
3402
|
-
QuoteCard,
|
|
3403
|
-
SlotMachineRoll,
|
|
3404
|
-
StatCounter,
|
|
3405
|
-
TokenStream,
|
|
3406
|
-
StrikethroughReplace,
|
|
3407
|
-
MaskedSlideReveal,
|
|
3408
|
-
catalog
|
|
3409
|
-
};
|
|
3410
|
-
//# sourceMappingURL=chunk-LWLHS2NS.js.map
|