Galaxy JS

Cosmic animations for the modern web

Animation Demos

Pulsar Effect

Neutron star pulse animation

Black Hole

Event horizon and accretion disk

Wormhole

Space-time tunnel effect

Supernova

Stellar explosion effect

Asteroid Field

Dynamic space debris

Cosmic Ray

High-energy particle effect

Dwarf Planet

Small celestial body

Nebula

Interstellar cloud formation

Binary Stars

Dual star system

Cosmic Dust

Interstellar particles

Time Dilation

Relativistic time effect

Quantum Tunneling

Quantum mechanical effect

CMB Radiation

Cosmic microwave background

Gravitational Waves

Space-time ripples

Dark Matter

Invisible mass effect

Solar Wind

Charged particle stream

Cosmic Strings

Topological defects

Hawking Radiation

Black hole evaporation

Cosmic Inflation

Rapid universe expansion

Multiverse

Parallel universes

Neutron Star

Ultra-dense stellar remnant

Quasar

Active galactic nucleus

Dark Energy

Mysterious expansion force

Cosmic Microwave Background

Echo of the Big Bang

Gravitational Lensing

Light bending by gravity

Spacetime Curvature

Einstein's warped space

Quantum Entanglement

Spooky action at a distance

Cosmic Ray Burst

High-energy particle explosion

Solar Flare

Solar magnetic explosion

Asteroid Impact

Celestial collision event

Spiral Galaxy

Majestic cosmic whirlpool

Cosmic Vortex

Spacetime whirlpool

Stellar Nursery

Birthplace of stars

Quantum Field

Subatomic reality

Dark Matter Web

Cosmic scaffolding

Neutron Star Collision

Cosmic gold factory

Cosmic Storm

Space weather

Interstellar Travel

Warp speed journey

Black Hole Merger

Cosmic dance of death

Cosmic Symphony

Music of the spheres

Documentation

Installation

Include GalaxyJS in your project:

<script src="js/main.js"></script>
<script src="js/animations.js"></script>
<link rel="stylesheet" href="css/animations.css">

Or install via npm:

npm install galaxyjs
# or
yarn add galaxyjs

Basic Usage

Initialize GalaxyJS and create animations:

// Initialize GalaxyJS
const galaxy = new GalaxyJS({
    debug: true,
    autoInit: true
});

// Create a pulsar animation
galaxy.animations.initPulsar('.pulsar-element', {
    frequency: 2,
    intensity: 0.8
});

// Create a black hole animation
galaxy.animations.initBlackHole('.blackhole-element', {
    eventHorizon: true,
    accretionDisk: true
});

API Reference

GalaxyJS Constructor

new GalaxyJS(options)

Options:

  • debug (boolean): Enable debug logging
  • autoInit (boolean): Auto-initialize on DOM ready
  • particleCount (number): Default particle count
  • trailLength (number): Mouse trail length

Animation Methods

All animation methods follow this pattern:

galaxy.animations.init[AnimationName](element, options)

Stellar Objects

Pulsar

galaxy.animations.initPulsar(element, {
    frequency: 2,        // Hz
    intensity: 0.8,      // 0-1
    waveCount: 3,        // Number of waves
    color: '#ffffff'     // Wave color
});

Black Hole

galaxy.animations.initBlackHole(element, {
    eventHorizon: true,      // Show event horizon
    accretionDisk: true,     // Show accretion disk
    rotationSpeed: 0.02,     // Rotation speed
    diskParticles: 50        // Number of particles
});

Neutron Star

galaxy.animations.initNeutronStar(element, {
    rotationSpeed: 0.02,     // Core rotation speed
    magneticField: true,     // Show magnetic field
    pulsarBeams: true        // Show pulsar beams
});

Supernova

galaxy.animations.initSupernova(element, {
    explosionForce: 100,     // Explosion intensity
    particleCount: 30,       // Number of particles
    duration: 3000           // Animation duration (ms)
});

Binary Stars

galaxy.animations.initBinaryStars(element, {
    orbitSpeed: 0.01,        // Orbital speed
    starSize: 12,            // Star size (px)
    orbitRadius: 30          // Orbit radius (px)
});

Solar Flare

galaxy.animations.initSolarFlare(element, {
    flareIntensity: 0.7,     // Flare intensity
    plasmaArcCount: 4,       // Number of plasma arcs
    eruptionSpeed: 0.03      // Eruption speed
});

Cosmic Phenomena

Wormhole

galaxy.animations.initWormhole(element, {
    depth: 200,              // Tunnel depth
    starCount: 20,           // Number of stars
    tunnelSpeed: 0.05        // Travel speed
});

Quasar

galaxy.animations.initQuasar(element, {
    accretionDiskSpeed: 0.03,    // Disk rotation speed
    jetStreamIntensity: 0.8,     // Jet stream intensity
    energyBurstRate: 0.1         // Burst frequency
});

Nebula

galaxy.animations.initNebula(element, {
    particleCount: 30,       // Number of particles
    cloudSize: 80,           // Cloud size (px)
    driftSpeed: 0.01         // Particle drift speed
});

Asteroid Field

galaxy.animations.initAsteroidField(element, {
    asteroidCount: 15,       // Number of asteroids
    fieldSize: 200,          // Field size (px)
    rotationSpeed: 0.01      // Rotation speed
});

Asteroid Impact

galaxy.animations.initAsteroidImpact(element, {
    impactForce: 0.8,        // Impact intensity
    debrisCount: 10,         // Number of debris pieces
    craterSize: 0.6          // Crater size multiplier
});

Cosmic Ray

galaxy.animations.initCosmicRay(element, {
    rayCount: 5,             // Number of rays
    speed: 2,                // Ray speed
    length: 50               // Ray length (px)
});

