diff --git a/docs/catalog/blocks/cosmic-orb.mdx b/docs/catalog/blocks/cosmic-orb.mdx new file mode 100644 index 0000000000..c90a985381 --- /dev/null +++ b/docs/catalog/blocks/cosmic-orb.mdx @@ -0,0 +1,57 @@ +--- +title: "Cosmic Orb" +description: "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge." +--- + + + +## Install + +```bash Terminal +npx hyperframes add cosmic-orb +``` + +That writes one file: `compositions/cosmic-orb.html`. + +## Add it to your video + +It runs for 10 seconds at 1920×1080. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Change how it looks + +Set these CSS variables on the block: + +- `--hue` — Nebula hue. Defaults to `268`. +- `--accent` — Accent hue. Defaults to `196`. +- `--spin` — Spin rate (turns per second). Defaults to `0.035`. +- `--stars` — Star density. Defaults to `1`. +- `--glow` — Glow intensity. Defaults to `1`. +- `--size` — Orb size (fraction of frame height). Defaults to `0.86`. +- `--pulse` — Beat pulse (0-1, flat value when no envelope is set). Defaults to `0`. +- `--pulseenvelope` — Beat pulse envelope: comma-separated 0-1 samples spread evenly across the clip. Defaults to ``. +- `--backdrop` — Backdrop. Defaults to `#04040a`. + +{/* hf:generated-footer */} + +Tagged `webgl` `shader` `background` `showcase` `3d`. + +## Related topics + +- [Browse the complete Catalog](/catalog) +- [Add assets and Catalog items in Studio](/studio/assets-and-blocks) +- [Build a richer composition](/go-further) diff --git a/docs/docs.json b/docs/docs.json index c51c359780..21bd79169a 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -405,6 +405,7 @@ "catalog/blocks/code-snippet-solarized-light", "catalog/blocks/code-snippet-visual-studio-dark", "catalog/blocks/code-snippet-visual-studio-light", + "catalog/blocks/cosmic-orb", "catalog/blocks/north-korea-locked-down", "catalog/blocks/nyc-paris-flight", "catalog/blocks/ui-3d-reveal", diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json index 8255b52d5e..3229ecbc60 100644 --- a/docs/public/catalog-index.json +++ b/docs/public/catalog-index.json @@ -811,6 +811,21 @@ "href": "/catalog/blocks/code-typing", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" }, + { + "name": "cosmic-orb", + "type": "block", + "title": "Cosmic Orb", + "description": "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.", + "tags": [ + "webgl", + "shader", + "background", + "showcase", + "3d" + ], + "href": "/catalog/blocks/cosmic-orb", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cosmic-orb.png" + }, { "name": "cross-warp-morph", "type": "block", diff --git a/registry/blocks/cosmic-orb/cosmic-orb.html b/registry/blocks/cosmic-orb/cosmic-orb.html new file mode 100644 index 0000000000..6ed6abe3c3 --- /dev/null +++ b/registry/blocks/cosmic-orb/cosmic-orb.html @@ -0,0 +1,416 @@ + + + + + +