video-to-website

# 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.