orbit-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orbit Card

One centred feature card with a circular cut-out framing a dot sphere. The card enters from the right (0.25–1.80 s), holds with a subtle bob and depth drift, orbits a full turn around the sphere's centre (smoothstep between 4.97 and 5.97 s), and exits left (7.35–8.55 s). The camera path and card F-curves are exported from the approved Blender rig at 30 fps and interpolated; the sphere keeps its own translation and a constant spin. Title, description, accent and the orbit angle are variables; 180° and 720° work without touching keys.

Composition id:

orbit-card

. Duration 10 s at 30 fps, 1920×1080.

一张居中功能卡片，带有一个圆形切口，框住一个点球体。卡片从右侧进入（0.25–1.80秒），保持轻微上下浮动和深度漂移，围绕球体中心公转一整圈（在4.97–5.97秒之间平滑过渡），然后从左侧退出（7.35–8.55秒）。相机路径和卡片F曲线从已批准的Blender rig中以30fps导出并插值；球体保持自身平移和恒定旋转。标题、描述、强调色和轨道角度均为变量；180°和720°无需触碰关键帧即可工作。

Composition id:

orbit-card

。时长10秒，30fps，1920×1080。

Files

文件

```
orbit-card.html
```
(3 KB)
```
assets/Archivo-LICENSE.txt
```
(4 KB)
```
assets/Three-LICENSE.txt
```
(1 KB)
```
assets/archivo-regular.ttf
```
(108 KB)
```
assets/archivo-semibold.ttf
```
(109 KB)
```
assets/gsap-3.14.2.min.js
```
(128 KB)
```
assets/GSAP-NOTICE.txt
```
(1 KB)
```
assets/orbit-motion.js
```
(59 KB)
```
assets/orbit-scene.js
```
(8 KB)
```
assets/three.core.min.js
```
(554 KB)
```
assets/three.module.min.js
```
(468 KB)

```
orbit-card.html
```
(3 KB)
```
assets/Archivo-LICENSE.txt
```
(4 KB)
```
assets/Three-LICENSE.txt
```
(1 KB)
```
assets/archivo-regular.ttf
```
(108 KB)
```
assets/archivo-semibold.ttf
```
(109 KB)
```
assets/gsap-3.14.2.min.js
```
(128 KB)
```
assets/GSAP-NOTICE.txt
```
(1 KB)
```
assets/orbit-motion.js
```
(59 KB)
```
assets/orbit-scene.js
```
(8 KB)
```
assets/three.core.min.js
```
(554 KB)
```
assets/three.module.min.js
```
(468 KB)

Install

安装

Install with

npx hyperframes add orbit-card

; by default the files above land under

compositions/orbit-card/

. Then mount the block from the host

index.html

html

<div
  data-composition-id="orbit-card"
  data-composition-src="compositions/orbit-card/orbit-card.html"
  data-start="0"
  data-duration="10"
  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/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'

使用

npx hyperframes add orbit-card

安装；默认情况下，上述文件会落在

compositions/orbit-card/

目录下。然后从宿主的

index.html

中挂载该块：

html

<div
  data-composition-id="orbit-card"
  data-composition-src="compositions/orbit-card/orbit-card.html"
  data-start="0"
  data-duration="10"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

通过直接指定 composition 文件，使用自定义值渲染：

npx --yes hyperframes@0.8.12 render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'

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
`feature1Title`	string	`"Always in sync"`	Card title max 28 chars
`feature1Desc`	string	`"Changes reach every screen the moment they happen."`	Card description max 110 chars
`feature1Accent`	color	`"#4cc9ff"`	Card accent
`cardOrbitDegrees`	number	`360`	Card orbit degrees -36000–36000 step 1

在运行时通过

window.__hyperframes.getVariables()

读取；在 composition 根元素上以

data-composition-variables

属性声明（单引号属性，纯JSON）。

id	type	default	标签 / 范围
`feature1Title`	string	`"Always in sync"`	卡片标题最多28个字符
`feature1Desc`	string	`"Changes reach every screen the moment they happen."`	卡片描述最多110个字符
`feature1Accent`	color	`"#4cc9ff"`	卡片强调色
`cardOrbitDegrees`	number	`360`	卡片轨道角度 -36000–36000 步长 1

Runtime contract

运行时契约

One paused GSAP timeline registered as
```
window.__timelines["orbit-card"]
```
.
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: GSAP.
External runtime dependencies: none (served locally).
Local fonts: assets/archivo-regular.ttf, assets/archivo-semibold.ttf.

注册为
```
window.__timelines["orbit-card"]
```
的单个暂停GSAP时间轴。
在
```
hf-seek
```
自定义事件上重新同步；每一帧都是时间的闭式函数（仅使用种子PRNG，无rAF循环，无Date.now）。
渲染器：GSAP。
外部运行时依赖：无（本地提供）。
本地字体：assets/archivo-regular.ttf, assets/archivo-semibold.ttf。

Editing rules (from the source project)

编辑规则（来自源项目）

Keep
```
data-composition-variables
```
a 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.

保持
```
data-composition-variables
```
为带纯
```
"
```
JSON的单引号属性。切勿通过Studio的设计面板保存它。
不要在静态标记中放置
```
<canvas>
```
；在运行时创建它。
保持每个视觉状态为t的函数；seek安全性是使该块可渲染的关键。