エフェクトを調整

effects/base.js

@@ -243,6 +243,7 @@ export class BaseEffect {
         ctx.shadowOffsetX = 0;
         ctx.shadowOffsetY = 0;
 
+        // 内側のグロー
         for (let j = 0; j < iterations; j++) {
             ctx.shadowBlur = blur - (blur * j / iterations);
             ctx.fillStyle = `rgba(${this.hexToRgb(color)}, ${1/iterations})`;
@@ -261,8 +262,29 @@ export class BaseEffect {
                 }
             }
         }
+
+        // 外側の広いグロー
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.shadowBlur = blur * 1.5;
+        ctx.globalAlpha = 0.3;
+        
+        for (const lineCoords of this.coordinates) {
+            for (const coord of lineCoords) {
+                ctx.save();
+                if (coord.rotate) {
+                    ctx.translate(coord.x, coord.y);
+                    ctx.rotate(Math.PI/2);
+                    ctx.fillText(coord.char, -coord.width/2, 0);
+                } else {
+                    ctx.fillText(coord.char, coord.x, coord.y);
+                }
+                ctx.restore();
+            }
+        }
         
-        // シャドウをリセット
+        // 設定を元に戻す
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1.0;
         ctx.shadowBlur = 0;
         ctx.shadowColor = 'transparent';
     }

effects/gold.js

@@ -3,14 +3,9 @@ import { BaseEffect } from './base.js';
 export class GoldEffect extends BaseEffect {
     constructor() {
         super();
-        this.glowOptions = {
-            color: '#ffd700',
-            blur: 15,
-            iterations: 10
-        };
         this.strokeOptions = {
             color: '#b8860b',
-            width: 2
+            width: 10
         };
     }
 

effects/gradient.js

@@ -12,7 +12,9 @@ export class GradientEffect extends BaseEffect {
         // グラデーションの作成
         const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
         gradient.addColorStop(0, '#ff0000');
+        gradient.addColorStop(0.25, '#ffff00');
         gradient.addColorStop(0.5, '#00ff00');
+        gradient.addColorStop(0.75, '#00ffff');
         gradient.addColorStop(1, '#0000ff');
         ctx.fillStyle = gradient;
     }

effects/metallic.js

@@ -9,8 +9,8 @@ export class MetallicEffect extends BaseEffect {
             iterations: 10
         };
         this.strokeOptions = {
-            color: '#808080',
-            width: 1.5
+            color: '#4a4a4a',
+            width: 5
         };
     }
 

effects/multiline-neon.js

@@ -5,12 +5,12 @@ export class MultilineNeonEffect extends BaseEffect {
         super();
         this.glowOptions = {
             color: '#00ffff',
-            blur: 25,
-            iterations: 25
+            blur: 90,
+            iterations: 6
         };
         this.strokeOptions = {
             color: '#ffffff',
-            width: 0.5
+            width: 4
         };
     }
 

effects/neon.js

@@ -3,22 +3,16 @@ import { BaseEffect } from './base.js';
 export class NeonEffect extends BaseEffect {
     constructor() {
         super();
-        // グローエフェクトの設定
         this.glowOptions = {
-            color: '#ff69b4',
-            blur: 20,
-            iterations: 20
-        };
-        // 縁取りの設定
-        this.strokeOptions = {
-            color: '#ffffff',
-            width: 0.5
+            color: '#ff69b4',  // ネオンピンク
+            blur: 90,
+            iterations: 12
         };
     }
 
     async setupContext(ctx, options) {
         ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.fillStyle = '#ff69b4';
         ctx.textBaseline = 'top';
-        ctx.fillStyle = '#ff69b4'; // メインのテキストカラー
     }
 } 

postprocess/hue.js

@@ -12,8 +12,8 @@ export class HuePostProcess extends BasePostProcess {
             template: `
                 <div class="mb-2">
                     <label class="form-label">色相の変更</label>
-                    <input type="range" class="form-range" min="0" max="359" value="0" id="hueRotate">
-                    <div class="range-value"><span id="hueRotateValue">0</span>°</div>
+                    <input type="range" class="form-range" min="0" max="359" value="180" id="hueRotate">
+                    <div class="range-value"><span id="hueRotateValue">180</span>°</div>
                 </div>
             `
         };