Skip to content

Commit 2cebedc

Browse files
miguel-heygenmiguel-heygen
committed
feat(catalog): add the seven 3D-motion pieces as installable registry blocks
Adds seven 3D-motion pieces to the HyperFrames catalog as installable registry blocks: a leaf-parting title card, a glass-shard title, a code-slicing hero, a frosted camera-orbit sequence, a bevelled-cuboid carousel, an orbiting feature card, and a wireframe portal title. Each installs the same way as any other catalog block and shows up in its own "3D motion" catalog section. Ported from a reference implementation, contributed with the author's permission under this repository's license (CREDITS.md). Every vendored library (GSAP, three.js, three-mesh-bvh, opentype.js, ClipperLib, Geist) carries its own notice, consistent across all seven items, and frost-sequence-camera-orbit ships real TypeScript source plus a verified build script for its bundled frost.js/motion.js under source/ (reference only, not installed). Also fixes: a script-src/manifest-path mismatch in three items that failed the registry's install-time file check; a dead ESM leftover in glass-shard-title (unused, bare-specifier imports); and registers frost.ready as a declared-compute build-ready hold so the player waits instead of showing a black frame while the mesh finishes building. NO_ESSAY_COMMENTS_OK=1: squashes a five-commit history whose ported source/ tree carries pre-existing, unedited upstream comments (long blocks, shouted acronyms) not authored in this repo.
1 parent 82f4926 commit 2cebedc

195 files changed

Lines changed: 277664 additions & 38 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitattributes‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,7 @@ registry/**/*.html linguist-vendored
5353
# through LFS — the small MP3 stings stay plain so the example still clones and
5454
# renders without `git lfs pull`.
5555
examples/docs-reference-project/**/*.wav filter=lfs diff=lfs merge=lfs -text
56+
57+
# Catalog hover-preview clips for the seven 3D-motion pieces (two exceed the
58+
# 500 KB non-LFS limit; the rest are routed the same way for consistency).
59+
docs/public/catalog/blocks-3d-motion/**/*.mp4 filter=lfs diff=lfs merge=lfs -text

