chore: clean up content phase organization

apps/videos/src/HelloWorld.tsx

@@ -0,0 +1,74 @@
+import {
+  AbsoluteFill,
+  interpolate,
+  Sequence,
+  spring,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { Logo } from "./HelloWorld/Logo";
+import { Subtitle } from "./HelloWorld/Subtitle";
+import { Title } from "./HelloWorld/Title";
+
+export type HelloWorldProps = {
+  readonly titleText: string;
+  readonly titleColor: string;
+  readonly logoColor1: string;
+  readonly logoColor2: string;
+};
+
+export const HelloWorld: React.FC<HelloWorldProps> = ({
+  titleText: propOne,
+  titleColor: propTwo,
+  logoColor1,
+  logoColor2,
+}) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames, fps } = useVideoConfig();
+
+  // Animate from 0 to 1 after 25 frames
+  const logoTranslationProgress = spring({
+    frame: frame - 25,
+    fps,
+    config: {
+      damping: 100,
+    },
+  });
+
+  // Move the logo up by 150 pixels once the transition starts
+  const logoTranslation = interpolate(
+    logoTranslationProgress,
+    [0, 1],
+    [0, -150],
+  );
+
+  // Fade out the animation at the end
+  const opacity = interpolate(
+    frame,
+    [durationInFrames - 25, durationInFrames - 15],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    },
+  );
+
+  // A <AbsoluteFill> is just a absolutely positioned <div>!
+  return (
+    <AbsoluteFill style={{ backgroundColor: "white" }}>
+      <AbsoluteFill style={{ opacity }}>
+        <AbsoluteFill style={{ transform: `translateY(${logoTranslation}px)` }}>
+          <Logo logoColor1={logoColor1} logoColor2={logoColor2} />
+        </AbsoluteFill>
+        {/* Sequences can shift the time for its children! */}
+        <Sequence from={35}>
+          <Title titleText={propOne} titleColor={propTwo} />
+        </Sequence>
+        {/* The subtitle will only enter on the 75th frame. */}
+        <Sequence from={75}>
+          <Subtitle />
+        </Sequence>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

apps/videos/src/HelloWorld/Arc.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { random, useVideoConfig } from "remotion";
+
+const getCircumferenceOfArc = (rx: number, ry: number) => {
+  return Math.PI * 2 * Math.sqrt((rx * rx + ry * ry) / 2);
+};
+
+const rx = 135;
+const ry = 300;
+const cx = 960;
+const cy = 540;
+const arcLength = getCircumferenceOfArc(rx, ry);
+const strokeWidth = 30;
+
+export const Arc: React.FC<{
+  progress: number;
+  rotation: number;
+  rotateProgress: number;
+  color1: string;
+  color2: string;
+}> = ({ progress, rotation, rotateProgress, color1, color2 }) => {
+  const { width, height } = useVideoConfig();
+
+  // Each svg Id must be unique to not conflict with each other
+  const [gradientId] = useState(() => String(random(null)));
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      style={{
+        position: "absolute",
+        transform: `rotate(${rotation * rotateProgress}deg)`,
+      }}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor={color1} />
+          <stop offset="100%" stopColor={color2} />
+        </linearGradient>
+      </defs>
+      <ellipse
+        cx={cx}
+        cy={cy}
+        rx={rx}
+        ry={ry}
+        fill="none"
+        stroke={`url(#${gradientId})`}
+        strokeDasharray={arcLength}
+        strokeDashoffset={arcLength - arcLength * progress}
+        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};

apps/videos/src/HelloWorld/Atom.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { random, useVideoConfig } from "remotion";
+
+export const Atom: React.FC<{
+  scale: number;
+  color1: string;
+  color2: string;
+}> = ({ scale, color1, color2 }) => {
+  const config = useVideoConfig();
+
+  // Each SVG ID must be unique to not conflict with each other
+  const [gradientId] = useState(() => String(random(null)));
+
+  return (
+    <svg
+      viewBox={`0 0 ${config.width} ${config.height}`}
+      style={{
+        position: "absolute",
+        transform: `scale(${scale})`,
+      }}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor={color1} />
+          <stop offset="100%" stopColor={color2} />
+        </linearGradient>
+      </defs>
+      <circle
+        r={70}
+        cx={config.width / 2}
+        cy={config.height / 2}
+        fill={`url(#${gradientId})`}
+      />
+    </svg>
+  );
+};

apps/videos/src/HelloWorld/Logo.tsx

@@ -0,0 +1,85 @@
+import {
+  AbsoluteFill,
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { Arc } from "./Arc";
+import { Atom } from "./Atom";
+
+export type LogoProps = {
+  readonly logoColor1: string;
+  readonly logoColor2: string;
+};
+
+export const Logo: React.FC<LogoProps> = ({
+  logoColor1: color1,
+  logoColor2: color2,
+}) => {
+  const videoConfig = useVideoConfig();
+  const frame = useCurrentFrame();
+
+  const development = spring({
+    config: {
+      damping: 100,
+      mass: 0.5,
+    },
+    fps: videoConfig.fps,
+    frame,
+  });
+
+  const rotationDevelopment = spring({
+    config: {
+      damping: 100,
+      mass: 0.5,
+    },
+    fps: videoConfig.fps,
+    frame,
+  });
+
+  const scale = spring({
+    frame,
+    config: {
+      mass: 0.5,
+    },
+    fps: videoConfig.fps,
+  });
+
+  const logoRotation = interpolate(
+    frame,
+    [0, videoConfig.durationInFrames],
+    [0, 360],
+  );
+
+  return (
+    <AbsoluteFill
+      style={{
+        transform: `scale(${scale}) rotate(${logoRotation}deg)`,
+      }}
+    >
+      <Arc
+        rotateProgress={rotationDevelopment}
+        progress={development}
+        rotation={30}
+        color1={color1}
+        color2={color2}
+      />
+      <Arc
+        rotateProgress={rotationDevelopment}
+        rotation={90}
+        progress={development}
+        color1={color1}
+        color2={color2}
+      />
+      <Arc
+        rotateProgress={rotationDevelopment}
+        rotation={-30}
+        progress={development}
+        color1={color1}
+        color2={color2}
+      />
+      <Atom scale={rotationDevelopment} color1={color1} color2={color2} />
+    </AbsoluteFill>
+  );
+};

apps/videos/src/HelloWorld/Subtitle.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { COLOR_1, FONT_FAMILY } from "./constants";
+
+const subtitle: React.CSSProperties = {
+  fontFamily: FONT_FAMILY,
+  fontSize: 40,
+  textAlign: "center",
+  position: "absolute",
+  bottom: 140,
+  width: "100%",
+};
+
+const codeStyle: React.CSSProperties = {
+  color: COLOR_1,
+};
+
+export const Subtitle: React.FC = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 30], [0, 1]);
+  return (
+    <div style={{ ...subtitle, opacity }}>
+      Edit <code style={codeStyle}>src/Root.tsx</code> and save to reload.
+    </div>
+  );
+};

