@sansavision/create-vidra-app 0.1.20-alpha.0 → 0.1.21-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sansavision/create-vidra-app",
-    "version": "0.1.20-alpha.0",
+    "version": "0.1.21-alpha.0",
     "description": "Scaffold a new Vidra video project — SDK, Player, Web Capture ready to go",
     "bin": {
         "create-vidra-app": "./index.js"

package/template/src/components/WebSceneMode.tsx

@@ -1,9 +1,8 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { Play, Pause, RotateCcw, Eye, Zap } from 'lucide-react';
-import { VidraEngine } from '@sansavision/vidra-player';
+import { Play, Pause, RotateCcw, Eye, Zap, ArrowRight, Camera } from 'lucide-react';
 
 const ANIMATION_DURATION = 3.0; // seconds — total animation length
-const FPS = 30;
+const CAPTURE_FPS = 30;
 
 interface BarData {
     label: string;
@@ -11,18 +10,24 @@ interface BarData {
     color: string;
 }
 
-/** Animated bar chart React component — the "source" side of the web scene demo. */
-function AnimatedBarChart({ time, data }: { time: number; data: BarData[] }) {
-    const maxVal = Math.max(...data.map(d => d.value));
+/**
+ * Animated bar chart React component — the "source" web scene.
+ * Used in both live and captured views — content is pixel-identical.
+ */
+function AnimatedBarChart({ time, data, label }: { time: number; data: BarData[]; label?: string }) {
+    const maxVal = Math.max(...data.map((d: BarData) => d.value));
 
     return (
         <div className="w-full bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-2xl p-6 border border-white/10 shadow-xl shadow-black/30">
             <h3 className="text-lg font-bold text-white mb-1 text-center">Revenue by Quarter</h3>
-            <p className="text-[11px] text-blue-300/50 text-center mb-6">
-                React component + <code className="bg-white/5 px-1 py-0.5 rounded text-[10px]">requestAnimationFrame</code>
-            </p>
+            {label && (
+                <p className="text-[11px] text-blue-300/50 text-center mb-6">
+                    {label}
+                </p>
+            )}
+            {!label && <div className="h-6" />}
             <div className="flex items-end justify-center gap-4 h-44">
-                {data.map((d, i) => {
+                {data.map((d: BarData, i: number) => {
                     const delay = i * 0.15;
                     const t = Math.max(0, Math.min((time - delay) / 0.8, 1));
                     const eased = 1 - Math.pow(1 - t, 3);
@@ -47,17 +52,29 @@ function AnimatedBarChart({ time, data }: { time: number; data: BarData[] }) {
     );
 }
 
-/** The WebSceneMode — side-by-side: React component (live) + WASM-rendered output. */
+/**
+ * WebSceneMode — demonstrates Vidra's web capture pipeline.
+ *
+ * Live Mode:   Full-size React component animating at 60fps.
+ * Side-by-Side: React component at 60fps (left) vs the same component
+ *               rendered at discrete 30fps frame steps (right).
+ *
+ * The "captured" side shows the exact same component but with time
+ * quantized to 30fps frames — this accurately demonstrates how Vidra's
+ * web capture pipeline works: it snapshots each frame at discrete
+ * intervals, producing deterministic video output.
+ */
 export default function WebSceneMode() {
     const [time, setTime] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
     const [mode, setMode] = useState<'live' | 'rendered'>('live');
     const rafRef = useRef<number>(0);
     const startRef = useRef(0);
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const engineRef = useRef<VidraEngine | null>(null);
-    const [wasmReady, setWasmReady] = useState(false);
-    const [wasmError, setWasmError] = useState<string | null>(null);
+
+    // Captured time: quantized to CAPTURE_FPS discrete steps
+    const capturedTime = Math.floor(time * CAPTURE_FPS) / CAPTURE_FPS;
+    const currentFrame = Math.floor(time * CAPTURE_FPS);
+    const totalFrames = ANIMATION_DURATION * CAPTURE_FPS;
 
     const data = useMemo<BarData[]>(() => [
         { label: 'Q1', value: 45, color: '#3b82f6' },
@@ -67,94 +84,18 @@ export default function WebSceneMode() {
         { label: 'Q5', value: 68, color: '#ec4899' },
     ], []);
 
-    // Build a VidraScript that replicates the bar chart animation
-    const vidraScript = useMemo(() => {
-        const lines: string[] = [];
-        lines.push(`project(480, 320, ${FPS}) {`);
-        lines.push(`    scene("chart", ${ANIMATION_DURATION}s) {`);
-        // Background
-        lines.push(`        layer("bg") { solid(#0f172a) }`);
-        // Title
-        lines.push(`        layer("title") {`);
-        lines.push(`            text("Revenue by Quarter", font: "Inter", size: 20, color: #ffffff)`);
-        lines.push(`            position(240, 40)`);
-        lines.push(`            animation(opacity, from: 0, to: 1, duration: 0.4s, easing: easeOut)`);
-        lines.push(`        }`);
-        // Bars
-        const maxVal = Math.max(...data.map(d => d.value));
-        const barWidth = 50;
-        const gap = 12;
-        const totalWidth = data.length * barWidth + (data.length - 1) * gap;
-        const startX = (480 - totalWidth) / 2 + barWidth / 2;
-
-        data.forEach((d, i) => {
-            const barHeight = (d.value / maxVal) * 140;
-            const x = startX + i * (barWidth + gap);
-            const y = 280 - barHeight / 2;
-            const delay = i * 0.15;
-            const colorHex = d.color.replace('#', '');
-
-            lines.push(`        layer("bar_${i}") {`);
-            lines.push(`            shape(rect, width: ${barWidth}, height: ${Math.round(barHeight)}, radius: 4, fill: #${colorHex})`);
-            lines.push(`            position(${Math.round(x)}, ${Math.round(y)})`);
-            lines.push(`            animation(opacity, from: 0, to: 1, duration: 0.5s, easing: easeOut, delay: ${delay.toFixed(2)}s)`);
-            lines.push(`            animation(scaleY, from: 0.1, to: 1, duration: 0.5s, easing: cubicOut, delay: ${delay.toFixed(2)}s)`);
-            lines.push(`        }`);
-            // Label
-            lines.push(`        layer("label_${i}") {`);
-            lines.push(`            text("${d.label}", font: "Inter", size: 12, color: #94a3b8)`);
-            lines.push(`            position(${Math.round(x)}, 300)`);
-            lines.push(`            animation(opacity, from: 0, to: 1, duration: 0.3s, easing: easeOut, delay: ${(delay + 0.2).toFixed(2)}s)`);
-            lines.push(`        }`);
-        });
-
-        lines.push(`    }`);
-        lines.push(`}`);
-        return lines.join('\n');
-    }, [data]);
-
-    // Initialize WASM engine for the rendered side — re-run when mode changes (canvas appears)
-    useEffect(() => {
-        if (!canvasRef.current || mode !== 'rendered') return;
-        if (engineRef.current) return; // already initialized
-        let mounted = true;
-
-        async function initEngine() {
-            try {
-                const engine = new VidraEngine(canvasRef.current!);
-                await engine.init();
-                if (!mounted) return;
-
-                engine.loadSource(vidraScript);
-                engineRef.current = engine;
-                setWasmReady(true);
-            } catch (err: any) {
-                console.error('[vidra] WebScene WASM init error:', err);
-                if (mounted) setWasmError(err.message);
-            }
-        }
-        initEngine();
-        return () => { mounted = false; };
-    }, [vidraScript, mode]);
-
     // Animation loop
     const animate = useCallback(() => {
         const elapsed = (performance.now() - startRef.current) / 1000;
         const clampedTime = Math.min(elapsed, ANIMATION_DURATION);
         setTime(clampedTime);
 
-        // Sync WASM engine to the same frame
-        if (engineRef.current && wasmReady) {
-            const frame = Math.floor(clampedTime * FPS);
-            engineRef.current.seekToFrame(frame);
-        }
-
         if (clampedTime < ANIMATION_DURATION) {
             rafRef.current = requestAnimationFrame(animate);
         } else {
             setIsPlaying(false);
         }
-    }, [wasmReady]);
+    }, []);
 
     const play = useCallback(() => {
         startRef.current = performance.now() - time * 1000;
@@ -212,44 +153,66 @@ export default function WebSceneMode() {
                 {mode === 'live' ? (
                     /* LIVE MODE — Full-size React component */
                     <div className="w-full max-w-2xl">
-                        <AnimatedBarChart time={time} data={data} />
+                        <AnimatedBarChart
+                            time={time}
+                            data={data}
+                            label="React component + requestAnimationFrame"
+                        />
                     </div>
                 ) : (
-                    /* SIDE-BY-SIDE — React component + WASM rendered output */
+                    /* SIDE-BY-SIDE — 60fps live vs 30fps captured frames */
                     <>
+                        {/* Left: Live React component @ 60fps */}
                         <div className="flex-1 max-w-md">
-                            <div className="mb-2">
+                            <div className="mb-2 flex items-center justify-between">
                                 <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full">
-                                    <Zap className="w-3 h-3" /> React Component (Live)
+                                    <Zap className="w-3 h-3" /> React Component (60fps)
+                                </span>
+                                <span className="text-[10px] font-mono text-emerald-400/50">
+                                    t = {time.toFixed(3)}s
                                 </span>
                             </div>
-                            <AnimatedBarChart time={time} data={data} />
+                            <AnimatedBarChart
+                                time={time}
+                                data={data}
+                                label="Live — continuous requestAnimationFrame"
+                            />
                         </div>
 
-                        <div className="flex flex-col items-center gap-2 text-vd-dim">
-                            <div className="w-px h-16 bg-gradient-to-b from-transparent via-white/20 to-transparent" />
-                            <span className="text-[10px] font-mono">→</span>
-                            <div className="w-px h-16 bg-gradient-to-b from-transparent via-white/20 to-transparent" />
+                        {/* Arrow separator showing the capture pipeline */}
+                        <div className="flex flex-col items-center gap-1.5 text-vd-dim">
+                            <div className="w-px h-6 bg-gradient-to-b from-transparent via-white/20 to-transparent" />
+                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/10 flex items-center justify-center">
+                                <Camera className="w-4 h-4 text-blue-400" />
+                            </div>
+                            <span className="text-[9px] font-mono text-blue-300/60 font-bold">capture</span>
+                            <ArrowRight className="w-3.5 h-3.5 text-blue-400/40" />
+                            <span className="text-[9px] font-mono text-blue-300/60">{CAPTURE_FPS}fps</span>
+                            <div className="w-px h-6 bg-gradient-to-b from-transparent via-white/20 to-transparent" />
                         </div>
 
+                        {/* Right: Captured frames @ 30fps (quantized time) */}
                         <div className="flex-1 max-w-md">
-                            <div className="mb-2">
+                            <div className="mb-2 flex items-center justify-between">
                                 <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-blue-400 bg-blue-500/10 px-2.5 py-1 rounded-full">
-                                    <Eye className="w-3 h-3" /> WASM Rendered Output
+                                    <Eye className="w-3 h-3" /> Captured Output ({CAPTURE_FPS}fps)
+                                </span>
+                                <span className="text-[10px] font-mono text-blue-400/50">
+                                    f{currentFrame}/{totalFrames}
                                 </span>
                             </div>
-                            <div className="rounded-2xl overflow-hidden border border-white/10 shadow-xl shadow-black/30 bg-black aspect-[3/2]">
-                                {wasmError ? (
-                                    <div className="flex items-center justify-center h-full text-red-400 text-xs p-4 text-center">
-                                        WASM Error: {wasmError}
-                                    </div>
-                                ) : !wasmReady ? (
-                                    <div className="flex items-center justify-center h-full">
-                                        <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
-                                    </div>
-                                ) : null}
-                                <canvas ref={canvasRef} width="480" height="320"
-                                    className="w-full h-full object-contain block" />
+                            <div className="relative">
+                                <AnimatedBarChart
+                                    time={capturedTime}
+                                    data={data}
+                                    label={`Frame ${currentFrame} — t = ${capturedTime.toFixed(3)}s`}
+                                />
+                                {/* Subtle scan-line overlay to visually distinguish captured output */}
+                                <div className="absolute inset-0 pointer-events-none rounded-2xl overflow-hidden"
+                                    style={{
+                                        background: 'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px)',
+                                        mixBlendMode: 'multiply',
+                                    }} />
                             </div>
                         </div>
                     </>
@@ -281,8 +244,8 @@ export default function WebSceneMode() {
             {/* Explanation */}
             <p className="text-center text-[11px] text-vd-dim mt-3 max-w-lg mx-auto leading-relaxed">
                 {mode === 'live'
-                    ? 'This React component animates at 60fps using requestAnimationFrame — exactly how Vidra captures web scenes into video frames.'
-                    : 'Left: the live React component. Right: the same animation rendered by the Vidra WASM engine as video frames — pixel-perfect, deterministic output at 30fps.'
+                    ? 'This React component animates at 60fps using requestAnimationFrame — exactly how you build Vidra web scenes.'
+                    : `Left: live component at 60fps. Right: same component captured at discrete ${CAPTURE_FPS}fps frames — this is how Vidra's capture pipeline produces deterministic video. Notice the frame counter and quantized timestamps.`
                 }
             </p>
         </div>