github-repo-promo

Generate 1080x1920 Instagram Reels video promos for GitHub repositories using HyperFrames. 7-beat structure with fullscreen scrolling phone mockup, GSAP animations, dark GitHub theme, repo stats, ElevenLabs AI voiceover synced to scroll duration, and follow CTA. Depends on the website-to-hyperframes skill for HyperFrames composition patterns.

Ir para a instalação

Repositório: cosmicstack-labs/mercury-agent-skills
Última atividade na origem: 7 de junho de 2026 às 04:38
Idioma detectado do SKILL.md: inglês
Estrelas: 368
Forks: 53

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Voltar à pesquisa Voltar à instalação

name	github-repo-promo
description	Generate 1080x1920 Instagram Reels video promos for GitHub repositories using HyperFrames. 7-beat structure with fullscreen scrolling phone mockup, GSAP animations, dark GitHub theme, repo stats, ElevenLabs AI voiceover synced to scroll duration, and follow CTA. Depends on the website-to-hyperframes skill for HyperFrames composition patterns.
metadata	{"author":"hotheadhacker","version":"1.0.0","category":"media-download","tags":["hyperframes","video-generation","github","promo","instagram-reels","gsap","elevenlabs","voiceover","social-media"]}

GitHub Repo Promo Video

Depends on: website-to-hyperframes — load it before starting. Its 6-step workflow (capture → brand → brief → storyboard → build → validate) and all reference files apply here. This skill specializes that workflow for GitHub repository promos.

Core Decisions

Decision	Value	Why
Dimensions	1080x1920 (Instagram Reels)	Instagram Reels is the primary distribution format. Landscape is secondary.
Phone mockup viewport	Full-screen of available viewport	The phone mockup fills the entire 1080x1920 canvas — no letterboxing, no sidebars. The scrolling screenshot occupies every pixel.
Narration priority	Narration drives timing	Beat durations are computed FROM the narration audio, not the other way around. The narrator always knows the scroll state.

github-promos/
  <repo-name>/
    index.html              ← main composition (mandatory)
    package.json            ← Node project config (from hyperframes init)
    hyperframes.config.json ← HyperFrames config
    DESIGN.md               ← brand cheat sheet (Step 1 output)
    STORYBOARD.md           ← beat plan (Step 3 output)
    SCRIPT.md               ← narration script (Step 3 output)
    assets/
      repo-page.png         ← Full-page GitHub screenshot (dark mode)
      narration.mp3         ← ElevenLabs voiceover
    renders/                 ← generated videos

github-promos/
  mercury-agent-skills/
  nextjs/
  three.js/
  react/

use_skill("screenshot")
// URL: https://github.com/{owner}/{repo}
// Full page, dark mode, viewport 1080x1920
// Save as: github-promos/{repo}/assets/repo-page.png

sips -g pixelHeight github-promos/{repo}/assets/repo-page.png
sips -g pixelWidth github-promos/{repo}/assets/repo-page.png

Beat	Timing	Visual	Narration focus
1. Hero	0–~4s	Repo name, tagline, badges (stars/forks/lang)	"This is {repo}. {one-liner}."
2. Scroll	~4–~15s	Fullscreen phone mockup scrolls through the repo page	Narration describes what's scrolling into view, synced to scroll position
3. Stats	~15–~19s	2x2 stat cards (stars, forks, issues, language)	"The numbers. {X} stars. {Y} forks."
4. What You Build	~19–~23s	8–10 feature/use-case chips	"What can you build? {feature list}."
5. Stars	~23–~27s	Large star icon, big star count, label	"And {X} developers agree."
6. CTA	~27–~31s	"Star on GitHub" button with glow	"Star it today. {repo URL}."
7. Follow	~31–~33s	"Follow @{handle} for more trending repos" pill	"Follow @{handle} for more."

Provider	When	API
ElevenLabs (default)	Best quality, most voices	`POST https://api.elevenlabs.io/v1/text-to-speech/{voice_id}`
HeyGen TTS	If already in HeyGen ecosystem	Built-in to HyperFrames Studio
Kokoro	Free, good quality	Local inference

curl -s -X POST "https://api.elevenlabs.io/v1/text-to-speech/AZnzlk1XvdvUeBnXmlld" \
  -H "xi-api-key: $ELEVENLABS_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "SCRIPT_HERE",
    "model_id": "eleven_multilingual_v2",
    "voice_settings": {
      "stability": 0.35,
      "similarity_boost": 0.8,
      "style": 0.25,
      "use_speaker_boost": true
    }
  }' \
  --output github-promos/{repo}/assets/narration.mp3

