@xxmachina/components 19.21.8 → 19.24.1

package/fesm2022/xxmachina-components-templates-background.mjs

@@ -1,16 +1,337 @@
 import { provideComponent } from '@ng-atomic/core';
 import * as i0 from '@angular/core';
-import { input, signal, afterNextRender, ElementRef, Component } from '@angular/core';
+import { input, viewChild, afterNextRender, Component } from '@angular/core';
+import * as THREE from 'three';
 import { BackgroundTemplateStore } from '@ng-atomic/components/templates/background';
 
+const particleVertexShader = /* glsl */ `
+attribute vec3 velocity;
+attribute float size;
+
+uniform float uTime;
+uniform vec2 uBounds;
+
+varying vec3 vColor;
+varying float vAlpha;
+
+void main() {
+  vColor = color;
+  vAlpha = 1.0;
+
+  // GPU上で位置更新（時間ベース）
+  vec3 pos = position;
+  pos.x += velocity.x * uTime * 0.01;
+  pos.y += velocity.y * uTime * 0.01;
+
+  // 境界でラップアラウンド
+  pos.x = mod(pos.x + uBounds.x, uBounds.x * 2.0) - uBounds.x;
+  pos.y = mod(pos.y + uBounds.y, uBounds.y * 2.0) - uBounds.y;
+
+  vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+  gl_PointSize = size * (300.0 / -mvPosition.z);
+  gl_Position = projectionMatrix * mvPosition;
+}
+`;
+
+const particleFragmentShader = /* glsl */ `
+varying vec3 vColor;
+varying float vAlpha;
+
+void main() {
+  // 中心からの距離
+  float dist = length(gl_PointCoord - vec2(0.5));
+
+  // 円形にクリップ
+  if (dist > 0.5) discard;
+
+  // 強いグロー効果（Canvas版のshadowBlur=15を再現）
+  float coreBrightness = exp(-dist * 8.0);           // コア部分（非常に明るい）
+  float glowBrightness = exp(-dist * 2.5) * 0.6;     // 外側のソフトグロー
+  float outerGlow = exp(-dist * 1.5) * 0.3;          // さらに外側の淡いグロー
+  float glow = coreBrightness + glowBrightness + outerGlow;
+
+  // 色を強くブースト（黒背景で映える明るさに）
+  vec3 boostedColor = vColor * 1.5;
+  float alpha = min(glow * vAlpha, 1.0);
+
+  gl_FragColor = vec4(boostedColor, alpha);
+}
+`;
+
+class WebGLParticleSystem {
+    scene;
+    camera;
+    renderer;
+    particles;
+    lines;
+    clock;
+    config;
+    positions;
+    velocities;
+    isRunning = false;
+    frameCount = 0; // 接続線更新頻度制御用
+    constructor(config) {
+        this.config = {
+            container: config.container,
+            particleCount: config.particleCount ?? this.getOptimalParticleCount(),
+            connectionDistance: config.connectionDistance ?? 100, // パフォーマンス優先で短縮
+            baseHue: config.baseHue ?? -1, // -1 = 全色相ランダム
+            hueSpeed: config.hueSpeed ?? 30,
+        };
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x000000);
+        this.clock = new THREE.Clock();
+        this.positions = new Float32Array(this.config.particleCount * 3);
+        this.velocities = new Float32Array(this.config.particleCount * 3);
+        this.camera = this.createCamera();
+        this.renderer = this.createRenderer();
+        this.particles = this.createParticles();
+        this.lines = this.createLines();
+        this.scene.add(this.particles);
+        this.scene.add(this.lines);
+        this.setupResizeHandler();
+        this.setupVisibilityHandler();
+    }
+    getOptimalParticleCount() {
+        const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
+        // パフォーマンス優先：パーティクル数を削減
+        return isMobile ? 60 : 100;
+    }
+    createCamera() {
+        const { width, height } = this.getSize();
+        const camera = new THREE.PerspectiveCamera(75, width / height, 1, 2000);
+        camera.position.z = 400;
+        return camera;
+    }
+    createRenderer() {
+        const { width, height } = this.getSize();
+        const renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: false, // 黒背景を強制（透明にしない）
+        });
+        renderer.setSize(width, height);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.setClearColor(0x000000, 1); // 明示的に黒背景を設定
+        this.config.container.appendChild(renderer.domElement);
+        // Canvas styling - コンテナ内に配置（position: absoluteに変更）
+        renderer.domElement.style.position = 'absolute';
+        renderer.domElement.style.top = '0';
+        renderer.domElement.style.left = '0';
+        renderer.domElement.style.width = '100%';
+        renderer.domElement.style.height = '100%';
+        return renderer;
+    }
+    createParticles() {
+        const { particleCount, baseHue } = this.config;
+        const { width, height } = this.getSize();
+        const geometry = new THREE.BufferGeometry();
+        const colors = new Float32Array(particleCount * 3);
+        const sizes = new Float32Array(particleCount);
+        for (let i = 0; i < particleCount; i++) {
+            const i3 = i * 3;
+            // ランダム位置
+            this.positions[i3] = (Math.random() - 0.5) * width;
+            this.positions[i3 + 1] = (Math.random() - 0.5) * height;
+            this.positions[i3 + 2] = (Math.random() - 0.5) * 100;
+            // ランダム速度
+            this.velocities[i3] = (Math.random() - 0.5) * 50;
+            this.velocities[i3 + 1] = (Math.random() - 0.5) * 50;
+            this.velocities[i3 + 2] = 0;
+            // HSLカラー（baseHue < 0 なら全色相ランダム）
+            const hue = baseHue < 0
+                ? Math.random() // 0-1 (全色相)
+                : (baseHue + Math.random() * 60) / 360;
+            // 彩度70%、明度60%で鮮やかに（Canvas版のshadowBlur効果を再現）
+            const color = new THREE.Color().setHSL(hue, 0.7, 0.6);
+            colors[i3] = color.r;
+            colors[i3 + 1] = color.g;
+            colors[i3 + 2] = color.b;
+            sizes[i] = Math.random() * 2 + 2; // サイズ2-4（パフォーマンス優先）
+        }
+        geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3));
+        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        geometry.setAttribute('velocity', new THREE.BufferAttribute(this.velocities, 3));
+        geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+        const material = new THREE.ShaderMaterial({
+            vertexShader: particleVertexShader,
+            fragmentShader: particleFragmentShader,
+            uniforms: {
+                uTime: { value: 0 },
+                uBounds: { value: new THREE.Vector2(width / 2, height / 2) },
+            },
+            transparent: true,
+            vertexColors: true,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+        });
+        return new THREE.Points(geometry, material);
+    }
+    createLines() {
+        const geometry = new THREE.BufferGeometry();
+        const material = new THREE.LineBasicMaterial({
+            vertexColors: true,
+            transparent: true,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+        });
+        return new THREE.LineSegments(geometry, material);
+    }
+    updateConnections() {
+        const { particleCount, connectionDistance, baseHue, hueSpeed } = this.config;
+        const positions = [];
+        const colors = [];
+        // 空間分割グリッド
+        const cellSize = connectionDistance;
+        const grid = new Map();
+        // パーティクルをグリッドに配置
+        for (let i = 0; i < particleCount; i++) {
+            const x = this.positions[i * 3];
+            const y = this.positions[i * 3 + 1];
+            const cellX = Math.floor(x / cellSize);
+            const cellY = Math.floor(y / cellSize);
+            const key = `${cellX},${cellY}`;
+            if (!grid.has(key))
+                grid.set(key, []);
+            grid.get(key).push(i);
+        }
+        // 接続線のhue（全色相でゆっくり変化）
+        const elapsed = this.clock.getElapsedTime();
+        const lineHue = baseHue < 0
+            ? ((elapsed * hueSpeed) % 360) / 360
+            : (baseHue + (elapsed * hueSpeed) % 60) / 360;
+        // 色計算をキャッシュ（パフォーマンス向上）
+        const lineColor = new THREE.Color().setHSL(lineHue, 0.8, 0.65);
+        // 近傍セルのみ探索
+        for (const [key, indices] of grid.entries()) {
+            const [cx, cy] = key.split(',').map(Number);
+            for (let dx = -1; dx <= 1; dx++) {
+                for (let dy = -1; dy <= 1; dy++) {
+                    const neighborKey = `${cx + dx},${cy + dy}`;
+                    const neighborIndices = grid.get(neighborKey);
+                    if (!neighborIndices)
+                        continue;
+                    for (const i of indices) {
+                        for (const j of neighborIndices) {
+                            if (i >= j)
+                                continue;
+                            const i3 = i * 3;
+                            const j3 = j * 3;
+                            const pdx = this.positions[i3] - this.positions[j3];
+                            const pdy = this.positions[i3 + 1] - this.positions[j3 + 1];
+                            const dist = Math.sqrt(pdx * pdx + pdy * pdy);
+                            if (dist < connectionDistance) {
+                                const alpha = (1 - dist / connectionDistance) * 0.7;
+                                positions.push(this.positions[i3], this.positions[i3 + 1], this.positions[i3 + 2], this.positions[j3], this.positions[j3 + 1], this.positions[j3 + 2]);
+                                // キャッシュした色を使用（パフォーマンス向上）
+                                colors.push(lineColor.r * alpha, lineColor.g * alpha, lineColor.b * alpha, lineColor.r * alpha, lineColor.g * alpha, lineColor.b * alpha);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        this.lines.geometry.dispose();
+        this.lines.geometry = new THREE.BufferGeometry();
+        if (positions.length > 0) {
+            this.lines.geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            this.lines.geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+        }
+    }
+    updateParticlePositions(delta) {
+        const { width, height } = this.getSize();
+        const halfW = width / 2;
+        const halfH = height / 2;
+        for (let i = 0; i < this.config.particleCount; i++) {
+            const i3 = i * 3;
+            // 速度による移動
+            this.positions[i3] += this.velocities[i3] * delta;
+            this.positions[i3 + 1] += this.velocities[i3 + 1] * delta;
+            // 境界でラップアラウンド
+            if (this.positions[i3] > halfW)
+                this.positions[i3] = -halfW;
+            if (this.positions[i3] < -halfW)
+                this.positions[i3] = halfW;
+            if (this.positions[i3 + 1] > halfH)
+                this.positions[i3 + 1] = -halfH;
+            if (this.positions[i3 + 1] < -halfH)
+                this.positions[i3 + 1] = halfH;
+        }
+        this.particles.geometry.attributes['position'].needsUpdate = true;
+    }
+    animate = () => {
+        if (!this.isRunning)
+            return;
+        const delta = this.clock.getDelta();
+        const elapsed = this.clock.getElapsedTime();
+        // パーティクル位置更新
+        this.updateParticlePositions(delta);
+        // シェーダーuniform更新
+        const material = this.particles.material;
+        material.uniforms['uTime'].value = elapsed;
+        // 接続線更新（3フレームに1回にしてパフォーマンス向上）
+        this.frameCount++;
+        if (this.frameCount % 3 === 0) {
+            this.updateConnections();
+        }
+        // 描画
+        this.renderer.render(this.scene, this.camera);
+        requestAnimationFrame(this.animate);
+    };
+    getSize() {
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    }
+    setupResizeHandler() {
+        window.addEventListener('resize', () => {
+            const { width, height } = this.getSize();
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(width, height);
+            const material = this.particles.material;
+            material.uniforms['uBounds'].value.set(width / 2, height / 2);
+        });
+    }
+    setupVisibilityHandler() {
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                this.stop();
+            }
+            else {
+                this.start();
+            }
+        });
+    }
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.clock.start();
+        requestAnimationFrame(this.animate);
+    }
+    stop() {
+        this.isRunning = false;
+        this.clock.stop();
+    }
+    dispose() {
+        this.stop();
+        this.particles.geometry.dispose();
+        this.particles.material.dispose();
+        this.lines.geometry.dispose();
+        this.lines.material.dispose();
+        this.renderer.dispose();
+        this.config.container.removeChild(this.renderer.domElement);
+    }
+}
+
 class BackgroundTemplate {
     title = input('');
-    canvas = signal(null);
-    ctx = signal(null);
-    particles = [];
-    window = window;
-    hue = 180;
-    frame = 0;
+    container = viewChild.required('container');
+    particleSystem = null;
+    glitchInterval = null;
+    currentMessage = '(x_x) PROTOCOL.7 (x_x)';
+    isGlitching = false;
     messages = [
         '(x_x) PROTOCOL.7 (x_x)',
         '[MACHINA:01] INITIALIZING...',
@@ -19,279 +340,92 @@ class BackgroundTemplate {
         '【=◈︿◈=】LAYER:13【=◈︿◈=】',
         '[▀▄▀▄▀▄] NAV¡GATOR [▄▀▄▀▄▀]',
         '(╥﹏╥) ERROR_404 (╥﹏╥)',
-        `
-     ╔═══════════════╗
-     ║ PRESENT TIME. ║
-     ╚═══════════════╝
-    `,
-        `
-     /\\_/\\  PROTOCOL
-    ((@v@))   BREACH
-     ()::()  DETECTED
-     VV-VV
-    `,
         '▌│█║▌║▌║ CONNECTING... ║▌║▌║█│▌'
     ];
-    currentMessage = 0;
+    messageIndex = 0;
     constructor() {
         afterNextRender(() => {
-            const canvasElement = document.querySelector('canvas');
-            this.canvas.set(new ElementRef(canvasElement));
-            this.ctx.set(canvasElement.getContext('2d'));
-            this.initializeParticles();
-            this.animate();
-            setInterval(() => this.glitchEffect(), 5000);
+            this.particleSystem = new WebGLParticleSystem({
+                container: this.container().nativeElement,
+                baseHue: 180, // シアン〜グリーン系（Lainテーマ）
+                connectionDistance: 80,
+            });
+            this.particleSystem.start();
+            // グリッチエフェクト（5秒ごと）
+            this.glitchInterval = window.setInterval(() => this.triggerGlitch(), 5000);
         });
     }
-    initializeParticles() {
-        const canvas = this.canvas()?.nativeElement;
-        if (!canvas)
-            return;
-        this.particles = Array.from({ length: 200 }, () => ({
-            x: Math.random() * canvas.width,
-            y: Math.random() * canvas.height,
-            dx: (Math.random() - 0.5) * 1,
-            dy: (Math.random() - 0.5) * 1,
-            size: Math.random() * 1.5 + 0.5,
-            color: `hsl(${180 + Math.random() * 60}, ${70 + Math.random() * 30}%, ${40 + Math.random() * 60}%)`,
-            glitchOffset: Math.random() * 5
-        }));
-    }
-    glitchEffect() {
-        const canvas = this.canvas()?.nativeElement;
-        if (!canvas)
-            return;
-        this.particles.forEach(p => {
-            if (Math.random() < 0.3) {
-                p.x = Math.random() * canvas.width;
-                p.y = Math.random() * canvas.height;
-                p.glitchOffset = Math.random() * 10;
-            }
-        });
-        this.currentMessage = (this.currentMessage + 1) % this.messages.length;
+    triggerGlitch() {
+        this.isGlitching = true;
+        this.messageIndex = (this.messageIndex + 1) % this.messages.length;
+        this.currentMessage = this.messages[this.messageIndex];
+        setTimeout(() => {
+            this.isGlitching = false;
+        }, 300);
     }
-    drawText(ctx, canvas) {
-        const message = this.messages[this.currentMessage];
-        ctx.font = '16px "Courier New", monospace';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        const glitchAmount = Math.random() * 5;
-        // メインテキスト
-        ctx.fillStyle = 'rgba(0, 255, 255, 0.8)';
-        const lines = message.split('\n');
-        lines.forEach((line, index) => {
-            ctx.fillText(line, 20 + glitchAmount, 20 + (index * 20));
-        });
-        // グリッチエフェクト
-        if (Math.random() < 0.3) {
-            ctx.fillStyle = 'rgba(255, 0, 255, 0.5)';
-            lines.forEach((line, index) => {
-                ctx.fillText(line, 20 - glitchAmount, 20 + (index * 20));
-            });
+    ngOnDestroy() {
+        this.particleSystem?.dispose();
+        if (this.glitchInterval !== null) {
+            clearInterval(this.glitchInterval);
         }
-        // 座標表示
-        ctx.font = '12px "Courier New", monospace';
-        ctx.fillStyle = 'rgba(0, 255, 255, 0.4)';
-        ctx.fillText(`[X]: ${Math.floor(Math.random() * 1000)}`, canvas.width - 120, 20);
-        ctx.fillText(`[Y]: ${Math.floor(Math.random() * 1000)}`, canvas.width - 120, 40);
-        ctx.fillText(`(>_<) SYNC: ${Math.floor(Math.random() * 100)}%`, canvas.width - 160, 60);
     }
-    animate = () => {
-        const canvas = this.canvas()?.nativeElement;
-        const ctx = this.ctx();
-        if (!canvas || !ctx)
-            return;
-        this.frame++;
-        ctx.fillStyle = 'rgba(0,0,0,0.1)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        if (this.frame % 30 === 0) {
-            ctx.strokeStyle = 'rgba(0, 255, 255, 0.1)';
-            ctx.lineWidth = 0.5;
-            for (let i = 0; i < canvas.width; i += 50) {
-                ctx.beginPath();
-                ctx.moveTo(i, 0);
-                ctx.lineTo(i, canvas.height);
-                ctx.stroke();
-            }
-            for (let i = 0; i < canvas.height; i += 50) {
-                ctx.beginPath();
-                ctx.moveTo(0, i);
-                ctx.lineTo(canvas.width, i);
-                ctx.stroke();
-            }
-        }
-        this.particles.forEach(p => {
-            p.x += p.dx;
-            p.y += p.dy;
-            if (p.x < 0 || p.x > canvas.width) {
-                p.dx = -p.dx * 0.95;
-                p.dy += (Math.random() - 0.5) * 0.2;
-            }
-            if (p.y < 0 || p.y > canvas.height) {
-                p.dy = -p.dy * 0.95;
-                p.dx += (Math.random() - 0.5) * 0.2;
-            }
-            if (Math.random() < 0.98) {
-                ctx.shadowBlur = 10;
-                ctx.shadowColor = p.color;
-                ctx.fillStyle = p.color;
-                ctx.beginPath();
-                ctx.arc(p.x + (p.glitchOffset || 0), p.y, p.size, 0, Math.PI * 2);
-                ctx.fill();
-                ctx.shadowBlur = 0;
-            }
-        });
-        for (let i = 0; i < this.particles.length; i++) {
-            for (let j = i + 1; j < this.particles.length; j++) {
-                const dx = this.particles[i].x - this.particles[j].x;
-                const dy = this.particles[i].y - this.particles[j].y;
-                const d = Math.sqrt(dx * dx + dy * dy);
-                if (d < 100) {
-                    const alpha = (1 - d / 100) * 0.3;
-                    ctx.beginPath();
-                    ctx.strokeStyle = `hsla(${this.hue}, 100%, 70%, ${alpha})`;
-                    ctx.lineWidth = 1;
-                    ctx.moveTo(this.particles[i].x, this.particles[i].y);
-                    ctx.lineTo(this.particles[j].x, this.particles[j].y);
-                    ctx.stroke();
-                }
-            }
-        }
-        this.drawText(ctx, canvas);
-        this.hue = 180 + Math.sin(this.frame * 0.01) * 30;
-        requestAnimationFrame(this.animate);
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BackgroundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BackgroundTemplate, isStandalone: true, selector: "app-background-template", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <canvas #canvas 
-      [width]="window.innerWidth" 
-      [height]="window.innerHeight"
-    ></canvas>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: BackgroundTemplate, isStandalone: true, selector: "app-background-template", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #container></div>
+    <div class="overlay">
+      <div class="scanlines"></div>
+      <div class="glitch-text" [class.glitch]="isGlitching">
+        {{ currentMessage }}
+      </div>
+    </div>
     <div class="content">
       @if (title()) {
         <h1 class="title">{{ title() }}</h1>
       }
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{position:fixed;width:100%;height:100vh;color:#fff;z-index:-1}:host canvas{position:fixed;top:0;left:0;z-index:-1}:host .content{position:relative;z-index:1;padding:2rem}:host .title{font-size:2rem;margin-bottom:1rem;font-family:Courier New,monospace;text-shadow:0 0 10px rgba(0,255,255,.5)}\n"] });
+  `, isInline: true, styles: [":host{display:block;position:fixed;width:100%;height:100vh;color:#fff;z-index:-1}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.scanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);opacity:.3}.glitch-text{position:absolute;top:20px;left:20px;font-family:Courier New,monospace;font-size:14px;color:#0ffc;text-shadow:0 0 10px rgba(0,255,255,.5);white-space:pre-line;transition:transform .1s}.glitch-text.glitch{animation:glitch .3s ease-in-out}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(2px,-2px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}}.content{position:relative;z-index:1;padding:2rem}.title{font-size:2rem;margin-bottom:1rem;font-family:Courier New,monospace;text-shadow:0 0 10px rgba(0,255,255,.5)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BackgroundTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'app-background-template', standalone: true, template: `
-    <canvas #canvas 
-      [width]="window.innerWidth" 
-      [height]="window.innerHeight"
-    ></canvas>
+    <div #container></div>
+    <div class="overlay">
+      <div class="scanlines"></div>
+      <div class="glitch-text" [class.glitch]="isGlitching">
+        {{ currentMessage }}
+      </div>
+    </div>
     <div class="content">
       @if (title()) {
         <h1 class="title">{{ title() }}</h1>
       }
       <ng-content></ng-content>
     </div>
-  `, styles: [":host{position:fixed;width:100%;height:100vh;color:#fff;z-index:-1}:host canvas{position:fixed;top:0;left:0;z-index:-1}:host .content{position:relative;z-index:1;padding:2rem}:host .title{font-size:2rem;margin-bottom:1rem;font-family:Courier New,monospace;text-shadow:0 0 10px rgba(0,255,255,.5)}\n"] }]
+  `, styles: [":host{display:block;position:fixed;width:100%;height:100vh;color:#fff;z-index:-1}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.scanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);opacity:.3}.glitch-text{position:absolute;top:20px;left:20px;font-family:Courier New,monospace;font-size:14px;color:#0ffc;text-shadow:0 0 10px rgba(0,255,255,.5);white-space:pre-line;transition:transform .1s}.glitch-text.glitch{animation:glitch .3s ease-in-out}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(2px,-2px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}}.content{position:relative;z-index:1;padding:2rem}.title{font-size:2rem;margin-bottom:1rem;font-family:Courier New,monospace;text-shadow:0 0 10px rgba(0,255,255,.5)}\n"] }]
         }], ctorParameters: () => [] });
 
 class MachinaBackgroundTemplate {
-    canvas = signal(null);
-    ctx = signal(null);
-    particles = [];
-    window = window;
-    hue = 0;
+    container = viewChild.required('container');
+    particleSystem = null;
     constructor() {
         afterNextRender(() => {
-            const canvasElement = document.querySelector('canvas');
-            this.canvas.set(new ElementRef(canvasElement));
-            this.ctx.set(canvasElement.getContext('2d'));
-            this.initializeParticles();
-            this.animate();
+            this.particleSystem = new WebGLParticleSystem({
+                container: this.container().nativeElement,
+                // baseHue未指定 = 全色相ランダム（元の実装と同じ）
+            });
+            this.particleSystem.start();
         });
     }
-    initializeParticles() {
-        const canvas = this.canvas()?.nativeElement;
-        if (!canvas)
-            return;
-        this.particles = Array.from({ length: 150 }, () => ({
-            x: Math.random() * canvas.width,
-            y: Math.random() * canvas.height,
-            dx: (Math.random() - 0.5) * 1.5,
-            dy: (Math.random() - 0.5) * 1.5,
-            size: Math.random() * 2 + 1,
-            color: `hsl(${Math.random() * 360}, 50%, 50%)`
-        }));
+    ngOnDestroy() {
+        this.particleSystem?.dispose();
     }
-    animate = () => {
-        const canvas = this.canvas()?.nativeElement;
-        const ctx = this.ctx();
-        if (!canvas || !ctx)
-            return;
-        // Clear with fade effect
-        ctx.fillStyle = 'rgba(0,0,0,0.05)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        // Update and draw particles
-        this.particles.forEach(p => {
-            p.x += p.dx;
-            p.y += p.dy;
-            // Bounce off walls with slight randomization
-            if (p.x < 0 || p.x > canvas.width) {
-                p.dx = -p.dx * 0.99;
-                p.dy += (Math.random() - 0.5) * 0.2;
-            }
-            if (p.y < 0 || p.y > canvas.height) {
-                p.dy = -p.dy * 0.99;
-                p.dx += (Math.random() - 0.5) * 0.2;
-            }
-            // Draw particle with glow effect
-            ctx.shadowBlur = 15;
-            ctx.shadowColor = p.color;
-            ctx.fillStyle = p.color;
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-            ctx.fill();
-            ctx.shadowBlur = 0;
-        });
-        // Draw connections with gradient effect
-        for (let i = 0; i < this.particles.length; i++) {
-            for (let j = i + 1; j < this.particles.length; j++) {
-                const dx = this.particles[i].x - this.particles[j].x;
-                const dy = this.particles[i].y - this.particles[j].y;
-                const d = Math.sqrt(dx * dx + dy * dy);
-                if (d < 120) {
-                    const alpha = (1 - d / 120) * 0.5;
-                    ctx.beginPath();
-                    ctx.strokeStyle = `hsla(${this.hue}, 70%, 70%, ${alpha})`;
-                    ctx.lineWidth = 2 * (1 - d / 120);
-                    ctx.moveTo(this.particles[i].x, this.particles[i].y);
-                    ctx.lineTo(this.particles[j].x, this.particles[j].y);
-                    ctx.stroke();
-                }
-            }
-        }
-        // Slowly change hue for dynamic color effect
-        this.hue = (this.hue + 0.5) % 360;
-        requestAnimationFrame(this.animate);
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MachinaBackgroundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: MachinaBackgroundTemplate, isStandalone: true, selector: "machina-templates-background", ngImport: i0, template: `
-    <canvas #canvas 
-      [width]="window.innerWidth" 
-      [height]="window.innerHeight"
-      style="position: fixed; top: 0; left: 0; z-index: -1;">
-    </canvas>
-  `, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: MachinaBackgroundTemplate, isStandalone: true, selector: "machina-templates-background", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #container></div>`, isInline: true, styles: [":host{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: MachinaBackgroundTemplate, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'machina-templates-background',
-                    standalone: true,
-                    template: `
-    <canvas #canvas 
-      [width]="window.innerWidth" 
-      [height]="window.innerHeight"
-      style="position: fixed; top: 0; left: 0; z-index: -1;">
-    </canvas>
-  `
-                }]
+            args: [{ selector: 'machina-templates-background', standalone: true, template: `<div #container></div>`, styles: [":host{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 function provideMachinaBackgroundTemplate() {