skilld
All skills
hoodini avatar

/video-to-landing-page

@e91a431
by Yuval Avidanihoodini/ai-agents-skills281 stars
66

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/hoodini/ai-agents-skills/video-to-landing-page

This session only. Nothing lands on disk.

referencessetup.md

≈319 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Setup — Prerequisites for video-to-landing-page

Minimal install. The output is a static HTML page — no build step, no node deps required for the page itself.

Required

Tool Version Purpose
FFmpeg any recent Frame extraction from the source video
Python ≥ 3.8 Running the extract-frames.py build helper

Install commands

Windows (PowerShell)

winget install Python.Python.3.12
winget install Gyan.FFmpeg

macOS (with Homebrew)

brew install python@3.12 ffmpeg

Linux

sudo apt update
sudo apt install -y python3 ffmpeg

Verify

ffmpeg -version
python --version

To preview the generated page

A browser is enough. For local testing:

cd landing-<videoname>
python -m http.server 8000     # then open http://localhost:8000

To deploy

Any static host. Drag-and-drop the output folder onto Vercel / Netlify / Cloudflare Pages.

# Vercel CLI example
npx vercel --prod ./landing-<videoname>

Browser support

The scroll-frame mechanic uses:

  • CSS position: sticky
  • requestAnimationFrame
  • <img> swap

All evergreen browsers (Chrome 90+, Safari 14+, Firefox 90+, Edge 90+). Mobile works.

Source: SKILL.md on GitHub

Third-party checks

No alerts3mo3 checks · Risk SAFE
  • Gen Agent Trust Hub3mo

    This skill automates the creation of scroll-driven landing pages by extracting video frames using FFmpeg. It is well-structured, follows security best practices for executing external commands, and references well-known resources for fonts and typography.

  • Socket3mo

    No alerts

  • Snyk3mo

    Risk: LOW · No issues

Provenance

Signed by skilld at e91a431. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Steadyupdated 4 months ago

README badge

README badge for hoodini/ai-agents-skills/video-to-landing-page