Skip to main content

Spiral Galaxy

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.

Add it to your video

It runs for 10 seconds at 1920×1080. Paste this into your composition:
index.html
Move it in time with data-start. Put it on a different timeline row with data-track-index. See 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: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:
Tagged hero space particles webgl background.

Related topics