Upload 5 files

remotion/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "remotion-renderer",
+    "version": "1.0.0",
+    "description": "Remotion video renderer for HF Spaces",
+    "scripts": {
+        "build": "remotion bundle"
+    },
+    "dependencies": {
+        "@remotion/bundler": "^4.0.0",
+        "@remotion/cli": "^4.0.0",
+        "@remotion/player": "^4.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "remotion": "^4.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "typescript": "^5.0.0"
+    }
+}

remotion/remotion.config.ts

@@ -0,0 +1,4 @@
+import { Config } from '@remotion/cli/config';
+
+Config.setVideoImageFormat('jpeg');
+Config.setOverwriteOutput(true);

remotion/src/Composition.tsx

@@ -0,0 +1,467 @@
+"use client";
+
+import React from 'react';
+import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring, random, Audio, OffthreadVideo } from 'remotion';
+import { VideoScript, ScriptScene } from '@/lib/types';
+
+// --- VISUAL UTILS ---
+
+const GlitchText: React.FC<{
+    text: string;
+    color: string;
+    fontSize: number;
+    fontFamily?: string;
+    frame: number;
+}> = ({ text, color, fontSize, fontFamily = 'Inter, sans-serif', frame }) => {
+    // Jitter calculation
+    const shakeX = Math.sin(frame * 0.8) * 4;
+    const shakeY = Math.cos(frame * 1.1) * 2;
+    const rgbOffset = fontSize * 0.03;
+
+    return (
+        <div style={{ position: 'relative', display: 'inline-block' }}>
+            {/* Cyan Channel */}
+            <div style={{
+                position: 'absolute',
+                top: 0,
+                left: -rgbOffset,
+                color: 'cyan',
+                fontSize,
+                fontFamily,
+                opacity: 0.7,
+                mixBlendMode: 'screen',
+                transform: `translate(${-shakeX}px, ${shakeY}px)`,
+                clipPath: 'polygon(0 0, 100% 0, 100% 45%, 0 45%)',
+            }}>
+                {text}
+            </div>
+
+            {/* Magenta Channel */}
+            <div style={{
+                position: 'absolute',
+                top: 0,
+                left: rgbOffset,
+                color: 'magenta',
+                fontSize,
+                fontFamily,
+                opacity: 0.7,
+                mixBlendMode: 'screen',
+                transform: `translate(${shakeX}px, ${-shakeY}px)`,
+                clipPath: 'polygon(0 55%, 100% 55%, 100% 100%, 0 100%)',
+            }}>
+                {text}
+            </div>
+
+            {/* Main Text */}
+            <div style={{ position: 'relative', color, fontSize, fontFamily, zIndex: 10 }}>
+                {text}
+            </div>
+        </div>
+    );
+};
+
+const GridBackground: React.FC<{ color: string; velocity?: number }> = ({ color, velocity = 2 }) => {
+    const frame = useCurrentFrame();
+    const offset = (frame * velocity) % 100;
+
+    return (
+        <AbsoluteFill style={{
+            backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
+            backgroundSize: '100px 100px',
+            backgroundPosition: `center ${offset}px`,
+            opacity: 0.15,
+        }} />
+    );
+};
+
+const Scanlines: React.FC = () => {
+    return (
+        <AbsoluteFill style={{
+            background: 'linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06))',
+            backgroundSize: '100% 4px, 6px 100%',
+            pointerEvents: 'none',
+            zIndex: 100,
+        }} />
+    );
+};
+
+// --- SCENE LAYOUTS ---
+
+// 1. STANDARD STOMP: Huge centered text with glitch
+const LayoutStandard: React.FC<{ scene: ScriptScene; scale: number; opacity: number; color: string }> = ({ scene, scale, opacity, color }) => {
+    const frame = useCurrentFrame();
+    const { width } = useVideoConfig();
+    const fontSize = width * 0.09;
+
+    return (
+        <div style={{
+            transform: `scale(${scale})`,
+            opacity: opacity,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            width: '100%',
+        }}>
+            <div className="font-[900] tracking-tighter leading-[0.8] uppercase break-words max-w-[90%]">
+                <GlitchText text={scene.title} color={color} fontSize={fontSize} frame={frame} />
+            </div>
+        </div>
+    );
+};
+
+// 2. RAPID FIRE: Flash words one by one
+const LayoutRapidFire: React.FC<{ scene: ScriptScene; durationInFrames: number; color: string }> = ({ scene, durationInFrames, color }) => {
+    const frame = useCurrentFrame();
+    const { width } = useVideoConfig();
+    const words = scene.title.split(' ');
+
+    if (words.length === 1) return <LayoutStandard scene={scene} scale={1} opacity={1} color={color} />;
+
+    const wordsToShow = words.length;
+    const framesPerWord = durationInFrames / wordsToShow;
+    const currentWordIndex = Math.floor(frame / framesPerWord);
+    const currentWord = words[Math.min(currentWordIndex, words.length - 1)];
+
+    const localFrame = frame % framesPerWord;
+    const pop = interpolate(localFrame, [0, 3], [0.8, 1.2], { extrapolateRight: 'clamp' });
+    const fontSize = width * 0.11;
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%'
+        }}>
+            <h1 style={{
+                color,
+                transform: `scale(${pop})`,
+                fontSize: fontSize,
+                fontWeight: 900,
+                textTransform: 'uppercase',
+                letterSpacing: '-0.05em'
+            }}>
+                {currentWord}
+            </h1>
+        </div>
+    );
+};
+
+// 3. REPEATER: Background text texture + Main Text
+const LayoutRepeater: React.FC<{ scene: ScriptScene; scale: number; color: string; bg: string }> = ({ scene, scale, color, bg }) => {
+    const frame = useCurrentFrame();
+    const { width } = useVideoConfig();
+
+    const bgFontSize = width * 0.04;
+    const mainFontSize = width * 0.06;
+
+    return (
+        <AbsoluteFill style={{ overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}>
+            <div style={{
+                position: 'absolute',
+                top: '-50%',
+                left: '-50%',
+                width: '200%',
+                height: '200%',
+                display: 'flex',
+                flexWrap: 'wrap',
+                opacity: 0.1,
+                transform: `rotate(-15deg) translateY(${frame * 2}px)`,
+                justifyContent: 'center',
+                alignContent: 'center',
+                gap: '20px'
+            }}>
+                {Array(40).fill(scene.title).map((t, i) => (
+                    <span key={i} style={{ color, fontSize: bgFontSize, fontWeight: 900, textTransform: 'uppercase' }}>{t}</span>
+                ))}
+            </div>
+
+            <div style={{ transform: `scale(${scale})`, zIndex: 10, border: `4px solid ${color}`, padding: `${width * 0.02}px ${width * 0.04}px`, backgroundColor: bg }}>
+                <h1 style={{ color, fontSize: mainFontSize, fontWeight: 900, textTransform: 'uppercase', lineHeight: 1 }}>
+                    {scene.title}
+                </h1>
+            </div>
+        </AbsoluteFill>
+    );
+};
+
+// 4. TERMINAL: Monospace, grid, technical feel
+const LayoutTerminal: React.FC<{ scene: ScriptScene; color: string }> = ({ scene, color }) => {
+    const frame = useCurrentFrame();
+    const { width } = useVideoConfig();
+    const showCursor = Math.floor(frame / 15) % 2 === 0;
+
+    const padding = width * 0.05;
+    const smallSize = width * 0.02;
+    const bigSize = width * 0.05;
+
+    return (
+        <AbsoluteFill style={{ alignItems: 'flex-start', justifyContent: 'center', padding: padding, fontFamily: 'JetBrains Mono, monospace' }}>
+            <GridBackground color={color} velocity={5} />
+
+            <div style={{ zIndex: 10 }}>
+                <div style={{ color, fontSize: smallSize, marginBottom: '20px', opacity: 0.7 }}>
+                    $ run_sequence --force
+                </div>
+                <div style={{ color, fontSize: bigSize, fontWeight: 'bold', lineHeight: 1.1, textTransform: 'uppercase' }}>
+                    {'>'} {scene.title}
+                    {showCursor && <span style={{ color: color }}>_</span>}
+                </div>
+                {scene.codeSnippet && (
+                    <div style={{ marginTop: '40px', padding: '20px', borderLeft: `4px solid ${color}`, backgroundColor: 'rgba(255,255,255,0.1)' }}>
+                        <code style={{ color, fontSize: smallSize * 1.5 }}>
+                            import &#123; {scene.codeSnippet} &#125; from 'future';
+                        </code>
+                    </div>
+                )}
+            </div>
+        </AbsoluteFill>
+    );
+};
+
+// 5. ECHO: Main text with expanding stroke echoes
+const LayoutEcho: React.FC<{ scene: ScriptScene; color: string }> = ({ scene, color }) => {
+    const frame = useCurrentFrame();
+    const { width } = useVideoConfig();
+    const fontSize = width * 0.08;
+
+    const echoes = [1, 2, 3].map(i => {
+        const delay = i * 4;
+        const activeFrame = Math.max(0, frame - delay);
+        const scale = interpolate(activeFrame, [0, 20], [1, 2.5], { extrapolateRight: 'clamp' });
+        const opacity = interpolate(activeFrame, [0, 15], [0.6, 0], { extrapolateRight: 'clamp' });
+        return { scale, opacity };
+    });
+
+    return (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', width: '100%', height: '100%' }}>
+            {echoes.map((e, i) => (
+                <h1 key={i} style={{
+                    position: 'absolute',
+                    color: 'transparent',
+                    WebkitTextStroke: `2px ${color}`,
+                    fontSize: fontSize,
+                    fontWeight: 900,
+                    transform: `scale(${e.scale})`,
+                    opacity: e.opacity,
+                    zIndex: 0,
+                    textTransform: 'uppercase',
+                    textAlign: 'center',
+                    width: '100%'
+                }}>
+                    {scene.title}
+                </h1>
+            ))}
+            <h1 style={{ color, fontSize: fontSize, fontWeight: 900, zIndex: 10, textTransform: 'uppercase', textAlign: 'center', lineHeight: 0.9 }}>
+                {scene.title}
+            </h1>
+        </div>
+    );
+};
+
+// 6. VERTICAL STACK: Wall of text
+const LayoutVertical: React.FC<{ scene: ScriptScene; color: string }> = ({ scene, color }) => {
+    const { width } = useVideoConfig();
+    const fontSize = width * 0.06;
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', lineHeight: 0.8 }}>
+            {[...Array(7)].map((_, i) => (
+                <h1 key={i} style={{
+                    fontSize: fontSize,
+                    fontWeight: 900,
+                    color: i === 3 ? color : 'transparent',
+                    WebkitTextStroke: i === 3 ? 'none' : `1px ${color}`,
+                    opacity: i === 3 ? 1 : 0.3,
+                    textTransform: 'uppercase',
+                    textAlign: 'center',
+                    margin: 0
+                }}>
+                    {scene.title}
+                </h1>
+            ))}
+        </div>
+    );
+};
+
+// 7. TILT: 3D Perspective Rotation
+const LayoutTilt: React.FC<{ scene: ScriptScene; color: string }> = ({ scene, color }) => {
+    const frame = useCurrentFrame();
+    const { width } = useVideoConfig();
+    const fontSize = width * 0.1;
+
+    const rotateX = interpolate(frame, [0, 30], [45, -10], { extrapolateRight: 'clamp' });
+    const scale = interpolate(frame, [0, 30], [0.8, 1.1], { extrapolateRight: 'clamp' });
+
+    return (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+            perspective: '1200px'
+        }}>
+            <h1 style={{
+                fontSize: fontSize,
+                fontWeight: 900,
+                color: color,
+                transform: `rotateX(${rotateX}deg) scale(${scale})`,
+                textTransform: 'uppercase',
+                textAlign: 'center',
+                textShadow: `0 20px 40px ${color}40`,
+                lineHeight: 0.85
+            }}>
+                {scene.title}
+            </h1>
+        </div>
+    );
+};
+
+// --- MAIN SCENE WRAPPER ---
+
+const StompScene: React.FC<{ scene: ScriptScene; index: number; durationInFrames: number; primaryColor: string }> = ({ scene, index, durationInFrames, primaryColor }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+
+    const scale = spring({
+        frame,
+        fps,
+        config: { damping: 12, stiffness: 200, mass: 0.5 },
+        from: 3,
+        to: 1,
+    });
+
+    const opacity = interpolate(frame, [0, 5], [0, 1]);
+
+    const isInverted = index % 2 !== 0;
+    const mainColor = primaryColor || '#FFFFFF';
+
+    const bg = isInverted ? mainColor : '#050505';
+    const textPrimary = isInverted ? '#000000' : mainColor;
+    const textSecondary = isInverted ? '#444' : '#666';
+
+    const layoutSeed = random(index) * 100;
+    let layoutType = 'STANDARD';
+
+    if (layoutSeed < 14) layoutType = 'STANDARD';
+    else if (layoutSeed < 28) layoutType = 'RAPID_FIRE';
+    else if (layoutSeed < 42) layoutType = 'REPEATER';
+    else if (layoutSeed < 56) layoutType = 'TERMINAL';
+    else if (layoutSeed < 70) layoutType = 'ECHO';
+    else if (layoutSeed < 84) layoutType = 'VERTICAL';
+    else layoutType = 'TILT';
+
+    if (scene.title.split(' ').length > 3) layoutType = 'RAPID_FIRE';
+
+    return (
+        <AbsoluteFill style={{ backgroundColor: bg, overflow: 'hidden' }}>
+            <AbsoluteFill style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                {layoutType === 'STANDARD' && <LayoutStandard scene={scene} scale={scale} opacity={opacity} color={textPrimary} />}
+                {layoutType === 'RAPID_FIRE' && <LayoutRapidFire scene={scene} durationInFrames={durationInFrames} color={textPrimary} />}
+                {layoutType === 'REPEATER' && <LayoutRepeater scene={scene} scale={scale} color={textPrimary} bg={bg} />}
+                {layoutType === 'TERMINAL' && <LayoutTerminal scene={scene} color={textPrimary} />}
+                {layoutType === 'ECHO' && <LayoutEcho scene={scene} color={textPrimary} />}
+                {layoutType === 'VERTICAL' && <LayoutVertical scene={scene} color={textPrimary} />}
+                {layoutType === 'TILT' && <LayoutTilt scene={scene} color={textPrimary} />}
+            </AbsoluteFill>
+
+            <div className="absolute bottom-10 left-0 w-full px-12 flex justify-between items-end z-20">
+                <div style={{ color: textSecondary }} className="font-mono text-xl font-bold uppercase tracking-wider max-w-2xl">
+                    {scene.voiceover}
+                </div>
+                <div style={{ color: textSecondary }} className="font-mono text-sm tracking-widest border border-current px-2 py-1 rounded">
+                    SCENE_0{index + 1} // {scene.duration}s
+                </div>
+            </div>
+
+            <Sequence from={0} durationInFrames={4}>
+                <AbsoluteFill style={{ backgroundColor: textPrimary, opacity: interpolate(frame, [0, 4], [1, 0]) }} />
+            </Sequence>
+        </AbsoluteFill>
+    );
+};
+
+export const RemotionComposition: React.FC<{ script: VideoScript }> = ({ script }) => {
+    const { fps, width } = useVideoConfig();
+
+    let currentStartFrame = 0;
+
+    const tracks: Record<string, string> = {
+        '8BIT': "/audio/01.mp3",
+        'STOMP': "/audio/02.mp3",
+        'UPBEAT': "/audio/03.mp3",
+        'ROCK': "/audio/04.mp3"
+    };
+
+    const audioSrc = tracks[script.config?.musicTrack] || tracks['8BIT'];
+
+    return (
+        <AbsoluteFill style={{ backgroundColor: '#000' }}>
+            <Scanlines />
+
+            <OffthreadVideo
+                src={audioSrc}
+                volume={script.config?.bgVolume ?? 0.4}
+                startFrom={0}
+            />
+
+            {script.voiceoverUrl && (
+                <OffthreadVideo
+                    src={script.voiceoverUrl}
+                    volume={script.config?.voiceVolume ?? 1.0}
+                    startFrom={0}
+                />
+            )}
+
+            {script.scenes.map((scene, index) => {
+                const durationInFrames = Math.ceil(scene.duration * fps);
+                const from = currentStartFrame;
+                currentStartFrame += durationInFrames;
+
+                return (
+                    <Sequence key={index} from={from} durationInFrames={durationInFrames}>
+                        <StompScene
+                            scene={scene}
+                            index={index}
+                            durationInFrames={durationInFrames}
+                            primaryColor={script.config?.primaryColor || '#FFFFFF'}
+                        />
+                    </Sequence>
+                );
+            })}
+
+            {/* Outro */}
+            <Sequence from={currentStartFrame} durationInFrames={90}>
+                <AbsoluteFill className="bg-black flex items-center justify-center">
+                    <div className="flex flex-col items-center z-10">
+                        <h1 className="font-[900] text-white tracking-tighter uppercase mb-4 animate-pulse" style={{ fontSize: width * 0.15 }}>
+                            SHIP.
+                        </h1>
+                        <div className="w-full h-1 bg-white mb-8"></div>
+
+                        {script.config?.githubRepo ? (
+                            <div className="flex flex-col items-center gap-4">
+                                <div className="flex items-center gap-3 text-white">
+                                    <svg viewBox="0 0 24 24" width={width * 0.04} height={width * 0.04} stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
+                                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+                                    </svg>
+                                    <span className="font-mono font-bold" style={{ fontSize: width * 0.03 }}>{script.config.githubRepo}</span>
+                                </div>
+                                <div className="font-mono text-gray-500" style={{ fontSize: width * 0.015 }}>
+                                    GENERATED WITH SHIP
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="font-mono text-gray-500" style={{ fontSize: width * 0.015 }}>GENERATED WITH SHIP</div>
+                        )}
+                    </div>
+                    <GridBackground color="#333" />
+                </AbsoluteFill>
+            </Sequence>
+        </AbsoluteFill>
+    );
+};

