Free 3D Scene

Warp Speed Tunnel

Stars streak towards the viewer as if flying through space at warp speed. Each star has a real depth value; the streaks come from perspective projection on a 2D canvas.

dark
canvas
3d maths
stars
animation
javascript

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="wrap">
  <canvas id="warp"></canvas>
  <div class="content">
    <h1>Warp Speed</h1>
    <p>Hold the mouse button to go faster</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a "warp speed" starfield tunnel on an HTML canvas with vanilla JavaScript (no libraries).

Requirements:
- A full-viewport canvas on a near-black background with a centred title "Warp Speed" and the hint "Hold the mouse button to go faster".
- 600 stars. Each star has a 3D position: x and y random within twice the screen size around the centre, and z (depth) between 1 and 1000. Also store pz, the depth on the previous frame.
- Every frame: fill the canvas with rgba(2, 3, 10, 0.35) instead of clearing it, so streaks leave short fading trails. Decrease each star's z by the current speed.
- Project with perspective: screenX = centreX + (x / z) * focal and screenY = centreY + (y / z) * focal, where focal is half the canvas width. Do the same with pz to get the previous screen position, and draw a line between the two points: that line is the streak.
- Make nearer stars brighter and thicker (line width 0.4 to 2.6, alpha from 0 to 1) and slightly whiter.
- When a star's z goes below 1 or it leaves the screen, reset it to the far distance with a new random x and y.
- Speed is 6 by default; while a pointer is held down, ease towards 34 (speed += (target - speed) * 0.05), and ease back on release.
- Handle devicePixelRatio (capped at 2) and window resize. Under prefers-reduced-motion keep the speed very low.

Return a single HTML file with <style> and <script> tags, with comments explaining the projection.

How to build it, step by step

1
Give every star a position in 3D: x and y spread around the centre, and z for how far away it is.
2
Each frame, reduce z. The star is now closer to the viewer.
3
Project to the screen by dividing x and y by z. As z shrinks, the result grows, so the star slides outwards from the centre faster and faster.
4
Remember the previous depth and project it too. Drawing a line from the old screen position to the new one creates the streak.
5
Fill the canvas with a translucent colour instead of clearing it to leave short motion trails.
6
Recycle stars that pass the viewer or leave the screen by sending them back to the far distance.
7
Ease the speed towards a target value so acceleration feels smooth.

Customisation tips

Lower STAR_COUNT on phones to save battery.
Tie the speed to scroll position to make a scroll-driven warp transition between sections.
Tint the streaks with your brand colours by changing the strokeStyle formula.