<div id="root"
  data-composition-id="{repo}-promo"
  data-width="1080"
  data-height="1920"
  data-start="0"
  data-duration="{total_seconds}">

  <audio id="narration-audio"
    src="assets/narration.mp3"
    data-start="0"
    data-duration="{total_seconds}"
    preload="auto"></audio>

  <!-- Background layers -->
  <div id="bg"></div>
  <div id="bg-grid"></div>
  <div class="glow-orb g1"></div>
  <div class="glow-orb g2"></div>
  <div id="scanlines"></div>

  <!-- 7 beats, each .beat.clip with data-start/data-duration -->
  ...
</div>

.phone-frame {
  position: absolute;
  inset: 0;                       /* fills entire canvas */
  width: 1080px;
  height: 1920px;
  border-radius: 0px;             /* no rounded corners on fullscreen */
  overflow: hidden;
  background: #0d1117;
}

.phone-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.phone-scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: {IMG_H}px;             /* actual screenshot height */
}

.phone-scroll-thumb {
  position: absolute;
  right: 8px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #58a6ff, #3fb950);
  height: {THUMB_H}px;           /* computed: TRACK_H * (1920 / IMG_H) */
  top: 0;
}

var IMG_H = /* actual screenshot pixel height */;
var PHONE_H = 1920;
var MAX_SCROLL = IMG_H - PHONE_H;

// Three scroll stops at ~30%, ~60%, ~88%
var SCROLL_1 = -Math.round(MAX_SCROLL * 0.3);
var SCROLL_2 = -Math.round(MAX_SCROLL * 0.6);
var SCROLL_3 = -Math.round(MAX_SCROLL * 0.88);

// Scroll thumb
var TRACK_H = 1920;
var THUMB_H = Math.round(TRACK_H * (PHONE_H / IMG_H));
var THUMB_TRAVEL = TRACK_H - THUMB_H;

function thumbY(scrollPx) {
  return (Math.abs(scrollPx) / MAX_SCROLL) * THUMB_TRAVEL;
}

window.__timelines = window.__timelines || {};
var tl = gsap.timeline({paused: true});

// Beat 1: Hero — fade in elements, stagger badges
// Beat 2: Phone scroll — three scroll segments with different easing
//         gsap.to('.phone-scroll-content', { y: SCROLL_1, duration: beat2Duration * 0.33, ease: 'power3.out' })
//         gsap.to('.phone-scroll-content', { y: SCROLL_2, duration: beat2Duration * 0.33, ease: 'power2.out' })
//         gsap.to('.phone-scroll-content', { y: SCROLL_3, duration: beat2Duration * 0.34, ease: 'power1.out' })
//         gsap.to('.phone-scroll-thumb', { top: thumbY(SCROLL_1), ... })
//         ... repeat for SCROLL_2, SCROLL_3
// Beat 3: Stats — stagger-in cards
// Beat 4: Chips — stagger-in feature tags
// Beat 5: Stars — scale-in with elastic rotation
// Beat 6: CTA — fade-in button with glow pulse
// Beat 7: Follow — quick fade-in pill

window.__timelines["{repo}-promo"] = tl;

cd github-promos/{repo}
npx hyperframes lint
npx hyperframes validate
npx hyperframes snapshot

npx hyperframes render --quality draft

npx hyperframes render --quality standard

[Beat 1 — 4s] "Mercury Skills — 130 curated agent capabilities, one command away."

[Beat 2 — 11s, scroll across full page]
  0s–3.7s  "Let's walk through it. Here's the full registry on GitHub —"
  3.7s–7.3s "scrolling into the installation section — one CLI command and you're in."
  7.3s–11s  "Here's the feature grid — AI, DevOps, mobile, finance, 23 categories deep."

[Beat 3 — 4s] "The numbers: 20 thousand stars, 3 thousand forks, and zero friction to start."

[Beat 4 — 4s] "What can you build? PDF generation, Amazon shopping, screenshots, Twitter automation, and counting."

[Beat 5 — 4s] "And 20,000 developers agree — this is the agent skills library that ships."

[Beat 6 — 4s] "Star it today. github.com/cosmicstack-labs/mercury-agent-skills."

[Beat 7 — 2s] "Follow @githubprojects for more trending repos."

Issue	Fix
Screenshot too tall	Use actual pixel height for `IMG_H`; `MAX_SCROLL = IMG_H - 1920`
Audio not playing	Verify `assets/narration.mp3` exists and `src` path is relative to project root
ElevenLabs API error	Check `ELEVENLABS_API_KEY` env var, verify credits
HyperFrames not found	`npm install -g hyperframes` then `npx hyperframes init`
Render fails	Run `npx hyperframes init --example blank` in the project dir first
Scroll speed too fast	Increase `data-duration` on Beat 2, or add more scroll words to narration
Phone not fullscreen	Set `.phone-frame { inset: 0; border-radius: 0; }` — no bezels
Narration desync	Re-transcribe audio, map timestamps to beats, update `data-start`/`data-duration`
Beat overlap	Ensure each beat's `data-start` + `data-duration` doesn't exceed the next beat's `data-start`