--- title: "Spiral Galaxy" description: "A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own." --- import { InstallCommand } from "/snippets/install-command.jsx"; import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; ```html spiral-galaxy.html Spiral Galaxy
``` ## Install That writes one file: `compositions/spiral-galaxy.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: - `stars` — Star count. Defaults to `20000`. - `arms` — Arm count. Defaults to `3`. - `rate` — Rotation rate. Defaults to `0.25`. - `glow` — Core brightness. Defaults to `1.9`. - `size` — Star size. Defaults to `10`. - `core` — Core colour. Defaults to `#ffa575`. - `rim` — Rim colour. Defaults to `#311599`. ## 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 | | --- | --- | --- | --- | | `stars` | `20000` | 2000 to 40000, step 1000 | | | `arms` | `3` | 2 to 8, step 1 | | | `rate` | `0.25` | 0rad/s to 1.5rad/s, step 0.05rad/s | | | `glow` | `1.9` | 0.2 to 4, step 0.1 | | | `size` | `10` | 2px to 40px, step 1px | | | `core` | `#ffa575` | color | | | `rim` | `#311599` | 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
``` ## Source ```html Spiral Galaxy
``` {/* hf:generated-footer */} Tagged `hero` `space` `particles` `webgl` `background`. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in Studio](/studio/assets-and-blocks) - [Build a richer composition](/go-further)