ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-07 01:56:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat(registry): the video-primitive moves, documented and customisable (#3090)" (#3162)

Browse Source 
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
2026-08-10 14:47:47 -04:00
committed by GitHub
parent 3b53bfd2f7
commit c86d4013f5
2328 changed files with 5906 additions and 458525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/three-orbiting-cards/demo.html
Vendored
-148
View File
@@ -1,148 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Three Orbiting Cards - Demo</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
}
#demo {
width: 1920px;
height: 1080px;
display: grid;
place-items: center;
background: #f7f7f8;
font-family: Inter, system-ui, sans-serif;
}
.hf-advanced-three-orbiting-cards {
color: #111827;
font-family: Inter, system-ui, sans-serif;
}
.hf-advanced-three-orbiting-cards {
position: relative;
width: 760px;
height: 430px;
border-radius: 30px;
overflow: hidden;
background: #050816;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
/* ponytail: zoom scales the whole card without touching GSAP-animated state */
zoom: 1.65;
}
.hf-advanced-three-orbiting-cards canvas {
display: block;
width: 100%;
height: 100%;
}
.hf-advanced-three-orbiting-cards .label {
position: absolute;
left: 28px;
bottom: 26px;
color: #fff;
}
.hf-advanced-three-orbiting-cards h3 {
margin: 0;
font-size: 34px;
letter-spacing: -0.05em;
}
.hf-advanced-three-orbiting-cards p {
margin: 6px 0 0;
font-size: 15px;
color: rgba(255, 255, 255, 0.72);
}
</style>
</head>
<body>
<div
id="demo"
data-composition-id="three-orbiting-cards-demo"
data-start="0"
data-width="1920"
data-height="1080"
data-duration="5"
>
<div class="hf-advanced-three-orbiting-cards">
<canvas></canvas>
<div class="label">
<h3>Three Orbiting Cards</h3>
<p>
A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic
renders.
</p>
</div>
</div>
</div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
const host = document.querySelector(".hf-advanced-three-orbiting-cards");
const canvas = host.querySelector("canvas");
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(1);
renderer.setSize(760, 430, false);
renderer.setClearColor(0x050816, 1);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
camera.position.set(0, 0, 7);
const group = new THREE.Group();
scene.add(group);
const material = new THREE.MeshStandardMaterial({
color: 0x60a5fa,
metalness: 0.18,
roughness: 0.38,
});
const accent = new THREE.MeshStandardMaterial({
color: 0xa78bfa,
metalness: 0.12,
roughness: 0.44,
});
const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
for (let i = 0; i < 9; i++) {
const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
const angle = (i / 9) * Math.PI * 2;
const radius = 2.15;
mesh.position.set(
Math.cos(angle) * radius,
Math.sin(angle) * radius * 0.55,
Math.sin(angle) * 0.7,
);
mesh.rotation.z = angle;
group.add(mesh);
}
scene.add(new THREE.AmbientLight(0xffffff, 1.2));
const light = new THREE.DirectionalLight(0xffffff, 2.2);
light.position.set(2, 3, 4);
scene.add(light);
const state = { progress: 0 };
function render() {
const t = state.progress;
group.rotation.y = t * Math.PI * 2;
group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
renderer.render(scene, camera);
}
render();
window.__hfThreeRender_three_orbiting_cards = { state, render };
const tl = window.gsap.timeline({ paused: true });
tl.to(state, { progress: 1, duration: 4, ease: "none", onUpdate: render }, 0.5);
tl.set({}, {}, 5);
window.__timelines = window.__timelines || {};
window.__timelines["three-orbiting-cards-demo"] = tl;
</script>
</body>
</html>