github-repo-tour
Generate a 15-30 second scrolling video tour of any GitHub repository page with ElevenLabs AI narration and word-by-word subtitle sync. Captures a full-page mobile-viewport screenshot, scrolls top-to-bottom with GSAP, and burns synced subtitles onto the final MP4 using HyperFrames CLI.
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill github-repo-tour --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Generates a 1080x1920 portrait video that shows a GitHub repository page as a full-page mobile screenshot, scrolling from top to bottom over 15–30 seconds. It includes ElevenLabs AI narration synchronized to the scroll position and a word-by-word subtitle overlay that highlights each word as spoken. The produced video ends with a CTA such as a Star on GitHub or Follow for more.
How it works
The skill follows a multi-step workflow derived from a shared website-to-hyperframes process, customized for a single-page scrolling tour:
- Capture repo info and a full-page mobile screenshot of the GitHub page, saving the image to assets/repo-page.png and noting the screenshot height for scroll calculations.
- Write a 15–30 second narration script describing on-screen content across scroll positions.
- Generate narration audio via ElevenLabs and ensure it is saved to assets/narration.mp3.
- Transcribe the narration to obtain word-level timestamps (start and end times) using ElevenLabs or Whisper, producing a WORDS array of [word, start, end].
- Build a HyperFrames composition (index.html) that:
- Scrolls the 1080x1920 canvas by translating the repo-page.png image over the calculated MAX_SCROLL, syncing to TOTAL_DURATION (15–30s).
- Renders a word-by-word subtitle highlight by creating spans for each word and activating them in sync with WORDS.
- Renders a CTA overlay in the final portion of the video and dims the subtitle bar.
- Includes a scroll progress bar that tracks scroll position and animates with GSAP.
- Use HyperFrames commands to render a final MP4 and provide the output under renders/.
When to use it
Use when the goal is a vertically oriented, short-form promotional video that narrates a GitHub repo page while scrolling through its content, suitable for Instagram Reels or similar short-form formats.
What it can touch
- Uses the file assets/repo-page.png as the scrolling background.
- Uses assets/narration.mp3 for audio narration.
- index.html defines the HyperFrames composition and references GSAP, a font, and the HTML structure for the scroll and subtitles.
- The workflow assumes HyperFrames tooling (npx hyperframes) is available for rendering.
Caveats
- The duration is set to 15–30 seconds and depends on the authored script and timing; the exact timing and interaction depend on the WORDS timestamps and TOTAL_DURATION.
- Requires the ElevenLabs API or Whisper for word-level timestamps and may depend on external services for transcription.
- Output path for the final media is under renders/ in the project folder.
# GitHub Repo Tour — Scrolling Video with Synced Narration & Subtitles > **Depends on:** [website-to-hyperframes](https://github.com/heygen-com/hyperframes/blob/main/skills/website-to-hyperframes/SKILL.md) — load it before starting. Its 6-step workflow and reference files apply here. This skill specializes that workflow for single-page scrolling tours with narration and visible subtitles. --- ## What This Skill Produces A **1080x1920 portrait video** (Instagram Reels format) that: 1. **Shows a GitHub repository page** — full-page mobile screenshot, scrolling smoothly from top to bottom over 15–30 seconds. 2. **Narrates the tour** — ElevenLabs AI voice describing what's on screen, synced to the scroll position. 3. **Burns subtitles on screen** — word-by-word caption overlay that highlights each word as the narrator speaks it. The viewer reads along while listening. 4. **Ends with a CTA** — "Star on GitHub" or "Follow for more" call to action. ## Core Decisions | Decision | Value | Why | |----------|-------|-----| | **Dimensions** | **1080x1920** | Instagram Reels primary format | | **Duration** | **15–30 seconds** | Sweet spot for Shorts/Reels engagement | | **Narration** | **Drives
- What This Skill Produces
- Core Decisions
- Directory Structure
- Workflow
- Step 0: Capture Repo Info & Screenshot
- Step 1: Write the Narration Script
- Step 2: Generate Voiceover via ElevenLabs
- Step 3: Transcribe & Time-Map
- Step 4: Build the HyperFrames Composition
- Step 5: Render
- Step 6: Deliver
- Subtitle System — How It Works
- Word-Level Timestamps
- Three Visual States
sips -g pixelHeight github-promos/<repo>-tour/assets/repo-page.png sips -g pixelWidth github-promos/<repo>-tour/assets/repo-page.png curl -s -X POST "https://api.elevenlabs.io/v1/text-to-speech/AZnzlk1XvdvUeBnXmlld" \ Install whisper if needed pip install openai-whisper Transcribe with word timestamps whisper github-promos/<repo>-tour/assets/narration.mp3 \ cd github-promos/<repo>-tour If no HyperFrames project config exists: npx hyperframes init --example blank --non-interactive
What does the github-repo-tour skill do?
Generate a 15-30 second scrolling video tour of any GitHub repository page with ElevenLabs AI narration and word-by-word subtitle sync. Captures a full-page mobile-viewport screenshot, scrolls top-to-bottom with GSAP, and burns synced subtitles onto the final MP4 using HyperFrames CLI.
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill github-repo-tour --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.