reelme 0.2.2 → 0.3.0

package/template/src/cinematic/transitions.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
+import { CinematicLook, TransitionStyle } from "./look";
+
+// Per-look cut rhythm. The picker cycles these across scenes so the edit has a
+// pattern instead of one uniform crossfade everywhere. Scene 0 always opens
+// from black; the final scene lands on a punch so the CTA arrives, not drifts.
+const RHYTHM: Record<string, TransitionStyle[]> = {
+  keynote: ["fade", "rise", "fade", "rise"],
+  noir: ["dip", "fade", "dip", "rise"],
+  arcade: ["whip", "punch", "zoom", "whip"],
+  blueprint: ["cut", "rise", "cut", "whip"],
+  editorial: ["fade", "fade", "rise", "fade"],
+};
+
+export function transitionFor(look: CinematicLook, index: number, total: number): TransitionStyle {
+  if (index === 0) return "fade"; // open from black
+  if (index === total - 1) return look.energy > 0.7 ? "punch" : "rise";
+  const seq = RHYTHM[look.id] ?? RHYTHM.keynote;
+  return seq[index % seq.length];
+}
+
+interface EnterProps {
+  style: TransitionStyle;
+  look: CinematicLook;
+  /** True only for the first scene: reveal from a real black frame. */
+  fromBlack: boolean;
+  seed: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Applies a scene's entrance. Scenes are sequenced back-to-back with no exit
+ * fade, so a "cut" is a true hard cut and the others are how the shot arrives.
+ * The continuous Atmosphere behind keeps even hard cuts feeling connected.
+ */
+export const Enter: React.FC<EnterProps> = ({ style, look, fromBlack, seed, children }) => {
+  const frame = useCurrentFrame();
+  // Faster entrances for higher-energy looks.
+  const win = Math.round(interpolate(look.energy, [0, 1], [18, 8]));
+  const dir = seed % 2 === 0 ? 1 : -1;
+  const ease = { extrapolateLeft: "clamp" as const, extrapolateRight: "clamp" as const };
+  const p = interpolate(frame, [0, win], [0, 1], { ...ease, easing: Easing.out(Easing.cubic) });
+
+  let opacity = 1;
+  let transform = "";
+  let filter: string | undefined;
+
+  switch (style) {
+    case "cut":
+      break;
+    case "fade":
+      opacity = interpolate(frame, [0, fromBlack ? win + 6 : win], [0, 1], ease);
+      break;
+    case "rise":
+      opacity = p;
+      transform = `translateY(${interpolate(p, [0, 1], [44, 0])}px)`;
+      break;
+    case "whip":
+      opacity = interpolate(frame, [0, win * 0.7], [0, 1], ease);
+      transform = `translateX(${interpolate(p, [0, 1], [90 * dir, 0])}px)`;
+      filter = `blur(${interpolate(p, [0, 1], [14, 0])}px)`;
+      break;
+    case "punch":
+      opacity = interpolate(frame, [0, win * 0.6], [0, 1], ease);
+      transform = `scale(${interpolate(p, [0, 1], [1.12, 1])})`;
+      break;
+    case "zoom":
+      opacity = p;
+      transform = `scale(${interpolate(p, [0, 1], [0.9, 1])})`;
+      break;
+    case "dip":
+      // Content snaps in; a black veil over the top lifts away → dip-to-black.
+      opacity = interpolate(frame, [0, win * 0.5], [0, 1], ease);
+      break;
+  }
+
+  const dipVeil = style === "dip" && (
+    <AbsoluteFill
+      style={{ background: "#000", opacity: interpolate(frame, [0, win], [1, 0], ease), pointerEvents: "none" }}
+    />
+  );
+
+  return (
+    <>
+      <AbsoluteFill style={{ opacity, transform, filter, willChange: "transform, opacity" }}>
+        {children}
+      </AbsoluteFill>
+      {dipVeil}
+    </>
+  );
+};

package/template/src/components/primitives/Bar.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface Props {
+  label: string;
+  valueText: string;
+  /** Target fill width as a fraction of the track (0..1). */
+  fraction: number;
+  hero?: boolean;
+  theme: Theme;
+  startFrame: number;
+}
+
+export const Bar: React.FC<Props> = ({ label, valueText, fraction, hero, theme, startFrame }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const progress = spring({
+    frame: frame - startFrame,
+    fps,
+    config: theme.motion,
+  });
+  const width = interpolate(Math.max(0, progress), [0, 1], [0, Math.max(0, Math.min(1, fraction))]);
+  const valueOpacity = interpolate(frame - startFrame, [10, 22], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
+      <div
+        style={{
+          width: 300,
+          textAlign: "right",
+          flexShrink: 0,
+          fontFamily: theme.fontSans,
+          fontSize: 30,
+          fontWeight: hero ? 700 : 500,
+          color: hero ? theme.text : theme.textMuted,
+          letterSpacing: "-0.01em",
+        }}
+      >
+        {label}
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          height: 56,
+          background: theme.surface,
+          borderRadius: 12,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            width: `${width * 100}%`,
+            height: "100%",
+            background: hero ? theme.accent : theme.border,
+            borderRadius: 12,
+            flexShrink: 0,
+          }}
+        />
+        <div
+          style={{
+            opacity: valueOpacity,
+            marginLeft: 18,
+            whiteSpace: "nowrap",
+            fontFamily: theme.fontMono,
+            fontSize: 30,
+            fontWeight: 700,
+            color: hero ? theme.accent : theme.textMuted,
+          }}
+        >
+          {valueText}
+        </div>
+      </div>
+    </div>
+  );
+};

