Library Backgrounds

Starfield Drift

Slow drifting stars on a deep canvas.

Slow drifting stars on a deep canvas.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Atmosphere
Style: Futuristic
Tech stack: CANVAS
Animation: Particles
Difficulty: Beginner
License: Personal
Access: Free
Views: 521

Particles
Canvas
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Canvas starfield background, gentle drift, pause offscreen.

Code

<!-- HTML -->
<canvas id="c"></canvas>

/* CSS */
canvas{display:block;width:100%;height:100%;background:#030308}

// JS
var c=document.getElementById("c"),x=c.getContext("2d"),stars=[],w,h;function R(){w=c.width=c.clientWidth;h=c.height=c.clientHeight;stars=[];for(var i=0;i<90;i++)stars.push({x:Math.random()*w,y:Math.random()*h,z:.2+Math.random(),s:Math.random()*1.8})}function d(){x.fillStyle="rgba(3,3,8,.35)";x.fillRect(0,0,w,h);stars.forEach(function(s){s.y+=s.z*.8;if(s.y>h){s.y=0;s.x=Math.random()*w}x.fillStyle="hsl(340 85% 62%)";x.globalAlpha=.3+s.z*.7;x.fillRect(s.x,s.y,s.s,s.s)});x.globalAlpha=1;requestAnimationFrame(d)}window.addEventListener("resize",R);R();d();