Cosmic Ray Burst

galaxy.animations.initCosmicRayBurst(element, {
    burstRate: 0.1,          // Burst frequency
    rayCount: 8,             // Number of rays
    energyWaveSpeed: 0.02    // Wave propagation speed
});

Solar Wind

galaxy.animations.initSolarWind(element, {
    particleCount: 20,       // Number of particles
    windSpeed: 3,            // Wind speed
    magneticField: true      // Show magnetic field
});

Cosmic Dust

galaxy.animations.initCosmicDust(element, {
    particleCount: 50,       // Number of particles
    driftSpeed: 0.005,       // Drift speed
    particleSize: 1          // Particle size (px)
});

Cosmic Strings

galaxy.animations.initCosmicStrings(element, {
    stringCount: 3,          // Number of strings
    vibrationSpeed: 0.02,    // Vibration speed
    stringLength: 60         // String length (px)
});

Quantum Effects

Quantum Tunneling

galaxy.animations.initQuantumTunneling(element, {
    barrierHeight: 50,       // Energy barrier height
    particleSpeed: 2,        // Particle speed
    tunnelProbability: 0.3   // Tunneling probability
});

Quantum Entanglement

galaxy.animations.initQuantumEntanglement(element, {
    entanglementStrength: 0.8,   // Entanglement strength
    particleSpinSpeed: 0.02,     // Spin speed
    fieldRadius: 30              // Field radius (px)
});

Hawking Radiation

galaxy.animations.initHawkingRadiation(element, {
    radiationRate: 5,        // Radiation frequency
    particleEnergy: 2,       // Particle energy
    evaporationSpeed: 0.01   // Evaporation speed
});

Relativity Effects

Time Dilation

galaxy.animations.initTimeDilation(element, {
    dilationFactor: 0.5,     // Time dilation factor
    clockSpeed: 0.01         // Clock tick speed
});

Gravitational Lensing

galaxy.animations.initGravitationalLensing(element, {
    lensMass: 0.8,           // Lens mass strength
    lightRayCount: 5,        // Number of light rays
    distortionStrength: 0.5  // Distortion intensity
});

Spacetime Curvature

galaxy.animations.initSpacetimeCurvature(element, {
    massStrength: 0.6,       // Mass effect strength
    fabricGridSize: 20,      // Grid size (px)
    curvatureWaves: true     // Show curvature waves
});

Gravitational Waves

galaxy.animations.initGravitationalWaves(element, {
    waveCount: 3,            // Number of waves
    waveSpeed: 2,            // Wave propagation speed
    amplitude: 20            // Wave amplitude (px)
});

Cosmic Background Effects

Dark Matter

galaxy.animations.initDarkMatter(element, {
    fieldStrength: 0.5,      // Field strength
    fieldRadius: 80,         // Field radius (px)
    visibleMatterOpacity: 0.5 // Visible matter opacity
});

Dark Energy

galaxy.animations.initDarkEnergy(element, {
    expansionRate: 0.005,    // Expansion rate
    fieldStrength: 0.6,      // Field strength
    particleCount: 20        // Number of particles
});

Cosmic Microwave Background

galaxy.animations.initCosmicMicrowave(element, {
    patternSpeed: 0.001,     // Pattern rotation speed
    temperatureVariations: true, // Show temperature variations
    noiseLevel: 0.1          // Background noise level
});

Cosmic Inflation

galaxy.animations.initCosmicInflation(element, {
    expansionRate: 0.1,      // Expansion rate
    fieldStrength: 0.8,      // Field strength
    duration: 6000           // Animation duration (ms)
});

Multiverse

galaxy.animations.initMultiverse(element, {
    universeCount: 3,        // Number of universes
    bubbleSize: 40,          // Bubble size (px)
    expansionSpeed: 0.01     // Expansion speed
});

Configuration

Global configuration options:

const galaxy = new GalaxyJS({
    debug: true,             // Enable debug mode
    autoInit: true,          // Auto-initialize
    particleCount: 100,      // Default particle count
    trailLength: 20,         // Mouse trail length
    theme: 'dark',           // Theme (dark/light)
    performance: 'high'      // Performance mode
});

Advanced Usage

Custom Particle Systems

// Create custom particle system
const particleSystem = galaxy.animations.createParticleSystem(container, {
    particleCount: 200,
    gravity: 0.1,
    friction: 0.98,
    bounce: 0.8
});

// Stop the system
particleSystem.isActive = false;

Mouse Trail Effects

// Create mouse trail
const mouseTrail = galaxy.animations.initMouseTrail(container, {
    trailLength: 30,
    particleSize: 4,
    fadeSpeed: 0.95
});

Gravity Simulation

// Create gravity simulation
const gravitySim = galaxy.animations.initGravitySimulation(container, {
    bodyCount: 8,
    gravity: 0.5
});

Event Handling

// Listen for animation events
document.addEventListener('galaxyjs:initialized', (e) => {
    console.log('GalaxyJS initialized', e.detail);
});

document.addEventListener('galaxyjs:demo-click', (e) => {
    console.log('Demo clicked:', e.detail.demoType);
});

Examples

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>GalaxyJS Example</title>
    <link rel="stylesheet" href="css/animations.css">
</head>
<body>
    <div class="pulsar-animation">
        <div class="pulsar-core"></div>
        <div class="pulsar-waves"></div>
    </div>
    
    <script src="js/main.js"></script>
    <script src="js/animations.js"></script>
    <script>
        // Initialize GalaxyJS
        const galaxy = new GalaxyJS({
            debug: true,
            autoInit: true
        });
        
        // Create pulsar animation
        galaxy.animations.initPulsar('.pulsar-animation', {
            frequency: 2,
            intensity: 0.8
        });
    </script>
</body>
</html>