Video To Landing Page
Turns a video file into a single-page site with a scroll-driven hero, the kind Apple uses for product launches. You scroll, the video scrubs forward frame by frame instead of playing on a timeline. It extracts 40 to 160 frames via ffmpeg depending on duration, builds a sticky canvas with a JavaScript scroll listener, and drops in headline sections and a CTA below. If you're working on a YUV.AI project it locks to Neon mode with pink and cyan; otherwise it picks a palette from the video itself. Output is one folder with an index.html and a frames directory, ready to drop on any static host. No build step, no dependencies, just scroll physics and a lot of JPEGs.
- GitHub stars
- 225
- last updated
- Jun 10, 2026
Install
$ npx -y skills add hoodini/ai-agents-skills --skill video-to-landing-page --agent claude-codeInstalls into .claude/skills of the current project.
Files
Video → Scroll-Driven Landing Page
Build a cinematic landing page where the hero is a video playing on scroll instead of time — like Apple product pages or the GitHub Copilot landing. Frames are extracted from the source video and swapped as the user scrolls; below the sticky hero, normal-scroll sections carry copy and CTA.
When to invoke
- User drops a video and asks for a landing page, scrolling site, scroll-frame hero, or website from a video
- Mentions of "Apple-style scroll", "GitHub Copilot landing", "scrub-on-scroll", "frame on scroll"
- Hebrew equivalents: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"
Save location
Default: ~/Documents/yuv-projects/landings/<slug>/ — always save landing pages here so you can find them again. Create the parent directory if missing.
mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Build <slug>/ here.
Final path: ~/Documents/yuv-projects/landings/<slug>/. Tell the user where the landing lives at the end of every build.
Workflow (8 steps)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/hoodini/ai-agents-skills
- Categories
- Frontend Development, Git & Pull Requests, Code Review & Quality, AI & Agent Building, Marketing & SEO, Design & UI/UX, Office & Documents, Databases, Generative Media, Video & Audio Editing
- First seen
- Jun 11, 2026
More from hoodini/ai-agents-skills
All 37- X Twitter Scraper
- Yuv Decks
- Yuv Design System
- Yuv Pilot
- Yuv Reel Covers
- Yuv Video Director
- Yuv Viral Video
- Github Trending3.2K
- Owasp Security3.1K
- Mongodb1.7K
- Mobile Responsiveness1.4K
- Web Accessibility459
- Google Workspace Cli455
- Figma450
- Mermaid Diagrams408
- Analytics Metrics381
- Ux Design Systems270
- Aws Strands249
- Bun191
- Honest Agent190
- Nano Banana Pro189
- Fal Ai175
- Vercel173
- Langchain169
Recommended
More Frontend Development
yuv-pilothoodini/ai-agents-skillsTop-of-pyramid orchestrator for Yuval Avidani's YUV.AI brand work. Apply when (a) the user wants YUV.AI output and the medium is ambiguous or multi-medium, (b) 0skills.sh installs
preline-theme-generatorhtmlstreamofficial/prelineGenerate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, ma0skills.sh installs
initial-accesshypnguyen1209/offensive-claudeModern initial access techniques — phishing, payload delivery, HTML smuggling, ISO/IMG bypass, supply chain attacks, credential stuffing, exposed service exploi0skills.sh installs
dspy-fundamentalsintertwine/dspy-agent-skillsWrite idiomatic DSPy 3.2.x programs — typed Signatures, dspy.Module subclasses, Predict/ChainOfThought/ReAct/ProgramOfThought, and save/load. Use this when star0skills.sh installs
metabase_ingestkaelio/ktxConvert Metabase questions, models, and metrics into ktx Semantic Layer source definitions. Covers result-metadata to KSL column type mapping, FK/PK detection, 0skills.sh installs
privacy-krkimlawtech/korean-privacy-terms한국 서비스용 처리방침·이용약관·회원가입 동의 모달·쿠키 배너 자동 생성. 개인정보보호법 §30, 2025.4.21 작성지침, 2026.3 개정법, 공정위 전자상거래 표준약관 10023호 반영. Next.js 13~16 프로젝트 대상.0skills.sh installs