skills.rest
wyrmspire
wyrmspireCOMMUNITY
Explore all skills by this author →
GitHub

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Updated Mar 5, 2026
Search Tags:#video#animation#canvas#website#gsap#scroll-driven
One-click install
npx skills add https://github.com/wyrmspire/work --skill video-to-website
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-to-website
Source: https://github.com/wyrmspire/work/tree/main
Command: npx skills add https://github.com/wyrmspire/work --skill video-to-website

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms a video file into a dynamic, scroll-driven animated website, offering a premium user experience without manual coding of complex animations.

Core Features & Use Cases

  • Video Frame Rendering: Extracts frames from a video and renders them on a canvas, synchronized with user scroll.
  • GSAP Animation Choreography: Integrates multiple animation types (fade, slide, scale, etc.) with staggered reveals and smooth scrolling (Lenis).
  • Use Case: Turn a product demo video into an interactive landing page where each scene transitions smoothly as the user scrolls, highlighting key features with text overlays and animations.

Quick Start

Use the video-to-website skill to convert the video 'intro.mp4' into a scroll-driven website.

Frequently Asked Questions about video-to-website

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a video into a scroll-driven animated website?▼

To convert video into a scroll-driven website, extract video frames using FFmpeg and render them on an HTML canvas. Synchronize frame sequences with user scroll events using GSAP and Lenis for smooth playback and premium interactive transitions.

Do I need FFmpeg to extract video frames for canvas animation?▼

Yes, FFmpeg is required to extract individual video frames. These extracted frames are then rendered sequentially on a canvas element, synchronized with scroll position via GSAP to create a smooth scroll-driven animation effect.

Can I use GSAP and Lenis for scroll-driven video frame rendering?▼

Yes, GSAP and Lenis are used together to choreograph scroll-driven video frame rendering. GSAP handles animation logic like staggered reveals, while Lenis provides the smooth scrolling mechanism necessary for synchronized canvas frame updates.

What is the best way to create premium interactive transitions from a video file?▼

The best way to create premium interactive transitions is rendering extracted video frames on a canvas. Integrate GSAP for choreographing fade, slide, and scale animations with staggered text reveals, synchronized to user scroll.

Does converting video to a website support custom animations and staggered reveals?▼

Yes, converting video to a website supports custom animations and staggered reveals. GSAP choreographs multiple animation types including fades, slides, and scales, allowing text overlays and scene transitions to highlight features as the user scrolls.

Related Skills

Explore More Design & Creative Skills→
iangcastill0iangcastill0

video-to-website

Convert video files into scroll-driven animated websites with GSAP and canvas.

Community
Advanced
ayofemiadeayofemiade

gsap-scrolltrigger

Create scroll-driven web animations with GSAP and ScrollTrigger.

Community
Advanced
BEIRUXBEIRUX

scroll-cinema

Convert a video into a frame-accurate scroll-driven website using FFmpeg, Lenis, and GSAP ScrollTrigger.

Official
Advanced
ramonclaudioramonclaudio
4

frames

Extract frames from video files using ffmpeg and ffprobe.

Community
Advanced