AI VFX Editor MVP

+ {passes.map((pass) => ( + + ))} + + +

+ + + Fragment Shader (Editable) +

onActiveShaderChange(e.target.value)}
+              />
+            </label>
+
+            <div className="editor-actions">
+              <button type="button" onClick={onApplyShader}>
+                Apply Shader
+              </button>
+              <button type="button" className="secondary" onClick={onExport}>
+                Export
+              </button>
+            </div>
+          </article>
+        </section>
+
+        <aside className="right-column card panel">
+          <h3>Interaction</h3>
+
+          <label className="field">
+            <span>Template</span>
+            <select value={templateName} onChange={(e) => onTemplateSelect(e.target.value)}>
+              {templates.map((t) => (
+                <option key={t.name} value={t.name}>
+                  {t.name}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="field">
+            <span>AI Prompt (Mock)</span>
+            <input
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="例如: hot fire / water ripple / glitch distortion"
+            />
+          </label>
+          <button type="button" className="secondary" onClick={onGenerate}>
+            Generate
+          </button>
+
+          {(["speed", "scale", "intensity"] as Array<keyof EffectParams>).map((key) => {
+            const ranges: Record<keyof EffectParams, [number, number, number]> = {
+              speed: [0, 3, 0.01],
+              scale: [0.5, 12, 0.1],
+              intensity: [0, 2, 0.01]
+            };
+            const [min, max, step] = ranges[key];
+            return (
+              <label key={key} className="slider-row">
+                <span>{key}</span>
+                <input
+                  type="range"
+                  min={min}
+                  max={max}
+                  step={step}
+                  value={params[key]}
+                  onChange={(e) => onParamChange(key, Number(e.target.value))}
+                />
+                <strong>{params[key].toFixed(2)}</strong>
+              </label>
+            );
+          })}
+        </aside>
+      </section>
+    </main>
+  );
+}
diff --git a/src/components/ControlPanel.tsx b/src/components/ControlPanel.tsx
new file mode 100644
index 0000000..87e63ba
--- /dev/null
+++ b/src/components/ControlPanel.tsx
@@ -0,0 +1,37 @@
+import type { EffectParams } from "../shaders/templates/types";
+
+type ControlPanelProps = {
+  params: EffectParams;
+  onChange: (key: keyof EffectParams, value: number) => void;
+};
+
+const ranges: Record<keyof EffectParams, [number, number, number]> = {
+  speed: [0, 3, 0.01],
+  scale: [0.5, 12, 0.1],
+  intensity: [0, 2, 0.01]
+};
+
+export default function ControlPanel({ params, onChange }: ControlPanelProps) {
+  return (
+    <section className="panel card">
+      <h3>Controls</h3>
+      {(Object.keys(params) as Array<keyof EffectParams>).map((key) => {
+        const [min, max, step] = ranges[key];
+        return (
+          <label key={key} className="slider-row">
+            <span>{key}</span>
+            <input
+              type="range"
+              min={min}
+              max={max}
+              step={step}
+              value={params[key]}
+              onChange={(e) => onChange(key, Number(e.target.value))}
+            />
+            <strong>{params[key].toFixed(2)}</strong>
+          </label>
+        );
+      })}
+    </section>
+  );
+}
diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
new file mode 100644
index 0000000..0e1a460
--- /dev/null
+++ b/src/components/Preview.tsx
@@ -0,0 +1,14 @@
+import { useThree } from "../engine/useThree";
+import type { UniformState } from "../engine/uniformManager";
+
+type PreviewProps = {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: UniformState;
+};
+
+export default function Preview({ vertexShader, fragmentShader, uniforms }: PreviewProps) {
+  const { mountRef } = useThree({ vertexShader, fragmentShader, uniforms });
+
+  return <div className="preview-canvas" ref={mountRef} />;
+}
diff --git a/src/components/ShaderEditor.tsx b/src/components/ShaderEditor.tsx
new file mode 100644
index 0000000..f061084
--- /dev/null
+++ b/src/components/ShaderEditor.tsx
@@ -0,0 +1,20 @@
+type ShaderEditorProps = {
+  fragmentShader: string;
+  vertexShader: string;
+};
+
+export default function ShaderEditor({ fragmentShader, vertexShader }: ShaderEditorProps) {
+  return (
+    <section className="panel card shader-box">
+      <h3>Shader Source</h3>
+      <label className="field">
+        <span>Fragment</span>
+        <textarea readOnly value={fragmentShader} rows={14} />
+      </label>
+      <label className="field">
+        <span>Vertex</span>
+        <textarea readOnly value={vertexShader} rows={7} />
+      </label>
+    </section>
+  );
+}
diff --git a/src/components/TemplateSelector.tsx b/src/components/TemplateSelector.tsx
new file mode 100644
index 0000000..b7052a3
--- /dev/null
+++ b/src/components/TemplateSelector.tsx
@@ -0,0 +1,47 @@
+import type { EffectTemplate } from "../shaders/templates/types";
+
+type TemplateSelectorProps = {
+  templates: EffectTemplate[];
+  current: string;
+  onSelect: (name: string) => void;
+  prompt: string;
+  onPromptChange: (value: string) => void;
+  onGenerate: () => void;
+};
+
+export default function TemplateSelector({
+  templates,
+  current,
+  onSelect,
+  prompt,
+  onPromptChange,
+  onGenerate
+}: TemplateSelectorProps) {
+  return (
+    <section className="panel card">
+      <h3>Templates</h3>
+      <label className="field">
+        <span>Template</span>
+        <select value={current} onChange={(e) => onSelect(e.target.value)}>
+          {templates.map((t) => (
+            <option key={t.name} value={t.name}>
+              {t.name}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="field">
+        <span>AI Prompt (Mock)</span>
+        <input
+          value={prompt}
+          onChange={(e) => onPromptChange(e.target.value)}
+          placeholder="例如：hot fire / water ripple / glitch distortion"
+        />
+      </label>
+      <button type="button" onClick={onGenerate}>
+        Generate Effect
+      </button>
+    </section>
+  );
+}
diff --git a/src/engine/aiMock.ts b/src/engine/aiMock.ts
new file mode 100644
index 0000000..1d5b9ba
--- /dev/null
+++ b/src/engine/aiMock.ts
@@ -0,0 +1,29 @@
+import type { EffectParams } from "../shaders/templates/types";
+
+export type GenerateResult = {
+  template: "fire" | "ripple" | "distortion";
+  params: EffectParams;
+};
+
+export function generateEffect(prompt: string): GenerateResult {
+  const p = prompt.toLowerCase();
+
+  if (p.includes("water") || p.includes("ripple") || p.includes("涟漪")) {
+    return {
+      template: "ripple",
+      params: { speed: 1.0, scale: 9.0, intensity: 0.9 }
+    };
+  }
+
+  if (p.includes("glitch") || p.includes("distort") || p.includes("扭曲")) {
+    return {
+      template: "distortion",
+      params: { speed: 1.4, scale: 6.2, intensity: 1.0 }
+    };
+  }
+
+  return {
+    template: "fire",
+    params: { speed: 1.5, scale: 4.0, intensity: 1.0 }
+  };
+}
diff --git a/src/engine/shaderBuilder.ts b/src/engine/shaderBuilder.ts
new file mode 100644
index 0000000..9795fad
--- /dev/null
+++ b/src/engine/shaderBuilder.ts
@@ -0,0 +1,31 @@
+import alphaModule from "../shaders/modules/alpha.glsl?raw";
+import noiseModule from "../shaders/modules/noise.glsl?raw";
+import uvScrollModule from "../shaders/modules/uv_scroll.glsl?raw";
+import type { EffectParams, EffectTemplate } from "../shaders/templates/types";
+
+const moduleCodeMap = {
+  noise: noiseModule,
+  uv_scroll: uvScrollModule,
+  alpha: alphaModule
+};
+
+export function buildShader(template: EffectTemplate, _params: EffectParams): string {
+  const modules = template.modules.map((name) => moduleCodeMap[name]).join("\n\n");
+
+  return `
+precision mediump float;
+
+uniform float u_time;
+uniform float u_speed;
+uniform float u_scale;
+uniform float u_intensity;
+
+varying vec2 v_uv;
+
+${modules}
+
+void main() {
+  ${template.fragmentLogic}
+}
+`;
+}
diff --git a/src/engine/uniformManager.ts b/src/engine/uniformManager.ts
new file mode 100644
index 0000000..7fd4e67
--- /dev/null
+++ b/src/engine/uniformManager.ts
@@ -0,0 +1,27 @@
+import * as THREE from "three";
+import type { EffectParams } from "../shaders/templates/types";
+
+export type UniformState = {
+  u_time: { value: number };
+  u_speed: { value: number };
+  u_scale: { value: number };
+  u_intensity: { value: number };
+};
+
+export function createUniforms(params: EffectParams): UniformState {
+  return {
+    u_time: { value: 0 },
+    u_speed: { value: params.speed },
+    u_scale: { value: params.scale },
+    u_intensity: { value: params.intensity }
+  };
+}
+
+export function updateUniformValues(
+  uniforms: UniformState | Record<string, THREE.IUniform>,
+  params: EffectParams
+): void {
+  uniforms.u_speed.value = params.speed;
+  uniforms.u_scale.value = params.scale;
+  uniforms.u_intensity.value = params.intensity;
+}
diff --git a/src/engine/useThree.ts b/src/engine/useThree.ts
new file mode 100644
index 0000000..ed626ee
--- /dev/null
+++ b/src/engine/useThree.ts
@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import type { UniformState } from "./uniformManager";
+
+type UseThreeProps = {
+  vertexShader: string;
+  fragmentShader: string;
+  uniforms: UniformState;
+};
+
+export function useThree({ vertexShader, fragmentShader, uniforms }: UseThreeProps) {
+  const mountRef = useRef<HTMLDivElement | null>(null);
+  const materialRef = useRef<THREE.ShaderMaterial | null>(null);
+
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) {
+      return;
+    }
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
+    camera.position.z = 1;
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(mount.clientWidth, mount.clientHeight);
+    mount.innerHTML = "";
+    mount.appendChild(renderer.domElement);
+
+    const geometry = new THREE.PlaneGeometry(2, 2);
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      uniforms
+    });
+    materialRef.current = material;
+
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    let rafId = 0;
+    const start = performance.now();
+
+    const animate = () => {
+      uniforms.u_time.value = (performance.now() - start) / 1000;
+      renderer.render(scene, camera);
+      rafId = requestAnimationFrame(animate);
+    };
+
+    const onResize = () => {
+      renderer.setSize(mount.clientWidth, mount.clientHeight);
+    };
+
+    window.addEventListener("resize", onResize);
+    animate();
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", onResize);
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      mount.innerHTML = "";
+    };
+  }, [fragmentShader, uniforms, vertexShader]);
+
+  return { mountRef, materialRef };
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..16958a2
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/src/shaders/base.vert b/src/shaders/base.vert
new file mode 100644
index 0000000..10e6a6e
--- /dev/null
+++ b/src/shaders/base.vert
@@ -0,0 +1,11 @@
+precision mediump float;
+
+attribute vec3 position;
+attribute vec2 uv;
+
+varying vec2 v_uv;
+
+void main() {
+  v_uv = uv;
+  gl_Position = vec4(position, 1.0);
+}
diff --git a/src/shaders/modules/alpha.glsl b/src/shaders/modules/alpha.glsl
new file mode 100644
index 0000000..c4f14b7
--- /dev/null
+++ b/src/shaders/modules/alpha.glsl
@@ -0,0 +1,3 @@
+float applyAlpha(float value, float intensity) {
+  return clamp(value * intensity, 0.0, 1.0);
+}
diff --git a/src/shaders/modules/noise.glsl b/src/shaders/modules/noise.glsl
new file mode 100644
index 0000000..fedba3f
--- /dev/null
+++ b/src/shaders/modules/noise.glsl
@@ -0,0 +1,18 @@
+float hash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 78.233);
+  return fract(p.x * p.y);
+}
+
+float noise2d(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
diff --git a/src/shaders/modules/uv_scroll.glsl b/src/shaders/modules/uv_scroll.glsl
new file mode 100644
index 0000000..80b58d2
--- /dev/null
+++ b/src/shaders/modules/uv_scroll.glsl
@@ -0,0 +1,4 @@
+vec2 scrollUV(vec2 uv, float time, float speed) {
+  uv.y += time * speed * 0.12;
+  return uv;
+}
diff --git a/src/shaders/templates/distortion.ts b/src/shaders/templates/distortion.ts
new file mode 100644
index 0000000..c9e71fb
--- /dev/null
+++ b/src/shaders/templates/distortion.ts
@@ -0,0 +1,22 @@
+import type { EffectTemplate } from "./types";
+
+const distortionTemplate: EffectTemplate = {
+  name: "distortion",
+  modules: ["noise", "alpha"],
+  defaultParams: {
+    speed: 1.2,
+    scale: 5.0,
+    intensity: 1.0
+  },
+  fragmentLogic: `
+vec2 uv = v_uv;
+float offset = noise2d(uv * u_scale + u_time * u_speed) - 0.5;
+uv += vec2(offset * 0.18, offset * 0.1);
+float shade = noise2d(uv * (u_scale * 0.7) + 11.3);
+vec3 color = mix(vec3(0.05, 0.05, 0.08), vec3(0.8, 0.95, 1.0), shade);
+float alpha = applyAlpha(0.65 + shade * 0.35, u_intensity);
+gl_FragColor = vec4(color, alpha);
+`
+};
+
+export default distortionTemplate;
diff --git a/src/shaders/templates/fire.ts b/src/shaders/templates/fire.ts
new file mode 100644
index 0000000..794bef1
--- /dev/null
+++ b/src/shaders/templates/fire.ts
@@ -0,0 +1,21 @@
+import type { EffectTemplate } from "./types";
+
+const fireTemplate: EffectTemplate = {
+  name: "fire",
+  modules: ["noise", "uv_scroll", "alpha"],
+  defaultParams: {
+    speed: 1.0,
+    scale: 3.0,
+    intensity: 1.0
+  },
+  fragmentLogic: `
+vec2 uv = scrollUV(v_uv, u_time, u_speed);
+float n = noise2d(uv * u_scale + vec2(0.0, u_time * 0.6));
+float flame = smoothstep(0.2, 1.0, n + (1.0 - uv.y) * 0.8);
+vec3 color = mix(vec3(0.85, 0.1, 0.02), vec3(1.0, 0.75, 0.08), flame);
+float alpha = applyAlpha(flame, u_intensity);
+gl_FragColor = vec4(color, alpha);
+`
+};
+
+export default fireTemplate;
diff --git a/src/shaders/templates/index.ts b/src/shaders/templates/index.ts
new file mode 100644
index 0000000..d20d4dc
--- /dev/null
+++ b/src/shaders/templates/index.ts
@@ -0,0 +1,7 @@
+import distortion from "./distortion";
+import fire from "./fire";
+import ripple from "./ripple";
+
+export const templates = [fire, ripple, distortion];
+
+export const templateMap = new Map(templates.map((t) => [t.name, t]));
diff --git a/src/shaders/templates/ripple.ts b/src/shaders/templates/ripple.ts
new file mode 100644
index 0000000..44416d1
--- /dev/null
+++ b/src/shaders/templates/ripple.ts
@@ -0,0 +1,21 @@
+import type { EffectTemplate } from "./types";
+
+const rippleTemplate: EffectTemplate = {
+  name: "ripple",
+  modules: ["uv_scroll", "alpha"],
+  defaultParams: {
+    speed: 0.8,
+    scale: 8.0,
+    intensity: 0.85
+  },
+  fragmentLogic: `
+vec2 uv = v_uv - 0.5;
+float dist = length(uv);
+float wave = sin((dist * u_scale - u_time * u_speed * 3.0) * 6.2831) * 0.5 + 0.5;
+vec3 color = mix(vec3(0.05, 0.2, 0.5), vec3(0.4, 0.85, 1.0), wave);
+float alpha = applyAlpha(1.0 - dist * 1.6, u_intensity);
+gl_FragColor = vec4(color, alpha);
+`
+};
+
+export default rippleTemplate;
diff --git a/src/shaders/templates/types.ts b/src/shaders/templates/types.ts
new file mode 100644
index 0000000..3e27a8e
--- /dev/null
+++ b/src/shaders/templates/types.ts
@@ -0,0 +1,12 @@
+export type EffectParams = {
+  speed: number;
+  scale: number;
+  intensity: number;
+};
+
+export type EffectTemplate = {
+  name: string;
+  modules: Array<"noise" | "uv_scroll" | "alpha">;
+  defaultParams: EffectParams;
+  fragmentLogic: string;
+};
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..f2e8c8e
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,208 @@
+:root {
+  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  line-height: 1.45;
+  color: #eef3ff;
+  background: #0d1119;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: radial-gradient(circle at 20% 0%, #23385c 0%, #0d1119 45%, #070a11 100%);
+}
+
+.app-shell {
+  width: min(95vw, 1440px);
+  margin: 0 auto;
+  min-height: 100vh;
+  padding: 18px 0 22px;
+  display: grid;
+  gap: 14px;
+}
+
+.topbar {
+  padding: 0 4px;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-size: 26px;
+  letter-spacing: 0.2px;
+}
+
+.topbar p {
+  margin: 4px 0 0;
+  color: #9db1d4;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1.7fr 1fr;
+  gap: 14px;
+  align-items: start;
+}
+
+.left-column {
+  display: grid;
+  gap: 12px;
+}
+
+.card {
+  background: rgba(12, 20, 35, 0.82);
+  border: 1px solid rgba(116, 156, 212, 0.25);
+  border-radius: 12px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
+}
+
+.player {
+  overflow: hidden;
+}
+
+.preview-canvas {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  min-height: 260px;
+}
+
+.player-bar {
+  border-top: 1px solid rgba(124, 166, 225, 0.2);
+  padding: 10px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-text {
+  color: #9fb4d8;
+  font-size: 12px;
+}
+
+.player-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.editor-shell {
+  padding: 10px;
+  display: grid;
+  gap: 10px;
+}
+
+.pass-manager {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.pass-tab,
+button {
+  border: none;
+  border-radius: 8px;
+  color: #eaf2ff;
+  background: linear-gradient(90deg, #2f67b3, #2f8dc1);
+  padding: 8px 12px;
+  cursor: pointer;
+  font: inherit;
+  white-space: nowrap;
+}
+
+.pass-tab {
+  background: #2d3e5d;
+  border: 1px solid rgba(132, 168, 221, 0.24);
+}
+
+.pass-tab.active {
+  background: #f39a34;
+  color: #141a27;
+  font-weight: 700;
+  border-color: transparent;
+}
+
+button:hover {
+  filter: brightness(1.08);
+}
+
+button.secondary {
+  background: #1a273d;
+  border: 1px solid rgba(132, 168, 221, 0.24);
+}
+
+button.small {
+  padding: 7px 10px;
+}
+
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.field {
+  display: grid;
+  gap: 6px;
+}
+
+.field span {
+  color: #a6bddf;
+  font-size: 12px;
+}
+
+.shader-editor textarea {
+  width: 100%;
+  min-height: 320px;
+  resize: vertical;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.right-column {
+  padding: 14px;
+  display: grid;
+  gap: 10px;
+}
+
+.right-column h3 {
+  margin: 0;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid rgba(126, 165, 221, 0.32);
+  border-radius: 8px;
+  color: #ecf2fd;
+  background: rgba(16, 29, 50, 0.9);
+  padding: 8px;
+  font: inherit;
+}
+
+.slider-row {
+  display: grid;
+  grid-template-columns: 64px 1fr 56px;
+  align-items: center;
+  gap: 10px;
+}
+
+.slider-row strong {
+  text-align: right;
+  color: #bad2f4;
+  font-size: 12px;
+}
+
+@media (max-width: 1100px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-canvas {
+    min-height: 220px;
+  }
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..a8fe76b
--- /dev/null
+++ b/test.html
@@ -0,0 +1,448 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Shader Preview Builder</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #0c1018;
+        --card: #141b27;
+        --line: #253147;
+        --text: #e8edf7;
+        --muted: #96a6c4;
+        --accent: #4fa3ff;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font: 14px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
+        color: var(--text);
+        background: radial-gradient(circle at 20% 10%, #1a2740, var(--bg) 55%);
+      }
+
+      .app {
+        max-width: 1240px;
+        margin: 0 auto;
+        padding: 16px;
+        display: grid;
+        gap: 12px;
+      }
+
+      .title {
+        margin: 0;
+        font-size: 20px;
+      }
+
+      .desc {
+        margin: 4px 0 0;
+        color: var(--muted);
+      }
+
+      .layout {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 12px;
+      }
+
+      .card {
+        background: color-mix(in oklab, var(--card) 88%, black 12%);
+        border: 1px solid var(--line);
+        border-radius: 12px;
+        overflow: hidden;
+      }
+
+      .preview-wrap {
+        position: relative;
+      }
+
+      #glCanvas {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        display: block;
+        background: #000;
+      }
+
+      .preview-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        border-top: 1px solid var(--line);
+      }
+
+      .preview-meta {
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      .panel {
+        padding: 12px;
+        display: grid;
+        gap: 10px;
+        align-content: start;
+      }
+
+      .row {
+        display: grid;
+        gap: 6px;
+      }
+
+      .row > label {
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      input,
+      select,
+      textarea,
+      button {
+        width: 100%;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        background: #0f1624;
+        color: var(--text);
+        padding: 8px;
+        font: inherit;
+      }
+
+      textarea {
+        min-height: 200px;
+        resize: vertical;
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+
+      .two {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+      }
+
+      button {
+        cursor: pointer;
+        background: linear-gradient(90deg, #2d69c7, #2ea4db);
+        border: none;
+        font-weight: 600;
+      }
+
+      button.secondary {
+        background: #1d2739;
+        border: 1px solid var(--line);
+      }
+
+      @media (max-width: 980px) {
+        .layout {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="app">
+      <header>
+        <h1 class="title">Shader 预览与交互结构</h1>
+        <p class="desc">仅保留预览和交互，方便快速构建。</p>
+      </header>
+
+      <section class="layout">
+        <article class="card preview-wrap">
+          <canvas id="glCanvas" width="1280" height="720"></canvas>
+          <div class="preview-bar">
+            <span class="preview-meta" id="fpsText">FPS: --</span>
+            <div class="two" style="width: 220px">
+              <button class="secondary" id="toggleBtn" type="button">暂停</button>
+              <button id="fullscreenBtn" type="button">全屏</button>
+            </div>
+          </div>
+        </article>
+
+        <aside class="card panel">
+          <div class="row">
+            <label for="template">模板</label>
+            <select id="template">
+              <option value="fire">Fire</option>
+              <option value="ripple">Ripple</option>
+              <option value="distort">Distort</option>
+            </select>
+          </div>
+
+          <div class="row">
+            <label for="speed">速度 <span id="speedVal">1.00</span></label>
+            <input id="speed" type="range" min="0" max="3" step="0.01" value="1" />
+          </div>
+
+          <div class="row">
+            <label for="scale">缩放 <span id="scaleVal">4.00</span></label>
+            <input id="scale" type="range" min="0.5" max="12" step="0.1" value="4" />
+          </div>
+
+          <div class="row">
+            <label for="intensity">强度 <span id="intensityVal">1.00</span></label>
+            <input id="intensity" type="range" min="0" max="2" step="0.01" value="1" />
+          </div>
+
+          <div class="row">
+            <label for="fragCode">Fragment Shader（可编辑）</label>
+            <textarea id="fragCode">

+ + +

+ +