The Architecture

Three principles drive the implementation:

1. Single canvas element — never create DOM nodes per star
2. requestAnimationFrame — sync with the display refresh rate
3. Per-star state — each star has its own twinkle phase and speed

Star Data Model

function randomStar() {
  return {
    x:     Math.random() * W,
    y:     Math.random() * H,
    r:     Math.random() * 1.4 + 0.2,     // radius 0.2–1.6px
    alpha: Math.random() * 0.7 + 0.2,     // base brightness
    speed: Math.random() * 0.003 + 0.001, // twinkle speed
    phase: Math.random() * Math.PI * 2,   // initial phase offset
    depth: Math.random()                   // parallax depth 0=far, 1=close
  };
}

The phase offset is critical — without it, all stars twinkle in sync, which looks fake.

The Draw Loop

var t = 0;

function draw() {
  ctx.clearRect(0, 0, W, H);
  t += 0.016; // ~60fps time increment

  for (var i = 0; i < stars.length; i++) {
    var s = stars[i];

    // Twinkle: sine wave modulates the base alpha
    var twinkle = s.alpha * (0.75 + 0.25 * Math.sin(t * (s.speed * 200) + s.phase));

    // Parallax: deeper stars move more on scroll
    var dy = (s.y + scrollY * s.depth * 0.04) % H;

    ctx.beginPath();
    ctx.arc(s.x, dy, s.r, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255,255,255,' + twinkle.toFixed(3) + ')';
    ctx.fill();

    // Larger stars get a soft purple halo
    if (s.r > 1.0) {
      ctx.beginPath();
      ctx.arc(s.x, dy, s.r * 2.5, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(200,180,255,' + (twinkle * 0.15).toFixed(3) + ')';
      ctx.fill();
    }
  }

  requestAnimationFrame(draw);
}

Parallax on Scroll

The parallax is simple: each star has a depth value (0–1). On scroll, we offset the star’s y position by scrollY * depth * factor. Stars with depth=0 don’t move (far away), stars with depth=1 move the most (close).

var scrollY = 0;
window.addEventListener('scroll', function () {
  scrollY = window.scrollY;
}, { passive: true }); // passive = no jank

Using passive: true is essential — it tells the browser your scroll handler won’t call preventDefault(), enabling smoother scrolling.

Resizing

function resize() {
  W = canvas.width  = window.innerWidth;
  H = canvas.height = window.innerHeight;
}

window.addEventListener('resize', function () {
  resize();
  initStars(); // re-randomize after resize
}, { passive: true });

Always call initStars() after resize — otherwise stars cluster at the edges of the old canvas size.

Performance Numbers

On a MacBook M1, 320 stars run at <0.1ms per frame. You can push to 1000+ stars before noticing any impact. The bottleneck is canvas arc() calls, not JS logic.

To profile: open Chrome DevTools → Performance tab → record while scrolling.

What Makes This Theme Different

Most dark themes just use a dark background. Galaxy Theme builds an actual space environment:

• Canvas starfield — 320 stars rendered via requestAnimationFrame, each with individual twinkle speed and parallax depth relative to scroll
• CSS nebula layers — three animated radial gradients create atmospheric depth without images
• Shooting stars — pure CSS @keyframes animations, three lanes across the viewport
• Pulsar featured card — your latest post pulses with a ring animation, like a magnetar

Quick Configuration

galaxy:
  nebula: "purple"   # purple | blue | gold | cyan | red
  stars: "normal"    # sparse | normal | dense
  shooting_stars: true
  comet_progress: true

Change nebula: "blue" for a blue-white star cluster feel. Change to "gold" for a warm nebula aesthetic.

Writing Posts

Create files in _posts/ with filename YYYY-MM-DD-title.md:

---
layout: post
title: "My Deep Dive"
date: 2024-01-15
tags: [tutorial, css]
description: "Short excerpt for post cards."
---

Content goes here...

The first post automatically gets the “Pulsar” featured treatment on the home page.

Performance

The canvas starfield uses requestAnimationFrame with a single canvas — no DOM elements per star. On a mid-range device: ~0.1ms per frame for 320 stars.

Shooting stars use CSS animations only — zero JS.