type-assembly-moves
Shot recipes · A title · Apache-2.0
- What it does
3 named moves on one card: split-text-stagger (Each character rises inside its own overflow box from 115% with a 10% overshoot, two frames apart, as the baseline grows beneath); drift-assembly (Characters drift in from seeded directions with blur, locking into place one by one, each lock landing a darkening pulse); text-on-path (Characters slide in single-file along a bezier curve, rotating with the tangent, then straighten level over 12 frames).
- Get it
Copy demos/typography/type-assembly-moves/LetterformDriftAssembly.tsx (and its 2 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Fixtures.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id="LetterformDriftAssembly" component={LetterformDriftAssembly} durationInFrames={LETTERFORM_DRIFT_ASSEMBLY_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: "use the type-assembly-moves shot card". Read the card first: references/shots/typography/type-assembly-moves.md.
- Needs (the whole pack)
Remotion 4 and React 19, and FFmpeg for its checks. No Tailwind, no CSS files, no web fonts.
- Re-skin
Edit the file (colors, logo, text)
No props (3 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.midnight), but about 2 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The logo and…
- License
Apache-2.0
- From