bps-kit 1.0.18 → 1.1.0

package/templates/vault/remotion/resources/composition-checklist.md

@@ -0,0 +1,124 @@
+# Remotion Composition Checklist
+
+Use this checklist to ensure your Remotion walkthrough video composition is complete and follows best practices.
+
+## ✅ Project Setup
+
+- [ ] Remotion project initialized (or existing project verified)
+- [ ] Dependencies installed (`@remotion/transitions`, etc.)
+- [ ] Asset directory created (`public/assets/screens/`)
+- [ ] Screen manifest created (`screens.json`)
+
+## ✅ Asset Preparation
+
+- [ ] All Stitch screenshots downloaded
+- [ ] Images saved with descriptive names
+- [ ] Image dimensions recorded in manifest
+- [ ] Images optimized for size (if needed)
+- [ ] Asset paths are correct and relative to `public/`
+
+## ✅ Component Structure
+
+- [ ] `ScreenSlide.tsx` component created
+  - [ ] Props interface defined
+  - [ ] Zoom animation implemented
+  - [ ] Fade animation implemented
+  - [ ] Text overlay included
+- [ ] `WalkthroughComposition.tsx` created
+  - [ ] Screen manifest imported
+  - [ ] `<Sequence>` components for each screen
+  - [ ] Transitions between screens configured
+  - [ ] Proper timing offsets calculated
+
+## ✅ Configuration
+
+- [ ] `remotion.config.ts` updated
+  - [ ] Composition ID set
+  - [ ] Video dimensions configured
+  - [ ] Frame rate set (30 or 60 fps)
+  - [ ] Duration calculated correctly
+- [ ] Video metadata set (if applicable)
+  - [ ] Title
+  - [ ] Description
+
+## ✅ Animations & Transitions
+
+- [ ] Spring animations use appropriate configs
+  - [ ] Damping values (8-15 typical)
+  - [ ] Stiffness values (60-100 typical)
+- [ ] Transitions feel smooth
+- [ ] Text overlays timed correctly
+- [ ] No jarring or abrupt changes
+
+## ✅ Visual Quality
+
+- [ ] Text is readable at all times
+- [ ] Sufficient contrast between text and background
+- [ ] Font sizes appropriate for video resolution
+- [ ] Images display without distortion
+- [ ] Aspect ratios maintained
+
+## ✅ Timing
+
+- [ ] Each screen displays for appropriate duration
+- [ ] Total video length is reasonable (not too long/short)
+- [ ] Transitions don't feel rushed
+- [ ] Text has time to be read
+
+## ✅ Preview & Testing
+
+- [ ] Preview in Remotion Studio (`npm run dev`)
+- [ ] Scrub through timeline to check all frames
+- [ ] Verify smooth playback
+- [ ] Check for any rendering errors
+- [ ] Test on different screen sizes (if responsive)
+
+## ✅ Rendering
+
+- [ ] Render command tested and works
+- [ ] Output format chosen (MP4, WebM, etc.)
+- [ ] Quality settings configured
+- [ ] Codec specified (h264 recommended)
+- [ ] Final video renders without errors
+
+## ✅ Final Output
+
+- [ ] Video file generated successfully
+- [ ] File size is reasonable
+- [ ] Video plays correctly in media players
+- [ ] Audio included (if applicable)
+- [ ] Metadata embedded (if needed)
+
+## 🎨 Optional Enhancements
+
+- [ ] Progress indicator showing current screen
+- [ ] Custom logo or branding
+- [ ] Background music or sound effects
+- [ ] Voiceover narration
+- [ ] Interactive hotspots highlighting features
+- [ ] Call-to-action at end
+
+## 📋 Best Practices Verified
+
+- [ ] Component code is modular and reusable
+- [ ] TypeScript interfaces used for props
+- [ ] No hardcoded values (use manifest/config)
+- [ ] Code follows Remotion conventions
+- [ ] Comments added for complex logic
+- [ ] Assets organized in clear folder structure
+
+## 🐛 Common Issues Checked
+
+- [ ] No blurry images (check source resolution)
+- [ ] No misaligned text (verify positioning)
+- [ ] No choppy animations (check spring configs)
+- [ ] No missing assets (verify all paths)
+- [ ] No build errors (run `npm run build` test)
+
+---
+
+**Notes:**
+- Mark items with `[x]` as you complete them
+- Add custom checklist items specific to your project
+- Review Remotion documentation for updates
+- Test final video on target platform (YouTube, social, etc.)

