reelme 0.2.2 → 0.4.0

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

@@ -3,210 +3,363 @@ import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Img
 import { MobileScene as MobileBrief } from "../../brief";
 import { Theme } from "../../theme";
 import { Caption } from "../primitives/Caption";
+import { Icon } from "../primitives/Icon";
 
 interface Props {
   scene: MobileBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
-const PHONE_W = 340;
-const PHONE_H = 720;
-const NOTCH_H = 30;
-const RADIUS = 40;
+const PHONE_W = 384;
+const PHONE_H = 808;
+const NOTCH_H = 32;
+const RADIUS = 46;
 
-export const MobileScreen: React.FC<Props> = ({ scene, theme }) => {
+export const MobileScreen: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, width, height } = useVideoConfig();
+  const portrait = height > width;
+  const hasCopy = Boolean(scene.headline || (scene.points && scene.points.length > 0));
 
+  // Phone entrance.
   const progress = spring({ frame, fps, config: theme.motion });
   const opacity = interpolate(progress, [0, 1], [0, 1]);
   const translateY = interpolate(progress, [0, 1], [60, 0]);
-  const scale = interpolate(progress, [0, 1], [0.88, 1]);
+  const enterScale = interpolate(progress, [0, 1], [0.9, 1]);
+
+  // The phone is a fixed 384×808 device; scale it to the frame. With copy beside
+  // it (landscape) or above it (vertical) it sits a touch smaller to share the
+  // frame; on its own it grows to command the height.
+  const targetH = hasCopy
+    ? (portrait ? height * 0.56 : height * 0.84)
+    : (portrait ? height * 0.74 : height * 0.84);
+  const fit = targetH / PHONE_H;
+
+  // The wrapper takes the *scaled* footprint so the device occupies a real
+  // layout slot — a bare transform:scale would resize the phone visually while
+  // its box stayed 808px tall, overlapping copy stacked above it on vertical cuts.
+  const phone = (
+    <div
+      style={{
+        width: PHONE_W * fit,
+        height: PHONE_H * fit,
+        flexShrink: 0,
+        opacity,
+        translate: `0 ${translateY}px`,
+      }}
+    >
+      <div style={{ scale: String(enterScale * fit), transformOrigin: "top left" }}>
+        <PhoneFrame scene={scene} theme={theme} frame={frame} fps={fps} />
+      </div>
+    </div>
+  );
+
+  // Single centered device when no copy is supplied (composed symmetric margins).
+  if (!hasCopy) {
+    return (
+      <AbsoluteFill style={{ background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        {phone}
+        {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} bottomInset={bottomInset} />}
+      </AbsoluteFill>
+    );
+  }
+
+  const copy = <CopyColumn scene={scene} theme={theme} frame={frame} fps={fps} portrait={portrait} width={width} />;
 
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
+        flexDirection: portrait ? "column" : "row",
         alignItems: "center",
-        justifyContent: "center",
+        justifyContent: portrait ? "center" : "space-between",
+        gap: portrait ? 12 : 80,
+        padding: portrait ? "0 80px" : "0 130px",
+      }}
+    >
+      {copy}
+      {phone}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} bottomInset={bottomInset} />}
+    </AbsoluteFill>
+  );
+};
+
+/** Headline + supporting bullets that balance the device. */
+const CopyColumn: React.FC<{
+  scene: MobileBrief;
+  theme: Theme;
+  frame: number;
+  fps: number;
+  portrait: boolean;
+  width: number;
+}> = ({ scene, theme, frame, fps, portrait, width }) => {
+  const headlineSize = portrait ? Math.round(width * 0.06) : Math.round(width * 0.032);
+  const pointSize = portrait ? Math.round(width * 0.032) : Math.round(width * 0.019);
+
+  const headP = spring({ frame: frame - 6, fps, config: theme.motion });
+  const headOpacity = interpolate(headP, [0, 1], [0, 1]);
+  const headShift = interpolate(headP, [0, 1], [portrait ? 18 : -28, 0]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: portrait ? 22 : 30,
+        maxWidth: portrait ? width * 0.82 : width * 0.44,
+        alignItems: portrait ? "center" : "flex-start",
+        textAlign: portrait ? "center" : "left",
       }}
     >
