Nex Animated Website Skill

What it does

• Extracts evenly spaced WebP frames from an MP4 with the bundled scripts/extract_frames.py (desktop and mobile sets plus a manifest.json)
• Builds a complete single-file index.html from assets/index-template.html: canvas scroll engine, dwell remap, six content overlays, parallax gallery, all CSS and JS inline
• Adds ambient layers: particles, film grain, custom cursor, per-section color tint, letter-split hero type, glass stat cards
• Adapts the palette to the subject (cooler for tech, warmer for hospitality, warm-neutral default for real estate)
• Ships reference docs for the scroll engine, design system, and frame pipeline so you can tune playback speed and dwell strength

Why use this

A video player asks nothing of the visitor; a scroll-driven page makes them lean in. This skill turns one MP4 into an Apple-style showcase with natural almost-stops where the copy lands, without a framework or build step. Built from production patterns at a Belgian AI agency that ships single-file sites for real clients.

See it in action

Prompt:

Turn this drone flythrough of a villa into a scroll site.

Result:

frames/desktop/frame-0001.webp ... frame-0120.webp
frames/mobile/frame-0001.webp ... frame-0120.webp
frames/manifest.json
index.html

<section class=animation style=height:650vh>
  <canvas id=sequence></canvas>
  <div class=overlay data-dwell=0.08>
    <h1 class=letter-split>Villa Meerzicht</h1>
    <div class=glass-stat>4 bed | 320 m2 | EPC A</div>
  </div>
</section>

Serve with python3 -m http.server 8080; scrolling scrubs the flythrough,
six overlays fade in at the dwell points, gallery reveals below.

Use cases

• Real estate flythrough turned into a property showcase page
• Product launch page from a render video, tuned to brand colors
• Architecture or portfolio reels as an interactive scroll experience
• Pitch demos that need to feel premium without a framework
• Tuning an existing scroll site (playback speed, dwell strength) without re-extracting frames

Known limitations

• Needs FFmpeg on the machine for frame extraction (Pillow fallback for the WebP encode)
• Frame payloads have budgets (about 15 MB desktop); long or high-motion videos need lower quality or fewer frames
• Not for embedding a normal video player, GIF export, or sites without a video source

FAQ

What exactly is in the download?

SKILL.md, assets/index-template.html (the working page template), scripts/extract_frames.py (the frame pipeline), and three references: scroll-engine.md, design-system.md, frame-pipeline.md.

Which agents does it work with?

Claude Code, Claude Cowork, Cursor, Codex CLI, and any agent that reads SKILL.md skills.

Do I need anything else?

FFmpeg installed for frame extraction (ffprobe included), Python 3 for the script and a local server. No API keys, no framework, no build step.

Can I use it for frame extraction only?

The extraction script is bundled, but if you only need frames the companion skill nex-video-frame-pipeline is the dedicated tool for that.