wireframe-portal-title
heygen-com/hyperframes
Wireframe portal animation with morphing title text and customizable transitions.
What is wireframe-portal-title?
A 1920×1080 HyperFrames composition that animates an extruded wireframe portal bursting open to reveal a title, then morphs the letters into a replacement phrase. Use it for dramatic title reveals, product launches, or animated intros with fine-grained control over timing, easing, and visual effects.
- Renders a 3D extruded wireframe portal that bursts open with configurable chaos
- Displays an initial title phrase built from the Geist typeface
- Morphs title letters into a replacement phrase with auto-wrapping and type sizing
- Supports staggered letter transitions with tunable easing curves and settle glitch effects
- Includes optional depth fog and accent color customization
- Runs as a seekable GSAP timeline for frame-accurate control
How to install wireframe-portal-title
npx skills add https://github.com/heygen-com/hyperframes --skill wireframe-portal-title- HyperFrames CLI installed (npx hyperframes)
- Host HTML file with composition mounting support
- External CDN dependencies: GSAP 3.14.2, three.js 0.181.2, Clipper.js 6.4.2
How to use wireframe-portal-title
- 1.Install the skill with npx hyperframes add wireframe-portal-title
- 2.Mount the composition in your host index.html using the provided data-composition-* attributes
- 3.Customize variables (title, replacementPhrase, phraseDuration, etc.) via data-composition-variables or window.__hyperframes.getVariables()
- 4.Render with custom values using npx hyperframes render with the --variables flag
- 5.Control playback via the registered GSAP timeline at window.__timelines['wireframe-portal-title']
- 6.Listen for hf-seek CustomEvent to sync animations when scrubbing or seeking
Use cases
- Product launch videos or announcement sequences
- Animated title cards for streaming or video content
- Interactive presentations requiring precise timing and visual polish
- Marketing materials with dramatic text-reveal effects
- Video editing compositions needing customizable text overlays
- Video producers and motion designers
- Web developers building animated landing pages
- Marketing and creative teams
- Interactive media creators using HyperFrames
wireframe-portal-title FAQ
Title is limited to 18 characters; subtitle to 48 characters. Replacement phrase auto-wraps and scales to fit.
The composition uses the bundled Geist typeface (Regular, SemiBold, Bold). Font loading is handled internally via TTF loader.
Use the phraseDuration variable (0.65–2.9 s) to control the transition speed, and phraseEasing (1–8) to adjust the easing curve from gentle to snap.
Budget approximately 350 MB per live instance; run one composition at a time. Requires three.js, GSAP, and Clipper.js from CDN.
Yes. Every frame is a closed-form function of time with no rAF loops, making it fully seekable and renderable frame-by-frame.
Full instructions (SKILL.md)
Source of truth, from heygen-com/hyperframes.
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:
<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!"}'
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-seekCustomEvent; 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)
- Keep
data-composition-variablesa single-quoted attribute with plain"JSON. Never save it through Studio's Design panel. - Do not put
<canvas>in static markup; create it at runtime. - Keep every visual state a function of t; seek-safety is what makes the block renderable.
Related skills
More from heygen-com/hyperframes and the wider catalog.
animejs
Anime.js adapter for deterministic, seek-driven animations in HyperFrames compositions.
canopy-part-title
Animated leaf-sweep reveal for headlines with customizable typography and particle effects.
captions-overlay
Agent skill from heygen-com/hyperframes.
changelog-video
Agent skill from heygen-com/hyperframes.
ai-video-gen
|
avatar-video
|