Agent skill

Wireframe Portal Title

by heygen-com in heygen-com/hyperframes

HyperFrames title block with extruded wireframe letters that appear through a portal burst, then swap into a second phrase with a staggered settle glitch.

Apache-2.0Auto-check passedMedia & Creative

Install Wireframe Portal Title

skills CLI
$ npx skills add heygen-com/hyperframes --skill wireframe-portal-title -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes wireframe-portal-title --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
wireframe-portal-title
GitHub stars
60k
Used in
1 other repo
Token cost
~1.1k tokens
SKILL.md length
340 words
Files
7 (incl. assets)
Skills in repo
32
Repo updated
First seen
Licence
Apache-2.0

At a glance

HyperFrames title block with extruded wireframe letters that appear through a portal burst, then swap into a second phrase with a staggered settle glitch.

  • Works in 3 steps: Keep data-composition-variables a… → Do not put in static markup; create it… → Keep every visual state a function of t;…
  • Opening a video with a wireframe title that bursts out of a portal
  • SKILL.md covers Files, Install, Variables and Runtime contract, plus 1 more section
  • Calls npx; reaches cdn.jsdelivr.net

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Add the wireframe-portal-title block with the title LAUNCH DAY and the replacement phrase See you live.”
  • “Turn off depth fog in the wireframe portal title and soften the settle glitch.”
  • “Make the phrase swap in the portal title slower, with a gentler easing curve.”

Requirements

  • A Node.js install for npx

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Keep data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.
  2. Do not put in static markup; create it at runtime.
  3. Keep every visual state a function of t; seek-safety is what makes the block renderable.

What it can do on your machine

Read from SKILL.md and the folder at commit 8bca7c4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from heygen-com/hyperframes at commit 8bca7c4, republished under its Apache-2.0 licence (© heygen-com). 340 words, ~1,057 tokens.

Download SKILL.mdSave it as .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.
name
wireframe-portal-title
description
A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

Wireframe Portal Title

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.

Files

  • 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

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:

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:

sh
npx --yes hyperframes@0.8.12 render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'

Variables

Read at runtime via window.__hyperframes.getVariables(); declared on the composition root as data-composition-variables (single-quoted attribute, plain JSON).

idtypedefaultlabel / range
titlestring"BREAKTHROUGH"Title max 18 chars
replacementPhrasestring"Lets do this sir!"3D replacement phrase (auto layout)
phraseDurationnumber1.85Phrase transition duration (s) 0.65–2.9 step 0.05
phraseEasingnumber8Transition easing (1 gentle – 8 snap) 1–8 step 0.25
settleGlitchnumber0.2Letter settle glitch strength 0–4 step 0.05
depthFogbooleantrueDepth fog (early fade always on)
subtitlestring"HYPERFRAMES PORTAL TITLE"Subtitle max 48 chars
accentcolor"#F5C518"Accent
burstChaosnumber1Burst chaos (0-2) 0–2 step 0.01

Runtime contract

  • One paused GSAP timeline registered as window.__timelines["wireframe-portal-title"].
  • Re-syncs on the hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
  • Renderer: three.js 0.181.2, GSAP 3.14.2, Canvas 2D, GLSL shaders, Post-processing, Seeded PRNG, Clipper. Budget roughly 350 MB per live instance; run one at a time.
  • External runtime dependencies: 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/.
  • Local fonts: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.

Editing rules (from the source project)

  1. Keep data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.
  2. Do not put <canvas> in static markup; create it at runtime.
  3. Keep every visual state a function of t; seek-safety is what makes the block renderable.

© 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

Files

SKILL.md and 6 other files (assets) in registry/blocks/wireframe-portal-title of heygen-com/hyperframes.

  • SKILL.md
  • assets/fonts/Geist-Bold.ttf
  • assets/fonts/Geist-OFL.txt
  • assets/fonts/Geist-Regular.ttf
  • assets/fonts/Geist-SemiBold.ttf
  • registry-item.json
  • wireframe-portal-title.html

Open the folder on GitHubat commit 8bca7c4

Used in 1 other repository

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.

Compare with similar skills

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.

Wireframe Portal Title compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Wireframe Portal Title this skillheygen-com/hyperframes60k1 repos~1.1kAutomated safety check: PassApache-2.0
Content To Videoarchitectds/modeldock117—~2.4kAutomated safety check: PassApache-2.0
Guizang Product Video Skillop7418/guizang-product-video-skill753—~1.1kAutomated safety check: PassAGPL-3.0
Short Form Editnateherkai/hyperframes-student-kit1.3k—~5.3kAutomated safety check: PassCustom licence
Plotbeat Data VideosUnclecheng-li/AI_Animation1.5k—~2.6kAutomated safety check: PassMIT
Yuv Viral Videohoodini/ai-agents-skills282—~7.5kAutomated safety check: NotesNone

Similar skills

  • 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.

    117 GitHub stars~2.4k tokensUpdated today
    Media & CreativeAuto-check passed
  • Guizang Product Video Skill

    op7418/guizang-product-video-skill

    制作代码驱动的软件产品宣传片和版本更新片(product promo、release notes video、changelog promo)。从真实功能和产品设计出发定方向,用真实组件、GSAP/Three.js 动效、原创配乐和动作音效完成影片,每支片子的视觉手法都从产品本身推导,不套模板。

    753 GitHub stars~1.1k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Short Form Edit

    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…

    1.3k GitHub stars~5.3k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed
  • Plotbeat Data Videos

    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.

    1.5k GitHub stars~2.6k tokensUpdated 5 days ago
    Media & CreativeAuto-check passed
  • Yuv Viral Video

    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…

    282 GitHub stars~7.5k tokensUpdated 3 mo ago
    Media & CreativeAuto-check: notes
  • 3D Camera Captions for HyperFrames

    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.

    187 GitHub stars~2.3k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes

All 32 skills in this repo
  • 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.

    60k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed
  • Embedded Video Captions

    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.

    60k GitHub starsUsed in 3 repos~8.6k tokens
    Auto-check passed
  • Weekly Changelog Video

    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.

    60k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Faceless Explainer Video

    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.

    60k GitHub starsUsed in 3 repos~7.7k tokens
    Auto-check: notes
  • Figma to HyperFrames

    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.

    60k GitHub starsUsed in 3 repos~4.5k tokens
    Auto-check: notes
  • HyperFrames Media Use

    heygen-com/hyperframes

    Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.

    60k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

Works with

Questions about Wireframe Portal Title

What does Wireframe Portal Title do?

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.

When should I use Wireframe Portal Title?

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.

How do I install Wireframe Portal Title in Claude Code?

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.

How do I install Wireframe Portal Title in Codex?

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.

Can I use Wireframe Portal Title in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Wireframe Portal Title need to run?

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.

Does Wireframe Portal Title access the network?

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.

Is Wireframe Portal Title safe to install?

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.

What licence does Wireframe Portal Title use?

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.

How many tokens does Wireframe Portal Title use?

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.

What are the alternatives to Wireframe Portal Title?

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.

Who maintains Wireframe Portal Title?

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.