reelme 0.3.0 → 0.4.0

package/template/src/components/scenes/CTA.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
-import chroma from "chroma-js";
-import { CTAScene as CTABrief, ProjectMeta } from "../../brief";
+import { useCurrentFrame, useVideoConfig, spring, interpolate, Img, staticFile } from "remotion";
+import { CTAScene as CTABrief, ProjectMeta, showWatermark } from "../../brief";
 import { Theme } from "../../theme";
 import { PlatformPreset, typeScale } from "../../platforms";
-import { Caption } from "../primitives/Caption";
+import { Stage } from "../primitives/Stage";
+import { Terminal } from "../primitives/Terminal";
+import { Loop } from "../primitives/Loop";
 
 interface Props {
   scene: CTABrief;
@@ -12,16 +13,15 @@ interface Props {
   project: ProjectMeta;
   platform?: PlatformPreset;
   bottomInset?: number;
-  /** gif output: use a flat fill instead of gradients that bloat gif size. */
-  lite?: boolean;
 }
 
 const SNAP_OFFSET = 8;
 
-export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomInset = 0, lite = false }) => {
+export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const scale = platform ? typeScale(platform) : 1.0;
+  const isGif = platform?.output.codec === "gif";
 
   const logoProgress = spring({ frame: frame + SNAP_OFFSET, fps, config: theme.motion });
   const titleProgress = spring({ frame: frame + SNAP_OFFSET - (project.logo ? 16 : 0), fps, config: theme.motion });
@@ -31,101 +31,66 @@ export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomIn
   const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);
   const titleY = interpolate(titleProgress, [0, 1], [24, 0]);
   const cmdOpacity = interpolate(cmdProgress, [0, 1], [0, 1]);
-  const cmdScale = interpolate(cmdProgress, [0, 1], [0.92, 1]);
-  const urlFade = interpolate(urlProgress, [0, 1], [0, 0.7]);
+  const cmdY = interpolate(cmdProgress, [0, 1], [18, 0]);
+  const urlFade = interpolate(urlProgress, [0, 1], [0, 0.65]);
 
   const isAnnouncement = project.mode === "announcement";
   const displayName = isAnnouncement && project.version
     ? `${project.name} ${project.version}`
     : project.name;
 
