Ink Underline

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { Handwrite, handwriteDuration } from "@/components/remocn/handwrite";
import { InkUnderline } from "@/components/remocn/ink-underline";
 
const url = "remocn.dev";
 
const InkUnderlineScene = () => (
  <AbsoluteFill
    style={{
      background: "#f1eee7",
      alignItems: "center",
      justifyContent: "center",
      flexDirection: "column",
      gap: 4,
    }}
  >
    <div style={{ position: "relative", width: 420, height: 96 }}>
      <Handwrite text={url} fontSize={64} />
    </div>
    <InkUnderline width={420} delay={handwriteDuration(url)} />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="InkUnderline"
    component={InkUnderlineScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);