Library Backgrounds

Starfield Drift

Slow drifting stars on a deep canvas.

Slow drifting stars on a deep canvas.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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();