![]({staticFile("background.png")})
+
+
+ );
+};
diff --git a/packages/video/src/sideffect-promo/components/CopyIcon.tsx b/packages/video/src/sideffect-promo/components/CopyIcon.tsx
new file mode 100644
index 0000000..9ff0f69
--- /dev/null
+++ b/packages/video/src/sideffect-promo/components/CopyIcon.tsx
@@ -0,0 +1,43 @@
+import { ds } from "../design";
+
+type CopyIconProps = {
+ readonly bg?: string;
+ readonly color?: string;
+ readonly size?: number;
+};
+
+export const CopyIcon = ({ bg = ds.badgeBg, color = ds.codeMeta, size = 20 }: CopyIconProps) => (
+
+
+
+
+);
diff --git a/packages/video/src/sideffect-promo/components/InstallBadge.tsx b/packages/video/src/sideffect-promo/components/InstallBadge.tsx
new file mode 100644
index 0000000..f789789
--- /dev/null
+++ b/packages/video/src/sideffect-promo/components/InstallBadge.tsx
@@ -0,0 +1,55 @@
+import { INSTALL_COMMAND } from "../constants";
+import { ds } from "../design";
+import { CopyIcon } from "./CopyIcon";
+
+type InstallBadgeProps = {
+ readonly scale?: number;
+ readonly showCopy?: boolean;
+};
+
+export const InstallBadge = ({ scale = 1, showCopy = true }: InstallBadgeProps) => (
+
+ {filename}
+
+
+ {highlightLines.map((lineNumber) => {
+ const hasTyped = lineHasTyped(lines, lineNumber, charBudget);
+
+ return (
+
+ );
+ })}
+ {lines.map((line, index) => {
+ const visible = line.slice(0, Math.max(0, remaining));
+ const lineNumber = index + 1;
+ const hasTyped = visible.length > 0 || remaining > 0;
+ const isCurrentLine = typedLine === lineNumber && charBudget < fullBudget;
+ remaining -= line.length + 1;
+
+ return (
+
+
+
+ {lineNumber.toString().padStart(2, "0")}
+
+
+ {line.startsWith(" ") ? (
+
+ ) : null}
+ {tokenizeLine(visible).map(([text, kind], tokenIndex) => (
+
+ {text}
+
+ ))}
+ {isCurrentLine ? (
+
+ ) : null}
+
+
+ );
+ })}
+
+
+);
diff --git a/packages/video/src/sideffect-promo/components/SceneTransition.tsx b/packages/video/src/sideffect-promo/components/SceneTransition.tsx
new file mode 100644
index 0000000..54ce2e4
--- /dev/null
+++ b/packages/video/src/sideffect-promo/components/SceneTransition.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from "remotion";
+
+import { TRANSITION_DURATION } from "../constants";
+
+type SceneTransitionProps = {
+ readonly children: ReactNode;
+ readonly durationInFrames: number;
+ readonly fadeIn?: boolean;
+ readonly fadeOut?: boolean;
+};
+
+export const SceneTransition = ({
+ children,
+ durationInFrames,
+ fadeIn = true,
+ fadeOut = true,
+}: SceneTransitionProps) => {
+ const frame = useCurrentFrame();
+ const enterOpacity = fadeIn
+ ? interpolate(frame, [0, TRANSITION_DURATION], [0, 1], {
+ easing: Easing.bezier(0.16, 1, 0.3, 1),
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ })
+ : 1;
+ const exitOpacity = fadeOut
+ ? interpolate(frame, [durationInFrames - TRANSITION_DURATION, durationInFrames], [1, 0], {
+ easing: Easing.bezier(0.4, 0, 1, 1),
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ })
+ : 1;
+
+ return (
+
+ {INSTALL_COMMAND}
+
+ {showCopy ? (
+
+
+ ) : null}
+
+
+ );
+};
diff --git a/packages/video/src/sideffect-promo/composition.tsx b/packages/video/src/sideffect-promo/composition.tsx
new file mode 100644
index 0000000..484a514
--- /dev/null
+++ b/packages/video/src/sideffect-promo/composition.tsx
@@ -0,0 +1,31 @@
+import { AbsoluteFill, Sequence } from "remotion";
+
+import { Background } from "./components/Background";
+import { SceneTransition } from "./components/SceneTransition";
+import { CODE_SEQUENCE_TIMINGS, FINAL_DURATION, FINAL_FROM, INTRO_DURATION } from "./timings";
+import { CodeScene, FinalScene, IntroScene } from "./scenes";
+
+export { SIDEFFECT_PROMO_DURATION } from "./timings";
+
+export const SideffectPromo = () => (
+
+
+
+
+
+ $
+ {typed}
+
+
+
+ sideffect
+
+
+ Build composable Cloudflare Workflows,
+ and generate bindings automatically with Vite
+
+
+
+