Home / All Skills / Content & Media Creation / wireframe-portal-title
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · heygen-com/hyperframes

wireframe-portal-title

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessDual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0（仓库根 LICENSE = Apache License Version 2.0；块内随带第三方许可文本：three.js MIT、GSAP 标准许可、Geist/Archivo/Cormorant Garamond OFL 等）Commit d2f0bc7f34
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Output shot: Builds extruded wireframe glyphs from bundled Geist font via TTF parsing and polygon offset, revealing them through a "bursting portal" (burst chaos is tunable); in the second beat, letters swap into an alternative phrase.

registry/blocks/wireframe-portal-title/SKILL.md
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.
What is happening here: Glyphs are geometry rather than textures (wireframe-capable, extrudable, per-letter deformable); packs two pieces of information into a single shot (theme word → call-to-action phrase), making it the only two-stage title block in its family.

Dual-canvas layering: The 3D layer (wpt-three) and warp layer (wpt-warp) are both created at runtime, with no <canvas> present in the static markup.

registry/blocks/wireframe-portal-title/wireframe-portal-title.html
["wpt-three", "wpt-warp"].forEach(function (id) { var canvas = document.createElement("canvas"); canvas.id = id; canvas.width = 1920; canvas.height = 1080;
What is happening here: Layered rendering keeps the wireframe world separate from distortion/post-processing without interference, while complying with Studio parser constraints on static canvases.

Typesetting relies on offscreen canvas measurement: Measures character widths based on Geist 700 176px with +3% letter-spacing, followed by whole-word wrapping and auto-adjusting font size.

registry/blocks/wireframe-portal-title/wireframe-portal-title.html
const measure = document.createElement("canvas").getContext("2d"); measure.font = "700 176px Geist"; const tracking = 176 * 0.03; const advance = (char) => measure.measureText(char).width + tracking;
What is happening here: Swapping phrases requires "keeping each word intact", demanding actual character width measurements rather than estimations to enable proper word wrapping and downscaling.

Fonts are local assets: Fetches ArrayBuffer via host-provided assetUrl("assets/fonts/Geist-Bold.ttf"), which is then parsed by TTFLoader/FontLoader.

registry/blocks/wireframe-portal-title/wireframe-portal-title.html
const ttfBuffer = await fetch(assetUrl("assets/fonts/Geist-Bold.ttf")).then((r) => r.arrayBuffer(), ); const font = new FontLoader().parse(new TTFLoader().parse(ttfBuffer));
What is happening here: Fonts are resolved via the host assetUrl (paths are only valid after mounting) instead of hardcoded relative paths; this also clarifies the execution sequence between font loading and geometry generation.

Randomness replaces the original experiment's Math.random with two independent seeds: one for the scene (20260824) and one for staggered phrase timing (20260831), ensuring both phrase swapping and the burst are reproducible.

registry/blocks/wireframe-portal-title/wireframe-portal-title.html
// ---------- seeded PRNG (replaces the experiment's Math.random) ---------- … const rand = mulberry32(20260824); const phraseRand = mulberry32(20260831);
What is happening here: The original project was an interactive experiment; migrating it into a rendering pipeline requires seeded randomness to prevent frame-to-frame instability.

First-frame warmup has a clear purpose: At t=0, the portal is closed and nothing is drawn; waiting for the first actual draw during playback would push all shader linking into the playback phase.

registry/blocks/wireframe-portal-title/wireframe-portal-title.html
The portal is closed at t=0 and draws nothing, so the first real draw would link every shader mid-playback. Draw across the timeline and flush the GPU
What is happening here: Explains "why the entire timeline is pre-rendered before ready"—it prevents post-first-frame hitching and is a necessary step for frame-by-frame rendering pipelines.

Deterministic contract across the family: The paused timeline is registered to window.__timelines["wireframe-portal-title"], hf-seek resynchronizes, and each frame is a closed-form function of t.

registry/blocks/wireframe-portal-title/SKILL.md
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).
What is happening here: A shared contract across all blocks in this batch, ensuring deterministic frame-by-frame rendering.

2Core Capabilities

01Wireframe portal + title reveal + letter swap (1920×1080, 8s, 9 variables)
02Geometric glyphs: TTF parsing + polygon offset (Clipper) to construct extruded wireframe letters, integrated with post-processing and GLSL
03Adjustable two-beat rhythm: portal burst chaos 0–2, letter settling jitter 0–4, swap duration 0.65–2.9s, and easing 1–8
04Optional depth fog, featuring subtitles and an accent color (default accent #F5C518)
05Strict phrase replacement typography: intact words, whole-word wrapping, dynamic font-size fitting (measured via offscreen canvas)
06Local fonts (Geist Regular/SemiBold/Bold + OFL text) bundled with the block
07Renders outside Studio: renders directly and overrides title and replacement phrase

3External Dependencies

KindDependency / Endpoint
cliHyperFrames 官方 CLI（add / render）
networkjsDelivr CDN：GSAP 3.14.2（产物期脚本）
networkjsDelivr CDN：clipper-lib 6.4.2（多边形偏移，构建线框字形轮廓）
networkjsDelivr CDN：three.js 0.181.2 与 examples/jsm（importmap 解析，含后处理模块）
package本地字体（Geist ×3，OFL）随块分发；其余依赖见上（三个 CDN 脚本）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executes local script or command: wireframe-portal-title.html (Executed in browser/renderer: parses variables → creates two canvases → generates wireframe glyph geometry → registers p
  • 网络端点: Declares external network access: cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js (Production phase: browser execution)
Audit Notes: Evaluation target = this block directory (SKILL.md + composition HTML + bundled Geist fonts): No credential/env access, no shell scripts, no disk writes, no data exfiltration. The three external links (jsdelivr for gsap, clipper-lib, three + examples/jsm) are browser fetches during the artifact runtime, classified as endpoints under Paradigm Appendix A, Item 2 without impacting rating. Installation and rendering use the official CLI ecosystem. Rated blue accordingly. Note: This block has the most external links; the three scripts must be localized before offline rendering, otherwise wireframe glyph geometry cannot be generated.

5Second-Pass Verification

  • [ok] 变量数与声明一致性（frontmatter 自称 9 variables） — 脚本实测：SKILL.md 变量表 9 行、html data-composition-variables 解析出 9 项、frontmatter 写 9 —— 一致。
  • [ok] 外链清单与 SKILL.md 声称一致 — html 命中三处 jsdelivr（gsap、clipper-lib、three importmap + addons 前缀），与 SKILL.md 的 External runtime dependencies 逐项对应。
  • [ok] 字体加载路径 — 字体经 assetUrl("assets/fonts/Geist-Bold.ttf") 取回；assets/fonts/ 三枚 ttf 与 OFL 文本都在盘上，registry-item 也全列（6/6 文件存在）。
  • [ok] 种子化声称 — mulberry32 定义与两个常数种子（20260824 / 20260831）逐字命中；全文 grep Math.random / Date.now / requestAnimationFrame 零命中。
  • [ok] 双画布与 Studio 解析器约束 — 静态 markup 中无 <canvas>；两块 canvas 由 forEach 在运行时创建（wpt-three / wpt-warp），与 SKILL.md 编辑纪律第 2 条一致。
  • [ok] 首帧预热的理由是否成立 — html 注释给出可核查的理由（t=0 传送门关闭、不绘制 → 首次真绘制会链接全部 shader），且代码确在注册时间线后按 tl.time() 预绘一遍。

6Verdict & Scenarios

  • Two-part message delivered in a single continuous shot
  • Glyphs are pure geometry, enabling wireframe styling and deformations
  • Reliable and precise typography
  • Minimal parameters covering all critical animation points
    • Best for: Title cards (8s) requiring a "tech wireframe aesthetic + portal reveal + two-stage copy", such as keynote presentations transitioning from a theme keyword to a call-to-action phrase.
    Not for: Pipelines requiring completely offline rendering with zero external links and unwilling to localize the three CDN scripts; titles exceeding 18 characters or requiring long-sentence typesetting.
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload wireframe-portal-title.tar.gz
    sha256: 7c548c8702b7c0cf…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.