reelme 0.2.2 → 0.4.0

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

@@ -1,110 +1,112 @@
 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;
   theme: Theme;
+  platform?: PlatformPreset;
+  bottomInset?: number;
 }
 
 const HEADLINE_FRAMES = 20;
 const FRAMES_PER_ITEM = 25;
 
-export const FeatureList: React.FC<Props> = ({ scene, theme }) => {
+export const FeatureList: React.FC<Props> = ({ scene, theme, platform, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   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: theme.bg,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "0 200px",
-      }}
-    >
-      {scene.headline && (
-        <div style={{ marginBottom: 48 }}>
-          <Label text={scene.headline} theme={theme} size="lg" 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: "100%" }}>
-        {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,
-                  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} />}
-    </AbsoluteFill>
+    </Stage>
   );
 };

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

@@ -8,6 +8,7 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: FileTreeBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const HEADLINE_FRAMES = 20;
@@ -43,7 +44,7 @@ const FileIcon: React.FC<{ color: string }> = ({ color }) => (
   </svg>
 );
 
-export const FileTree: React.FC<Props> = ({ scene, theme }) => {
+export const FileTree: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -52,7 +53,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -92,7 +93,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme }) => {
                 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,
@@ -119,7 +120,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme }) => {
         })}
       </div>
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { HookScene as HookBrief } from "../../brief";
+import { Theme } from "../../theme";
+import { PlatformPreset, typeScale } from "../../platforms";
+import { RevealText } from "../primitives/RevealText";
+import { Kicker } from "../primitives/Kicker";
+
+interface Props {
+  scene: HookBrief;
+  theme: Theme;
+  platform: PlatformPreset;
+}
+
+export const Hook: React.FC<Props> = ({ scene, theme, platform }) => {
+  const frame = useCurrentFrame();
+  const { fps, width } = useVideoConfig();
+  const left = scene.align === "left";
+
+  const fontSize = width * 0.1 * typeScale(platform);
+  // The whole block eases out of a slight over-scale so the words don't just
+  // appear — they land. A touch of continuous drift keeps the hold alive.
+  const settle = spring({ frame, fps, config: { damping: 26, stiffness: 90, mass: 1 } });
+  const scale = interpolate(settle, [0, 1], [1.06, 1]);
+  const drift = Math.sin(frame / 40) * 0.4;
+
+  return (
+    <AbsoluteFill
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: left ? "flex-start" : "center",
+        justifyContent: "center",
+        padding: left ? "0 0 0 140px" : "0 80px",
+      }}
+    >
+      <div style={{ transform: `scale(${scale}) translateY(${drift}px)`, transformOrigin: left ? "left center" : "center", willChange: "transform" }}>
+        {scene.kicker && <Kicker text={scene.kicker} theme={theme} startFrame={0} align={left ? "left" : "center"} />}
+        <RevealText
+          text={scene.text}
+          theme={theme}
+          fontSize={fontSize}
+          fontWeight={800}
+          emphasis={scene.accent}
+          align={left ? "left" : "center"}
+          startFrame={scene.kicker ? 6 : 0}
+          stagger={3.5}
+          letterSpacing="-0.04em"
+          lineHeight={1.04}
+          maxWidth={width * (left ? 0.72 : 0.84)}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};

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

@@ -8,16 +8,18 @@ import { Caption } from "../primitives/Caption";
 interface Props {
   scene: HotkeyBrief;
   theme: Theme;
+  bottomInset?: number;
 }
 
 const FRAMES_PER_KEY = 20;
 const ACTION_DELAY = 15;
 
-export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
+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 });
@@ -27,7 +29,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
   return (
     <AbsoluteFill
       style={{
-        background: theme.bg,
+        background: "transparent",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -36,7 +38,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
       }}
     >
       <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        {scene.keys.map((key, i) => (
+        {keys.map((key, i) => (
           <React.Fragment key={i}>
             {i > 0 && (
               <span
@@ -59,7 +61,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
         <div
           style={{
             opacity: actionOpacity,
-            transform: `translateY(${actionY}px)`,
+            translate: `0 ${actionY}px`,
             fontFamily: theme.fontSans,
             fontSize: 28,
             fontWeight: 400,
@@ -71,7 +73,7 @@ export const Hotkey: React.FC<Props> = ({ scene, theme }) => {
         </div>
       )}
 
-      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} />}
+      {scene.caption && <Caption text={scene.caption} theme={theme} startFrame={captionStart} bottomInset={bottomInset} />}
     </AbsoluteFill>
   );
 };