Skip to content

Instantly share code, notes, and snippets.

@dmfrancisco
Last active September 2, 2017 18:33
Show Gist options
  • Save dmfrancisco/86d7176667acdcd83715f4486370c552 to your computer and use it in GitHub Desktop.
Save dmfrancisco/86d7176667acdcd83715f4486370c552 to your computer and use it in GitHub Desktop.
Create React Video: Using custom fonts
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"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment