@mugglemagic/stargate-loader

A Stargate-style dialing sequence as a loading animation. Zero-dependency Web Component: the inner ring spins, seven of the gate's nine chevrons encode Earth's canonical address, the point of origin locks under the master chevron, and the wormhole opens.

This is a fan project, not affiliated with or endorsed by MGM, Amazon, or the Stargate franchise. See Licensing.

Install

npm install @mugglemagic/stargate-loader

Or use it straight from a CDN:

<script type="module" src="https://unpkg.com/@mugglemagic/stargate-loader"></script>

Quick start

<script type="module">
  import '@mugglemagic/stargate-loader';
</script>

<!-- Indeterminate loader: dials forever -->
<gate-loader size="320"></gate-loader>

Driving it with real loading progress:

<gate-loader id="loader" mode="manual"></gate-loader>

<script type="module">
  import '@mugglemagic/stargate-loader';
  const loader = document.getElementById('loader');

  // Map your progress (0–1) straight onto the chevrons.
  // Jumps are fine — engagements queue and play sequentially.
  loader.progress = bytesLoaded / bytesTotal;

  loader.addEventListener('wormhole', () => showApp());
</script>

Or step it discretely — seven chevrons map neatly onto seven boot stages:

await initDatabase();  loader.engageNext();
await loadAssets();    loader.engageNext();
// ...
loader.complete(); // engages the rest and opens the gate

API

Attributes / properties

| Attribute | Property | Values | Default | Notes | |---|---|---|---|---| | size | — | px number or any CSS length | 320px | Also settable via the --size custom property | | mode | mode | loop | manual | loop | loop dials continuously; manual waits for you | | canon | canon | series | movie | series | Series: the top chevron clunks for every symbol. Movie: each chevron clunks itself | | address | address | seven comma-separated glyph numbers (1–39) | 28,26,5,36,11,29,1 | Earth's address, per Solitudes. Invalid input falls back to the default | | no-status | — | boolean attribute | absent | Hides the "chevron four encoded" status line | | — | progress | 0–1 | 0 | Manual mode. Monotonic; engages floor(progress × 7) chevrons. 1 opens the gate |

Methods

• engageNext(): Promise<void> — engage the next chevron (manual mode)
• complete(): Promise<void> — engage all remaining chevrons and open the gate
• reset(): void — shut down and return to standby (restarts the loop in loop mode)

Events

• chevron — per engagement; detail: { chevron: 1–7, glyph: 1–39, locked }
• wormhole — the gate opened
• cycle — loop mode started a new dial
• reset — reset() was called

Theming

CSS custom properties on the host: --size, --glyph, --amber, --amber-hot, --horizon, --metal-hi, --metal-mid, --metal-lo. Shadow parts exposed: ::part(gate), ::part(horizon), ::part(status).

Respects prefers-reduced-motion: spins collapse to sequential light-ups, and the kawoosh is skipped.

Glyphs

The 39 Milky Way glyphs are inlined at build time from Wikimedia Commons ("Stargate SG·1 symbol 01–39", CC BY-SA 3.0):

npm run build:glyphs          # regenerates src/glyphs.js
SVGO=1 npm run build:glyphs   # same, minified via svgo if installed

prepublishOnly runs this automatically, so a published package always ships with the glyphs inlined — no network requests, no hotlinking. If src/glyphs.js is the placeholder (fresh clone), the component falls back to hotlinking Commons and logs a warning; that's for local development only.

Licensing

Three layers, kept deliberately separate:

• Code — MIT. See LICENSE.
• Glyph artwork — the 39 glyph SVGs are derived from Wikimedia Commons uploads licensed CC BY-SA 3.0. Attribution and license details in LICENSES-GLYPHS.md, and the generated src/glyphs.js carries the notice in its header. If you redistribute modified glyph artwork, share-alike applies to it.
• The franchise — Stargate, the gate design, and the glyph designs originate with the Stargate franchise (MGM/Amazon). This is a non-commercial fan work. Don't embed it in commercial products, and don't remove the attributions.

Accessibility

The status line is an aria-live="polite" region announcing each engagement, the glyph images are aria-hidden decoration, and reduced-motion preferences are honoured. If you hide the status line with no-status, consider announcing progress elsewhere.