Skip to main content
SimilarExport ZIP
100%

Light Mode Starfield

✓ Published1🌍 Public
CCurran Kelleher
Last edited Aug 2, 2025
Created on Aug 2, 2025

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.

AI-generated description

3D Rotating Starfield (Light 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 against a light background.

Features

  • Light Mode: Features a bright background with richly colored 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
  • 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 (light 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…

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
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
86% match
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
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…

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…

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
77% match
Loading thumbnail…

Fork of Wiggly Worms

This interactive canvas animation depicts a starfield of 800 colorful, wiggling stars with motion trails, rendered against a dark background with an overall hue shift effect. Each star follows a sinusoidal wiggle pattern while moving toward the viewer with a perspective projection, creating a sense of depth. The code uses the Canvas 2D API's `fillRect` and `stroke` for drawing, alongside `requestAnimationFrame` for the animation loop and a CSS `hue-rotate` filter for the color cycling.

CCurran Kelleher
77% match
Loading thumbnail…

Flower Starfield

A rotating field of colorful flowers moves through a dark, 3D perspective space. Each flower is procedurally generated with randomized petal counts, pastel HSL colors, and weighted sizes. The animation uses Canvas 2D `drawImage` with pre-rendered offscreen canvases for each flower, while `requestAnimationFrame` drives the loop. Rotation and perspective projection are calculated with trigonometric functions, and a slider adjusts flower scale in real time.

CCurran Kelleher
76% match