> **wireframe-portal-title** — skill 13 of 34 in [heygen-com/hyperframes](https://skillsdocs.com/heygen-com/hyperframes).
>
> Book (all skills, one file): https://skillsdocs.com/heygen-com/hyperframes.md
> Machine manifest: https://skillsdocs.com/heygen-com/hyperframes/.well-known/agent-skills/index.json
> Install the book: `npx skills add heygen-com/hyperframes`
> Upstream: https://github.com/heygen-com/hyperframes/blob/main/registry/blocks/wireframe-portal-title/SKILL.md @ `main`
> Raw bytes, no header: https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/SKILL.md
> Base for relative paths: https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/
> Licence: Apache-2.0 — https://spdx.org/licenses/Apache-2.0.html
>
> Bundled files (6), referenced from this skill's directory:
> - `assets/fonts/Geist-Bold.ttf` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/assets/fonts/Geist-Bold.ttf
> - `assets/fonts/Geist-OFL.txt` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/assets/fonts/Geist-OFL.txt
> - `assets/fonts/Geist-Regular.ttf` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/assets/fonts/Geist-Regular.ttf
> - `assets/fonts/Geist-SemiBold.ttf` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/assets/fonts/Geist-SemiBold.ttf
> - `registry-item.json` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/registry-item.json
> - `wireframe-portal-title.html` — https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/wireframe-portal-title/wireframe-portal-title.html
>
> Content © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request
---
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
```
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).
| 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 |
## 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 `