package/templates/vault/remotion/resources/screen-slide-template.tsx

@@ -0,0 +1,123 @@
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+import {Img} from 'remotion';
+
+interface ScreenSlideProps {
+  imageSrc: string;
+  title: string;
+  description?: string;
+  width: number;
+  height: number;
+}
+
+export const ScreenSlide: React.FC<ScreenSlideProps> = ({
+  imageSrc,
+  title,
+  description,
+  width,
+  height,
+}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  // Zoom in animation
+  const zoom = spring({
+    frame,
+    fps,
+    from: 0.95,
+    to: 1,
+    config: {
+      damping: 12,
+      stiffness: 80,
+    },
+  });
+
+  // Fade in animation
+  const opacity = spring({
+    frame,
+    fps,
+    from: 0,
+    to: 1,
+    config: {
+      damping: 10,
+    },
+  });
+
+  // Text overlay fade in (delayed)
+  const textOpacity = spring({
+    frame: frame - 15, // Delay by 15 frames
+    fps,
+    from: 0,
+    to: 1,
+    config: {
+      damping: 10,
+    },
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: '#000',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {/* Screen Image */}
+      <div
+        style={{
+          transform: `scale(${zoom})`,
+          opacity,
+          maxWidth: '90%',
+          maxHeight: '80%',
+          position: 'relative',
+        }}
+      >
+        <Img
+          src={imageSrc}
+          style={{
+            width: '100%',
+            height: 'auto',
+            borderRadius: '8px',
+            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
+          }}
+        />
+      </div>
+
+      {/* Text Overlay */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '10%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          textAlign: 'center',
+          opacity: textOpacity,
+          width: '80%',
+        }}
+      >
+        <h1
+          style={{
+            fontSize: '48px',
+            fontWeight: 'bold',
+            color: '#fff',
+            margin: '0 0 12px 0',
+            textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          {title}
+        </h1>
+        {description && (
+          <p
+            style={{
+              fontSize: '24px',
+              color: '#ddd',
+              margin: 0,
+              textShadow: '0 1px 5px rgba(0, 0, 0, 0.5)',
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/templates/vault/remotion/scripts/download-stitch-asset.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Download Stitch screen asset with proper handling of Google Cloud Storage URLs
+# Usage: ./download-stitch-asset.sh "https://storage.googleapis.com/..." "output-path.png"
+
+set -e
+
+if [ $# -ne 2 ]; then
+  echo "Usage: $0 <download_url> <output_path>"
+  echo "Example: $0 'https://storage.googleapis.com/stitch/screenshot.png' 'assets/screen.png'"
+  exit 1
+fi
+
+DOWNLOAD_URL="$1"
+OUTPUT_PATH="$2"
+
+# Create directory if it doesn't exist
+OUTPUT_DIR=$(dirname "$OUTPUT_PATH")
+mkdir -p "$OUTPUT_DIR"
+
+echo "Downloading from: $DOWNLOAD_URL"
+echo "Saving to: $OUTPUT_PATH"
+
+# Use curl with follow redirects and authentication handling
+curl -L -o "$OUTPUT_PATH" "$DOWNLOAD_URL"
+
+if [ $? -eq 0 ]; then
+  echo "✓ Successfully downloaded to $OUTPUT_PATH"
+  
+  # Display file size for verification
+  if command -v stat &> /dev/null; then
+    FILE_SIZE=$(stat -f%z "$OUTPUT_PATH" 2>/dev/null || stat -c%s "$OUTPUT_PATH" 2>/dev/null)
+    echo "  File size: $FILE_SIZE bytes"
+  fi
+else
+  echo "✗ Download failed"
+  exit 1
+fi