{"slug": "show-hn-i-turned-apple-style-scroll-video-websites-into-a-reusable-ai-skill", "title": "Show HN: I turned Apple-style scroll-video websites into a reusable AI skill", "summary": "Musoyangrigor released an open-source AI skill that converts videos into Apple-style scroll-video websites, available via npx. The skill, named scroll-video-website, generates optimized WebP frame sequences and builds responsive, full-viewport canvas pages that scrub smoothly with scrolling. It supports optional visual direction and interactive optimization, and is MIT licensed.", "body_md": "\n\n```\nnpx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website\n```\n\n[Live Demo](#live-demo) · [Install](#install) · [Usage](#usage) · [Features](#features)\n\nThe demo shows a simple product website made from a single video. The video fills the screen, and scrolling forward or backward smoothly moves through its frames.\n\nYou can create the same kind of website with:\n\n```\n$scroll-video-website ./media/product-demo.mp4\n```\n\nThe skill converts the video into optimized frames and builds the responsive scroll-controlled page for you.\n\nGive your agent the skill name followed by a video path:\n\n```\n$scroll-video-website ./media/product-film.mp4\n```\n\nOptionally add visual direction after the path:\n\n```\n$scroll-video-website ./media/product-film.mp4 use a dark editorial style\n```\n\nOptimize an existing generated frame sequence interactively:\n\n```\n$scroll-video-website optimize\n```\n\nThe command takes no arguments. The agent discovers generated sequences in the current project, measures the real assets, trial-encodes representative frames, and shows separate estimates for format, frame count, quality, and other supported settings. It then shows their combined estimated impact and asks for confirmation before rewriting anything.\n\n- Converts video into an optimized WebP frame sequence.\n- Scrubs smoothly in both directions with progressive frame loading.\n- Renders a responsive, full-viewport canvas with adjacent-frame blending.\n- Preserves the existing project stack and supports reduced-motion preferences.\n- Builds a minimal canvas-only experience by default, or follows added design direction.\n- Interactively optimizes existing sequences with file-specific size estimates before processing.\n\nMIT licensed. See [LICENSE](/musoyangrigor/scroll-video-website-skill/blob/main/LICENSE).", "url": "https://wpnews.pro/news/show-hn-i-turned-apple-style-scroll-video-websites-into-a-reusable-ai-skill", "canonical_source": "https://github.com/musoyangrigor/scroll-video-website-skill", "published_at": "2026-08-22 16:47:58+00:00", "updated_at": "2026-08-22 17:14:11.087423+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["Musoyangrigor", "scroll-video-website"], "alternates": {"html": "https://wpnews.pro/news/show-hn-i-turned-apple-style-scroll-video-websites-into-a-reusable-ai-skill", "markdown": "https://wpnews.pro/news/show-hn-i-turned-apple-style-scroll-video-websites-into-a-reusable-ai-skill.md", "text": "https://wpnews.pro/news/show-hn-i-turned-apple-style-scroll-video-websites-into-a-reusable-ai-skill.txt", "jsonld": "https://wpnews.pro/news/show-hn-i-turned-apple-style-scroll-video-websites-into-a-reusable-ai-skill.jsonld"}}