-  // Contrast-aware text on the brand field: white on saturated/dark accents,
-  // near-black on light ones — confident lockup instead of dull inverse grey.
-  const onAccent = chroma(theme.accent).luminance() > 0.5 ? "#15151c" : "#ffffff";
+  // When the command starts typing inside the terminal: a beat after the title
+  // settles, so the eye lands on the headline first.
+  const termStart = project.logo ? 26 : 16;
 
   return (
-    <AbsoluteFill
-      style={{
-        // Graded brand end-card: a lit radial instead of a flat fill, so the
-        // CTA reads as produced as the rest of the film, not a plain slate. The
-        // gif path uses a flat fill — a full-frame gradient explodes gif size.
-        background: lite
-          ? theme.accent
-          : `radial-gradient(125% 95% at 50% 32%, color-mix(in srgb, ${theme.accent}, #fff 12%) 0%, ${theme.accent} 46%, color-mix(in srgb, ${theme.accent}, #000 24%) 100%)`,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 32,
-        padding: "0 120px",
-      }}
-    >
-      {/* Edge vignette spotlights the lockup so the field doesn't read as empty.
-          Skipped on the gif path to keep the frame flat and compressible. */}
-      {!lite && (
-        <AbsoluteFill
-          style={{
-            background: "radial-gradient(70% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.28) 100%)",
-            pointerEvents: "none",
-          }}
-        />
-      )}
-
+    // Stay on the film's continuous atmosphere stage instead of flooding the
+    // frame with a flat brand field — the end-card belongs to the same shot as
+    // the rest of the reel. Stage's transparent root lets the Atmosphere show.
+    <Stage theme={theme} gap={40} caption={scene.caption} captionStart={60} bottomInset={bottomInset}>
       {project.logo && (
-        <div
-          style={{
-            opacity: interpolate(logoProgress, [0, 1], [0, 1]),
-            transform: `scale(${interpolate(logoProgress, [0, 1], [0.85, 1])})`,
-            background: "#ffffff",
-            borderRadius: 20,
-            padding: 16,
-            boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-          }}
-        >
-          <Img
-            src={staticFile(project.logo)}
-            style={{ height: 80, width: "auto", objectFit: "contain", display: "block" }}
-          />
-        </div>
+        // A barely-there breathe keeps the end-card's hero alive while it holds,
+        // after the entrance spring has settled. Off for gif (defeats compression).
+        <Loop property="scale" amplitude={0.012} period={4} disabled={isGif}>
+          <div
+            style={{
+              opacity: interpolate(logoProgress, [0, 1], [0, 1]),
+              scale: String(interpolate(logoProgress, [0, 1], [0.85, 1])),
+              background: "#ffffff",
+              borderRadius: 20,
+              padding: 16,
+              boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
+            }}
+          >
+            <Img
+              src={staticFile(project.logo)}
+              style={{ height: 80, width: "auto", objectFit: "contain", display: "block" }}
+            />
+          </div>
+        </Loop>
       )}
 
       <div
         style={{
           opacity: titleOpacity,
-          transform: `translateY(${titleY}px)`,
+          translate: `0 ${titleY}px`,
           fontFamily: theme.fontSans,
           fontSize: 60 * scale,
           fontWeight: 700,
-          color: onAccent,
+          color: theme.text,
           letterSpacing: "-0.03em",
           textAlign: "center",
-          textShadow: "0 4px 30px rgba(0,0,0,0.25)",
         }}
       >
         {isAnnouncement ? "" : "Get started with "}
-        <span style={{ color: onAccent, fontWeight: 800 }}>{displayName}</span>
+        <span style={{ color: theme.accent, fontWeight: 800 }}>{displayName}</span>
         {isAnnouncement ? " is here." : ""}
       </div>
 
-      <div
-        style={{
-          opacity: cmdOpacity,
-          transform: `scale(${cmdScale})`,
-          background: theme.bg,
-          border: `1.5px solid rgba(0,0,0,0.12)`,
-          borderRadius: 14,
-          padding: "20px 44px",
-          fontFamily: theme.fontMono,
-          fontSize: 28,
-          color: theme.text,
-          display: "flex",
-          alignItems: "center",
-          gap: 16,
-          boxShadow: "0 22px 60px rgba(0,0,0,0.30)",
-        }}
-      >
-        <span style={{ color: theme.accent }}>$</span>
-        {scene.installCommand}
+      {/* The install command in the film's own terminal, typed out — consistent
+          with the reel's other terminal scenes instead of a web-style pill. */}
+      <div style={{ opacity: cmdOpacity, translate: `0 ${cmdY}px` }}>
+        <Terminal lines={[{ text: scene.installCommand }]} theme={theme} startFrame={termStart} />
       </div>
 
       {scene.repoUrl && (
@@ -134,16 +99,14 @@ export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomIn
             opacity: urlFade,
             fontFamily: theme.fontMono,
             fontSize: 20,
-            color: onAccent,
+            color: theme.textMuted,
           }}
         >
           {scene.repoUrl}
         </div>
       )}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} bottomInset={bottomInset} />}
-
-      {project.watermark !== false && (
+      {showWatermark(project.watermark) && (
         <div
           style={{
             position: "absolute",
@@ -159,6 +122,6 @@ export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomIn
           made with reelme
         </div>
       )}
-    </AbsoluteFill>
+    </Stage>
   );
 };

package/template/src/components/scenes/Clip.tsx

@@ -8,6 +8,7 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: ClipScene;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const isGif = (src: string) => src.endsWith(".gif");
@@ -22,12 +23,17 @@ const MediaElement: React.FC<{ scene: ClipScene }> = ({ scene }) => {
       />
     );
   }
+  // Stop the source at the requested trim point so the scene's tail doesn't keep
+  // playing past what the brief asked for (F23).
+  const endAt =
+    scene.durationInFrames !== undefined ? (scene.startFrom ?? 0) + scene.durationInFrames : undefined;
   return (
     <OffthreadVideo
       src={staticFile(scene.src)}
       style={{ width: "100%", height: "100%", objectFit: "cover" }}
       muted
       startFrom={scene.startFrom}
+      endAt={endAt}
     />
   );
 };
@@ -79,7 +85,7 @@ const MobileChrome: React.FC<{ children: React.ReactNode; theme: Theme }> = ({ c
   </div>
 );
 
-export const Clip: React.FC<Props> = ({ scene, theme }) => {
+export const Clip: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const renderMedia = () => <MediaElement scene={scene} />;
 
   if (scene.frame === "browser") {
@@ -94,7 +100,7 @@ export const Clip: React.FC<Props> = ({ scene, theme }) => {
         }}
       >
         <BrowserChrome theme={theme}>{renderMedia()}</BrowserChrome>
-        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} />}
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} bottomInset={bottomInset} />}
       </AbsoluteFill>
     );
   }
