100%

Spinning Rainbow Starfield

✓ Published2🌍 Public

Last edited Oct 9, 2025

Created on Jul 28, 2025

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.

AI-generated description

3D Rotating Starfield

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

Features

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 randomly generated color
Trail Effects: Stars leave subtle trails as they move
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 script.js:

numStars: 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

Files

index.html: Main HTML structure
script.js: Animation logic and 3D calculations
styles.css: Basic styling for full-screen display

MIT Licensed

Similar vizzes

Loading thumbnail…

Blurry Spinning Rainbow Starfield

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.

CCurran Kelleher

92% 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

88% 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

84% 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

84% 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

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

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

78% 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

78% match