Cosmic animations for the modern web
Neutron star pulse animation
Event horizon and accretion disk
Space-time tunnel effect
Stellar explosion effect
Dynamic space debris
High-energy particle effect
Small celestial body
Interstellar cloud formation
Dual star system
Interstellar particles
Relativistic time effect
Quantum mechanical effect
Cosmic microwave background
Space-time ripples
Invisible mass effect
Charged particle stream
Topological defects
Black hole evaporation
Rapid universe expansion
Parallel universes
Ultra-dense stellar remnant
Active galactic nucleus
Mysterious expansion force
Echo of the Big Bang
Light bending by gravity
Einstein's warped space
Spooky action at a distance
High-energy particle explosion
Solar magnetic explosion
Celestial collision event
Majestic cosmic whirlpool
Spacetime whirlpool
Birthplace of stars
Subatomic reality
Cosmic scaffolding
Cosmic gold factory
Space weather
Warp speed journey
Cosmic dance of death
Music of the spheres
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
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
});
new GalaxyJS(options)
Options:
debug
(boolean): Enable debug loggingautoInit
(boolean): Auto-initialize on DOM readyparticleCount
(number): Default particle counttrailLength
(number): Mouse trail lengthAll animation methods follow this pattern:
galaxy.animations.init[AnimationName](element, options)
galaxy.animations.initPulsar(element, {
frequency: 2, // Hz
intensity: 0.8, // 0-1
waveCount: 3, // Number of waves
color: '#ffffff' // Wave color
});
galaxy.animations.initBlackHole(element, {
eventHorizon: true, // Show event horizon
accretionDisk: true, // Show accretion disk
rotationSpeed: 0.02, // Rotation speed
diskParticles: 50 // Number of particles
});
galaxy.animations.initNeutronStar(element, {
rotationSpeed: 0.02, // Core rotation speed
magneticField: true, // Show magnetic field
pulsarBeams: true // Show pulsar beams
});
galaxy.animations.initSupernova(element, {
explosionForce: 100, // Explosion intensity
particleCount: 30, // Number of particles
duration: 3000 // Animation duration (ms)
});
galaxy.animations.initBinaryStars(element, {
orbitSpeed: 0.01, // Orbital speed
starSize: 12, // Star size (px)
orbitRadius: 30 // Orbit radius (px)
});
galaxy.animations.initSolarFlare(element, {
flareIntensity: 0.7, // Flare intensity
plasmaArcCount: 4, // Number of plasma arcs
eruptionSpeed: 0.03 // Eruption speed
});
galaxy.animations.initWormhole(element, {
depth: 200, // Tunnel depth
starCount: 20, // Number of stars
tunnelSpeed: 0.05 // Travel speed
});
galaxy.animations.initQuasar(element, {
accretionDiskSpeed: 0.03, // Disk rotation speed
jetStreamIntensity: 0.8, // Jet stream intensity
energyBurstRate: 0.1 // Burst frequency
});
galaxy.animations.initNebula(element, {
particleCount: 30, // Number of particles
cloudSize: 80, // Cloud size (px)
driftSpeed: 0.01 // Particle drift speed
});
galaxy.animations.initAsteroidField(element, {
asteroidCount: 15, // Number of asteroids
fieldSize: 200, // Field size (px)
rotationSpeed: 0.01 // Rotation speed
});
galaxy.animations.initAsteroidImpact(element, {
impactForce: 0.8, // Impact intensity
debrisCount: 10, // Number of debris pieces
craterSize: 0.6 // Crater size multiplier
});
galaxy.animations.initCosmicRay(element, {
rayCount: 5, // Number of rays
speed: 2, // Ray speed
length: 50 // Ray length (px)
});
galaxy.animations.initCosmicRayBurst(element, {
burstRate: 0.1, // Burst frequency
rayCount: 8, // Number of rays
energyWaveSpeed: 0.02 // Wave propagation speed
});
galaxy.animations.initSolarWind(element, {
particleCount: 20, // Number of particles
windSpeed: 3, // Wind speed
magneticField: true // Show magnetic field
});
galaxy.animations.initCosmicDust(element, {
particleCount: 50, // Number of particles
driftSpeed: 0.005, // Drift speed
particleSize: 1 // Particle size (px)
});
galaxy.animations.initCosmicStrings(element, {
stringCount: 3, // Number of strings
vibrationSpeed: 0.02, // Vibration speed
stringLength: 60 // String length (px)
});
galaxy.animations.initQuantumTunneling(element, {
barrierHeight: 50, // Energy barrier height
particleSpeed: 2, // Particle speed
tunnelProbability: 0.3 // Tunneling probability
});
galaxy.animations.initQuantumEntanglement(element, {
entanglementStrength: 0.8, // Entanglement strength
particleSpinSpeed: 0.02, // Spin speed
fieldRadius: 30 // Field radius (px)
});
galaxy.animations.initHawkingRadiation(element, {
radiationRate: 5, // Radiation frequency
particleEnergy: 2, // Particle energy
evaporationSpeed: 0.01 // Evaporation speed
});
galaxy.animations.initTimeDilation(element, {
dilationFactor: 0.5, // Time dilation factor
clockSpeed: 0.01 // Clock tick speed
});
galaxy.animations.initGravitationalLensing(element, {
lensMass: 0.8, // Lens mass strength
lightRayCount: 5, // Number of light rays
distortionStrength: 0.5 // Distortion intensity
});
galaxy.animations.initSpacetimeCurvature(element, {
massStrength: 0.6, // Mass effect strength
fabricGridSize: 20, // Grid size (px)
curvatureWaves: true // Show curvature waves
});
galaxy.animations.initGravitationalWaves(element, {
waveCount: 3, // Number of waves
waveSpeed: 2, // Wave propagation speed
amplitude: 20 // Wave amplitude (px)
});
galaxy.animations.initDarkMatter(element, {
fieldStrength: 0.5, // Field strength
fieldRadius: 80, // Field radius (px)
visibleMatterOpacity: 0.5 // Visible matter opacity
});
galaxy.animations.initDarkEnergy(element, {
expansionRate: 0.005, // Expansion rate
fieldStrength: 0.6, // Field strength
particleCount: 20 // Number of particles
});
galaxy.animations.initCosmicMicrowave(element, {
patternSpeed: 0.001, // Pattern rotation speed
temperatureVariations: true, // Show temperature variations
noiseLevel: 0.1 // Background noise level
});
galaxy.animations.initCosmicInflation(element, {
expansionRate: 0.1, // Expansion rate
fieldStrength: 0.8, // Field strength
duration: 6000 // Animation duration (ms)
});
galaxy.animations.initMultiverse(element, {
universeCount: 3, // Number of universes
bubbleSize: 40, // Bubble size (px)
expansionSpeed: 0.01 // Expansion speed
});
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
});
// 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;
// Create mouse trail
const mouseTrail = galaxy.animations.initMouseTrail(container, {
trailLength: 30,
particleSize: 4,
fadeSpeed: 0.95
});
// Create gravity simulation
const gravitySim = galaxy.animations.initGravitySimulation(container, {
bodyCount: 8,
gravity: 0.5
});
// 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);
});
<!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>