apps/videos/src/HelloWorld/Title.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { FONT_FAMILY } from "./constants";
+
+const title: React.CSSProperties = {
+  fontFamily: FONT_FAMILY,
+  fontWeight: "bold",
+  fontSize: 100,
+  textAlign: "center",
+  position: "absolute",
+  bottom: 160,
+  width: "100%",
+};
+
+const word: React.CSSProperties = {
+  marginLeft: 10,
+  marginRight: 10,
+  display: "inline-block",
+};
+
+export const Title: React.FC<{
+  readonly titleText: string;
+  readonly titleColor: string;
+}> = ({ titleText, titleColor }) => {
+  const videoConfig = useVideoConfig();
+  const frame = useCurrentFrame();
+
+  const words = titleText.split(" ");
+
+  return (
+    <h1 style={title}>
+      {words.map((t, i) => {
+        const delay = i * 5;
+
+        const scale = spring({
+          fps: videoConfig.fps,
+          frame: frame - delay,
+          config: {
+            damping: 200,
+          },
+        });
+
+        return (
+          <span
+            key={t}
+            style={{
+              ...word,
+              color: titleColor,
+              transform: `scale(${scale})`,
+            }}
+          >
+            {t}
+          </span>
+        );
+      })}
+    </h1>
+  );
+};

apps/videos/src/HelloWorld/constants.ts

@@ -0,0 +1,5 @@
+// Change any of these to update your video live.
+
+export const COLOR_1 = "#86A8E7";
+
+export const FONT_FAMILY = "SF Pro Text, Helvetica, Arial, sans-serif";

apps/videos/src/Root.tsx

@@ -0,0 +1,45 @@
+import "./index.css";
+import { Composition } from "remotion";
+import { HelloWorld } from "./HelloWorld";
+import { Logo } from "./HelloWorld/Logo";
+
+// Each <Composition> is an entry in the sidebar!
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        // You can take the "id" to render a video:
+        // npx remotion render HelloWorld
+        id="HelloWorld"
+        component={HelloWorld}
+        durationInFrames={150}
+        fps={30}
+        width={1920}
+        height={1080}
+        // You can override these props for each render:
+        // https://www.remotion.dev/docs/parametrized-rendering
+        defaultProps={{
+          titleText: "Welcome to Remotion",
+          titleColor: "#000000",
+          logoColor1: "#91EAE4",
+          logoColor2: "#86A8E7",
+        }}
+      />
+
+      {/* Mount any React component to make it show up in the sidebar and work on it individually! */}
+      <Composition
+        id="OnlyLogo"
+        component={Logo}
+        durationInFrames={150}
+        fps={30}
+        width={1920}
+        height={1080}
+        defaultProps={{
+          logoColor1: "#91dAE2",
+          logoColor2: "#86A8E7",
+        }}
+      />
+    </>
+  );
+};

apps/videos/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

apps/videos/src/index.ts

@@ -0,0 +1,7 @@
+// This is your entry file! Refer to it when you render:
+// npx remotion render <entry-file> HelloWorld out/video.mp4
+
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);