Upgrade Remotion composition engine with cinematic enhancements

- Upgrade Remotion packages to 4.0.441, add transitions/captions/fonts/media
- Add spring-animated image scenes, stat reveals, section titles, hero cards
- Add TikTok-style word-by-word captions with highlight effect
- Add Google Fonts (Space Grotesk) and dynamic duration via calculateMetadata
- Fix Remotion false-positive: check node_modules/ in _remotion_available()
- Add project directory convention, music library, tool naming docs
- Add music transparency to proposal stage, subtitle pipeline to compose stage
- Add README showcase montage and Windows npm troubleshooting note

remotion-composer/src/Root.tsx

@@ -1,5 +1,17 @@
-import { Composition } from "remotion";
-import { Explainer } from "./Explainer";
+import { Composition, CalculateMetadataFunction } from "remotion";
+import { Explainer, ExplainerProps } from "./Explainer";
+
+const calculateMetadata: CalculateMetadataFunction<ExplainerProps> = async ({
+  props,
+}) => {
+  const cuts = props.cuts || [];
+  if (cuts.length === 0) {
+    return { durationInFrames: 30 * 60 };
+  }
+  const lastEnd = Math.max(...cuts.map((c) => c.out_seconds || 0));
+  // Add 1 second padding for final fade
+  return { durationInFrames: Math.ceil((lastEnd + 1) * 30) };
+};
 
 export const Root: React.FC = () => {
   return (
@@ -7,15 +19,17 @@ export const Root: React.FC = () => {
       <Composition
         id="Explainer"
         component={Explainer}
-        durationInFrames={30 * 60} // default 60s at 30fps, overridden by props
+        durationInFrames={30 * 60}
         fps={30}
         width={1920}
         height={1080}
         defaultProps={{
           cuts: [],
-          subtitles: { enabled: false },
+          overlays: [],
+          captions: [],
           audio: {},
         }}
+        calculateMetadata={calculateMetadata}
       />
     </>
   );