Interactive Constellation Hero Background インタラクティブ・コンステレーション（FV背景 / Canvas）
Proximity-linked node graph with pointer gravity and distance-attenuated radiance. ノード間の距離減衰接続ラインとポインター引力による、王道のテック系インタラクティブネットワーク背景。
ライブデモ Live Demo
Synaptic Network Mesh
Proximity-linked node graph with pointer gravity and distance-attenuated radiance — zero libraries.
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
An interactive constellation particle network rendered on HTML5 Canvas 2D with pairwise proximity bonding and cursor gravity.
Canvas 2D上で粒子同士が近接時に光の結合ラインを生成し、カーソル周囲に引力で粒子が集まるインタラクティブなネットワーク背景です。
どこで使うかWhere to use
Used in landing page hero headers, neural network product visuals, and technology consultation platforms.
AI/テック企業のトップページFV、接続や連携を象徴する製品ビジュアル、高密度なサイエンスUIに適しています。
特徴Key features
Pairwise Euclidean distance detection, linear alpha attenuation, pointer gravitational attractor, boundary bounce physics, lightweight rendering.
ユークリッド距離判定、距離に応じたラインのアルファ減衰、マウスポインター引力フィールド、壁面バウンス物理挙動、高フレームレート。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
maxDistance | 110px | Maximum proximity distance for line formation |
nodeCount | 80 | Total active drifting particles |
実装コード Implementation Code
<div class="constell-hero" id="constell_stage">
<canvas id="constell_canvas" aria-hidden="true"></canvas>
<div class="constell-card">
<span class="constell-badge">Neural Constellation</span>
<h3>Synaptic Network Mesh</h3>
<p>Proximity-linked node graph with pointer gravity and distance-attenuated radiance.</p>
</div>
</div>.constell-hero {
position: relative;
overflow: hidden;
border-radius: 20px;
height: clamp(280px, 45vw, 380px);
background: #030712;
}
#constell_canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.constell-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;
}
.constell-badge {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 7px 14px;
font-size: 11px;
font-weight: 700;
color: #c084fc;
background: rgba(168, 85, 247, 0.12);
border: 1px solid rgba(168, 85, 247, 0.3);
margin-bottom: 18px;
}
.constell-card h3 {
margin: 0 0 12px;
font-size: clamp(24px, 5.5vw, 40px);
color: #faf5ff;
text-shadow: 0 0 30px rgba(192, 132, 252, 0.4);
}
.constell-card p {
margin: 0;
max-width: 38ch;
color: rgba(243, 232, 255, 0.75);
font-size: clamp(13px, 2vw, 15px);
line-height: 1.65;
}import React, { useRef, useEffect } from 'react';
import './M-025.css';
export default function InteractiveConstellationHero({
maxDistance = 110,
nodeCount = 80,
title = 'Synaptic Network Mesh',
subtitle = 'Proximity-linked node graph with pointer gravity and distance-attenuated radiance.'
}) {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let rafId;
// Particle simulation loop...
}, [maxDistance, nodeCount]);
return (
<div className="constell-stage">
<div className="constell-hero">
<canvas ref={canvasRef} id="constell_canvas" />
<div className="constell-card">
<span className="constell-badge">Neural Constellation</span>
<h3>{title}</h3>
<p>{subtitle}</p>
</div>
</div>
</div>
);
}.constell-stage {
padding: clamp(20px, 4vw, 36px);
border-radius: 28px;
background: linear-gradient(180deg, #030712, #02040a);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.constell-hero {
position: relative;
overflow: hidden;
border-radius: 20px;
height: clamp(280px, 45vw, 380px);
background: #030712;
}
#constell_canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.constell-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;
}
.constell-badge {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 7px 14px;
font-size: 11px;
font-weight: 700;
color: #c084fc;
background: rgba(168, 85, 247, 0.12);
border: 1px solid rgba(168, 85, 247, 0.3);
margin-bottom: 18px;
}
.constell-card h3 {
margin: 0 0 12px;
font-size: clamp(24px, 5.5vw, 40px);
color: #faf5ff;
text-shadow: 0 0 30px rgba(192, 132, 252, 0.4);
}
.constell-card p {
margin: 0;
max-width: 38ch;
color: rgba(243, 232, 255, 0.75);
font-size: clamp(13px, 2vw, 15px);
line-height: 1.65;
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
Updates particle velocities each frame, applies mouse displacement vectors within an interactive radius, and connects nodes closer than the threshold.
毎フレームパーティクルの位置を更新し、マウス半径内の粒子に引力を付与した上で、二重ループで一定距離内のペアに透明度を計算したラインを引きます。
カスタマイズ方法Customization
Tweak connection distance threshold, particle count, node radius, and color palettes via sliders or React props.
接続距離（maxDistance）や粒子数（nodeCount）、パーティクル半径やライン色（パープル/シアンなど）を柔軟に調整できます。
注意点Caveats
For large node populations, monitor O(N^2) pairwise comparisons to ensure smooth 60fps execution on low-power devices.
ノード数を過剰に増やすと二重ループの計算負荷が上がるため、通常は60〜100個程度を目安に設定してください。
よくある質問 Frequently Asked Questions
How does cursor gravity work? マウスカーソルの引力はどのように計算されていますか？
Computes distance between pointer and each node, applying a linear acceleration vector when within the interaction radius.
ポインター座標と各粒子の距離（Math.hypot）を測定し、引力有効半径内に入った粒子へ中心方向の加速度ベクトルを加算しています。
Is it possible to toggle from attraction to repulsion? 引力ではなく反発力（カーソルから逃げる）に切り替えることはできますか？
Yes, simply negate the force vector sign (subtracting instead of adding mdx * force) to create a dispersion shield.
はい、force ベクトルの符号を反転させるだけで、カーソルを避けて星が放射状に散るシールド効果に切り替えられます。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.