원클릭으로 Manus에서 모든 스킬 실행

video-to-landing-page

스타244

포크58

업데이트2026년 5월 26일 18:17

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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

hoodini

hoodini/ai-agents-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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)

Probe the source — ffprobe for duration, fps, dimensions, audio.
Pick frame count — default 80. Floor 40 (choppy if lower), ceiling 160 (heavy page). Choose by duration: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
Decide output directory — default ~/Documents/yuv-projects/landings/<slug>/. The <slug> is short, derived from the video name or the topic. Override only on explicit request.
Extract frames — run 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).
Copy and customise references/landing-template.html into output-dir/index.html:
- Replace the __FRAMES__ placeholder with <img> tags for each frame (the build script does this for you when you pass --build-html).
- Fill in __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, sections.
- For Hebrew content: set <html lang="he" dir="rtl"> and swap fonts to Rubik/Assistant (see references/design-notes.md).
Optimise frames — the build script already scales to 1920px max-width. If the page total weight is > 12 MB, drop quality to 75 or reduce frame count.
Preview — python -m http.server inside the output directory and open http://localhost:8000. Scroll feels buttery on a decent machine.
Deploy — drop the folder on Vercel/Netlify/Cloudflare Pages. No build step needed.

The scroll mechanic

Outer scroller .scroll-stage height set in viewport units (default 600vh = scroll 5 screens to traverse all frames).
Sticky hero position: sticky; top: 0; height: 100vh containing all frames absolutely positioned and hidden except the active one.
Scroll listener computes progress = scrolledIntoStage / scrollableHeight clamped 0–1.
idx = floor(progress * (N - 1)) — swap the .active class to that frame.
Wrap the listener in requestAnimationFrame to keep 60fps.

Design rules

If the project is YUV.AI-branded (Yuval personally, his portfolio, his brand): call yuv-design-system and lock it to a mode by medium —
- Neon mode (DEFAULT for YUV.AI web): hot pink (#FF1464) + neon cyan (#00E5FF) + white or rich black canvas. Anton + Inter (English) / Rubik + Assistant (Hebrew). 0px or 999px radii.
- Warm Editorial mode: only for Hope, Marcus, bigcats.ai, practical.yuv.ai — pink + yellow + bone, off-white never pure #fff.
- Never use Decks mode (Fly High purple/yellow) for a landing page — that palette is reserved for slide decks only.
If the project is not YUV.AI-branded: do not apply yuv-design-system. Pick a palette that fits the source video's mood. Anton + Inter remain reasonable defaults but aren't mandatory.
Hero overlays should be subtle — a vignette and a single big headline; don't drown the frame.
Below-hero sections: light canvas (white in Neon mode, off-white in Warm Editorial, bone if going generic-warm), large Anton heading, body copy in Inter at 18–22px, CTA as a sharp pill (border-radius: 999px) — pink fill in Neon mode, brand-appropriate color otherwise.
For Hebrew: respect RTL, use Rubik 900 for headlines, Assistant 400/500 for body.

File references

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

이 저장소의 다른 Skills

같은 저장소

image-master

hoodini/ai-agents-skills

Master prompt-engineer for photoreal, artifact-free AI still images on ANY tool (Reve, Midjourney, Flux, GPT-image, Imagen, Nano Banana, Stable Diffusion). Builds prompts that hit National-Geographic-grade realism — true skin/fur texture (no plastic), correct anatomy/hands/faces, physically coherent light/shadows/reflections, clean legible text — while engineering deliberate visual IMPACT (color contrast, composition, awe/adrenaline, a striking point of view). Runs a gated process: lock the point-of-view and build the 8-block Capture Stack BEFORE generating, then run a forensic pre-submit inspection against the known artifact list. Use whenever the goal is a single still image that must look REAL and hold up under close inspection — contest entries, hero shots, product/character/wildlife/architecture/concept art, or any time AI images come out plastic, distorted, or fake. Composes with nano-banana-2 (execution) and director (motion). Hebrew triggers: תמונה, תמונות, פוטוריאליזם, ריאליזם, לייצר תמונה, פרומפט לת

2026-06-18244

director

hoodini/ai-agents-skills

Award-winning director's brain for making films/videos with AI. Runs a gated, interrogation-first process: lock the IDEA and the SCRIPT (the story) in words before generating a single pixel, then plan shots/camera/light/sound, then generate and edit. Use whenever creating a video, film, teaser, trailer, promo, ad, short, reel, documentary, or narrative piece AND the storytelling must actually work — or any time the user says the story/script keeps failing. Hebrew triggers: סרטון, טיזר, פרומו, פרסומת, ריל, סרט, תסריט, סטוריבורד. Handles development, story, and shot-planning; composes with cinematic-ai-video and yuv-fomo-teaser (style/manipulation), hyperframes (render), nano-banana-2/ElevenLabs (assets). Backed by a 28-chapter Director's Bible in references/.

2026-06-17244

yuv-reel-covers

hoodini/ai-agents-skills

Generate unified, on-brand Instagram Reel covers for Yuval (YUV.AI Neon Phoenix system) — the signature look is a giant Hebrew headline BEHIND the subject cutout + a punch line IN FRONT (depth effect), on rich black with a dim neural-net field, series-colored chip + phoenix mark. Use whenever Yuval asks for an Instagram/Reel/TikTok/YouTube cover, thumbnail, עטיפה, קאבר, תמבנייל, cover image for a video, or wants his Instagram grid to look consistent. One command per cover; background removal included in the pipeline.

2026-06-10244

yuv-video-director

hoodini/ai-agents-skills

Yuval's all-in-one AI video pipeline. Turns an idea/script into a finished, on-brand MP4 by orchestrating HyperFrames (HTML→deterministic video render), Lottie (branded motion graphics), ManimCE (math / neural-network / concept animations), and a transcribe→approve caption flow — all wrapped in the YUV.AI Neon Phoenix brand via a frame.md. Use whenever Yuval wants to make, edit, or explain something as a video: promo, explainer, launch, social reel, "make a video about X", "explain X as a video", "neural network animation", "turn this into a video", captioned tutorial, 16:9 or 9:16. Triggers: video, explainer, promo, reel, manim, lottie, hyperframes, animation, "make a video", "explain ... as a video", מצגת וידאו, סרטון, הסבר וידאו. Routes each beat to the right engine, wraps in brand, self-verifies, and renders.

2026-06-10244

cinematic-scrub-landing

hoodini/ai-agents-skills

Build a premium cinematic landing page with mouse-scrub video hero and brand-driven narrative-arc sections. Use whenever the user provides a hero video plus a product / subject / brand and wants a landing page, promo site, product showcase, marketing page, or storytelling site. Works for any language (RTL or LTR — Hebrew, English, Arabic, Spanish, French, Japanese, etc.) and any subject (food, tech, animals, fashion, services, SaaS, wildlife campaigns, music releases, books, real estate). The signature effect is mouse-driven video scrubbing — the hero video lives across the entire page as a fixed backdrop, and moving the mouse left-right scrubs the video timeline so the subject responds to the cursor. Below the hero, 4-5 fully-opaque sections each carry their own brand identity (color, typography emphasis, layout pattern) and walk the viewer through a narrative arc (e.g. longing → joy → nostalgia → contemplation → action). Triggers on phrases like "build a landing page from this video", "cinematic landing pag

2026-05-27244

video-edit

hoodini/ai-agents-skills

Edit any video into a captioned showcase — transcribe (any language, defaults to large-v3), present a transcript_review.txt for the user to fix mishears BEFORE rendering, then build a HyperFrames composition with liquid-glass caption pills, liquid blob background, liquid morph wipes, optional behind-subject text via background removal, and render the final video. Use whenever the user provides a video file and asks to edit it, caption it, add subtitles, fix existing captions, make a reel/promo/captioned tutorial, or "do the same" pattern as a prior captioned video. Supports English, Hebrew, and any Whisper-supported language. **Renders both 16:9 (YouTube / horizontal) and 9:16 (TikTok / Instagram Reels / YouTube Shorts) from the SAME 16:9 source** — vertical mode uses a centered footage strip with a blurred backdrop + liquid blobs and a vertical-tuned caption pill, no need to re-shoot. THE PIPELINE PAUSES FOR USER APPROVAL on the transcript before final render — this is the support mechanism for getting capti

2026-05-26244

name

video-to-landing-page

description

Video → Scroll-Driven Landing Page

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)

