!
+ return (
+
+
+
+
+
+ {/* Sequences can shift the time for its children! */}
+
+
+
+ {/* The subtitle will only enter on the 75th frame. */}
+
+
+
+
+
+ );
+};
diff --git a/feels-promo/src/HelloWorld/Arc.tsx b/feels-promo/src/HelloWorld/Arc.tsx
new file mode 100644
index 0000000..e580b47
--- /dev/null
+++ b/feels-promo/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 (
+
+ );
+};
diff --git a/feels-promo/src/HelloWorld/Atom.tsx b/feels-promo/src/HelloWorld/Atom.tsx
new file mode 100644
index 0000000..5fdb507
--- /dev/null
+++ b/feels-promo/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 (
+
+ );
+};
diff --git a/feels-promo/src/HelloWorld/Logo.tsx b/feels-promo/src/HelloWorld/Logo.tsx
new file mode 100644
index 0000000..00d369b
--- /dev/null
+++ b/feels-promo/src/HelloWorld/Logo.tsx
@@ -0,0 +1,87 @@
+import {
+ AbsoluteFill,
+ interpolate,
+ spring,
+ useCurrentFrame,
+ useVideoConfig,
+} from "remotion";
+import { Arc } from "./Arc";
+import { Atom } from "./Atom";
+import { z } from "zod";
+import { zColor } from "@remotion/zod-types";
+
+export const myCompSchema2 = z.object({
+ logoColor1: zColor(),
+ logoColor2: zColor(),
+});
+
+export const Logo: React.FC
> = ({
+ 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 (
+
+
+
+
+
+
+ );
+};
diff --git a/feels-promo/src/HelloWorld/Subtitle.tsx b/feels-promo/src/HelloWorld/Subtitle.tsx
new file mode 100644
index 0000000..9ccbe5d
--- /dev/null
+++ b/feels-promo/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 (
+
+ Edit src/Root.tsx and save to reload.
+
+ );
+};
diff --git a/feels-promo/src/HelloWorld/Title.tsx b/feels-promo/src/HelloWorld/Title.tsx
new file mode 100644
index 0000000..d691214
--- /dev/null
+++ b/feels-promo/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 (
+
+ {words.map((t, i) => {
+ const delay = i * 5;
+
+ const scale = spring({
+ fps: videoConfig.fps,
+ frame: frame - delay,
+ config: {
+ damping: 200,
+ },
+ });
+
+ return (
+
+ {t}
+
+ );
+ })}
+
+ );
+};
diff --git a/feels-promo/src/HelloWorld/constants.ts b/feels-promo/src/HelloWorld/constants.ts
new file mode 100644
index 0000000..e20c050
--- /dev/null
+++ b/feels-promo/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";
diff --git a/feels-promo/src/Root.tsx b/feels-promo/src/Root.tsx
new file mode 100644
index 0000000..86ab3a0
--- /dev/null
+++ b/feels-promo/src/Root.tsx
@@ -0,0 +1,27 @@
+import { Composition } from "remotion";
+import { FeelsPromoV1 } from "./FeelsPromo";
+
+export const RemotionRoot: React.FC = () => {
+ const fps = 30;
+ const sceneDuration = 3.5 * fps; // 3.5 seconds per scene
+ const transitionDuration = Math.round(0.6 * fps); // 0.6 second transitions
+ const outroDuration = Math.round(2.5 * fps);
+
+ // Calculate total duration accounting for transition overlaps
+ // 7 scenes + outro - 7 transitions
+ const totalDuration =
+ sceneDuration * 7 + outroDuration - transitionDuration * 7;
+
+ return (
+ <>
+
+
+ );
+};
diff --git a/feels-promo/src/index.ts b/feels-promo/src/index.ts
new file mode 100644
index 0000000..14dff4c
--- /dev/null
+++ b/feels-promo/src/index.ts
@@ -0,0 +1,7 @@
+// This is your entry file! Refer to it when you render:
+// npx remotion render HelloWorld out/video.mp4
+
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
diff --git a/feels-promo/tsconfig.json b/feels-promo/tsconfig.json
new file mode 100644
index 0000000..4bdf271
--- /dev/null
+++ b/feels-promo/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "target": "ES2018",
+ "module": "commonjs",
+ "jsx": "react-jsx",
+ "strict": true,
+ "noEmit": true,
+ "lib": ["es2015"],
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "noUnusedLocals": true
+ },
+ "exclude": ["remotion.config.ts"]
+}
diff --git a/screens/a.png b/screens/a.png
new file mode 100644
index 0000000..ca145db
Binary files /dev/null and b/screens/a.png differ
diff --git a/screens/b.mov b/screens/b.mov
new file mode 100644
index 0000000..5cf8d95
Binary files /dev/null and b/screens/b.mov differ
diff --git a/screens/c.mov b/screens/c.mov
new file mode 100644
index 0000000..c767492
Binary files /dev/null and b/screens/c.mov differ
diff --git a/screens/flow.png b/screens/flow.png
new file mode 100644
index 0000000..907ba96
Binary files /dev/null and b/screens/flow.png differ
diff --git a/screens/phone.png b/screens/phone.png
new file mode 100644
index 0000000..bef9811
Binary files /dev/null and b/screens/phone.png differ
+ ![]({staticFile("app-icon.png")}){kind=icon}
+ );
+ })
+ )}
+ ![]({staticFile("phone.png")})
+ ![]({staticFile("screen2-widget.png")})
+ ![]({staticFile("screen2-watch.png")})
+ ![]({staticFile("watch-frame.png")})
+