Content To Video
architectds/modeldock
Turn arbitrary source content (README, article, story, slides, deck, data/report, product description, tutorial text, audio/transcript, or a bare topic) into a finished, high-quality MP4 video.
HyperFrames title block with extruded wireframe letters that appear through a portal burst, then swap into a second phrase with a staggered settle glitch.
$ npx skills add heygen-com/hyperframes --skill wireframe-portal-title -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install heygen-com/hyperframes wireframe-portal-title --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/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/registry/blocks/wireframe-portal-title .claude/skills/wireframe-portal-title && 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 "wireframe-portal-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title into .claude/skills/wireframe-portal-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "wireframe-portal-title", 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/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-titleType 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 heygen-com/hyperframes --skill wireframe-portal-title -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install heygen-com/hyperframes wireframe-portal-title --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .agents/skills && cp -r skills-src/registry/blocks/wireframe-portal-title .agents/skills/wireframe-portal-title && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "wireframe-portal-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title into .agents/skills/wireframe-portal-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "wireframe-portal-title", 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 heygen-com/hyperframes --skill wireframe-portal-title -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install heygen-com/hyperframes wireframe-portal-title --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/registry/blocks/wireframe-portal-title .cursor/skills/wireframe-portal-title && 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 "wireframe-portal-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title into .cursor/skills/wireframe-portal-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "wireframe-portal-title", 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/heygen-com/hyperframes.git --path registry/blocks/wireframe-portal-title--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 heygen-com/hyperframes --skill wireframe-portal-title -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install heygen-com/hyperframes wireframe-portal-title --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/registry/blocks/wireframe-portal-title .gemini/skills/wireframe-portal-title && 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 "wireframe-portal-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title into .gemini/skills/wireframe-portal-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "wireframe-portal-title", 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 heygen-com/hyperframes wireframe-portal-titleInstalls 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 heygen-com/hyperframes --skill wireframe-portal-title -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .github/skills && cp -r skills-src/registry/blocks/wireframe-portal-title .github/skills/wireframe-portal-title && 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 "wireframe-portal-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title into .github/skills/wireframe-portal-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "wireframe-portal-title", 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 heygen-com/hyperframes --skill wireframe-portal-title -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install heygen-com/hyperframes wireframe-portal-title --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/registry/blocks/wireframe-portal-title .opencode/skills/wireframe-portal-title && 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 "wireframe-portal-title" agent skill from https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title into .opencode/skills/wireframe-portal-title/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "wireframe-portal-title", 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.
wireframe-portal-titleHyperFrames title block with extruded wireframe letters that appear through a portal burst, then swap into a second phrase with a staggered settle glitch.
Letter shapes are built from the bundled Geist typeface using a TTF loader and polygon offsetting, drawn as extruded wireframes and revealed by a portal burst whose level of chaos is adjustable. The clip is 1920×1080 at 30 fps and 8 seconds long.
A second beat replaces the letters with another phrase, wrapping on whole words and sizing the type automatically. 9 variables cover the title (18 characters at most), the replacement phrase, transition duration and easing, settle glitch strength and optional depth fog.
Add it with `npx hyperframes add wireframe-portal-title`, then mount it from the host index.html. Geist Bold, Regular and SemiBold files and the font licence come with the block.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 8bca7c4. 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:
npxFrom 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.
Wireframe Portal Title loads about 1.1k tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 340 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 heygen-com/hyperframes at commit 8bca7c4, republished under its Apache-2.0 licence (© heygen-com). 340 words, ~1,057 tokens.
.claude/skills/wireframe-portal-title/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.Extruded wireframe letterforms are built from the bundled Geist face with a TTF loader and polygon offsetting, then revealed through a portal burst whose chaos is a variable. A second beat swaps the letters into a replacement phrase with whole-word wrapping and auto type size, staggered with a tunable easing curve and settle glitch, with optional depth fog.
Composition id: wireframe-portal-title. Duration 8 s at 30 fps, 1920×1080.
wireframe-portal-title.html (63 KB)assets/fonts/Geist-Bold.ttf (65 KB)assets/fonts/Geist-Regular.ttf (65 KB)assets/fonts/Geist-SemiBold.ttf (65 KB)assets/fonts/Geist-OFL.txt (4 KB)Install with npx hyperframes add wireframe-portal-title; by default the files above land under compositions/wireframe-portal-title/. Then mount the block from the host index.html:
<div
data-composition-id="wireframe-portal-title"
data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>Render with custom values by targeting the composition file directly:
npx --yes hyperframes@0.8.12 render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'Read at runtime via window.__hyperframes.getVariables(); declared on the composition root as data-composition-variables (single-quoted attribute, plain JSON).
| id | type | default | label / range |
|---|---|---|---|
title | string | "BREAKTHROUGH" | Title max 18 chars |
replacementPhrase | string | "Lets do this sir!" | 3D replacement phrase (auto layout) |
phraseDuration | number | 1.85 | Phrase transition duration (s) 0.65–2.9 step 0.05 |
phraseEasing | number | 8 | Transition easing (1 gentle – 8 snap) 1–8 step 0.25 |
settleGlitch | number | 0.2 | Letter settle glitch strength 0–4 step 0.05 |
depthFog | boolean | true | Depth fog (early fade always on) |
subtitle | string | "HYPERFRAMES PORTAL TITLE" | Subtitle max 48 chars |
accent | color | "#F5C518" | Accent |
burstChaos | number | 1 | Burst chaos (0-2) 0–2 step 0.01 |
window.__timelines["wireframe-portal-title"].hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js, https://cdn.jsdelivr.net/npm/clipper-lib@6.4.2/clipper.js, https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js, https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/.data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.<canvas> in static markup; create it at runtime.© heygen-com, Apache-2.0. 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 6 other files (assets) in registry/blocks/wireframe-portal-title of heygen-com/hyperframes.
Open the folder on GitHubat commit 8bca7c4
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in heygen-com/hyperframes, which our catalogue first saw on October 7, 2026.
Wireframe Portal Title 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 |
|---|---|---|---|---|---|---|
| Wireframe Portal Title this skillheygen-com/hyperframes | 60k | 1 repos | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Content To Videoarchitectds/modeldock | 117 | — | ~2.4k | Automated safety check: Pass | Apache-2.0 | |
| Guizang Product Video Skillop7418/guizang-product-video-skill | 753 | — | ~1.1k | Automated safety check: Pass | AGPL-3.0 | |
| Short Form Editnateherkai/hyperframes-student-kit | 1.3k | — | ~5.3k | Automated safety check: Pass | Custom licence | |
| Plotbeat Data VideosUnclecheng-li/AI_Animation | 1.5k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Yuv Viral Videohoodini/ai-agents-skills | 282 | — | ~7.5k | Automated safety check: Notes | None |
architectds/modeldock
Turn arbitrary source content (README, article, story, slides, deck, data/report, product description, tutorial text, audio/transcript, or a bare topic) into a finished, high-quality MP4 video.
op7418/guizang-product-video-skill
制作代码驱动的软件产品宣传片和版本更新片(product promo、release notes video、changelog promo)。从真实功能和产品设计出发定方向,用真实组件、GSAP/Three.js 动效、原创配乐和动作音效完成影片,每支片子的视觉手法都从产品本身推导,不套模板。
nateherkai/hyperframes-student-kit
Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…
Unclecheng-li/AI_Animation
Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.
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…
heygen-com/hyperframes-community-skills
Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
heygen-com/hyperframes
Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.
heygen-com/hyperframes
Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.
heygen-com/hyperframes
Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.
heygen-com/hyperframes
Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.
heygen-com/hyperframes
Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.
Works with
Categories
HyperFrames title block with extruded wireframe letters that appear through a portal burst, then swap into a second phrase with a staggered settle glitch. Letter shapes are built from the bundled Geist typeface using a TTF loader and polygon offsetting, drawn as extruded wireframes and revealed by a portal burst whose level of chaos is adjustable. The clip is 1920×1080 at 30 fps and 8 seconds long.
Wireframe Portal Title fits situations like: opening a video with a wireframe title that bursts out of a portal; revealing a title and then swapping it for a second phrase in the same clip; tuning glitch strength, easing and depth fog on a 3D text animation.
Run `npx skills add heygen-com/hyperframes --skill wireframe-portal-title -a claude-code`. Or copy the skill folder (registry/blocks/wireframe-portal-title in heygen-com/hyperframes) into .claude/skills/wireframe-portal-title in your project. Claude Code loads it when a task matches its description.
Run `npx skills add heygen-com/hyperframes --skill wireframe-portal-title -a codex`. Or copy the skill folder (registry/blocks/wireframe-portal-title in heygen-com/hyperframes) into .agents/skills/wireframe-portal-title 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 heygen-com/hyperframes --skill wireframe-portal-title -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/wireframe-portal-title, .gemini/skills/wireframe-portal-title, .github/skills/wireframe-portal-title and .opencode/skills/wireframe-portal-title in your project.
Going by SKILL.md and its folder, Wireframe Portal Title needs the command-line tools its instructions call (npx). Our summary lists: A Node.js install for npx.
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.
Wireframe Portal Title is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Wireframe Portal Title: Content To Video (architectds/modeldock, 117 stars), Guizang Product Video Skill (op7418/guizang-product-video-skill, 753 stars), Short Form Edit (nateherkai/hyperframes-student-kit, 1.3k stars) and Plotbeat Data Videos (Unclecheng-li/AI_Animation, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 60,472 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 11, 2026.
Source: heygen-com/hyperframes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.