Back to Details

canopy-part-title

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Canopy Part Title

树冠部分标题

A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline; a second, depth-lifted batch carries the second headline past the camera. A handful of leaves stay behind on the type and keep a light breeze. Font, weight, size, letter spacing, leaf counts, sweep speed and the retained-leaf breeze are variables.
Composition id: 
canopy-part-title
. Duration 12 s at 30 fps, 1920×1080.
一片密集的、有纹理的树叶树冠以浅景深扫过画面，然后分开，露出第一个标题；第二批树叶被提升深度，将第二个标题带过镜头。少量树叶留在文字上，保持一阵微风。字体、字重、字号、字间距、树叶数量、扫动速度和保留树叶的微风都是变量。
组合 ID：
canopy-part-title
。时长 12 秒，30 fps，1920×1080。

Files

文件

  • canopy-part-title.html
    (57 KB)
  • assets/leaf-surface-color.webp
    (64 KB)
  • assets/leaf-surface-normal.webp
    (136 KB)
  • canopy-part-title.html
    (57 KB)
  • assets/leaf-surface-color.webp
    (64 KB)
  • assets/leaf-surface-normal.webp
    (136 KB)

Install

安装

Install with 
npx hyperframes add canopy-part-title
; by default the files above land under 
compositions/canopy-part-title/
. Then mount the block from the host 
index.html
:
html
<div
  data-composition-id="canopy-part-title"
  data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
  data-start="0"
  data-duration="12"
  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/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'
使用 
npx hyperframes add canopy-part-title
安装；默认情况下，上述文件将位于 
compositions/canopy-part-title/
下。然后从宿主 
index.html
中挂载该块：
html
<div
  data-composition-id="canopy-part-title"
  data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
  data-start="0"
  data-duration="12"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>
通过直接指定组合文件，使用自定义值渲染：
sh
npx --yes hyperframes@0.8.12 render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'

Variables

变量

Read at runtime via 
window.__hyperframes.getVariables()
; declared on the composition root as 
data-composition-variables
(single-quoted attribute, plain JSON).
idtypedefaultlabel / range
headline1
string
"Understory"
Headline 1
headline2
string
"Move slowly"
Headline 2
font
string
"Helvetica"
Headline font
fontWeight
number
900
Font weight 100–900 step 100
fontSize
number
1
Font size (1 = auto-fit) 0.3–2 step 0.01
letterSpacing
number
0.01
Letter spacing (em) -0.2–1 step 0.01
background
color
"#020805"
Background
leafCount
number
170
Leaves per sweep 40–320 step 1
stayCount
number
5
Leaves left behind 0–20 step 1
sweepSpeed
number
1
Sweep speed 0.3–3 step 0.05
retainedBreeze
number
1
Retained leaf breeze 0–2 step 0.05
在运行时通过 
window.__hyperframes.getVariables()
读取；在组合根元素上声明为 
data-composition-variables
（单引号属性，纯 JSON）。
idtypedefaultlabel / range
headline1
string
"Understory"
标题1
headline2
string
"Move slowly"
标题2
font
string
"Helvetica"
标题字体
fontWeight
number
900
字重 100–900 步长100
fontSize
number
1
字号 (1 = auto-fit) 0.3–2 步长0.01
letterSpacing
number
0.01
字间距 (em) -0.2–1 步长0.01
background
color
"#020805"
背景
leafCount
number
170
每次扫过的树叶数量 40–320 步长1
stayCount
number
5
留下的树叶数量 0–20 步长1
sweepSpeed
number
1
扫动速度 0.3–3 步长0.05
retainedBreeze
number
1
保留树叶的微风 0–2 步长0.05

Runtime contract

运行时约定

  • One paused GSAP timeline registered as 
    window.__timelines["canopy-part-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.170.0, GSAP 3.14.2, Canvas 2D, Post-processing, Seeded PRNG, Shadow maps. 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/three@0.170.0/build/three.module.js
    , 
    https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/EffectComposer.js
    , 
    https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/RenderPass.js
    , 
    https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/BokehPass.js
    .
  • Web fonts from Google Fonts: Gelasio.
  • 一个暂停的 GSAP 时间线注册为 
    window.__timelines["canopy-part-title"]
    。
  • 在 
    hf-seek
    CustomEvent 上重新同步；每一帧都是时间的闭合形式函数（仅使用带种子的 PRNG，没有 rAF 循环，没有 Date.now）。
  • 渲染器：three.js 0.170.0、GSAP 3.14.2、Canvas 2D、后处理、带种子的 PRNG、阴影贴图。每个实时实例大约需要 350 MB 内存；一次运行一个。
  • 外部运行时依赖：
    https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js
    、
    https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js
    、
    https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/EffectComposer.js
    、
    https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/RenderPass.js
    、
    https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/BokehPass.js
    。
  • 来自 Google Fonts 的 Web 字体：Gelasio。

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 安全性是该块可渲染的关键。