reelme 0.3.0 → 0.5.0

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

@@ -28,7 +28,7 @@ function getName(path: string): string {
 }
 
 const FolderIcon: React.FC<{ color: string }> = ({ color }) => (
-  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <svg width="24" height="24" viewBox="0 0 18 18" fill="none">
     <path
       d="M1 4.5C1 3.67 1.67 3 2.5 3H7L9 5h6.5c.83 0 1.5.67 1.5 1.5v7c0 .83-.67 1.5-1.5 1.5h-13C1.67 15 1 14.33 1 13.5v-9z"
       fill={color}
@@ -38,7 +38,7 @@ const FolderIcon: React.FC<{ color: string }> = ({ color }) => (
 );
 
 const FileIcon: React.FC<{ color: string }> = ({ color }) => (
-  <svg width="15" height="18" viewBox="0 0 15 18" fill="none">
+  <svg width="20" height="24" viewBox="0 0 15 18" fill="none">
     <path d="M2 1h8l4 4v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1z" stroke={color} strokeWidth="1.5" fill="none" />
     <path d="M9 1v5h5" stroke={color} strokeWidth="1.5" />
   </svg>
@@ -62,12 +62,28 @@ export const FileTree: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) =>
       }}
     >
       {scene.headline && (
-        <div style={{ marginBottom: 48, alignSelf: "flex-start" }}>
-          <Label text={scene.headline} theme={theme} size="lg" startFrame={0} align="left" />
+        <div style={{ marginBottom: 48 }}>
+          <Label text={scene.headline} theme={theme} size="lg" startFrame={0} align="center" />
         </div>
       )}
 
-      <div style={{ display: "flex", flexDirection: "column", gap: 2, width: "100%" }}>
+      {/* The tree lives in a real panel (solid surface, brand-lit) so it has
+          graphic mass — a bare list of faint rows floating on the stage reads
+          as a wireframe, not a shot. */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          minWidth: 560,
+          maxWidth: "100%",
+          background: theme.surface,
+          border: `1px solid ${theme.border}`,
+          borderRadius: 16,
+          padding: "32px 40px",
+          boxShadow: `0 30px 90px -18px ${theme.accent}59, 0 24px 60px rgba(0,0,0,0.45)`,
+        }}
+      >
         {scene.entries.map((entry, i) => {
           const entryStart = HEADLINE_FRAMES + i * FRAMES_PER_ENTRY;
           const progress = spring({
@@ -93,7 +109,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,
@@ -107,7 +123,7 @@ export const FileTree: React.FC<Props> = ({ scene, theme, bottomInset = 0 }) =>
               <span
                 style={{
                   fontFamily: theme.fontMono,
-                  fontSize: 22,
+                  fontSize: 30,
                   fontWeight: isDir ? 600 : 400,
                   color: textColor,
                   letterSpacing: "-0.01em",

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

@@ -19,10 +19,11 @@ export const Hook: React.FC<Props> = ({ scene, theme, platform }) => {
 
   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.
+  // appear — they land. No continuous drift on the hold: a sub-pixel sine on
+  // giant type reads as vibration, not life (gallery feedback); the Atmosphere
+  // behind carries the motion instead.
   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
@@ -34,7 +35,7 @@ export const Hook: React.FC<Props> = ({ scene, theme, platform }) => {
         padding: left ? "0 0 0 140px" : "0 80px",
       }}
     >
-      <div style={{ transform: `scale(${scale}) translateY(${drift}px)`, transformOrigin: left ? "left center" : "center", willChange: "transform" }}>
+      <div style={{ transform: `scale(${scale})`, 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}

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,