@@ -111,7 +117,7 @@ export const Clip: React.FC<Props> = ({ scene, theme }) => {
         }}
       >
         <MobileChrome theme={theme}>{renderMedia()}</MobileChrome>
-        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} />}
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={30} bottomInset={bottomInset} />}
       </AbsoluteFill>
     );
   }

package/template/src/components/scenes/CodeReveal.tsx

@@ -4,6 +4,7 @@ import { CodeRevealScene as CodeRevealBrief } from "../../brief";
 import { Theme } from "../../theme";
 import { CodeBlock } from "../primitives/CodeBlock";
 import { Caption } from "../primitives/Caption";
+import { CODE_FRAMES_PER_LINE, CODE_START, codeRevealCaptionStart } from "../../timing";
 
 interface Props {
   scene: CodeRevealBrief;
@@ -12,9 +13,9 @@ interface Props {
 }
 
 export const CodeReveal: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
-  const lines = scene.code.split("\n");
-  // Caption appears after all lines are revealed: startFrame=14, framesPerLine=9, plus 20-frame buffer
-  const captionStart = 14 + lines.length * 9 + 20;
+  // Timing is shared with the duration oracle so the scene lasts long enough for
+  // every line to reveal and the caption to appear (see timing.ts).
+  const captionStart = codeRevealCaptionStart(scene);
 
   return (
     <AbsoluteFill
@@ -32,8 +33,8 @@ export const CodeReveal: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) =
           language={scene.language}
           highlightLine={scene.highlightLine}
           theme={theme}
-          startFrame={14}
-          framesPerLine={9}
+          startFrame={CODE_START}
+          framesPerLine={CODE_FRAMES_PER_LINE}
         />
       </div>
       {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}

package/template/src/components/scenes/DataFlow.tsx

@@ -88,7 +88,7 @@ export const DataFlow: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) =>
               fontWeight: 600,
               color: theme.text,
               opacity,
-              transform: `scale(${scale})`,
+              scale: String(scale),
               boxShadow: `0 4px 24px rgba(0,0,0,0.3)`,
             }}
           >

package/template/src/components/scenes/FeatureList.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { FeatureListScene as FeatureListBrief } from "../../brief";
 import { Theme } from "../../theme";
 import { PlatformPreset, typeScale } from "../../platforms";
 import { Label } from "../primitives/Label";
