Aurora Borealis Hero Background オーロラグロー波背景（FV背景 / Canvas）
Multi-layered shimmering aurora ribbons with additive color blending and cursor drift. 加算合成と複合正弦波によるエメラルド＆シアンのオーロラ光幕とマウスインタラクション演出。
ライブデモ Live Demo
Atmospheric Lightflow
Generative multi-harmonic wave curtains with real-time pointer displacement — zero external assets.
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
A real-time HTML5 Canvas 2D background simulating the shimmering curtains of the northern lights.
Canvas 2Dコンテキスト上で複数の複合正弦波と加算合成グラデーションを重ね、リアルタイムに揺らめくオーロラカーテンを描くFV背景です。
どこで使うかWhere to use
Placed full-bleed behind primary hero headlines, branding sections, or atmospheric splash intros.
トップページのファーストビュー（FV）背景、ブランドのキービジュアル、没入感を高めたいスプラッシュエリアに配置します。
特徴Key features
Triple-harmonic sine waves, additive composite glow, fluid cursor wind current, zero external assets or libraries, power-saving intersection observer.
3層の複合正弦波による有機的な起伏、加算ブレンド（lighter）による発光表現、マウス追従の風効果、画像アセット不要、画面外での自動省電力休止。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
speed | 0.8 | Harmonic wave drift rate multiplier |
glow | 0.9 | Additive luminous bloom intensity |
実装コード Implementation Code
<div class="aurora-hero">
<canvas id="aurora_canvas" aria-hidden="true"></canvas>
<div class="aurora-card">
<span class="aurora-badge">Borealis Canvas</span>
<h3>Atmospheric Lightflow</h3>
<p>Generative multi-harmonic wave curtains with real-time pointer displacement.</p>
</div>
</div>.aurora-hero {
position: relative;
overflow: hidden;
border-radius: 20px;
height: clamp(280px, 45vw, 380px);
background: #020617;
}
#aurora_canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.aurora-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;
}
.aurora-badge {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 7px 14px;
font-size: 11px;
font-weight: 700;
color: #6ee7b7;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.28);
margin-bottom: 18px;
}
.aurora-card h3 {
margin: 0 0 12px;
font-size: clamp(24px, 5.5vw, 40px);
color: #f0fdf4;
text-shadow: 0 0 35px rgba(52, 211, 153, 0.4);
}
.aurora-card p {
margin: 0;
max-width: 38ch;
color: rgba(220, 252, 231, 0.75);
font-size: clamp(13px, 2vw, 15px);
line-height: 1.65;
}import React, { useRef, useEffect } from 'react';
import './M-023.css';
export default function AuroraBorealisHero({
speed = 0.8,
glow = 0.9,
title = 'Atmospheric Lightflow',
subtitle = 'Generative multi-harmonic wave curtains with real-time pointer displacement.'
}) {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let rafId, time = 0;
const resize = () => {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
};
const ro = new ResizeObserver(resize);
ro.observe(canvas);
resize();
const render = () => {
rafId = requestAnimationFrame(render);
time += 0.015 * speed;
const w = canvas.width, h = canvas.height;
ctx.clearRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
// Render waves...
};
render();
return () => {
cancelAnimationFrame(rafId);
ro.disconnect();
};
}, [speed, glow]);
return (
<div className="aurora-stage">
<div className="aurora-hero">
<canvas ref={canvasRef} id="aurora_canvas" />
<div className="aurora-card">
<span className="aurora-badge">Borealis Canvas</span>
<h3>{title}</h3>
<p>{subtitle}</p>
</div>
</div>
</div>
);
}.aurora-stage {
padding: clamp(20px, 4vw, 36px);
border-radius: 28px;
background: linear-gradient(180deg, #020617, #01040f);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.aurora-hero {
position: relative;
overflow: hidden;
border-radius: 20px;
height: clamp(280px, 45vw, 380px);
background: #020617;
}
#aurora_canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.aurora-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;
}
.aurora-badge {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 7px 14px;
font-size: 11px;
font-weight: 700;
color: #6ee7b7;
background: rgba(16, 185, 129, 0.12);
margin-bottom: 18px;
}
.aurora-card h3 {
margin: 0 0 12px;
font-size: clamp(24px, 5.5vw, 40px);
color: #f0fdf4;
text-shadow: 0 0 35px rgba(52, 211, 153, 0.4);
}
.aurora-card p {
margin: 0;
max-width: 38ch;
color: rgba(220, 252, 231, 0.75);
font-size: clamp(13px, 2vw, 15px);
line-height: 1.65;
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
Evaluates horizontal slices using sine and cosine frequencies, fills vertical gradients to the bottom edge, and applies smooth mouse displacement.
横軸に沿って周波数と速度の異なる正弦波・余弦波をサンプリングしてポリゴンを閉じ、垂直線形グラデーションを加算合成で塗りつぶします。
カスタマイズ方法Customization
Adjust wave drift speed, layer color stops, amplitude, and glow opacity via JavaScript state or React props.
JSの変数（speed, glow）やレイヤー配色配列（color1, color2）、振幅（amp）を書き換えることで、青紫や夕焼け調のオーロラにもカスタマイズ可能です。
注意点Caveats
Place pointer-events: none on foreground hero typography cards to ensure mousemove events reach the underlying canvas.
前面に重ねるテキストカードには pointer-events: none を設定し、背後のキャンバスがスムーズにポインター操作を受け取れるようにしてください。
よくある質問 Frequently Asked Questions
Does this require WebGL or Three.js? WebGLやThree.jsなどの外部ライブラリは必要ですか？
No, it is built with pure HTML5 Canvas 2D API with zero external dependencies.
いいえ、標準のHTML5 Canvas 2D APIのみで構築されており、外部ライブラリや3Dシェーダーは不要です。
How does it handle performance on mobile devices? モバイルデバイスでのパフォーマンスはどうですか？
Sampling the sine wave in 6px intervals minimizes CPU work, achieving high framerates on mobile browsers.
波形の頂点計算を6pxステップで間引くことでCPU負荷を大幅に削減し、モバイル環境でも滑らかに動作します。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.