video-to-website

name	video-to-website
description	Turn a local .mp4 video into a premium scroll-driven animated 3D website (Apple-style stop-motion animation over a transparent canvas).
type	capability-uplift

Video to Website Animation (Capability Uplift)

This skill provides a Capability Uplift by bridging standard React UI generation with an automated FFmpeg terminal pipeline to achieve premium "Apple-tier" scroll-driven animations.

🎯 The Objective

Convert a standard <video> element request into a high-performance, frame-by-frame <canvas> scroll sequence using physical WebP frames.

🛠️ Execution Protocol

1. Verify Asset: Ensure the .mp4 video exists in the local project directory.
2. Phase 1: Media Processing (The Uplift)
   • Run the FFmpeg command directly via the terminal execution tool to extract frames: ffmpeg -i your_video.mp4 -vf fps=30 -c:v libwebp -lossless 0 -q:v 80 frames/frame_%04d.webp
3. Phase 2: UI Component Rendering (AppleScrollSequence.tsx)
   • Write a React client component that preloads all .webp images on mount.
   • Attach a window.addEventListener('scroll') to calculate scroll percentage.
   • Dynamically paint the correct frame index to the <canvas> context based on scroll height.
4. Phase 3: CSS Lockdown
   • Set the <canvas> to fixed, 100vw, 100vh, and object-fit: cover;.

🚨 Mandatory Evaluations (Evals)

• Token Efficiency: Do NOT print the raw FFmpeg binary log output into the context window. Silence the stdout/stderr unless an error occurs to save tokens.
• Latency: FFmpeg extraction takes time depending on the host machine. Ensure you explicitly notify the user to wait before confirming task completion.
• Pass Rate > 95%: Ensure the sequence logic doesn't crash on mobile bounds or out-of-index frame calculations.

Outgrowth Check

If Next.js/Vite or browsers introduce native <video scroll-timeline> CSS capabilities that perform smoothly without needing physical frame extractions, deprecate this heavy FFmpeg pipeline skill immediately.