100%

Blurry Spinning Rainbow Starfield

✓ Published2🌍 Public

Last edited Aug 2, 2025

Created on Aug 2, 2025

A colorful starfield animation displays 800 glowing stars moving through 3D space with a rotating perspective and dark cosmic background. Stars appear in vibrant HSL colors with varying sizes and speeds, creating a luminous, ethereal effect. The animation uses HTML5 Canvas with `requestAnimationFrame`, applying trigonometric rotation and perspective projection to simulate depth as stars move toward the viewer and recycle off-screen.

AI-generated description

3D Rotating Starfield (Dark Mode)

An interactive 3D starfield animation built with HTML5 Canvas and vanilla JavaScript. Features a rotating perspective view with colorful stars moving through 3D space in a dark cosmic environment.

Features

Dark Mode: Features a deep space background with vibrant stars
3D Perspective: Stars move through 3D space with realistic depth perception
Rotation Effect: The entire starfield slowly rotates around the center
Colorful Stars: Each star has a vibrant hue generated using HSL colors
Glow Effects: Stars have luminous glow effects for an ethereal appearance
Responsive Design: Automatically adjusts to window size changes
Smooth Animation: Uses requestAnimationFrame for optimal performance

How it Works

2000 stars are generated with random positions, colors, sizes, and speeds
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
Stars that move off-screen are recycled to the back of the scene

Usage

Simply open index.html in a web browser. The animation starts automatically and fills the entire viewport.

Customization

You can adjust various parameters in constants.js:

NUM_STARS: Number of stars (default: 2000)
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: How fast the starfield rotates
BG_COLOR: Background color (dark space theme)

Files

index.html: Main HTML structure
index.js: Animation controller
renderer.js: Canvas rendering logic
star.js: Star generation and properties
constants.js: Configuration parameters
styles.css: Basic styling for full-screen display

MIT Licensed

Similar vizzes

Loading thumbnail…

Spinning Rainbow Starfield

This animation presents a colorful starfield viewed from a single point, with 2000 stars moving through three-dimensional space while the entire scene rotates around the center. The stars appear in random colors and sizes, leaving faint trails as they travel forward. Built with vanilla JavaScript and HTML5 Canvas, the piece uses trigonometric functions for rotation, a perspective projection formula to simulate depth, and `requestAnimationFrame` for smooth animation.

CCurran Kelleher

92% match

Loading thumbnail…

Light Mode Starfield

A colorful starfield animation rendered on an HTML5 Canvas, with 800 stars moving through 3D space against a light background. The stars rotate around the center using trigonometric calculations and are projected with perspective depth. Each star features a distinct HSL color, size, and speed, and stars are recycled when they move off-screen. The animation runs with requestAnimationFrame, and the canvas resizes to fill the viewport.

CCurran Kelleher

88% match

Loading thumbnail…

Gradient Starfield

This example shows a 3D starfield animation with 2,000 colorful stars moving through space and slowly rotating around the center. It runs on HTML5 Canvas and vanilla JavaScript, using `requestAnimationFrame` for smooth animation. Stars are generated with random positions, sizes, speeds, and colors, then rendered with perspective projection and recycled when they exit the viewport. The code uses trigonometric functions for rotation and a perspective factor for depth perception, with a translucent background to create subtle trails.

CCurran Kelleher

87% match

Loading thumbnail…

Fork of Spinning Rainbow Starfield

A fork of curran’s spinning rainbow starfield renders 4,000 stars in true 3D using Three.js and WebGL. Stars move toward the viewer, shifting into colorful spheres that reset ahead of the camera when they drift past it. Mouse movement steers the flight direction, with inertia smoothing the turns, while a crosshair marks the aiming point. The animation runs continuously, repositioning stars as needed to create the sensation of flight through an endless, star-filled space.

CCurran Kelleher

81% match

Loading thumbnail…

Jazzy Starfield

This animated visualization presents a 3D starfield with jazz-inspired movement and color. Over 1,200 stars pulse, sparkle, and rotate through perspective space, using layered glow effects to create a dramatic, atmospheric display. The animation is rendered with HTML5 Canvas and JavaScript, using `requestAnimationFrame` for smooth performance. Each star features dynamic timing for pulsing and improvisational movement deviations, with colors drawn from jazz-associated palettes including gold, blue, red, white, and copper.

CCurran Kelleher

81% match

Loading thumbnail…

Wiggly Worms

A 3D starfield animation displays 800 colorful stars wiggling through dark space with a rotating perspective and a continuous hue shift across the color spectrum. Each star, generated with random positions, sizes, and speeds, undulates via sinusoidal wave functions and recycles when moving off-screen. The animation uses vanilla JavaScript with Canvas API for rendering, `requestAnimationFrame` for smooth looping, and a CSS `hue-rotate` filter applied to the canvas each frame to create the dynamic color shifting effect.

CCurran Kelleher

80% match

Loading thumbnail…

Network Effects

This visualization depicts a synthetic starfield with a rotating perspective, where 800 colorful stars move through a three-dimensional space. A constellation effect connects nearby stars with subtle gray lines as they drift and wobble across a light background. The animation uses HTML5 Canvas with vanilla JavaScript, leveraging its 2D context to draw glowing circles and lines. A spatial grid optimization efficiently links neighboring stars, while the `requestAnimationFrame` API drives the continuous rotation and recycling of stars.

CCurran Kelleher

79% match

Loading thumbnail…

Fork of Fork of Spinning Rainbow Starfield

A colorful 3D starfield flight simulator immerses the viewer in a tunnel of thousands of stars, rendered as glowing points that stream past as the viewpoint steers through space. The visualization uses Three.js with a custom GLSL ShaderMaterial and BufferGeometry to draw 5,000 stars, while mouse input controls rotation with inertia and scrolling adjusts speed. A cyan crosshair tracks the cursor, and a speed indicator displays the current velocity.

NNita

79% match