chore: clean up content phase organization

apps/videos/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+.env
+
+# Ignore the output video from Git but not videos you import into src/.
+out

apps/videos/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "useTabs": false,
+  "bracketSpacing": true,
+  "tabWidth": 2
+}

apps/videos/README.md

@@ -0,0 +1,54 @@
+# Remotion video
+
+<p align="center">
+  <a href="https://github.com/remotion-dev/logo">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-dark.apng">
+      <img alt="Animated Remotion Logo" src="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-light.gif">
+    </picture>
+  </a>
+</p>
+
+Welcome to your Remotion project!
+
+## Commands
+
+**Install Dependencies**
+
+```console
+npm i
+```
+
+**Start Preview**
+
+```console
+npm run dev
+```
+
+**Render video**
+
+```console
+npx remotion render
+```
+
+**Upgrade Remotion**
+
+```console
+npx remotion upgrade
+```
+
+## Docs
+
+Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
+
+## Help
+
+We provide help on our [Discord server](https://discord.gg/6VzzNDwUwV).
+
+## Issues
+
+Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
+
+## License
+
+Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).

apps/videos/eslint.config.mjs

@@ -0,0 +1,3 @@
+import { config } from "@remotion/eslint-config-flat";
+
+export default config;

apps/videos/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "videos",
+  "version": "1.0.0",
+  "description": "My Remotion video",
+  "repository": {},
+  "license": "UNLICENSED",
+  "private": true,
+  "dependencies": {
+    "@remotion/cli": "4.0.528",
+    "@remotion/zod-types": "4.0.528",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "remotion": "4.0.528",
+    "zod": "4.5.4",
+    "@remotion/tailwind-v4": "4.0.528",
+    "tailwindcss": "4.0.0"
+  },
+  "devDependencies": {
+    "@remotion/eslint-config-flat": "4.0.528",
+    "@types/react": "19.2.7",
+    "@types/web": "0.0.166",
+    "eslint": "9.19.0",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "dev": "remotion studio",
+    "build": "remotion bundle",
+    "upgrade": "remotion upgrade",
+    "lint": "eslint src && tsc"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}

apps/videos/remotion.config.ts

@@ -0,0 +1,12 @@
+// See all configuration options: https://remotion.dev/docs/config
+// Each option also is available as a CLI flag: https://remotion.dev/docs/cli
+
+// Note: When using the Node.JS APIs, the config file doesn't apply. Instead, pass options directly to the APIs
+
+import { Config } from "@remotion/cli/config";
+import { enableTailwind } from '@remotion/tailwind-v4';
+
+Config.setRspack(true);
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
+Config.overrideBundlerConfig(enableTailwind);

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

apps/videos/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "lib": ["es2015"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true
+  },
+  "exclude": ["remotion.config.ts"]
+}