← Back to the library
Coding

Cinematic video landing pages

Cinematic video landing pages. 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,.

Works with the context you provideVersion 1.0.0

Cinematic video landing pages

Use this skill for the outcome in its description. Start with the supplied request and evidence, identify the specific task, and distinguish planning from execution. Do not trigger solely because the subject happens to be fashion, retail, or a technology named in an example. Read `references/execution-contract.md` before applying a retained source method.

Select the narrowest matching method below, then read its full entrypoint and the resources it requires. If multiple methods cover the same outcome, choose the one matching the user's environment and inputs; do not run them all. Retain each method's input requirements, decision steps, validation, output structure, and failure handling. If prerequisites are absent, use its honest proposal-only fallback or state that its documented path is blocked.

  • **hoodini/cinematic-scrub-landing**: 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 t Read `references/hoodini/skills/cinematic-scrub-landing/SKILL.md`.
  • **hoodini/parallax-landing-page**: Build a scroll-driven cinematic landing page from a short video. The user provides a 5–15 second video (often AI-generated); this skill extracts every frame at HD JPEG quality, then produces a single-hero HTML page where the user's scroll gesture scrubs the frames in place (the page itself never scrolls) and 5 dramatic text overlays crossfade in/out — Google Anton headlines, Caveat handwritten accents, locked body, virtual scroll. Use this skill whenever the user wants to "turn this video into a landing page", "make a scroll-scrub landing page", "build a parallax hero from this clip", "add a new landing page to the parasites showcase", "do the same as github/lion/hope for this new video", or Read `references/hoodini/skills/parallax-landing-page/SKILL.md`.
  • **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) Read `references/hoodini/skills/video-to-landing-page/SKILL.md`.

Return the requested deliverable with evidence, assumptions, validation performed, unresolved dependencies, and actual execution status. Source-specific results must be verified independently; importing these methods does not establish a working service connection.