+      {scene.headline && (
+        <div
+          style={{
+            opacity: headOpacity,
+            translate: portrait ? `0 ${headShift}px` : `${headShift}px 0`,
+            fontFamily: theme.fontSans,
+            fontSize: headlineSize,
+            fontWeight: 800,
+            lineHeight: 1.08,
+            letterSpacing: "-0.03em",
+            color: theme.text,
+          }}
+        >
+          {scene.headline}
+        </div>
+      )}
+
+      {scene.points && scene.points.length > 0 && (
+        <div style={{ display: "flex", flexDirection: "column", gap: portrait ? 16 : 20 }}>
+          {scene.points.map((point, i) => {
+            const p = spring({ frame: frame - 18 - i * 7, fps, config: theme.motion });
+            return (
+              <div
+                key={i}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 16,
+                  opacity: interpolate(p, [0, 1], [0, 1]),
+                  translate: `${interpolate(p, [0, 1], [portrait ? 0 : -16, 0])}px 0`,
+                }}
+              >
+                <Icon name="check" size={Math.round(pointSize * 0.95)} color={theme.accent} />
+                <span style={{ fontFamily: theme.fontSans, fontSize: pointSize, fontWeight: 500, color: theme.text, lineHeight: 1.3 }}>
+                  {point}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/** The fixed-size device. Scaled to the frame by its parent. */
+const PhoneFrame: React.FC<{ scene: MobileBrief; theme: Theme; frame: number; fps: number }> = ({ scene, theme, frame, fps }) => {
+  return (
+    <div
+      style={{
+        width: PHONE_W,
+        height: PHONE_H,
+        borderRadius: RADIUS,
+        border: `3px solid ${theme.border}`,
+        background: theme.surface,
+        boxShadow: `0 50px 120px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05)`,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {/* Notch */}
       <div
         style={{
-          width: PHONE_W,
-          height: PHONE_H,
-          borderRadius: RADIUS,
-          border: `3px solid ${theme.border}`,
+          position: "absolute",
+          top: 0,
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: 120,
+          height: NOTCH_H,
           background: theme.surface,
-          boxShadow: `0 40px 100px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05)`,
-          position: "relative",
-          overflow: "hidden",
-          opacity,
-          transform: `translateY(${translateY}px) scale(${scale})`,
+          borderBottomLeftRadius: 18,
+          borderBottomRightRadius: 18,
+          zIndex: 10,
         }}
-      >
-        {/* Notch */}
-        <div
-          style={{
-            position: "absolute",
-            top: 0,
-            left: "50%",
-            transform: "translateX(-50%)",
-            width: 110,
-            height: NOTCH_H,
-            background: theme.surface,
-            borderBottomLeftRadius: 16,
-            borderBottomRightRadius: 16,
-            zIndex: 10,
-          }}
-        />
+      />
 
-        {/* Screen */}
+      {/* Screen */}
+      <div style={{ position: "absolute", inset: 0, background: theme.bg, display: "flex", flexDirection: "column" }}>
+        {/* Status bar */}
         <div
           style={{
-            position: "absolute",
-            inset: 0,
-            background: theme.bg,
+            height: NOTCH_H + 2,
             display: "flex",
-            flexDirection: "column",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
+            paddingLeft: 22,
+            paddingRight: 22,
+            paddingBottom: 4,
+            fontFamily: theme.fontSans,
+            fontSize: 12,
+            fontWeight: 600,
+            color: theme.text,
+            flexShrink: 0,
           }}
         >
-          {/* Status bar */}
+          <span>9:41</span>
+          <span style={{ letterSpacing: 1 }}>●●●</span>
+        </div>
+
+        {/* App header */}
+        {scene.title && (
           <div
             style={{
-              height: NOTCH_H + 2,
+              height: 52,
               display: "flex",
-              alignItems: "flex-end",
-              justifyContent: "space-between",
-              paddingLeft: 20,
-              paddingRight: 20,
-              paddingBottom: 4,
+              alignItems: "center",
+              gap: 10,
+              padding: "0 18px",
+              borderBottom: `1px solid ${theme.border}`,
               fontFamily: theme.fontSans,
-              fontSize: 11,
-              fontWeight: 600,
-              color: theme.textMuted,
+              fontSize: 17,
+              fontWeight: 700,
+              color: theme.text,
+              flexShrink: 0,
             }}
           >
-            <span>9:41</span>
-            <span>●●●</span>
+            <div style={{ width: 12, height: 12, borderRadius: "50%", background: theme.accent }} />
+            {scene.title}
           </div>
+        )}
+
+        {/* Content */}
+        <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
+          {scene.screenshot ? (
+            <KenBurns frame={frame}>
+              <Img
+                src={staticFile(scene.screenshot)}
+                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+              />
+            </KenBurns>
+          ) : (
+            <MockFeed theme={theme} frame={frame} fps={fps} />
+          )}
+        </div>
 
-          {/* App header */}
-          {scene.title && (
+        {/* Bottom nav */}
+        <div
+          style={{
+            height: 56,
+            borderTop: `1px solid ${theme.border}`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-around",
+            flexShrink: 0,
+            background: theme.surface,
+          }}
+        >
+          {["⌂", "⊞", "♡", "◉"].map((icon, i) => (
             <div
+              key={i}
               style={{
-                height: 48,
+                width: 38,
+                height: 38,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                borderBottom: `1px solid ${theme.border}`,
-                fontFamily: theme.fontSans,
-                fontSize: 16,
-                fontWeight: 600,
-                color: theme.text,
-                flexShrink: 0,
+                fontSize: 19,
+                color: i === 0 ? theme.accent : theme.textMuted,
               }}
             >
-              {scene.title}
+              {icon}
             </div>
-          )}
-
-          {/* Content */}
-          <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
-            {scene.image ? (
-              <Img
-                src={staticFile(scene.image)}
-                style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              />
-            ) : (
-              <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
-                {/* Search bar */}
-                <div
-                  style={{
-                    height: 34,
-                    background: theme.surface,
-                    borderRadius: 8,
-                    border: `1px solid ${theme.border}`,
-                    display: "flex",
-                    alignItems: "center",
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    fontFamily: theme.fontSans,
-                    fontSize: 12,
-                    color: theme.textMuted,
-                  }}
-                >
-                  Search...
-                </div>
-                {/* List items */}
-                {[72, 56, 60, 54, 58].map((_, i) => (
-                  <div
-                    key={i}
-                    style={{
-                      height: 58,
-                      background: theme.surface,
-                      borderRadius: 10,
-                      border: `1px solid ${theme.border}`,
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 10,
-                      paddingLeft: 10,
-                      paddingRight: 10,
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: "50%",
-                        background: theme.accentMuted,
-                        border: `1.5px solid ${theme.accent}`,
-                        flexShrink: 0,
-                      }}
-                    />
-                    <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
-                      <div style={{ height: 11, background: theme.border, borderRadius: 4, width: `${58 + i * 8}%` }} />
-                      <div style={{ height: 9, background: theme.border, borderRadius: 4, width: `${38 + i * 6}%`, opacity: 0.6 }} />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Bottom nav */}
-          <div
-            style={{
-              height: 52,
-              borderTop: `1px solid ${theme.border}`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-around",
-              flexShrink: 0,
-            }}
-          >
-            {["⌂", "⊞", "♡", "◉"].map((icon, i) => (
-              <div
-                key={i}
-                style={{
-                  width: 36,
-                  height: 36,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  fontSize: 18,
-                  color: i === 0 ? theme.accent : theme.textMuted,
-                }}
-              >
-                {icon}
-              </div>
-            ))}
-          </div>
+          ))}
         </div>
       </div>
+    </div>
+  );
+};
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={50} />}
+/** Slow ken-burns push so a real screenshot reads as alive footage, not a still. */
+const KenBurns: React.FC<{ frame: number; children: React.ReactNode }> = ({ frame, children }) => {
+  const s = interpolate(frame, [0, 240], [1.0, 1.1], { extrapolateRight: "clamp" });
+  const y = interpolate(frame, [0, 240], [0, -3], { extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill style={{ transform: `scale(${s}) translateY(${y}%)`, transformOrigin: "center top" }}>
+      {children}
     </AbsoluteFill>
   );
 };
+
+/** An app-like feed that builds in and gently scrolls, when no screenshot is given. */
+const MockFeed: React.FC<{ theme: Theme; frame: number; fps: number }> = ({ theme, frame, fps }) => {
+  const scrollY = interpolate(frame, [24, 200], [0, -46], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+
+  const Item: React.FC<{ index: number; children: React.ReactNode }> = ({ index, children }) => {
+    const p = spring({ frame: frame - 8 - index * 7, fps, config: theme.motion });
+    return (
+      <div style={{ opacity: interpolate(p, [0, 1], [0, 1]), translate: `0 ${interpolate(p, [0, 1], [16, 0])}px` }}>
+        {children}
+      </div>
+    );
+  };
+
+  const cardBase: React.CSSProperties = {
+    background: theme.surface,
+    borderRadius: 14,
+    border: `1px solid ${theme.border}`,
+  };
+
+  return (
+    <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, translate: `0 ${scrollY}px` }}>
+      <Item index={0}>
+        <div style={{ ...cardBase, height: 36, display: "flex", alignItems: "center", padding: "0 14px", fontFamily: theme.fontSans, fontSize: 13, color: theme.textMuted }}>
+          Search
+        </div>
+      </Item>
+
+      {/* Featured hero card */}
+      <Item index={1}>
+        <div
+          style={{
+            height: 132,
+            borderRadius: 16,
+            background: `linear-gradient(135deg, ${theme.accent} 0%, ${theme.accentMuted} 100%)`,
+            padding: 16,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end",
+            gap: 8,
+          }}
+        >
+          <div style={{ height: 13, width: "62%", background: "rgba(255,255,255,0.92)", borderRadius: 5 }} />
+          <div style={{ height: 10, width: "40%", background: "rgba(255,255,255,0.6)", borderRadius: 5 }} />
+        </div>
+      </Item>
+
+      {[0, 1, 2, 3].map((i) => (
+        <Item key={i} index={2 + i}>
+          <div style={{ ...cardBase, height: 70, display: "flex", alignItems: "center", gap: 12, padding: "0 12px" }}>
+            <div
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                background: theme.accentMuted,
+                border: `1.5px solid ${theme.accent}`,
+                flexShrink: 0,
+              }}
+            />
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>
+              <div style={{ height: 11, background: theme.text, opacity: 0.85, borderRadius: 4, width: `${70 - i * 8}%` }} />
+              <div style={{ height: 9, background: theme.textMuted, opacity: 0.5, borderRadius: 4, width: `${48 - i * 5}%` }} />
+            </div>
+            <div style={{ width: 30, height: 18, borderRadius: 6, background: theme.accentMuted, flexShrink: 0 }} />
+          </div>
+        </Item>
+      ))}
+    </div>
+  );
+};

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

@@ -2,12 +2,13 @@ import React from "react";
 import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { OSWindowScene as OSWindowBrief } from "../../brief";
 import { Theme } from "../../theme";
-import { Icon } from "../primitives/Icon";
+import { Icon, hasIcon } from "../primitives/Icon";
 import { Caption } from "../primitives/Caption";
 
 interface Props {
   scene: OSWindowBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const WINDOW_WIDTH = 600;
@@ -18,7 +19,7 @@ const FRAMES_PER_ITEM = 20;
 
 const TRAFFIC_LIGHTS = ["#ff5f57", "#ffbd2e", "#28c941"] as const;
 
-export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
+export const OSWindow: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -37,7 +38,7 @@ export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
 
   return (
     <AbsoluteFill
-      style={{ background: theme.bg, display: "flex", alignItems: "center", justifyContent: "center" }}
+      style={{ background: "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}
     >
       <div
         style={{
@@ -47,7 +48,7 @@ export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
           background: theme.surface,
           border: `1px solid ${theme.border}`,
           boxShadow: "0 40px 100px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.05)",
-          transform: `scale(${windowScale})`,
+          scale: String(windowScale),
           opacity: windowOpacity,
         }}
       >
@@ -124,10 +125,10 @@ export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
                   padding: "9px 14px",
                   background: item.highlighted ? theme.accentMuted : "transparent",
                   opacity,
-                  transform: `translateX(${tx}px)`,
+                  translate: `${tx}px 0`,
                 }}
               >
-                {item.icon && (
+                {item.icon && hasIcon(item.icon) && (
                   <div
                     style={{
                       width: 30,
@@ -160,7 +161,7 @@ export const OSWindow: React.FC<Props> = ({ scene, theme }) => {
         </div>
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };