Back to Details

wireframe-portal-title

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
挤出的线框字体字形由随附的 Geist 字体构建，使用 TTF 加载器和多边形偏移处理，然后通过一个门户爆发效果显现，其混沌程度是一个变量。第二拍将字母切换为替换短语，支持整词换行和自动字号，并使用可调缓动曲线和稳定毛刺效果进行交错，可选景深雾效。
合成 ID：
wireframe-portal-title
。时长 8 秒，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)
  • 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!"}'
运行 
npx hyperframes add wireframe-portal-title
安装；默认情况下上述文件会放置在 
compositions/wireframe-portal-title/
目录下。然后从宿主 
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>
通过直接指定合成文件并使用自定义值进行渲染：
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
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.__hyperframes.getVariables()
读取；在合成根元素上以 
data-composition-variables
声明（单引号属性，纯 JSON）。
idtypedefaultlabel / range
title
string
"BREAKTHROUGH"
标题最多 18 个字符
replacementPhrase
string
"Lets do this sir!"
3D 替换短语（自动布局）
phraseDuration
number
1.85
短语过渡时长（秒） 0.65–2.9 步长 0.05
phraseEasing
number
8
过渡缓动（1 平缓 – 8 急促） 1–8 步长 0.25
settleGlitch
number
0.2
字母稳定毛刺强度 0–4 步长 0.05
depthFog
boolean
true
景深雾效（早期淡出始终开启）
subtitle
string
"HYPERFRAMES PORTAL TITLE"
副标题最多 48 个字符
accent
color
"#F5C518"
强调色
burstChaos
number
1
爆发混沌 (0-2) 0–2 步长 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.
  • 一个暂停的 GSAP 时间线，注册为 
    window.__timelines["wireframe-portal-title"]
    。
  • 在 
    hf-seek
    CustomEvent 上重新同步；每一帧都是时间的闭式函数（仅使用种子 PRNG，无 rAF 循环，无 Date.now）。
  • 渲染器：three.js 0.181.2，GSAP 3.14.2，Canvas 2D，GLSL 着色器，后处理，种子 PRNG，Clipper。每个实时实例预算法约 350 MB；一次运行一个。
  • 外部运行时依赖：
    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/
    。
  • 本地字体：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.
  1. 保持 
    data-composition-variables
    为单引号属性，内部为纯 
    "
    JSON。切勿通过 Studio 的 Design 面板保存它。
  2. 不要在静态标记中放置 
    <canvas>
    ；在运行时创建它。
  3. 保持每个视觉状态为 t 的函数；seek 安全性是使该动画块可渲染的关键。