HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages.
$ npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Varnan-Tech/opendirectory vid-sizzle-reel --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Varnan-Tech/opendirectory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/vid-sizzle-reel .claude/skills/vid-sizzle-reel && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vid-sizzle-reel" agent skill from https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reel into .claude/skills/vid-sizzle-reel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vid-sizzle-reel", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reelType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Varnan-Tech/opendirectory vid-sizzle-reel --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Varnan-Tech/opendirectory.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/vid-sizzle-reel .agents/skills/vid-sizzle-reel && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vid-sizzle-reel" agent skill from https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reel into .agents/skills/vid-sizzle-reel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vid-sizzle-reel", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Varnan-Tech/opendirectory vid-sizzle-reel --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Varnan-Tech/opendirectory.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/vid-sizzle-reel .cursor/skills/vid-sizzle-reel && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vid-sizzle-reel" agent skill from https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reel into .cursor/skills/vid-sizzle-reel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vid-sizzle-reel", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Varnan-Tech/opendirectory.git --path skills/vid-sizzle-reel--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Varnan-Tech/opendirectory vid-sizzle-reel --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Varnan-Tech/opendirectory.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/vid-sizzle-reel .gemini/skills/vid-sizzle-reel && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vid-sizzle-reel" agent skill from https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reel into .gemini/skills/vid-sizzle-reel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vid-sizzle-reel", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Varnan-Tech/opendirectory vid-sizzle-reelInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Varnan-Tech/opendirectory.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/vid-sizzle-reel .github/skills/vid-sizzle-reel && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vid-sizzle-reel" agent skill from https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reel into .github/skills/vid-sizzle-reel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vid-sizzle-reel", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Varnan-Tech/opendirectory vid-sizzle-reel --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Varnan-Tech/opendirectory.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/vid-sizzle-reel .opencode/skills/vid-sizzle-reel && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vid-sizzle-reel" agent skill from https://github.com/Varnan-Tech/opendirectory/tree/main/skills/vid-sizzle-reel into .opencode/skills/vid-sizzle-reel/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vid-sizzle-reel", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
vid-sizzle-reelGenerates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages.
Vid Sizzle Reel is an agent skill from Varnan-Tech/opendirectory. Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages. Fast-paced montage format with dynamic cuts, bold text overlays, and optional music. 4-section structure: Cold Open, Build, Peak, Land. 4 tone presets. Beat-sync cuts when music is provided. Built on HyperFrames (GSAP + headless Chromium + FFmpeg). Trigger when user says "sizzle reel", "hype video", "highlight reel", "launch hype", "conference opener", "event promo video", "investor pitch video", or "brand video montage".
Its SKILL.md is about 3.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `README.md`, `references/cut-patterns.md` and `references/tone-presets.md`). Compatibility notes: ["claude-code","gemini-cli","github-copilot"]
It sits in Media & Creative, covering Video production, Motion graphics and Web animation and motion. It works with HeyGen, GSAP and FFmpeg. The repository describes itself as: AI Agent Skills built for Founders who hate Marketing. The licence is MIT.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 62e437a. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxnodeffmpegFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
cdn.jsdelivr.netFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
["claude-code","gemini-cli","github-copilot"]
From compatibility in the SKILL.md frontmatter.
Vid Sizzle Reel loads about 3.9k tokens when it runs, and up to ~6.8k if it reads all its reference files. Until then it costs about 133 tokens; SKILL.md has 1,197 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from Varnan-Tech/opendirectory at commit 62e437a, republished under its MIT licence (© Varnan-Tech). 1,197 words, ~3,945 tokens.
.claude/skills/vid-sizzle-reel/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.Generates a high-energy sizzle reel or hype video from brand assets and key messages. Pipeline: HyperFrames HTML composition (GSAP timelines) → headless Chromium → FFmpeg H.264 MP4. No Runway. No Pika. No AI video APIs. Zero runtime cost beyond Node.js + FFmpeg.
Differentiation from vid-product-launch:
vid-product-launch tells a narrative story — one earned reveal, five sections, tension arcvid-sizzle-reel creates energy and excitement — fast cuts, music-first, no single story beatWrite the key messages yourself — or ask the user to write them. These are the exact phrases that appear on screen. "AI will figure it out" produces filler. 3-5 sharp lines is the entire content of a sizzle reel.
Brand name appears ONLY in the Land section. Cold Open and Build create tension without naming the brand. The Land section is the payoff.
Declare the rhythm pattern in a comment at the top of the script before writing any HTML. Format: // RHYTHM: flash-sequence | Cold[0-5s]: stat | Build[5-40s]: msg(1.5s)|flash|... | Peak[40-55s]: ... | Land[55-60s]: logo+CTA. Every timing decision checks against this.
Build end-state layout in CSS first — no GSAP yet. Position every element at its most-visible moment in static CSS. Then add GSAP entrances with gsap.from() and exits with gsap.to(). Never position at animated start state.
class="clip" on every timed element. Required by HyperFrames. Without it, the element is invisible to the player.
data-start, data-duration, data-track-index on every clip. No exceptions. Same-track clips cannot overlap — use different track indices.
No Math.random(). HyperFrames requires deterministic compositions. Use seeded PRNG (mulberry32) for any pseudo-random values.
All GSAP timelines start { paused: true } and register to window.__timelines["comp-id"]. The HyperFrames player controls playback — never call tl.play().
Never position: absolute on .scene-content containers. Use width:100%; height:100%; padding:Npx; display:flex. Reserve position:absolute for decorative elements only.
Music: separate <audio> element with data-track-index. Video must be muted playsinline. Never put audio in a <video> element.
Read references/cut-patterns.md AND references/tone-presets.md before generating any HTML.
Never dump HTML in chat. Save to file. Show summary only.
Required:
key_messages — 3-5 punchy lines to flash on screen (user must write these)Optional parameters and defaults:
| Parameter | Default | Description |
|---|---|---|
| brand_assets | none | Logo URL/path, brand colors (hex), key screenshots |
| tone | energetic | energetic / cinematic / emotional / professional |
| music | none | File path, or BPM/genre string (e.g. "128bpm electronic") |
| duration | 60 | 30 / 60 / 90 seconds |
| aspect_ratio | 9:16 | 9:16 (1080x1920) / 16:9 (1920x1080) |
| cut_style | auto | fast (1-2s) / cinematic (3-5s) — auto derives from tone |
| end_card | auto | Logo + tagline + CTA URL for Land section |
cut_style auto-defaults: energetic → fast; professional → fast (2s); cinematic → cinematic; emotional → mixed
If key_messages is missing, ask exactly:
"To generate the sizzle reel, I need your key messages — the exact phrases that will flash on screen. Give me 3-5 punchy lines. These are the most important thing you're writing for this video.
Examples: 'Used by 500+ growth teams' / 'From days to minutes' / 'Works with Claude, Codex, Gemini'
Also useful: tone (energetic/cinematic/emotional/professional), duration (30/60/90s), any brand colors or logo URL."
If key_messages are present → proceed to Step 2 immediately.
Install HyperFrames skills (first time only — skip if already installed):
npx skills add heygen-com/hyperframesVerify environment:
node --version # must be >= 22
ffmpeg -version # must be presentScaffold the project:
npx hyperframes init sizzle-[slug] --example kinetic-type --non-interactive
cd sizzle-[slug]Slug: kebab-case from end_card brand name or first key_message, max 25 chars.
1. Derive cut-point timing from duration + cut_style:
| Section | 30s | 60s | 90s |
|---|---|---|---|
| Cold Open | 0-5s | 0-5s | 0-8s |
| Build | 5-25s | 5-40s | 8-65s |
| Peak | 25-28s | 40-55s | 65-80s |
| Land | 28-30s | 55-60s | 80-90s |
Convert every boundary to milliseconds. Calculate per-scene duration from cut_style:
fast: 1.2s-1.8s per message (use 1.5s default)cinematic: 3.5s-5.0s per message (use 4.0s default)mixed: 2.0s-4.0s varying by section energy2. Map key_messages to scenes:
3. Detect beat sync if music provided:
npx hyperframes tts --analyze-beats [music-file]If unavailable, calculate from BPM: beat_ms = 60000 / BPM. Align cuts to every 2nd beat.
4. Select tone preset — read references/tone-presets.md for CSS tokens.
5. Declare rhythm pattern — write comment at top of script:
// RHYTHM: flash-sequence
// Cold Open [0-5000ms]: stat
// Build [5000-40000ms]: msg-1(1500ms)|flash|msg-2(1500ms)|flash|msg-3(1500ms)|flash|msg-4(1500ms)|flash|build-accum(10000ms)
// Peak [40000-55000ms]: msg-strongest(1200ms)|flash|msg-2nd(1200ms)|flash|HOLD(5600ms)
// Land [55000-60000ms]: logo+tagline+cta6. Determine pixel dimensions:
9:16 → W=1080, H=1920 (default — Instagram Reels, TikTok, YouTube Shorts)16:9 → W=1920, H=1080Read references/cut-patterns.md and the HyperFrames skill (/hyperframes) before writing any code.
Required HTML skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
[font CDN link from tone preset]
<style>
:root {
[all CSS tokens from tone preset]
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
</style>
</head>
<body>
<div
data-composition-id="sizzle-[slug]"
data-width="[W]"
data-height="[H]"
style="position:relative;width:[W]px;height:[H]px;overflow:hidden;background:var(--bg)"
>
[if cut-flash: true]
<div id="cut-flash"
style="position:absolute;inset:0;background:var(--cut-flash-bg);opacity:0;pointer-events:none;z-index:200"></div>
[end if]
[if film-grain: true]
<canvas id="grain-overlay"
width="240" height="135"
style="position:absolute;inset:0;width:[W]px;height:[H]px;pointer-events:none;opacity:0.022;mix-blend-mode:overlay;z-index:50"></canvas>
[end if]
[if vignette: true]
<div id="vignette-overlay"
style="position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,0.65) 100%);pointer-events:none;z-index:51"></div>
[end if]
<!-- Scenes — one div per scene -->
<div id="scene-cold"
class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;inset:0;opacity:0"
>
<div class="scene-content" style="width:100%;height:100%;padding:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box">
[cold open content — one stat or impact phrase, no brand name]
</div>
</div>
[one div per Build scene, data-start increments by cut duration]
[Peak scene(s)]
[Land scene — brand name + tagline + CTA]
[if music provided]
<audio id="music"
class="clip"
data-start="0"
data-duration="[total_duration]"
data-track-index="10"
data-volume="0.85"
src="[music_path]"
></audio>
[end if]
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
// ── RHYTHM DECLARATION ──────────────────────────────────────────────────────
// RHYTHM: [flash-sequence | cinematic-hold | beat-sync | mixed]
// Cold Open [0-Nms]: ...
// Build [N-Nms]: ...
// Peak [N-Nms]: ...
// Land [N-Nms]: ...
// ── SEEDED PRNG (for grain only — no other random values) ───────────────────
function mulberry32(seed) {
return function() {
seed |= 0; seed = seed + 0x6D2B79F5 | 0;
let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
return ((t ^ t >>> 14) >>> 0) / 4294967296;
};
}
[if film-grain: true]
// ── FILM GRAIN (cinematic/emotional only) ───────────────────────────────────
const grainCanvas = document.getElementById('grain-overlay');
const grainCtx = grainCanvas ? grainCanvas.getContext('2d') : null;
// Grain updated by GSAP ticker (not per-frame capture — HyperFrames handles this)
[end if]
// ── GSAP TIMELINE ───────────────────────────────────────────────────────────
const tl = gsap.timeline({ paused: true });
// ── COLD OPEN ───────────────────────────────────────────────────────────────
[cold open entrance and exit tweens — see cut-patterns.md for exact pattern]
// ── BUILD SECTION ───────────────────────────────────────────────────────────
[per-message tweens — flash-sequence or cinematic-hold from cut-patterns.md]
// ── PEAK SECTION ─────────────────────────────────────────────────────────────
[peak tweens — same pattern as build but tighter timing]
// ── LAND SECTION ─────────────────────────────────────────────────────────────
[land entrances — logo, tagline, CTA. No exit — holds to end]
// ── TIMELINE REGISTRATION ────────────────────────────────────────────────────
window.__timelines = window.__timelines || {};
window.__timelines["sizzle-[slug]"] = tl;
</script>
</div>
</body>
</html>Design quality rules:
var(--accent) literal hex inside canvas fillStylescene-content always uses padding + flex — never position:absolute on content containerclass="clip" on every element with data-startContent:
key_messages — each phrase appears exactly once, no duplicatesHyperFrames contract:
class="clip" on every element with data-startdata-start, data-duration, data-track-index on every clipdata-composition-id on the root composition divwindow.__timelines["sizzle-[slug]"] = tl registered{ paused: true }Math.random() — seeded PRNG onlytl.play() or tl.resume() callsGSAP / Layout:
gsap.from() for all entrances (FROM offscreen TO CSS position)gsap.to() for all exits (FROM CSS position TO offscreen)position:absolute on .scene-content containersCut timing:
fast tone: average cut duration ≤ 2.0scinematic tone: average cut duration ≥ 3.0senergetic tone (60ms, opacity 0→1→0)data-track-index groupings)SFX:
window.__sfxTimeline present and placed before timeline registrationword-hit event per key messagewhoosh at Build → Peak transition boundarycta-chime at Land startnpx hyperframes lint
npx hyperframes inspect --jsonFix all lint errors. Fix all inspect errors (text overflow, clip escaping containers). Then render:
npx hyperframes render --output sizzle/[slug]/sizzle-reel.mp4Output:
## Sizzle Reel: [brand name from end_card]
Tone: [tone] | Duration: [N]s | Cut style: [cut_style] | Aspect: [ratio]
Rhythm: [declared pattern]
Sections
Cold Open [0-Ns]: [impact stat or phrase]
Build [N-Ns]: [N key messages listed]
Peak [N-Ns]: [strongest message at max scale]
Land [N-Ns]: [brand name] + "[tagline]" + [CTA URL]
Files
Source: sizzle/[slug]/index.html
Output: sizzle/[slug]/sizzle-reel.mp4The same FFmpeg-synthesized SFX system as vid-product-launch. Place window.__sfxTimeline immediately before the GSAP timeline registration.
SFX type reference for sizzle reel:
| Type | Sound | Duration | Placement |
|---|---|---|---|
word-hit | Sub punch (50Hz) + transient click (2.2kHz) + noise burst | 180ms | One per key_message scene start |
whoosh | Two-band noise sweep (1.1kHz body + 4-8kHz air) | 700ms | At Build → Peak boundary |
cta-chime | A major chord (440+554+659+880Hz) + aecho bell shimmer | 1.2s | Exactly at Land start |
window.__sfxTimeline = [
// one word-hit per key_message (computed from scene start times)
{ ms: MSG_1_START_MS, sfx: 'word-hit', vol: 0.50 },
{ ms: MSG_2_START_MS, sfx: 'word-hit', vol: 0.50 },
{ ms: MSG_3_START_MS, sfx: 'word-hit', vol: 0.50 },
// ... repeat for each message
{ ms: PEAK_START_MS - 700, sfx: 'whoosh', vol: 0.55 },
{ ms: LAND_START_MS, sfx: 'cta-chime', vol: 0.65 },
];Compute all ms values from declared section timing constants. Never hardcode.
"Write the key messages yourself. They are the entire content of this video. 3 sharp lines beats 10 vague ones every time."
"Choose music before choosing visuals. The BPM determines the cut style. The cut style determines every timing decision."
"Cold open: one number. Not a sentence, not a tagline — one specific, surprising number. It earns 5 seconds of attention."
"The Land section is not a credits page. Logo + one line + one URL. Anything more dilutes the CTA."
"Match tone to channel. Energetic for social and Product Hunt. Cinematic for B2C premium and investor decks. Professional for enterprise conferences. Emotional for crowdfunding."
Good:
Sizzle reel, 60 seconds. Tone: energetic. Key messages: ['AI skills, ready to install' /
'52+ skills across GTM, content, research' / 'Works with Claude, Codex, Gemini' /
'Zero setup. Instant value.']. Music: 128bpm electronic. Cut style: fast.
End card: OpenDirectory + 'AI skills, ready to install' + 'opendirectory.dev'. Aspect: 9:16.Bad:
hype video for our company© Varnan-Tech, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files (references) in skills/vid-sizzle-reel of Varnan-Tech/opendirectory.
Open the folder on GitHubat commit 62e437a
Vid Sizzle Reel next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vid Sizzle Reel this skillVarnan-Tech/opendirectory | 674 | — | ~3.9k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 60k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| HyperFrames Video Compositionsspinabot/brigade | 11k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Motion Adfabricioctelles/skills | 106 | — | ~4.1k | Automated safety check: Pass | Apache-2.0 | |
| Yuv Viral Videohoodini/ai-agents-skills | 282 | — | ~7.5k | Automated safety check: Notes | None | |
| Noti Tiktok Full Textnotivn/AIEV | 127 | — | ~4.8k | Automated safety check: Pass | MIT |
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
spinabot/brigade
Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.
fabricioctelles/skills
Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4.
hoodini/ai-agents-skills
Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…
notivn/AIEV
Build a Vietnamese vertical TikTok explainer in the "MỔ XẺ PAPER AI" (AI paper dissection) format with HyperFrames (HTML/CSS/GSAP → MP4), Noti.vn style.
calesthio/OpenMontage
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
Varnan-Tech/opendirectory
Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF.
Varnan-Tech/opendirectory
Generates and updates README.md and API reference docs by reading your codebase's functions, routes, types, schemas, and architecture.
Varnan-Tech/opendirectory
Generates data visualization charts (bar, line, area, pie, doughnut, scatter, radar, treemap) as PNG using Apache ECharts v6.
Varnan-Tech/opendirectory
Creates animated looping GIFs from CSS animations (default) or AI image-to-video.
Varnan-Tech/opendirectory
Given a product description, category keywords, or competitor names (any combination), searches Reddit, Hacker News, GitHub Issues, G2, and Google Trends for the real pains your market experiences…
Varnan-Tech/opendirectory
Aggregates RSS feeds from the past week, synthesizes the top stories using Gemini, and publishes a newsletter digest to Ghost CMS.
Categories
Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages. Vid Sizzle Reel is an agent skill from Varnan-Tech/opendirectory. Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages.
Vid Sizzle Reel fits situations like: user says sizzle reel; conference opener; event promo video; investor pitch video.
Run `npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a claude-code`. Or copy the skill folder (skills/vid-sizzle-reel in Varnan-Tech/opendirectory) into .claude/skills/vid-sizzle-reel in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a codex`. Or copy the skill folder (skills/vid-sizzle-reel in Varnan-Tech/opendirectory) into .agents/skills/vid-sizzle-reel in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Varnan-Tech/opendirectory --skill vid-sizzle-reel -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vid-sizzle-reel, .gemini/skills/vid-sizzle-reel, .github/skills/vid-sizzle-reel and .opencode/skills/vid-sizzle-reel in your project.
Going by SKILL.md and its folder, Vid Sizzle Reel needs the command-line tools its instructions call (npx, node and ffmpeg). Our summary lists: Node.js. Compatibility (from SKILL.md): ["claude-code","gemini-cli","github-copilot"].
SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Vid Sizzle Reel is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.9k tokens (SKILL.md is roughly 16k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.9k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Vid Sizzle Reel: HyperFrames Animation (heygen-com/hyperframes, 60k stars), HyperFrames Video Compositions (spinabot/brigade, 11k stars), Motion Ad (fabricioctelles/skills, 106 stars) and Yuv Viral Video (hoodini/ai-agents-skills, 282 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Varnan-Tech (a GitHub organization) maintains it in Varnan-Tech/opendirectory, which has 674 GitHub stars. The repository holds 61 skills in this directory. The repository was last updated on August 16, 2026.
Source: Varnan-Tech/opendirectory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.