Create React Video: Using custom fonts

index.jsx

import React from "react";
import ReactDOM from "react-dom";

import Gideo, { Audio, Video, animatable } from "@robo54/gideo";

import "typeface-roboto";
import "typeface-lato";
import "typeface-oswald";
import "typeface-raleway";
import "typeface-merriweather";
import "typeface-lora";
import "typeface-arimo";
import "typeface-bree-serif";
import "typeface-signika";
import "typeface-amaranth";
import "typeface-prata";
import "typeface-rubik-mono-one";
import "typeface-aleo";
import "typeface-clear-sans";
import "typeface-cooper-hewitt";

const FontPreview = animatable(props => {
  const style = {
    container: {
      alignItems: "center",
      background: "#fff",
      bottom: 0,
      color: "#fff",
      display: "flex",
      fontWeight: 700,
      justifyContent: "center",
      left: 0,
      overflow: "hidden",
      position: "absolute",
      right: 0,
      top: 0,
    },
    content: {
      marginLeft: -5,
      marginTop: -10,
      position: "absolute",
      width: 300,
    },
    fontName: {
      background: "#000",
      bottom: 20,
      fontSize: 20,
      left: 20,
      lineHeight: 0.8,
      padding: 10,
      position: "absolute",
    },
    text: {
      WebkitBoxDecorationBreak: "clone",
      background: "#4285f4",
      fontFamily: props.font,
      fontSize: 44,
      lineHeight: 1.1,
      padding: "5px 10px",
    },
  };

  return (
    <div style={style.container}>
      <span style={style.fontName}>
        {props.font}
      </span>
      <div style={style.content}>
        <span style={{ ...style.text, ...props.style }}>
          <span style={{ position: "relative" }}>
            {props.children.slice(0, props.animate(0, props.children.length, { duration: 0.5 }))}
          </span>
        </span>
      </div>
    </div>
  );
});

const Project = () => {
  return (
    <Gideo width={400} height={400} duration={32}>
      <FontPreview begin={0} duration={2} font="Roboto">
        All their equipment and instruments are alive.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Lato" style={{ fontSize: 46 }}>
        A shining crescent far beneath the flying vessel.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Oswald" style={{ textTransform: "uppercase", fontWeight: 400, lineHeight: 1.2, padding: "5px 15px" }}>
        Silver mist suffused the deck of the ship.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Raleway">
        The sky was cloudless and of a deep dark blue.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Merriweather">
        Waves flung themselves at the blue evening.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Lora" style={{ fontWeight: 500 }}>
        I watched the storm, so beautiful yet terrific.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Arimo">
        She stared through the window at the stars.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Bree Serif" style={{ fontWeight: 600, lineHeight: 1.2, padding: "4px 15px" }}>
        The spectacle before us was indeed sublime.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Signika" style={{ fontWeight: 600, fontSize: 50 }}>
        It was going to be a lonely trip back.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Libre Baskerville" style={{ fontStyle: "italic", fontSize: 45, lineHeight: 1.3, padding: "5px 18px 5px 12px" }}>
        Then came the night of the first falling star.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Amaranth" style={{ fontWeight: 500, padding: "5px 14px 6px" }}>
        A red flair silhouetted the jagged edge of a wing.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Prata" style={{ fontSize: 43, lineHeight: 1.2, fontWeight: 600 }}>
        Almost before we knew it, we had left the ground.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Rubik Mono One" style={{ fontWeight: 500, fontSize: 34 }}>
        Mist enveloped the ship three hours out from port.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Aleo" style={{ fontSize: 46 }}>
        My two natures had memory in common.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Clear Sans">
        The face of the moon was in shadow.
      </FontPreview>
      <FontPreview beginAfter={-1} duration={2} font="Cooper Hewitt" style={{ fontWeight: 600, fontSize: 40 }}>
        The recorded voice scratched in the speaker.
      </FontPreview>
    </Gideo>
  );
};

ReactDOM.render(<Project />, document.getElementById("root"));