M-024 Background advanced

Hyperspace Warp Starfield (Hero Background) ハイパースペース・ワープスターフィールド（FV背景 / Canvas）

3D perspective warp-speed celestial streaks with interactive cursor steering and hyperspeed click boost. 三次元透視投影によるリアルタイム星屑ストリークと、コックピット視点の操舵インタラクション。

canvas starfield warp space 3d projection hero background pointer

ライブデモ Live Demo

Hyperspace 3D

Beyond Light Speed

Real-time 3D star projection with velocity streaks, cursor steering, and click-boost — pure 2D Canvas.

8
350

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

A high-velocity 3D starfield simulation rendered in pure Canvas 2D with optical depth acceleration.

三次元透視投影を用いて手前に向かって疾走する星屑の光跡を描く、Canvas 2Dによるワープ航行FV背景です。

どこで使うかWhere to use

Used in landing page hero headers, tech teasers, high-speed CDN marketing, and interactive science portals.

製品リリースのキービジュアル、高速通信・クラウドインフラの訴求、ゲーミングUIのFV背景などに最適です。

特徴Key features

Continuous 3D perspective projection, velocity-proportional motion blur streaks, mouse steering direction, click hyperspeed acceleration, zero assets.

3D透視投影計算、速度に連動したモーションブラー光跡、マウス位置によるカメラ視点の傾斜、クリック長押しによるハイパードライブ加速。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
velocity8Base forward cruise speed
starDensity350Total active star count

実装コード Implementation Code 

<div class="warp-hero" id="warp_stage">
  <canvas id="warp_canvas" aria-hidden="true"></canvas>
  <div class="warp-card">
    <span class="warp-badge">Hyperspace 3D</span>
    <h3>Beyond Light Speed</h3>
    <p>Real-time 3D star projection with velocity streaks, cursor steering, and click-boost.</p>
  </div>
</div>
.warp-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: clamp(280px, 45vw, 380px);
  background: #000003;
  cursor: crosshair;
}

#warp_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.warp-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 5vw, 44px);
  pointer-events: none;
  z-index: 2;
}

.warp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  margin-bottom: 18px;
}

.warp-card h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 5.5vw, 40px);
  color: #eff6ff;
  text-shadow: 0 0 30px rgba(96, 165, 250, 0.45);
}

.warp-card p {
  margin: 0;
  max-width: 38ch;
  color: rgba(219, 234, 254, 0.75);
  font-size: clamp(13px, 2vw, 15px);
  line-height: 1.65;
}
import React, { useRef, useEffect } from 'react';
import './M-024.css';

export default function HyperspaceWarpStarfield({
  velocity = 8,
  starCount = 350,
  title = 'Beyond Light Speed',
  subtitle = 'Real-time 3D star projection with velocity streaks, cursor steering, and click-boost.'
}) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    let rafId;
    // Render 3D projection loop...
  }, [velocity, starCount]);

  return (
    <div className="warp-stage">
      <div className="warp-hero">
        <canvas ref={canvasRef} id="warp_canvas" />
        <div className="warp-card">
          <span className="warp-badge">Hyperspace 3D</span>
          <h3>{title}</h3>
          <p>{subtitle}</p>
        </div>
      </div>
    </div>
  );
}
.warp-stage {
  padding: clamp(20px, 4vw, 36px);
  border-radius: 28px;
  background: linear-gradient(180deg, #05060f, #020308);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.warp-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: clamp(280px, 45vw, 380px);
  background: #000003;
  cursor: crosshair;
}

#warp_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.warp-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 5vw, 44px);
  pointer-events: none;
  z-index: 2;
}

.warp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  margin-bottom: 18px;
}

.warp-card h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 5.5vw, 40px);
  color: #eff6ff;
  text-shadow: 0 0 30px rgba(96, 165, 250, 0.45);
}

.warp-card p {
  margin: 0;
  max-width: 38ch;
  color: rgba(219, 234, 254, 0.75);
  font-size: clamp(13px, 2vw, 15px);
  line-height: 1.65;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Updates 3D star coordinates (X, Y, Z), projecting previous and current Z values onto a 2D plane to draw directional line segments.

各パーティクルの3D座標（X, Y, Z）を手前へ前進させ、直前の投影点と現在の投影点をストローク描画することで自然な光の筋を生み出します。

カスタマイズ方法Customization

Adjust cruise velocity, star population density, and color palette via interactive controls or React component props.

通常巡航速度、星の個数（密度）、星の光色を自在に調整可能です。

注意点Caveats

Keep clearRect/fillRect alpha slightly transparent to naturally blend frame trails into a rich motion blur.

毎フレームの背景塗りつぶしアルファ値（rgba(0,0,4, 0.36)）を微調整することで、残像の余韻を好みの長さに調整できます。

よくある質問 Frequently Asked Questions

How is motion blur generated without image shaders? シェーダーを使わずにどのようにモーションブラー光跡を生成していますか？

By drawing a line between the projected (X, Y) coordinate in the previous frame and the current frame.

直前のフレームにおける投影座標（ox, oy）から現在の投影座標（px, py）へ線分を引くことで、移動速度に比例した自然なストリーク光跡を描画しています。

Can visitors click and accelerate on touchscreens? タッチスクリーンでもタップで加速できますか？

Yes, pointerdown and pointerup event handlers support both mouse click and mobile touch interaction.

はい、Pointer Events（pointerdown / pointerup）を使用しているため、マウスのクリック長押しおよびスマホ画面のタッチ長押し双方で加速します。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.