| 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
- Verify Asset: Ensure the
.mp4 video exists in the local project directory.
- 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
- 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.
- 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.
