Handwrite

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { Handwrite } from "@/components/remocn/handwrite";
 
const HandwriteScene = () => (
  <AbsoluteFill style={{ background: "#f1eee7" }}>
    <Handwrite text="Made by hand" fontSize={72} />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="Handwrite"
    component={HandwriteScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

import { Sequence } from "remotion";
import { Handwrite, handwriteDuration } from "@/components/remocn/handwrite";
 
const title = "Made by hand";
const subtitle = "one pose at a time";
 
const Titles = () => (
  <>
    <Sequence durationInFrames={handwriteDuration(title)}>
      <Handwrite text={title} fontSize={72} />
    </Sequence>
    <Sequence from={handwriteDuration(title)}>
      <Handwrite text={subtitle} fontSize={44} />
    </Sequence>
  </>
);