-import { Caption } from "../primitives/Caption";
-import { Icon } from "../primitives/Icon";
+import { Stage } from "../primitives/Stage";
+import { Icon, hasIcon } from "../primitives/Icon";
 
 interface Props {
   scene: FeatureListBrief;
@@ -22,94 +22,91 @@ export const FeatureList: React.FC<Props> = ({ scene, theme, platform, bottomIns
   const { fps } = useVideoConfig();
   const scale = platform ? typeScale(platform) : 1.0;
 
-  const captionStart = HEADLINE_FRAMES + scene.items.length * FRAMES_PER_ITEM + 20;
+  const items = scene.items ?? [];
+  const captionStart = HEADLINE_FRAMES + items.length * FRAMES_PER_ITEM + 20;
   const left = scene.align === "left";
 
   return (
-    <AbsoluteFill
-      style={{
-        background: "transparent",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: left ? "flex-start" : "center",
-        justifyContent: "center",
-        padding: left ? "0 0 0 140px" : "0 200px",
-      }}
-    >
-      {scene.headline && (
-        <div style={{ marginBottom: 48 }}>
-          <Label text={scene.headline} theme={theme} size="lg" align={left ? "left" : "center"} startFrame={0} />
-        </div>
-      )}
+    <Stage theme={theme} caption={scene.caption} captionStart={captionStart} bottomInset={bottomInset}>
+      {/* The list is a single block, centered in the frame. Even a short
+          left-aligned list then sits in symmetric margins (composed negative
+          space) instead of being anchored against one edge with a void opposite.
+          Items left-align within the block for a clean reading column. */}
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+        {scene.headline && (
+          <div style={{ marginBottom: 52, alignSelf: left ? "flex-start" : "center" }}>
+            <Label text={scene.headline} theme={theme} size="lg" align={left ? "left" : "center"} startFrame={0} />
+          </div>
+        )}
 
-      <div style={{ display: "flex", flexDirection: "column", gap: 28, width: left ? "auto" : "100%", maxWidth: left ? 1200 : undefined }}>
-        {scene.items.map((item, i) => {
-          const text = typeof item === "string" ? item : item.text;
-          const icon = typeof item === "string" ? undefined : item.icon;
+        <div style={{ display: "flex", flexDirection: "column", gap: 34 }}>
+          {items.map((item, i) => {
+            const text = typeof item === "string" ? item : item.text;
+            const icon = typeof item === "string" ? undefined : item.icon;
+            const showIcon = icon !== undefined && hasIcon(icon);
 
-          const itemStart = HEADLINE_FRAMES + i * FRAMES_PER_ITEM;
-          const progress = spring({ frame: frame - itemStart, fps, config: theme.motion });
-          const opacity = interpolate(Math.max(0, progress), [0, 1], [0, 1]);
-          const translateX = interpolate(Math.max(0, progress), [0, 1], [-24, 0]);
+            const itemStart = HEADLINE_FRAMES + i * FRAMES_PER_ITEM;
+            const progress = spring({ frame: frame - itemStart, fps, config: theme.motion });
+            const opacity = interpolate(Math.max(0, progress), [0, 1], [0, 1]);
+            const translateX = interpolate(Math.max(0, progress), [0, 1], [-24, 0]);
 
-          return (
-            <div
-              key={i}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 24,
-                opacity,
-                transform: `translateX(${translateX}px)`,
-              }}
-            >
+            return (
               <div
+                key={i}
                 style={{
-                  width: 36,
-                  height: 36,
-                  borderRadius: "50%",
-                  background: theme.accentMuted,
-                  border: `1.5px solid ${theme.accent}`,
                   display: "flex",
                   alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
+                  gap: 26,
+                  opacity,
+                  translate: `${translateX}px 0`,
                 }}
               >
-                {icon ? (
-                  <Icon name={icon} size={18} color={theme.accent} />
-                ) : (
-                  <span
-                    style={{
-                      fontFamily: theme.fontMono,
-                      fontSize: 14,
-                      fontWeight: 700,
-                      color: theme.accent,
-                      lineHeight: 1,
-                    }}
-                  >
-                    {i + 1}
-                  </span>
-                )}
+                {/* A bold accent marker carries the weight — no faint bordered
+                    chip (a web-UI badge pattern that reads as filler on screen). */}
+                <div
+                  style={{
+                    width: 40,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                  }}
+                >
+                  {showIcon ? (
+                    <Icon name={icon} size={34} color={theme.accent} />
+                  ) : (
+                    <span
+                      style={{
+                        fontFamily: theme.fontSans,
+                        fontSize: 30,
+                        fontWeight: 800,
+                        color: theme.accent,
+                        lineHeight: 1,
+                        letterSpacing: "-0.03em",
+                      }}
+                    >
+                      {i + 1}
+                    </span>
+                  )}
+                </div>
+                <span
+                  style={{
+                    fontFamily: theme.fontSans,
+                    fontSize: 40 * scale,
+                    fontWeight: 600,
+                    color: theme.text,
+                    lineHeight: 1.3,
+                    letterSpacing: "-0.015em",
+                  }}
+                >
+                  {text}
+                </span>
               </div>
-              <span
-                style={{
-                  fontFamily: theme.fontSans,
-                  fontSize: 28 * scale,
-                  fontWeight: 500,
-                  color: theme.text,
-                  lineHeight: 1.4,
-                  letterSpacing: "-0.01em",
-                }}
-              >
-                {text}
-              </span>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
-    </AbsoluteFill>
+    </Stage>
   );
 };

package/template/src/components/scenes/FileTree.tsx

@@ -93,7 +93,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) =>
                 alignItems: "center",
                 gap: 10,
                 opacity,
-                transform: `translateX(${translateX}px)`,
+                translate: `${translateX}px 0`,
                 paddingTop: isHighlighted ? 6 : 4,
                 paddingBottom: isHighlighted ? 6 : 4,
                 paddingLeft: depth * INDENT + 8,

package/template/src/components/scenes/HotkeyScene.tsx

@@ -18,7 +18,8 @@ export const Hotkey: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
-  const actionStart = scene.keys.length * FRAMES_PER_KEY + ACTION_DELAY;
+  const keys = scene.keys ?? [];
+  const actionStart = keys.length * FRAMES_PER_KEY + ACTION_DELAY;
   const captionStart = actionStart + 50;
 
   const actionProgress = spring({ frame: frame - actionStart, fps, config: theme.motion });
@@ -37,7 +38,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
       }}
     >
       <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        {scene.keys.map((key, i) => (
+        {keys.map((key, i) => (
           <React.Fragment key={i}>
             {i > 0 && (
               <span
@@ -60,7 +61,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
         <div
           style={{
             opacity: actionOpacity,
-            transform: `translateY(${actionY}px)`,
+            translate: `0 ${actionY}px`,
             fontFamily: theme.fontSans,
             fontSize: 28,
             fontWeight: 400,