Creates an ambient canvas-based starfield animation. Pass null (or omit the selector) for a full-page fixed overlay, or provide a selector to scope stars inside a specific container. Stars oscillate in brightness using a sinusoidal function and are drawn as 4-pointed shapes with a centre glow.

// Full-page overlay
const stars = Domma.effects.twinkle(null);

// Container-scoped stars
const stars = Domma.effects.twinkle('#hero-section', {
  count: 80,
  colour: 'rgba(200, 220, 255, 0.9)',
  shape: 'circle'
});

// Control methods
stars.pause();
stars.resume();
stars.stop();
stars.restart();
stars.destroy();

Options

Control Methods

const stars = Domma.effects.twinkle('#section');

stars.pause();      // Pause rendering (stars freeze in place)
stars.resume();     // Resume from where it paused
stars.stop();       // Stop and cancel animation frame
stars.restart();    // Recreate stars and restart
stars.destroy();    // Stop + remove canvas from DOM
stars.isRunning();  // true when animating (not paused)
stars.isPaused();   // true when paused mid-animation

Stars rendered inside a dark section element. The canvas is sized to the container and uses position: absolute so content above it remains interactive.

const stars = Domma.effects.twinkle('#star-container', {
  count: 80,
  minSize: 1,
  maxSize: 3,
  colour: 'rgba(255, 240, 200, 0.9)',
  respectMotionPreference: false
});

Pass null as the selector to create a position: fixed canvas overlay that covers the entire viewport. Stars sit behind page content via pointer-events: none. This is the mode used on the Domma splash page.

// null selector creates a full-page fixed canvas
const stars = Domma.effects.twinkle(null, {
  count: 120,
  colour: 'rgba(255, 240, 200, 0.85)',
  zIndex: 0   // behind all page content
});

Adjust options and click Apply to see the changes.

The shape option controls how each star is drawn. 'star' renders a 4-pointed shape with a centre glow. 'circle' renders a soft filled dot.

// 4-pointed star (default)
Domma.effects.twinkle('#shape-star', { shape: 'star', count: 60 });

// Circular dot
Domma.effects.twinkle('#shape-circle', { shape: 'circle', count: 60 });