refactor: Adjust shader editor layout and add default animation

- Editor pane: 30% → 36% (20% larger)
- Preview pane: 70% → 64%
- Default shader: animated gradient + pulsing circle (was plain color)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 19 insertions, 8 deletions

diff --git a/tools/shader_editor/index.html b/tools/shader_editor/index.html
index d74b9ff..4889046 100644
--- a/tools/shader_editor/index.html
+++ b/tools/shader_editor/index.html
@@ -25,7 +25,7 @@ body {
 }
 
 .preview-pane {
-    flex: 0 0 70%;
+    flex: 0 0 64%;
     background: #252526;
     position: relative;
     display: flex;
@@ -137,7 +137,7 @@ body {
 }
 
 .editor-pane {
-    flex: 0 0 30%;
+    flex: 0 0 36%;
     background: #1e1e1e;
     display: flex;
     flex-direction: column;
@@ -457,13 +457,24 @@ struct CommonUniforms {
 }
 
 @fragment fn fs_main(@builtin(position) p: vec4<f32>) -> @location(0) vec4<f32> {
-    let uv = p.xy / uniforms.resolution;
-    let c = vec3<f32>(
-        0.5 + 0.5 * sin(uniforms.time + uv.x * 3.0),
-        0.5 + 0.5 * cos(uniforms.time + uv.y * 3.0),
-        0.5 + 0.5 * sin(uniforms.beat * 6.28)
+    let uv = (p.xy / uniforms.resolution) * 2.0 - 1.0;
+    uv.x *= uniforms.aspect_ratio;
+
+    // Animated gradient background
+    let t = uniforms.time * 0.3;
+    let bg = vec3<f32>(
+        0.1 + 0.1 * sin(t + uv.y * 2.0),
+        0.15 + 0.1 * cos(t * 0.7 + uv.x * 1.5),
+        0.2 + 0.1 * sin(t * 0.5)
     );
-    return vec4<f32>(c * uniforms.audio_intensity, 1.0);
+
+    // Pulsing circle
+    let d = length(uv) - 0.3 - 0.1 * sin(uniforms.beat * 6.28);
+    let circle = smoothstep(0.02, 0.0, d);
+    let glow = 0.02 / (abs(d) + 0.02);
+
+    let col = bg + vec3<f32>(circle) * vec3<f32>(0.8, 0.4, 0.9) + glow * 0.1 * vec3<f32>(0.6, 0.3, 0.8);
+    return vec4<f32>(col * uniforms.audio_intensity, 1.0);
 }`;
     }