Create an eight-second HyperFrames title animation with wireframe letters, shown as 3D outlines, emerging through a portal and changing into another phrase. Adjust transition timing, abruptness, glitch strength, depth fog, and accent color.
A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.
Review the instructions the agent will receive before you install.
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.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a 12-second title animation in HyperFrames, where sweeping leaves reveal two headlines. Customize typography, leaf counts, sweep speed, background color, and the breeze moving the leaves that remain on the text.
Plan subtitles as layers over a video, deciding which spoken phrases to omit, show normally, or emphasize behind the subject. The guidance preserves full-frame composition and limits large embedded words to occasional key moments.
Turn a weekly Markdown changelog into a branded video project with animated interface examples, Annie narration, captions, and background music. The workflow selects key updates and builds a 45–60 second square video, with rendering performed on request.
Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.
Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.
Design scene transitions and animated text using matched movement direction and speed across cuts. The catalog provides concrete settings for zooms, blur, word-by-word transitions, staggered entrances, and repositioning groups of elements.