3D Rotating Starfield with Constellations (Dark Mode Psychedelic)

An interactive 3D starfield animation built with HTML5 Canvas and vanilla JavaScript. Features a rotating perspective view with neon stars hurtling through a deep cosmic void, chromatic halos, drifting hue-cycling auras, and click-triggered plasma bursts.

Features

• Dark Mode Psychedelic: Deep violet void background with breathing, chroma-shifting radial auras
• Neon Stars: Every star pulses through its own slow hue cycle, with layered chroma-shifted halos using additive blending
• 3D Perspective: Stars move through 3D space with realistic depth perception
• Rotation Effect: The entire starfield slowly rotates around the center
• Mouse Interaction: Move the mouse to steer the direction of motion
• Parallax Drift: The whole field drifts toward the cursor for depth
• Smooth Easing: Motion follows the mouse with eased, natural response
• Plasma Constellation Lines: Nearby stars connect with hue-matched, distance-faded neon threads
• Additive Glow: Overlapping glows bloom into white-hot cores for a hallucinatory effect
• Click Bursts: Click anywhere to fire a burst of color-cycling particles with a magenta screen flash
• Responsive Design: Automatically adjusts to window size changes
• Smooth Animation: Uses requestAnimationFrame for optimal performance
• Efficient Rendering: Spatial grid optimization for line drawing

How It Works

• 250 stars are generated with random positions, colors, sizes, speeds, and per-star hue animation phases
• Each star exists in 3D space (x, y, z coordinates)
• Stars rotate around the center using trigonometric functions
• Perspective projection creates the illusion of depth
• Two counter-drifting radial gradients (offset by mouse parallax) provide a living, breathing background aura
• Every star and particle cycles its own hue over time for constant psychedelic motion
• Glow layers are rendered with globalCompositeOperation = 'lighter' so overlaps supernova into white
• Constellation lines are tinted to the average hue of their two endpoints and fade over distance
• Stars that move off-screen are recycled to the back of the scene with fresh hues

Mouse Control

• The mouse position is normalized relative to the canvas center (-1..1 per axis)
• That direction vector is eased each frame and used for three effects:
  1. Rotation steering – moving the mouse left/right speeds up or reverses rotation
  2. Parallax shift – stars shift toward the mouse to fake depth/direction
  3. Aura offset – the background radial gradients drift with the cursor
  4. Drift & recycling – the field drifts toward the cursor, and recycled stars re-enter from the opposite side

Usage

Simply open index.html in a web browser. The animation starts automatically and fills the entire viewport. Move your mouse around to steer the motion, click to fire psychedelic bursts.

Customization

You can adjust various parameters in constants.js:

• NUM_STARS: Number of stars (default: 250)
• MIN_STAR_SIZE / MAX_STAR_SIZE: Star size range
• MIN_SPEED / MAX_SPEED: Star movement speed range
• PERSPECTIVE_FACTOR: Controls depth effect intensity
• ROTATION_SPEED: Base rotation speed (slow, stately drift)
• ROTATION_NOISE_STRENGTH / NOISE_SMOOTHING: Random wandering added to the rotation for organic motion
• PER_STAR_SPEED_VARIANCE: How much each star's forward speed wobbles independently
• BG_COLOR: Background color (deep psychedelic void)
• FIREWORKS_BG_COLOR: Burst flash color
• SIZE_DISTRIBUTION: Array with size distribution probabilities
• LINE_DISTANCE: Maximum distance to connect stars with lines
• LINE_COLOR: Base line color (endpoints override with hue-matched tint)
• MOUSE_DRIFT_STRENGTH: How far the field drifts toward the cursor (px)
• MOUSE_X_SHIFT / MOUSE_Y_SHIFT: Parallax shift strength
• MOUSE_EASING: How fast motion follows the mouse (0..1)
• MOUSE_ROTATION_INFLUENCE: How much horizontal mouse motion changes rotation speed
• FORWARD_SPEED_MULTIPLIER: Speed of stars coming toward viewer
• HUE_CYCLE_SPEED: Global background hue drift rate (degrees/frame) — kept low for a slow, moody wash
• PULSE_SPEED / PULSE_AMPLITUDE: Background breathing pulse
• CHROMA_SHIFT: Hue offset between the outer halo layer and the star core

Files

• index.html: Main HTML structure
• index.js: Animation controller + mouse tracking
• renderer.js: Canvas rendering, psychedelic gradients, neon glow, constellation lines
• star.js: Star generation with per-star hue animation
• constants.js: Configuration parameters
• styles.css: Full-screen dark styling

Psychedelic Tips

• Try dragging the cursor in slow circles — the rotation steering + parallax make the whole field swirl
• Rapid clicking paints plasma webs as burst particles interconnect with passing stars
• Tweak HUE_CYCLE_SPEED higher for an even more vibrant wash, or lower for subtle moody shifting