Probe the source — ffprobe for duration, fps, dimensions, audio.
Pick frame count — default 80. Floor 40 (choppy if lower), ceiling 160 (heavy page). Choose by duration: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
Decide output directory — default ~/Documents/yuv-projects/landings/<slug>/. The <slug> is short, derived from the video name or the topic. Override only on explicit request.
Extract frames — run 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).
Copy and customise references/landing-template.html into output-dir/index.html:
- Replace the __FRAMES__ placeholder with <img> tags for each frame (the build script does this for you when you pass --build-html).
- Fill in __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, sections.
- For Hebrew content: set <html lang="he" dir="rtl"> and swap fonts to Rubik/Assistant (see references/design-notes.md).
Optimise frames — the build script already scales to 1920px max-width. If the page total weight is > 12 MB, drop quality to 75 or reduce frame count.
Preview — python -m http.server inside the output directory and open http://localhost:8000. Scroll feels buttery on a decent machine.
Deploy — drop the folder on Vercel/Netlify/Cloudflare Pages. No build step needed.

The scroll mechanic

Outer scroller .scroll-stage height set in viewport units (default 600vh = scroll 5 screens to traverse all frames).
Sticky hero position: sticky; top: 0; height: 100vh containing all frames absolutely positioned and hidden except the active one.
Scroll listener computes progress = scrolledIntoStage / scrollableHeight clamped 0–1.
idx = floor(progress * (N - 1)) — swap the .active class to that frame.
Wrap the listener in requestAnimationFrame to keep 60fps.

Design rules

If the project is YUV.AI-branded (Yuval personally, his portfolio, his brand): call yuv-design-system and lock it to a mode by medium —
- Neon mode (DEFAULT for YUV.AI web): hot pink (#FF1464) + neon cyan (#00E5FF) + white or rich black canvas. Anton + Inter (English) / Rubik + Assistant (Hebrew). 0px or 999px radii.
- Warm Editorial mode: only for Hope, Marcus, bigcats.ai, practical.yuv.ai — pink + yellow + bone, off-white never pure #fff.
- Never use Decks mode (Fly High purple/yellow) for a landing page — that palette is reserved for slide decks only.
If the project is not YUV.AI-branded: do not apply yuv-design-system. Pick a palette that fits the source video's mood. Anton + Inter remain reasonable defaults but aren't mandatory.
Hero overlays should be subtle — a vignette and a single big headline; don't drown the frame.
Below-hero sections: light canvas (white in Neon mode, off-white in Warm Editorial, bone if going generic-warm), large Anton heading, body copy in Inter at 18–22px, CTA as a sharp pill (border-radius: 999px) — pink fill in Neon mode, brand-appropriate color otherwise.
For Hebrew: respect RTL, use Rubik 900 for headlines, Assistant 400/500 for body.

File references

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