hoodini/video-to-landing-page
Turn any video into a cinematic scroll-driven landing page — Apple-style hero where scrolling progresses the visible frame through the video. Use when the user provides a video file and asks for "a landing page from this video", "scroll-frame website", "Apple-style scroll site", "hero that scrubs the video", "like the GitHub Copilot landing", or any equivalent. Extracts N evenly-spaced frames via ffmpeg, builds a self-contained HTML page with a sticky hero + JS scroll listener that swaps the visible frame as you scroll, plus headline, sections and CTA below. For YUV.AI projects, applies the yuv-design-system skill in Neon mode (pink/cyan/white, default for YUV.AI web) — Decks (purple/yellow) is reserved for slides only. For generic / non-YUV.AI projects, picks an appropriate palette per the source video. Output is one folder with `index.html` and a `frames/` directory — drop on any static host.
npx skills add https://github.com/hoodini/ai-agents-skills --skill video-to-landing-pageBuild 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.
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.
ffprobe for duration, fps, dimensions, audio.80. Floor 40 (choppy if lower), ceiling 160 (heavy page). Choose by duration: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.~/Documents/yuv-projects/landings/<slug>/. The <slug> is short, derived from the video name or the topic. Override only on explicit request.references/extract-frames.py <source-video> <output-dir> [count]. Outputs output-dir/frames/f_0001.jpg… with consistent JPG quality 82 and a max-width of 1920 (downscaled if source is larger).references/landing-template.html into output-dir/index.html:__FRAMES__ placeholder with <img> tags for each frame (the build script does this for you when you pass --build-html).__HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, sections.<html lang="he" dir="rtl"> and swap fonts to Rubik/Assistant (see references/design-notes.md).python -m http.server inside the output directory and open http://localhost:8000. Scroll feels buttery on a decent machine..scroll-stage height set in viewport units (default 600vh = scroll 5 screens to traverse all frames).position: sticky; top: 0; height: 100vh containing all frames absolutely positioned and hidden except the active one.progress = scrolledIntoStage / scrollableHeight clamped 0–1.idx = floor(progress * (N - 1)) — swap the .active class to that frame.requestAnimationFrame to keep 60fps.yuv-design-system and lock it to a mode by medium —#FF1464) + neon cyan (#00E5FF) + white or rich black canvas. Anton + Inter (English) / Rubik + Assistant (Hebrew). 0px or 999px radii.#fff.border-radius: 999px) — pink fill in Neon mode, brand-appropriate color otherwise.| File | Purpose |
| --- | --- |
| references/extract-frames.py | ffmpeg-based frame extractor; optionally builds the full HTML in one go |
| references/landing-template.html | Self-contained landing-page skeleton with the scroll mechanic |
| references/design-notes.md | Typography, palette, and motion defaults |
Take hoodini/video-to-landing-page from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.