hyperframes/docs/catalog/components/three-orbiting-cards.mdx

---
title: "Three Orbiting Cards"
description: "A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders."
---

import { InstallCommand } from "/snippets/install-command.jsx";

## Install

<InstallCommand command="npx hyperframes add three-orbiting-cards" item="three-orbiting-cards" />

That writes one file: `compositions/components/three-orbiting-cards.html`.

<iframe
  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
  title="three-orbiting-cards preview"
  loading="lazy"
  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/components/three-orbiting-cards.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/components/three-orbiting-cards.png");document.body.appendChild(p)});<\/script></body></html>`}
/>

## Source

<Accordion title="three-orbiting-cards.html">

```html
<!--
  Three Orbiting Cards - advanced HyperFrames primitive.

  This is intentionally seekable: drive it from a paused GSAP timeline.
  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
-->

<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>

<style>
  .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);
  }
  .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;
    color: rgba(255, 255, 255, 0.62);
  }
</style>

<!--
  Timeline integration:
  const startTime = 0;
  if (window.__hfThreeRender_three_orbiting_cards) { tl.to(window.__hfThreeRender_three_orbiting_cards.state, { progress: 1, duration: 4, ease: 'none', onUpdate: window.__hfThreeRender_three_orbiting_cards.render }, startTime); }
-->

<!-- Optional Three.js adapter for demos. In production, copy this once and dispose renderer resources when the host composition is removed. -->
<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 };
</script>
```

</Accordion>

## Usage

Open `compositions/components/three-orbiting-cards.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.

{/* hf:generated-footer */}

Tagged `video-primitive` `three-js` `webgl` `hyperframes-native`.

## Related topics

- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)