@devinilabs/reelstack 1.3.1 → 1.4.0

package/reference/dark/stitch.tsx

@@ -3023,7 +3023,7 @@ export const StitchReel: React.FC = () => {
 
   return (
     <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       <Background frame={frame} fps={fps} />
 

package/reference/dark/stitch2.tsx

@@ -0,0 +1,162 @@
+/**
+ * REFERENCE — Stitch2Reel  (Family: dark)
+ *
+ * Canonical example of the dark family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
+ * for STUDY and as the source for the scaffold-from-reference flow.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/Stitch2Reel.tsx
+ * Bundled at: 2026-05-12T19:40:04.828Z
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  Sequence,
+  OffthreadVideo,
+  staticFile,
+  useCurrentFrame,
+  interpolate,
+  Easing,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// Composition: 1080x1920 @ 30fps, 600 frames (20s — matches hero.mp4 duration).
+// Instagram safe zones: reserve top 288px and bottom ~422px.
+const SAFE_TOP = 288;
+const SAFE_BOT_OFFSET = 422;
+
+// Hero video intrinsic dimensions: 2304x1440 (3:2 landscape).
+// Letterboxed into 1080 wide → scaled height = 1080 * (1440 / 2304) = 675.
+const VIDEO_W = 1080;
+const VIDEO_H = 675;
+
+const C = {
+  bg: "#0a0a0b",
+  fg: "#f5f5f7",
+  fgMuted: "#8e8e93",
+  stitch: "#ff4d9b",
+  stitchDim: "rgba(255,77,155,0.15)",
+} as const;
+
+export const Stitch2Reel: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const titleFade = interpolate(frame, [0, 20], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+  const titleLift = interpolate(frame, [0, 20], [24, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const videoFade = interpolate(frame, [10, 30], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: ds.font.sans }}>
+      {/* Title — inside the top safe zone */}
+      <div
+        style={{
+          position: "absolute",
+          top: 80,
+          left: 0,
+          right: 0,
+          padding: "0 64px",
+          opacity: titleFade,
+          transform: `translateY(${titleLift}px)`,
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "inline-block",
+            padding: "8px 20px",
+            borderRadius: 999,
+            background: C.stitchDim,
+            color: C.stitch,
+            fontSize: 32,
+            fontWeight: 600,
+            letterSpacing: 1,
+            textTransform: "uppercase",
+          }}
+        >
+          Google Labs
+        </div>
+        <h1
+          style={{
+            margin: "20px 0 8px",
+            fontSize: 96,
+            fontWeight: 800,
+            color: C.fg,
+            lineHeight: 1,
+            letterSpacing: -2,
+          }}
+        >
+          Stitch 2.0
+        </h1>
+        <p
+          style={{
+            margin: 0,
+            fontSize: 34,
+            color: C.fgMuted,
+            fontWeight: 500,
+          }}
+        >
+          Vibe-design production UI in seconds
+        </p>
+      </div>
+
+      {/* Video — wrapped in Sequence per Remotion OffthreadVideo timing rule */}
+      <Sequence from={0} durationInFrames={600}>
+        <AbsoluteFill
+          style={{
+            top: SAFE_TOP,
+            bottom: SAFE_BOT_OFFSET,
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: videoFade,
+          }}
+        >
+          <div
+            style={{
+              width: VIDEO_W,
+              height: VIDEO_H,
+              borderRadius: 24,
+              overflow: "hidden",
+              boxShadow: "0 40px 100px rgba(255,77,155,0.18), 0 0 0 1px rgba(255,255,255,0.08)",
+            }}
+          >
+            {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+          </div>
+        </AbsoluteFill>
+      </Sequence>
+
+      {/* Footer tag — inside bottom safe-zone clearance */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 120,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          color: C.fgMuted,
+          fontSize: 30,
+          fontWeight: 500,
+          letterSpacing: 0.5,
+          opacity: videoFade,
+        }}
+      >
+        stitch.withgoogle.com
+      </div>
+    </AbsoluteFill>
+  );
+};

package/reference/forbidden/heretic.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   OffthreadVideo,
@@ -2630,7 +2629,7 @@ export const HereticReel: React.FC = () => {
       {frame >= HBEAT.stars && frame < HBEAT.cta && <StarsScene />}
       {frame >= HBEAT.cta && frame < HBEAT.end && <CtaScene />}
 
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
     </AbsoluteFill>
   );
 };

package/reference/glass/claudewatch.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   OffthreadVideo,
@@ -818,9 +817,10 @@ const HookScene: React.FC = () => {
                 top: "55%",
                 left: -2,
                 height: 4,
+                width: "calc(100% + 4px)",
                 background: C.crimson,
-                width: `calc(${strikeWidth}% + 4px)`,
-                transform: "translateY(-50%) rotate(-2deg)",
+                transform: `translateY(-50%) rotate(-2deg) scaleX(${strikeWidth / 100})`,
+                transformOrigin: "left center",
                 boxShadow: `0 0 12px ${C.crimson}`,
                 borderRadius: 2,
               }}
@@ -3777,7 +3777,7 @@ export const ClaudeWatchReel: React.FC<{ embedded?: boolean }> = ({
         fontFamily: FONT,
       }}
     >
-      {!embedded && {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}}
+      {!embedded && {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}}
 
       {/* Perpetual atmosphere — runs all scenes (skipped when embedded; host provides bg+caustics) */}
       {!embedded && <CausticBlobs />}