Hyperdrive Warp Speed Tunnel

Colours in this gradient

• #000000
• #38bdf8
• #818cf8
• #ffffff

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="warp-stage">
  <canvas id="warpCanvas" class="warp-canvas"></canvas>
  <div class="warp-content">
    <div class="warp-badge">Hyperspace Velocity</div>
    <h1>Light Speed Jump</h1>
    <p>Procedural radial star streak acceleration rendered in 60fps canvas animation.</p>
  </div>
</div>

The AI prompt

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

Create a sci-fi warp speed hyperspace star tunnel background in HTML, CSS and vanilla JavaScript.

Requirements:
- HTML5 canvas element filling the viewport.
- 3D projection formulas calculating radial displacement from center screen (cx, cy).
- Semi-transparent canvas refresh to leave motion blur trails.
- Fast, smooth animation with speed reset on edge collision.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Store star 3D coordinates (x, y, z) and decrement z along frame ticks.

2. 2

   Calculate 2D perspective screen projection using k = fov / z.

3. 3

   Fade previous frame with rgba(0, 0, 0, 0.25) to draw radial velocity trails.

Customisation tips

• Tweak speed variable to adjust travel velocity from warp 1 to warp 9.

More backgrounds