‎.oxlintrc.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"packages/producer/tests/**/src/vendor/**",
1414
"docs/public/catalog/",
1515
"registry/blocks/**/lib/*.iife.js",
16+
"registry/blocks/{glass-shard-title,code-slice-hero,cuboid-carousel,frost-sequence-camera-orbit,orbit-card}/**/*.{js,mjs}",
17+
"registry/blocks/frost-sequence-camera-orbit/source/**",
1618
"chrome/"
1719
],
1820
"overrides": [

‎CREDITS.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,7 @@ broader Node.js ecosystem.
2828
- **[mediabunny](https://github.com/Vanilagy/mediabunny)** — media toolkit used
2929
in the studio for fast metadata extraction from file headers. Licensed under
3030
the [Mozilla Public License 2.0 (MPL-2.0)](https://mozilla.org/MPL/2.0/).
31+
- The seven 3D-motion catalog pieces (`canopy-part-title`, `glass-shard-title`,
32+
`code-slice-hero`, `frost-sequence-camera-orbit`, `cuboid-carousel`,
33+
`orbit-card`, `wireframe-portal-title`) are contributed with their author's
34+
permission under this repository's license.

‎docs/catalog/blocks/canopy-part-title.mdx‎

Lines changed: 1190 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/catalog/blocks/code-slice-hero.mdx‎

Lines changed: 348 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/catalog/blocks/cuboid-carousel.mdx‎

Lines changed: 710 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/catalog/blocks/frost-sequence-camera-orbit.mdx‎

Lines changed: 386 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/catalog/blocks/glass-shard-title.mdx‎

Lines changed: 333 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/catalog/blocks/orbit-card.mdx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: "Orbit Card"
3+
description: "A single feature card orbits a dot sphere on approved Blender camera motion."
4+
---
5+
6+
import { InstallCommand } from "/snippets/install-command.jsx";
7+
8+
## Install
9+
10+
<InstallCommand command="npx hyperframes add orbit-card" item="orbit-card" />
11+
12+
That writes `compositions/orbit-card/orbit-card.html`, plus 10 supporting files under `compositions/orbit-card/assets/` and `compositions/orbit-card/`.
13+
14+
<iframe
15+
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
16+
title="orbit-card preview"
17+
loading="lazy"
18+
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/orbit-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card.png");document.body.appendChild(p)});<\/script></body></html>`}
19+
/>
20+
21+
## Add it to your video
22+
23+
It runs for 10 seconds at 1920×1080. Paste this into your composition:
24+
25+
```html index.html
26+
<div
27+
data-composition-id="orbit-card"
28+
data-composition-src="compositions/orbit-card/orbit-card.html"
29+
data-start="0"
30+
data-duration="10"
31+
data-track-index="1"
32+
data-width="1920"
33+
data-height="1080"
34+
></div>
35+
```
36+
37+
Move it in time with `data-start`. Put it on a different timeline row with
38+
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
39+
40+
## Source
41+
42+
<Accordion title="orbit-card.html">
43+
44+
```html
45+
<!DOCTYPE html>
46+
<html lang="en" data-composition-variables='[{"id":"feature1Title","type":"string","label":"Card title","default":"Always in sync","maxLength":28},{"id":"feature1Desc","type":"string","label":"Card description","default":"Changes reach every screen the moment they happen.","maxLength":110},{"id":"feature1Accent","type":"color","label":"Card accent","default":"#4cc9ff"},{"id":"cardOrbitDegrees","type":"number","label":"Card orbit degrees","description":"Total card-only vertical orbit during Blender frames 150–180 (4.9667–5.9667 seconds). Enter 180, 360, 720, or any angle. The sphere keeps its independent spin. The final angle holds after frame 180.","default":360,"min":-36000,"max":36000,"step":1}]'>
47+
<head>
48+
<meta charset="UTF-8">
49+
<meta name="viewport" content="width=1920, height=1080">
50+
<title>Orbit Card — approved Blender motion</title>
51+
<script src="assets/gsap-3.14.2.min.js"></script>
52+
<style>
53+
@font-face { font-family: Archivo; font-weight: 400; src: url('assets/archivo-regular.ttf'); }
54+
@font-face { font-family: Archivo; font-weight: 600; src: url('assets/archivo-semibold.ttf'); }
55+
* { box-sizing: border-box; margin: 0; padding: 0; }
56+
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #161718; }
57+
#oc-root { position: relative; width: 1920px; height: 1080px; overflow: hidden; font-family: Archivo, sans-serif; }
58+
#oc-stage { position: absolute; inset: 0; }
59+
#oc-stage canvas { width: 1920px; height: 1080px; display: block; }
60+
#oc-fontload { position: absolute; opacity: 0; pointer-events: none; }
61+
</style>
62+
</head>
63+
<body>
64+
<div id="oc-root" data-composition-id="orbit-card" data-start="0" data-duration="10" data-width="1920" data-height="1080">
65+
<section id="oc-stage" class="clip" data-start="0" data-duration="10" data-track-index="1"></section>
66+
<div id="oc-fontload" aria-hidden="true"><span style="font-weight:400">Aa</span><span style="font-weight:600">Aa</span></div>
67+
</div>
68+
<script type="module">
69+
import { renderAt } from './assets/orbit-scene.js';
70+
const state = { time: 0 };
71+
const timeline = gsap.timeline({ paused: true });
72+
timeline.to(state, { time: 10, duration: 10, ease: 'none', onUpdate: () => renderAt(state.time) });
73+
window.addEventListener('hf-seek', event => {
74+
if (typeof event.detail?.time === 'number') {
75+
timeline.totalTime(Math.max(0, Math.min(10, event.detail.time)), true);
76+
renderAt(event.detail.time);
77+
}
78+
});
79+
window.__timelines = window.__timelines || {};
80+
window.__timelines['orbit-card'] = timeline;
81+
const query = new URLSearchParams(location.search);
82+
if (query.has('play')) { timeline.repeat(query.has('loop') ? 999 : 0); timeline.play(0); }
83+
</script>
84+
</body>
85+
</html>
86+
```
87+
88+
</Accordion>
89+
90+
{/* hf:generated-footer */}
91+
92+
Tagged `3d-motion` `cards` `feature-reveal` `dots` `orbit` `blender-motion` `sphere`.
93+
94+
## Related topics
95+
96+
- [Browse the complete Catalog](/catalog)
97+
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
98+
- [Build a richer composition](/go-further)

0 commit comments

Comments
 (0)