/video-showcase

import { useCurrentFrame, useVideoConfig, interpolate, spring, Sequence, AbsoluteFill, Img } from "remotion";
import { staticFile } from "remotion";
 
type Props = {
  title: string;
  tagline: string;
  features: string[];
  screenshots: string[];  // filenames in public/
  colors: { primary: string; bg: string; text: string };
};
 
export const ProductHero: React.FC<Props> = ({ title, tagline, features, screenshots, colors }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  // Intro: title + tagline fade in (0-2s)
  // Screenshots: pan/zoom through each (2-8s per screenshot)
  // Features: slide in one by one (2s each)
  // Outro: call to action (last 3s)
 
  return (
    <AbsoluteFill style={{ backgroundColor: colors.bg }}>
      {/* Build composition here */}
    </AbsoluteFill>
  );
};

# Preview in browser
npx remotion preview
 
# Render to MP4
npx remotion render ProductHero out/showcase.mp4 \
  --props='{"title":"My App","tagline":"Ship faster","features":["Fast","Reliable","Beautiful"],"screenshots":["screen1.png","screen2.png"],"colors":{"primary":"#3B82F6","bg":"#0F172A","text":"#F8FAFC"}}'
 
# Render for specific platform
npx remotion render ProductHero out/linkedin.mp4 --width=1920 --height=1080  # LinkedIn
npx remotion render ProductHero out/twitter.mp4 --width=1280 --height=720   # Twitter/X
npx remotion render ProductHero out/short.mp4 --width=1080 --height=1920    # Reels/Shorts

const opacity = interpolate(frame, [0, 2 * fps], [0, 1], { extrapolateRight: 'clamp' });

const translateX = spring({ frame, fps, from: -100, to: 0, config: { damping: 12 } });

{features.map((f, i) => (
  <Sequence from={startFrame + i * staggerDelay} key={i}>
    <AnimatedFeature text={f} />
  </Sequence>
))}

const scale = interpolate(frame, [0, duration], [1, 1.15], { extrapolateRight: 'clamp' });
const translateY = interpolate(frame, [0, duration], [0, -50], { extrapolateRight: 'clamp' });

import { renderMedia, selectComposition } from '@remotion/renderer';
 
const projects = [
  { title: "Project A", screenshots: ["a1.png", "a2.png"], ... },
  { title: "Project B", screenshots: ["b1.png", "b2.png"], ... },
];
 
for (const project of projects) {
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: 'ProductHero',
    inputProps: project,
  });
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: 'h264',
    outputLocation: `out/${project.title}.mp4`,
    inputProps: project,
  });
}