package/template/src/components/primitives/Caption.tsx

@@ -6,9 +6,10 @@ interface CaptionProps {
   text: string;
   theme: Theme;
   startFrame?: number;
+  bottomInset?: number;
 }
 
-export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0 }) => {
+export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const elapsed = frame - startFrame;
@@ -21,7 +22,7 @@ export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0 })
     <div
       style={{
         position: "absolute",
-        bottom: 72,
+        bottom: 72 + bottomInset,
         left: 0,
         right: 0,
         display: "flex",

package/template/src/components/primitives/Kicker.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface KickerProps {
+  text: string;
+  theme: Theme;
+  startFrame?: number;
+  align?: "left" | "center";
+}
+
+/** A small eyebrow label above a headline: an accent tick + uppercase mono tag. */
+export const Kicker: React.FC<KickerProps> = ({ text, theme, startFrame = 0, align = "left" }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const p = spring({ frame: frame - startFrame, fps, config: theme.motion });
+  const opacity = interpolate(Math.max(0, p), [0, 1], [0, 1]);
+  const lineW = interpolate(Math.max(0, p), [0, 1], [0, 40]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 14,
+        justifyContent: align === "center" ? "center" : "flex-start",
+        marginBottom: 22,
+        opacity,
+      }}
+    >
+      <div style={{ width: lineW, height: 3, background: theme.accent, borderRadius: 2 }} />
+      <span
+        style={{
+          fontFamily: theme.fontMono,
+          fontSize: 22,
+          fontWeight: 600,
+          letterSpacing: "0.22em",
+          textTransform: "uppercase",
+          color: theme.accent,
+        }}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};

package/template/src/components/primitives/Label.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { Theme } from "../../theme";
+import { RevealText } from "./RevealText";
 
 interface LabelProps {
   text: string;
@@ -9,6 +9,7 @@ interface LabelProps {
   size?: "sm" | "md" | "lg" | "xl";
   align?: "left" | "center" | "right";
   muted?: boolean;
+  emphasis?: string;
 }
 
 const sizeMap = { sm: 22, md: 32, lg: 48, xl: 72 };
@@ -20,30 +21,23 @@ export const Label: React.FC<LabelProps> = ({
   size = "md",
   align = "center",
   muted = false,
+  emphasis,
 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const elapsed = frame - startFrame;
-
-  const progress = spring({ frame: elapsed, fps, config: theme.motion });
-  const opacity = interpolate(progress, [0, 1], [0, 1]);
-  const translateY = interpolate(progress, [0, 1], [20, 0]);
-
+  const big = size === "xl" || size === "lg";
   return (
-    <div
-      style={{
-        opacity,
-        transform: `translateY(${translateY}px)`,
-        fontFamily: theme.fontSans,
-        fontSize: sizeMap[size],
-        fontWeight: size === "xl" || size === "lg" ? 700 : 500,
-        color: muted ? theme.textMuted : theme.text,
-        textAlign: align,
-        lineHeight: 1.25,
-        letterSpacing: size === "xl" ? "-0.02em" : "-0.01em",
-      }}
-    >
-      {text}
-    </div>
+    <RevealText
+      text={text}
+      theme={theme}
+      startFrame={startFrame}
+      fontSize={sizeMap[size]}
+      fontWeight={big ? 700 : 500}
+      color={muted ? theme.textMuted : theme.text}
+      align={align}
+      emphasis={emphasis}
+      stagger={big ? 3 : 1.5}
+      letterSpacing={size === "xl" ? "-0.03em" : "-0.01em"}
+      lineHeight={big ? 1.1 : 1.25}
+      glow={big && !muted}
+    />
   );
 };

package/template/src/components/primitives/RevealText.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface RevealTextProps {
+  text: string;
+  theme: Theme;
+  fontSize: number;
+  startFrame?: number;
+  fontWeight?: number;
+  color?: string;
+  /** A whole word (or exact substring) rendered in the accent color. */
+  emphasis?: string;
+  align?: "left" | "center" | "right";
+  /** Frames between each word's rise. */
+  stagger?: number;
+  letterSpacing?: string;
+  lineHeight?: number;
+  /** Soft shadow so the type sits in the lit scene instead of floating flat. */
+  glow?: boolean;
+  maxWidth?: number;
+}
+
+/**
+ * Masked kinetic typography: each word rises out from behind a clip edge with a
+ * staggered spring — the headline reveal used in premium launch films, not a
+ * flat fade. Words wrap naturally; descenders are preserved by the mask padding.
+ */
+export const RevealText: React.FC<RevealTextProps> = ({
+  text,
+  theme,
+  fontSize,
+  startFrame = 0,
+  fontWeight = 800,
+  color,
+  emphasis,
+  align = "center",
+  stagger = 3,
+  letterSpacing = "-0.03em",
+  lineHeight = 1.06,
+  glow = true,
+  maxWidth,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const words = text.split(" ");
+  const emphWord = emphasis?.trim().toLowerCase();
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.fontSans,
+        fontSize,
+        fontWeight,
+        color: color ?? theme.text,
+        textAlign: align,
+        lineHeight,
+        letterSpacing,
+        maxWidth,
+        textShadow: glow ? "0 6px 40px rgba(0,0,0,0.45)" : undefined,
+      }}
+    >
+      {words.map((word, i) => {
+        const elapsed = frame - startFrame - i * stagger;
+        const p = spring({ frame: elapsed, fps, config: theme.motion });
+        const y = interpolate(p, [0, 1], [112, 0], { extrapolateRight: "clamp" });
+        const opacity = interpolate(elapsed, [0, 6], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const clean = word.replace(/[.,!?:;]/g, "").toLowerCase();
+        const isEmph = emphWord && (clean === emphWord || word.toLowerCase().includes(emphWord));
+        return (
+          <React.Fragment key={i}>
+            <span
+              style={{
+                display: "inline-block",
+                overflow: "hidden",
+                paddingBottom: "0.14em",
+                marginBottom: "-0.14em",
+                verticalAlign: "bottom",
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-block",
+                  transform: `translateY(${y}%)`,
+                  opacity,
+                  color: isEmph ? theme.accent : undefined,
+                }}
+              >
+                {word}
+              </span>
+            </span>
+            {i < words.length - 1 ? " " : null}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/template/src/components/primitives/Terminal.tsx

@@ -25,6 +25,16 @@ export const Terminal: React.FC<TerminalProps> = ({
   const frame = useCurrentFrame();
   const elapsed = frame - startFrame;
 
+  // Size the window to its widest physical line so a short command doesn't sit
+  // in a huge empty box. Width is fixed from the full text (not the partial
+  // reveal) so it never reflows while typing. Inputs reserve room for "$ ".
+  const maxChars = lines.reduce((max, line) => {
+    const prefix = line.isOutput ? 0 : 2;
+    const widest = line.text.split("\n").reduce((m, l) => Math.max(m, l.length), 0);
+    return Math.max(max, widest + prefix);
+  }, 0);
+  const cols = Math.min(Math.max(maxChars, 18), 78);
+
   const visibleLines: Array<{ text: string; isOutput: boolean; partialText: string }> = [];
 
   let cursor = 0;
@@ -59,6 +69,7 @@ export const Terminal: React.FC<TerminalProps> = ({
         fontFamily: theme.fontMono,
         fontSize: 22,
         boxShadow: "0 8px 48px rgba(0,0,0,0.6)",
+        width: `min(calc(${cols}ch + 48px), 100%)`,
       }}
     >
       <div

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

@@ -0,0 +1,83 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { BenchmarkScene as BenchmarkBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { benchmarkFractions } from "../../benchmark";
+import { Bar } from "../primitives/Bar";
+import { Label } from "../primitives/Label";
+import { Caption } from "../primitives/Caption";
+
+interface Props {
+  scene: BenchmarkBrief;
+  theme: Theme;
+  bottomInset?: number;
+}
+
+const HEADLINE_FRAMES = 20;
+const FRAMES_PER_BAR = 18;
+
+export const Benchmark: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
+  const fractions = benchmarkFractions(
+    scene.bars.map((b) => b.value),
+    scene.lowerIsBetter
+  );
+  const captionStart = HEADLINE_FRAMES + scene.bars.length * FRAMES_PER_BAR + 30;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "transparent",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 120px",
+        gap: 40,
+      }}
+    >
+      {scene.headline && (
+        <Label text={scene.headline} theme={theme} size="lg" startFrame={0} />
+      )}
+
+      {scene.metric && (
+        <div
+          style={{
+            fontFamily: theme.fontSans,
+            fontSize: 24,
+            color: theme.textMuted,
+            marginTop: -16,
+            letterSpacing: "0.02em",
+          }}
+        >
+          {scene.metric}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 24,
+          width: "100%",
+          maxWidth: 1200,
+        }}
+      >
+        {scene.bars.map((bar, i) => (
+          <Bar
+            key={i}
+            label={bar.label}
+            valueText={bar.display ?? String(bar.value)}
+            fraction={fractions[i]}
+            hero={bar.hero}
+            theme={theme}
+            startFrame={HEADLINE_FRAMES + i * FRAMES_PER_BAR}
+          />
+        ))}
+      </div>
+
+      {scene.caption && (
+        <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />
+      )}
+    </AbsoluteFill>
+  );
+};

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

@@ -7,9 +7,10 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: BrowserBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
+export const BrowserFrame: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -26,7 +27,7 @@ export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -133,7 +134,7 @@ export const BrowserFrame: React.FC<Props> = ({ scene, theme }) => {
         </div>
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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

@@ -1,20 +1,27 @@
 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 { Theme } from "../../theme";
+import { PlatformPreset, typeScale } from "../../platforms";
 import { Caption } from "../primitives/Caption";
 
 interface Props {
   scene: CTABrief;
   theme: Theme;
   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 }) => {
+export const CTA: React.FC<Props> = ({ scene, theme, project, platform, bottomInset = 0, lite = false }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const scale = platform ? typeScale(platform) : 1.0;
 
   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 });
@@ -32,10 +39,19 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
     ? `${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";
+
   return (
     <AbsoluteFill
       style={{
-        background: theme.accent,
+        // 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",
@@ -44,6 +60,17 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
         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",
+          }}
+        />
+      )}
+
       {project.logo && (
         <div
           style={{
@@ -67,15 +94,16 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
           opacity: titleOpacity,
           transform: `translateY(${titleY}px)`,
           fontFamily: theme.fontSans,
-          fontSize: 56,
+          fontSize: 60 * scale,
           fontWeight: 700,
-          color: theme.textInverse,
-          letterSpacing: "-0.02em",
+          color: onAccent,
+          letterSpacing: "-0.03em",
           textAlign: "center",
+          textShadow: "0 4px 30px rgba(0,0,0,0.25)",
         }}
       >
         {isAnnouncement ? "" : "Get started with "}
-        <span style={{ color: theme.textInverse, fontWeight: 800 }}>{displayName}</span>
+        <span style={{ color: onAccent, fontWeight: 800 }}>{displayName}</span>
         {isAnnouncement ? " is here." : ""}
       </div>
 
@@ -85,14 +113,15 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
           transform: `scale(${cmdScale})`,
           background: theme.bg,
           border: `1.5px solid rgba(0,0,0,0.12)`,
-          borderRadius: 12,
-          padding: "18px 40px",
+          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>
@@ -105,14 +134,31 @@ export const CTA: React.FC<Props> = ({ scene, theme, project }) => {
             opacity: urlFade,
             fontFamily: theme.fontMono,
             fontSize: 20,
-            color: theme.textInverse,
+            color: onAccent,
           }}
         >
           {scene.repoUrl}
         </div>
       )}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={60} bottomInset={bottomInset} />}
+
+      {project.watermark !== false && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: 40 + bottomInset,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            fontFamily: theme.fontMono,
+            fontSize: 18,
+            color: theme.textMuted,
+          }}
+        >
+          made with reelme
+        </div>
+      )}
     </AbsoluteFill>
   );
 };