remotion/src/index.tsx

@@ -0,0 +1,29 @@
+import { Composition } from 'remotion';
+import { RemotionComposition } from './Composition';
+
+export const RemotionRoot: React.FC = () => {
+    return (
+        <>
+            <Composition
+                id="VideoComposition"
+                component={RemotionComposition}
+                durationInFrames={300}
+                fps={30}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    script: {
+                        title: "Sample Video",
+                        scenes: [],
+                        config: {
+                            visualTheme: "STOMP",
+                            primaryColor: "#FFFFFF",
+                            musicTrack: "STOMP",
+                            aspectRatio: "16:9"
+                        }
+                    }
+                }}
+            />
+        </>
+    );
+};

remotion/src/types.ts

@@ -0,0 +1,57 @@
+export enum AppStep {
+    IDLE = 'IDLE',
+    ANALYZING = 'ANALYZING',
+    REVIEW = 'REVIEW',
+    RENDERING = 'RENDERING',
+    COMPLETED = 'COMPLETED',
+    AUTH = 'AUTH',
+    DASHBOARD = 'DASHBOARD',
+    EDITOR = 'EDITOR',
+}
+
+export enum InputType {
+    GITHUB = 'GITHUB',
+    URL = 'URL',
+    TEXT = 'TEXT',
+}
+
+export interface ScriptScene {
+    sceneNumber: number;
+    duration: number;
+    visualDescription: string;
+    voiceover: string;
+    voiceoverUrl?: string;
+    codeSnippet?: string;
+    title: string;
+}
+
+export type VideoAspectRatio = '16:9' | '9:16' | '1:1' | '4:5';
+export type VideoResolution = '720p' | '1080p';
+
+export interface VideoConfig {
+    primaryColor: string;
+    musicTrack: string;
+    visualTheme: 'STOMP' | 'MINIMAL' | 'GLITCH';
+    aspectRatio: VideoAspectRatio;
+    voiceId?: string;
+    bgVolume?: number;
+    voiceVolume?: number;
+    targetDuration?: number;
+    githubRepo?: string;
+}
+
+export interface VideoScript {
+    id?: string;
+    title: string;
+    targetAudience: string;
+    scenes: ScriptScene[];
+    summary: string;
+    config: VideoConfig;
+    voiceoverUrl?: string;
+    lastModified?: Date;
+}
+
+export interface GeneratedVideo {
+    uri: string;
+    expiryTime?: string;
+}