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>
+  );
+};