> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Cosmic Orb > 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. # Cosmic Orb 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. **Cosmic Orb** ```html cosmic-orb.html Cosmic Orb
``` Copy npx hyperframes add cosmic-orb to the clipboard 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.md) 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`. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `hue` | `268` | 0deg to 360deg, step 1deg | | | `accent` | `196` | 0deg to 360deg, step 1deg | | | `spin` | `0.035` | 0turns/s to 0.5turns/s, step 0.005turns/s | | | `stars` | `1` | 0 to 2, step 0.05 | | | `glow` | `1` | 0 to 2, step 0.05 | | | `size` | `0.86` | 0.2 to 1.2, step 0.01 | | | `pulse` | `0` | 0 to 1, step 0.01 | | | `pulseEnvelope` | \`\` | string | | | `backdrop` | `#04040a` | color | | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` {/* hf:generated-footer */} Tagged `webgl` `shader` `background` `showcase` `3d`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)