From 6f70f47310ad2113538605b7bd73e4c593dd1339 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 14:50:06 -0400
Subject: [PATCH 01/14] feather: hot particles like feature

---
 cli/src/generated/plugin-catalog.ts           |   13 +
 package-lock.json                             |   36 +-
 package.json                                  |    1 +
 src-lua/example/test_auto/main.lua            |    1 +
 src-lua/example/test_cli/feather.config.lua   |    3 +-
 src-lua/feather/init.lua                      |    6 +
 src-lua/manifest.txt                          |    2 +
 src-lua/plugins/hot-particles/init.lua        | 1237 +++++++++++++++++
 src-lua/plugins/hot-particles/manifest.lua    |   10 +
 src/components/app-sidebar/nav-main.tsx       |   17 +-
 src/hooks/use-hot-particles.ts                |  252 ++++
 src/hooks/use-ws-connection.ts                |   31 +-
 .../components/ColorGradientEditor.tsx        |  134 ++
 .../components/CompositeSelector.tsx          |   83 ++
 .../hot-particles/components/EmitterList.tsx  |   68 +
 .../hot-particles/components/ExportPanel.tsx  |   17 +
 .../components/MovementPatternEditor.tsx      |   62 +
 .../components/PropertiesPanel.tsx            |  215 +++
 .../hot-particles/components/ShaderEditor.tsx |   66 +
 .../components/TextureImporter.tsx            |   85 ++
 src/pages/hot-particles/index.tsx             |  207 +++
 src/router.tsx                                |    9 +
 src/types/hot-particles.ts                    |  105 ++
 23 files changed, 2656 insertions(+), 4 deletions(-)
 create mode 100644 src-lua/plugins/hot-particles/init.lua
 create mode 100644 src-lua/plugins/hot-particles/manifest.lua
 create mode 100644 src/hooks/use-hot-particles.ts
 create mode 100644 src/pages/hot-particles/components/ColorGradientEditor.tsx
 create mode 100644 src/pages/hot-particles/components/CompositeSelector.tsx
 create mode 100644 src/pages/hot-particles/components/EmitterList.tsx
 create mode 100644 src/pages/hot-particles/components/ExportPanel.tsx
 create mode 100644 src/pages/hot-particles/components/MovementPatternEditor.tsx
 create mode 100644 src/pages/hot-particles/components/PropertiesPanel.tsx
 create mode 100644 src/pages/hot-particles/components/ShaderEditor.tsx
 create mode 100644 src/pages/hot-particles/components/TextureImporter.tsx
 create mode 100644 src/pages/hot-particles/index.tsx
 create mode 100644 src/types/hot-particles.ts

diff --git a/cli/src/generated/plugin-catalog.ts b/cli/src/generated/plugin-catalog.ts
index c5008a7f..5396c46c 100644
--- a/cli/src/generated/plugin-catalog.ts
+++ b/cli/src/generated/plugin-catalog.ts
@@ -112,6 +112,19 @@ export const pluginCatalog = [
     "optIn": false,
     "disabled": true
   },
+  {
+    "id": "hot-particles",
+    "sourceDir": "hot-particles",
+    "name": "Hot Particles",
+    "description": "Author HotParticles-compatible composite particle effects with live in-game preview",
+    "version": "1.0.0",
+    "capabilities": [
+      "draw",
+      "filesystem"
+    ],
+    "optIn": false,
+    "disabled": false
+  },
   {
     "id": "hot-reload",
     "sourceDir": "hot-reload",
diff --git a/package-lock.json b/package-lock.json
index 3f34ede0..6e4b070c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@tauri-apps/plugin-opener": "^2.5.4",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
+        "fflate": "^0.8.3",
         "gif.js": "0.2.0",
         "gif.js.optimized": "1.0.1",
         "lucide-react": "1.16.0",
@@ -81,7 +82,7 @@
     },
     "cli": {
       "name": "@kyonru/feather",
-      "version": "1.1.0",
+      "version": "1.1.1",
       "license": "EPL-2.0",
       "dependencies": {
         "chalk": "5.3.0",
@@ -584,6 +585,7 @@
       "os": [
         "aix"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -600,6 +602,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -616,6 +619,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -632,6 +636,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -648,6 +653,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -664,6 +670,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -680,6 +687,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -696,6 +704,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -712,6 +721,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -728,6 +738,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -744,6 +755,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -760,6 +772,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -776,6 +789,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -792,6 +806,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -808,6 +823,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -824,6 +840,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -840,6 +857,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -856,6 +874,7 @@
       "os": [
         "netbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -872,6 +891,7 @@
       "os": [
         "netbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -888,6 +908,7 @@
       "os": [
         "openbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -904,6 +925,7 @@
       "os": [
         "openbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -920,6 +942,7 @@
       "os": [
         "openharmony"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -936,6 +959,7 @@
       "os": [
         "sunos"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -952,6 +976,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -968,6 +993,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -984,6 +1010,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -6565,6 +6592,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -8495,6 +8528,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
diff --git a/package.json b/package.json
index 67d94696..a6ff4a66 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "@tauri-apps/plugin-opener": "^2.5.4",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
+    "fflate": "^0.8.3",
     "gif.js": "0.2.0",
     "gif.js.optimized": "1.0.1",
     "lucide-react": "1.16.0",
diff --git a/src-lua/example/test_auto/main.lua b/src-lua/example/test_auto/main.lua
index f31a0c91..9c5310a7 100644
--- a/src-lua/example/test_auto/main.lua
+++ b/src-lua/example/test_auto/main.lua
@@ -34,6 +34,7 @@ function love.load()
     "audio-debug",
     "coroutine-monitor",
     "filesystem",
+    "hot-particles",
     "runtime-snapshot",
   }
   local missing = {}
diff --git a/src-lua/example/test_cli/feather.config.lua b/src-lua/example/test_cli/feather.config.lua
index 87995c82..cdbae0ad 100644
--- a/src-lua/example/test_cli/feather.config.lua
+++ b/src-lua/example/test_cli/feather.config.lua
@@ -3,7 +3,8 @@
 
 return {
   sessionName = "CLI Example",
-  include = { "screenshots", "profiler", "console" },
+  include = { "screenshots", "profiler", "console", "hot-particles" },
+  capabilities = { "draw", "filesystem", "hot-particles" },
   exclude = { "hump.signal", "lua-state-machine", "animation-inspector" },
   sampleRate = 1,
   captureScreenshot = false,
diff --git a/src-lua/feather/init.lua b/src-lua/feather/init.lua
index ba1f0006..9ac891d9 100644
--- a/src-lua/feather/init.lua
+++ b/src-lua/feather/init.lua
@@ -471,6 +471,12 @@ function Feather:__handleCommand(msg)
       if type(result) == "table" and result.clipboard then
         response.clipboard = result.clipboard
       end
+      if type(result) == "table" and result.zipAssets then
+        response.zipAssets = result.zipAssets
+      end
+      if type(result) == "table" then
+        response.data = result
+      end
       self:__sendWs(json.encode(response))
     end
     -- Re-send config so desktop picks up dynamic label changes
diff --git a/src-lua/manifest.txt b/src-lua/manifest.txt
index d4e9d417..dd987b5e 100644
--- a/src-lua/manifest.txt
+++ b/src-lua/manifest.txt
@@ -36,6 +36,8 @@ plugin:entity-inspector:init.lua
 plugin:entity-inspector:manifest.lua
 plugin:filesystem:init.lua
 plugin:filesystem:manifest.lua
+plugin:hot-particles:init.lua
+plugin:hot-particles:manifest.lua
 plugin:hot-reload:hot_reloader.lua
 plugin:hot-reload:init.lua
 plugin:hot-reload:manifest.lua
diff --git a/src-lua/plugins/hot-particles/init.lua b/src-lua/plugins/hot-particles/init.lua
new file mode 100644
index 00000000..f20125d0
--- /dev/null
+++ b/src-lua/plugins/hot-particles/init.lua
@@ -0,0 +1,1237 @@
+local Class = require(FEATHER_PATH .. ".lib.class")
+local Base = require(FEATHER_PATH .. ".core.base")
+local base64 = require(FEATHER_PATH .. ".lib.base64")
+
+local HotParticlesPlugin = Class({ __includes = Base })
+
+local DEFAULT_BUFFER_SIZE = 1000
+local DEFAULT_X = 400
+local DEFAULT_Y = 300
+local TWO_PI = math.pi * 2
+
+local B64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+local B64_LOOKUP = {}
+for i = 1, #B64_CHARS do
+  B64_LOOKUP[B64_CHARS:sub(i, i)] = i - 1
+end
+
+local function decodeBase64(data)
+  data = tostring(data or ""):gsub("%s+", "")
+  local out = {}
+  local index = 1
+
+  for i = 1, #data, 4 do
+    local c1 = data:sub(i, i)
+    local c2 = data:sub(i + 1, i + 1)
+    local c3 = data:sub(i + 2, i + 2)
+    local c4 = data:sub(i + 3, i + 3)
+    local n1 = B64_LOOKUP[c1]
+    local n2 = B64_LOOKUP[c2]
+    local n3 = c3 ~= "=" and B64_LOOKUP[c3] or nil
+    local n4 = c4 ~= "=" and B64_LOOKUP[c4] or nil
+
+    if not n1 or not n2 then
+      return nil
+    end
+
+    out[index] = string.char(n1 * 4 + math.floor(n2 / 16))
+    index = index + 1
+    if n3 then
+      out[index] = string.char((n2 % 16) * 16 + math.floor(n3 / 4))
+      index = index + 1
+    end
+    if n3 and n4 then
+      out[index] = string.char((n3 % 4) * 64 + n4)
+      index = index + 1
+    end
+  end
+
+  return table.concat(out)
+end
+
+local function safeNumber(value, fallback)
+  local n = tonumber(value)
+  if n == nil then
+    return fallback
+  end
+  return n
+end
+
+local function safeString(value, fallback)
+  if value == nil then
+    return fallback or ""
+  end
+  return tostring(value)
+end
+
+local function sanitizeFilename(name, fallback)
+  name = tostring(name or fallback or "asset"):gsub("\\", "/"):match("([^/]+)$") or fallback or "asset"
+  name = name:gsub("[^%w%._%-]", "_")
+  if name == "" then
+    name = fallback or "asset"
+  end
+  return name
+end
+
+local function archivePath(path, fallback)
+  path = tostring(path or ""):gsub("\\", "/")
+  path = path:gsub("^%a:/+", ""):gsub("^/+", "")
+  local parts = {}
+  for part in path:gmatch("[^/]+") do
+    if part ~= "." and part ~= ".." and part ~= "" then
+      parts[#parts + 1] = part:gsub("[^%w%._%-]", "_")
+    end
+  end
+  if #parts == 0 then
+    return sanitizeFilename(fallback, "asset")
+  end
+  return table.concat(parts, "/")
+end
+
+local function quote(value)
+  return string.format("%q", tostring(value or ""))
+end
+
+local function fmt(n)
+  n = tonumber(n) or 0
+  if n == 0 then
+    return "0"
+  end
+  local s = string.format("%.6f", n)
+  s = s:gsub("(%..-)0+$", "%1"):gsub("%.$", "")
+  return s
+end
+
+local function getImageDataPng(imageData)
+  if not imageData or not imageData.encode then
+    return nil
+  end
+  local ok, fileData = pcall(imageData.encode, imageData, "png")
+  if ok and fileData and fileData.getString then
+    return fileData:getString()
+  end
+  return nil
+end
+
+local function generatePresetImage(name)
+  if not love or not love.image or not love.graphics then
+    return nil
+  end
+
+  local size = 64
+  local data = love.image.newImageData(size, size)
+  local cx = (size - 1) / 2
+  local cy = (size - 1) / 2
+  local radius = size / 2 - 1
+
+  local function setPixel(x, y, alpha)
+    if x >= 0 and x < size and y >= 0 and y < size then
+      data:setPixel(x, y, 1, 1, 1, math.max(0, math.min(1, alpha)))
+    end
+  end
+
+  data:mapPixel(function(x, y)
+    local dx = x - cx
+    local dy = y - cy
+    local dist = math.sqrt(dx * dx + dy * dy)
+    local angle = math.atan2 and math.atan2(dy, dx) or math.atan(dy, dx)
+    local alpha
+
+    if name == "ring" then
+      alpha = dist > radius * 0.62 and dist < radius * 0.9 and 1 or 0
+    elseif name == "light" then
+      local t = math.min(1, dist / radius)
+      alpha = (1 - t) * (1 - t)
+    elseif name == "star" then
+      local points = 5
+      local wave = (math.cos(angle * points) + 1) / 2
+      local edge = radius * (0.48 + wave * 0.42)
+      alpha = dist <= edge and 1 or 0
+    elseif name == "spiral" then
+      local t = dist / radius
+      local target = t * TWO_PI * 2.6
+      local delta = math.abs(((angle - target + math.pi) % TWO_PI) - math.pi)
+      alpha = delta < 0.2 and t < 0.96 and 1 or 0
+    else
+      local t = dist / radius
+      alpha = t <= 1 and 1 or 0
+    end
+
+    return 1, 1, 1, alpha
+  end)
+
+  if name == "spiral" then
+    for i = 0, 80 do
+      local t = i / 80
+      local angle = t * TWO_PI * 2.6
+      local r = t * radius
+      setPixel(math.floor(cx + math.cos(angle) * r), math.floor(cy + math.sin(angle) * r), 1)
+    end
+  end
+
+  return love.graphics.newImage(data), getImageDataPng(data)
+end
+
+local function readFileBase64(path)
+  if not path or path == "" or not love or not love.filesystem then
+    return nil
+  end
+  local ok, data = pcall(love.filesystem.read, path)
+  if ok and data then
+    return base64.encode(data)
+  end
+  return nil
+end
+
+local function copyParticleProperties(from, to)
+  if not from or not to then
+    return
+  end
+
+  local function copy(methodGet, methodSet)
+    local ok, values = pcall(function()
+      return { from[methodGet](from) }
+    end)
+    if ok then
+      pcall(to[methodSet], to, unpack(values))
+    end
+  end
+
+  copy("getColors", "setColors")
+  copy("getDirection", "setDirection")
+  copy("getEmissionRate", "setEmissionRate")
+  copy("getEmitterLifetime", "setEmitterLifetime")
+  copy("getInsertMode", "setInsertMode")
+  copy("getLinearAcceleration", "setLinearAcceleration")
+  copy("getLinearDamping", "setLinearDamping")
+  copy("getOffset", "setOffset")
+  copy("getParticleLifetime", "setParticleLifetime")
+  copy("getRadialAcceleration", "setRadialAcceleration")
+  copy("getRotation", "setRotation")
+  copy("getSizes", "setSizes")
+  copy("getSizeVariation", "setSizeVariation")
+  copy("getSpeed", "setSpeed")
+  copy("getSpin", "setSpin")
+  copy("getSpinVariation", "setSpinVariation")
+  copy("getSpread", "setSpread")
+  copy("getTangentialAcceleration", "setTangentialAcceleration")
+
+  local okRelative, relative = pcall(from.hasRelativeRotation, from)
+  if okRelative then
+    pcall(to.setRelativeRotation, to, relative)
+  end
+
+  local okArea, dist, dx, dy, angle, relativeArea = pcall(from.getEmissionArea, from)
+  if okArea then
+    pcall(to.setEmissionArea, to, dist, dx, dy, angle, relativeArea)
+  end
+
+  if from.getQuads and to.setQuads then
+    local okQuads, quads = pcall(function()
+      return { from:getQuads() }
+    end)
+    if okQuads and #quads > 0 then
+      pcall(to.setQuads, to, unpack(quads))
+    end
+  end
+end
+
+local PS_PROPERTIES = {
+  { key = "emissionRate", get = function(ps) return ps:getEmissionRate() end, set = function(ps, v) ps:setEmissionRate(v) end, type = "number", min = 0, max = 10000 },
+  { key = "emitterLifetime", get = function(ps) return ps:getEmitterLifetime() end, set = function(ps, v) ps:setEmitterLifetime(v) end, type = "number", min = -1, max = 600 },
+  { key = "particleLifetimeMin", get = function(ps) local a = ps:getParticleLifetime(); return a end, set = function(ps, v) local _, b = ps:getParticleLifetime(); ps:setParticleLifetime(v, b) end, type = "number", min = 0 },
+  { key = "particleLifetimeMax", get = function(ps) local _, b = ps:getParticleLifetime(); return b end, set = function(ps, v) local a = ps:getParticleLifetime(); ps:setParticleLifetime(a, v) end, type = "number", min = 0 },
+  { key = "direction", get = function(ps) return ps:getDirection() end, set = function(ps, v) ps:setDirection(v) end, type = "number" },
+  { key = "spread", get = function(ps) return ps:getSpread() end, set = function(ps, v) ps:setSpread(v) end, type = "number", min = 0 },
+  { key = "speedMin", get = function(ps) local a = ps:getSpeed(); return a end, set = function(ps, v) local _, b = ps:getSpeed(); ps:setSpeed(v, b) end, type = "number" },
+  { key = "speedMax", get = function(ps) local _, b = ps:getSpeed(); return b end, set = function(ps, v) local a = ps:getSpeed(); ps:setSpeed(a, v) end, type = "number" },
+  { key = "linearAccelXMin", get = function(ps) local a = ps:getLinearAcceleration(); return a end, set = function(ps, v) local _, b, c, d = ps:getLinearAcceleration(); ps:setLinearAcceleration(v, b, c, d) end, type = "number" },
+  { key = "linearAccelYMin", get = function(ps) local _, b = ps:getLinearAcceleration(); return b end, set = function(ps, v) local a, _, c, d = ps:getLinearAcceleration(); ps:setLinearAcceleration(a, v, c, d) end, type = "number" },
+  { key = "linearAccelXMax", get = function(ps) local _, _, c = ps:getLinearAcceleration(); return c end, set = function(ps, v) local a, b, _, d = ps:getLinearAcceleration(); ps:setLinearAcceleration(a, b, v, d) end, type = "number" },
+  { key = "linearAccelYMax", get = function(ps) local _, _, _, d = ps:getLinearAcceleration(); return d end, set = function(ps, v) local a, b, c = ps:getLinearAcceleration(); ps:setLinearAcceleration(a, b, c, v) end, type = "number" },
+  { key = "radialAccelMin", get = function(ps) local a = ps:getRadialAcceleration(); return a end, set = function(ps, v) local _, b = ps:getRadialAcceleration(); ps:setRadialAcceleration(v, b) end, type = "number" },
+  { key = "radialAccelMax", get = function(ps) local _, b = ps:getRadialAcceleration(); return b end, set = function(ps, v) local a = ps:getRadialAcceleration(); ps:setRadialAcceleration(a, v) end, type = "number" },
+  { key = "tangentialAccelMin", get = function(ps) local a = ps:getTangentialAcceleration(); return a end, set = function(ps, v) local _, b = ps:getTangentialAcceleration(); ps:setTangentialAcceleration(v, b) end, type = "number" },
+  { key = "tangentialAccelMax", get = function(ps) local _, b = ps:getTangentialAcceleration(); return b end, set = function(ps, v) local a = ps:getTangentialAcceleration(); ps:setTangentialAcceleration(a, v) end, type = "number" },
+  { key = "linearDampingMin", get = function(ps) local a = ps:getLinearDamping(); return a end, set = function(ps, v) local _, b = ps:getLinearDamping(); ps:setLinearDamping(v, b) end, type = "number", min = 0 },
+  { key = "linearDampingMax", get = function(ps) local _, b = ps:getLinearDamping(); return b end, set = function(ps, v) local a = ps:getLinearDamping(); ps:setLinearDamping(a, v) end, type = "number", min = 0 },
+  { key = "sizes", get = function(ps) local parts = {}; for _, v in ipairs({ ps:getSizes() }) do parts[#parts + 1] = fmt(v) end; return table.concat(parts, ", ") end, set = function(ps, value) local sizes = {}; for raw in tostring(value):gmatch("[^,]+") do local n = tonumber(raw); if n then sizes[#sizes + 1] = n end end; if #sizes > 0 then ps:setSizes(unpack(sizes)) end end, type = "string" },
+  { key = "sizeVariation", get = function(ps) return ps:getSizeVariation() end, set = function(ps, v) ps:setSizeVariation(v) end, type = "number", min = 0, max = 1 },
+  { key = "rotationMin", get = function(ps) local a = ps:getRotation(); return a end, set = function(ps, v) local _, b = ps:getRotation(); ps:setRotation(v, b) end, type = "number" },
+  { key = "rotationMax", get = function(ps) local _, b = ps:getRotation(); return b end, set = function(ps, v) local a = ps:getRotation(); ps:setRotation(a, v) end, type = "number" },
+  { key = "relativeRotation", get = function(ps) return ps:hasRelativeRotation() end, set = function(ps, v) ps:setRelativeRotation(v) end, type = "boolean" },
+  { key = "spinMin", get = function(ps) local a = ps:getSpin(); return a end, set = function(ps, v) local _, b = ps:getSpin(); ps:setSpin(v, b) end, type = "number" },
+  { key = "spinMax", get = function(ps) local _, b = ps:getSpin(); return b end, set = function(ps, v) local a = ps:getSpin(); ps:setSpin(a, v) end, type = "number" },
+  { key = "spinVariation", get = function(ps) return ps:getSpinVariation() end, set = function(ps, v) ps:setSpinVariation(v) end, type = "number", min = 0, max = 1 },
+  { key = "offsetX", get = function(ps) local a = ps:getOffset(); return a end, set = function(ps, v) local _, b = ps:getOffset(); ps:setOffset(v, b) end, type = "number" },
+  { key = "offsetY", get = function(ps) local _, b = ps:getOffset(); return b end, set = function(ps, v) local a = ps:getOffset(); ps:setOffset(a, v) end, type = "number" },
+  { key = "insertMode", get = function(ps) return ps:getInsertMode() end, set = function(ps, v) ps:setInsertMode(v) end, type = "string" },
+  { key = "colors", get = function(ps) local parts = {}; for _, c in ipairs({ ps:getColors() }) do if type(c) == "table" then for _, v in ipairs(c) do parts[#parts + 1] = fmt(v) end else parts[#parts + 1] = fmt(c) end end; return table.concat(parts, ", ") end, set = function(ps, value) local colors = {}; for raw in tostring(value):gmatch("[^,]+") do local n = tonumber(raw); if n then colors[#colors + 1] = n end end; if #colors >= 4 then ps:setColors(unpack(colors)) end end, type = "string" },
+  { key = "emissionAreaDist", get = function(ps) local a = ps:getEmissionArea(); return a end, set = function(ps, v) local _, b, c, d, e = ps:getEmissionArea(); ps:setEmissionArea(v, b, c, d, e) end, type = "string" },
+  { key = "emissionAreaDx", get = function(ps) local _, b = ps:getEmissionArea(); return b end, set = function(ps, v) local a, _, c, d, e = ps:getEmissionArea(); ps:setEmissionArea(a, v, c, d, e) end, type = "number", min = 0 },
+  { key = "emissionAreaDy", get = function(ps) local _, _, c = ps:getEmissionArea(); return c end, set = function(ps, v) local a, b, _, d, e = ps:getEmissionArea(); ps:setEmissionArea(a, b, v, d, e) end, type = "number", min = 0 },
+  { key = "emissionAreaAngle", get = function(ps) local _, _, _, d = ps:getEmissionArea(); return d end, set = function(ps, v) local a, b, c, _, e = ps:getEmissionArea(); ps:setEmissionArea(a, b, c, v, e) end, type = "number" },
+  { key = "emissionAreaRelative", get = function(ps) local _, _, _, _, e = ps:getEmissionArea(); return e end, set = function(ps, v) local a, b, c, d = ps:getEmissionArea(); ps:setEmissionArea(a, b, c, d, v) end, type = "boolean" },
+}
+
+local PS_PROP_MAP = {}
+for _, prop in ipairs(PS_PROPERTIES) do
+  PS_PROP_MAP[prop.key] = prop
+end
+
+local function setProp(ps, key, raw)
+  local prop = PS_PROP_MAP[key]
+  if not prop or not ps then
+    return false
+  end
+
+  local value
+  if prop.type == "number" then
+    value = tonumber(raw)
+    if value == nil then
+      return false
+    end
+    if prop.min and value < prop.min then value = prop.min end
+    if prop.max and value > prop.max then value = prop.max end
+  elseif prop.type == "boolean" then
+    value = raw == true or raw == "true" or raw == "1"
+  else
+    value = tostring(raw)
+  end
+
+  return pcall(prop.set, ps, value)
+end
+
+local function snapshotPS(ps)
+  local snapshot = {}
+  if not ps then
+    return snapshot
+  end
+  for _, prop in ipairs(PS_PROPERTIES) do
+    local ok, value = pcall(prop.get, ps)
+    if ok then
+      snapshot[prop.key] = value
+    end
+  end
+  local okCount, count = pcall(ps.getCount, ps)
+  if okCount then snapshot.count = count end
+  local okBuffer, buffer = pcall(ps.getBufferSize, ps)
+  if okBuffer then snapshot.bufferSize = buffer end
+  return snapshot
+end
+
+local function createDefaultSystem(index, template)
+  template = template or "fire"
+  local texturePreset = "circle"
+  if template == "smoke" then texturePreset = "light" end
+  if template == "sparkles" then texturePreset = "star" end
+  if template == "explosion-smoke" then texturePreset = "light" end
+
+  local image, png = generatePresetImage(texturePreset)
+  local ps = love.graphics.newParticleSystem(image, DEFAULT_BUFFER_SIZE)
+  ps:setEmitterLifetime(-1)
+  ps:setEmissionRate(100)
+  ps:setParticleLifetime(0.35, 1.3)
+  ps:setSpeed(40, 140)
+  ps:setDirection(-math.pi / 2)
+  ps:setSpread(math.pi / 3)
+  ps:setColors(1, 0.5, 0.1, 1, 1, 0.1, 0, 0)
+  ps:setSizes(1, 0)
+
+  if template == "smoke" then
+    ps:setEmissionRate(45)
+    ps:setParticleLifetime(1.2, 3.2)
+    ps:setSpeed(12, 45)
+    ps:setDirection(-math.pi / 2)
+    ps:setSpread(math.pi / 5)
+    ps:setLinearAcceleration(-8, -18, 8, -55)
+    ps:setLinearDamping(0.4, 1.2)
+    ps:setColors(0.35, 0.35, 0.38, 0.45, 0.15, 0.15, 0.17, 0)
+    ps:setSizes(0.35, 1.2, 2.2)
+    ps:setSizeVariation(0.6)
+  elseif template == "sparkles" then
+    ps:setEmissionRate(70)
+    ps:setParticleLifetime(0.35, 0.9)
+    ps:setSpeed(80, 220)
+    ps:setDirection(-math.pi / 2)
+    ps:setSpread(math.pi * 2)
+    ps:setLinearDamping(1.5, 3)
+    ps:setColors(1, 0.95, 0.55, 1, 0.35, 0.75, 1, 0)
+    ps:setSizes(0.45, 0.1)
+    ps:setSizeVariation(0.8)
+  elseif template == "explosion-core" then
+    ps:setEmitterLifetime(0.12)
+    ps:setEmissionRate(900)
+    ps:setParticleLifetime(0.25, 0.75)
+    ps:setSpeed(90, 330)
+    ps:setDirection(0)
+    ps:setSpread(math.pi * 2)
+    ps:setLinearDamping(2, 5)
+    ps:setColors(1, 0.95, 0.35, 1, 1, 0.25, 0.05, 0.65, 0.08, 0.02, 0.01, 0)
+    ps:setSizes(0.25, 1.25, 0)
+    ps:setSizeVariation(0.75)
+  elseif template == "explosion-smoke" then
+    ps:setEmitterLifetime(0.2)
+    ps:setEmissionRate(180)
+    ps:setParticleLifetime(0.8, 2.2)
+    ps:setSpeed(30, 120)
+    ps:setDirection(-math.pi / 2)
+    ps:setSpread(math.pi * 2)
+    ps:setLinearAcceleration(-15, -25, 15, -70)
+    ps:setLinearDamping(0.8, 1.8)
+    ps:setColors(0.28, 0.26, 0.24, 0.55, 0.12, 0.11, 0.1, 0)
+    ps:setSizes(0.4, 1.8, 2.6)
+    ps:setSizeVariation(0.7)
+  end
+
+  ps:start()
+
+  return {
+    system = ps,
+    title = "Emitter " .. tostring(index),
+    blendMode = "alpha",
+    shader = nil,
+    shaderPath = "",
+    shaderFilename = "",
+    shaderSource = "",
+    texturePath = "",
+    texturePreset = texturePreset,
+    textureFilename = texturePreset .. ".png",
+    textureAssetBase64 = png and base64.encode(png) or nil,
+    x = 0,
+    y = 0,
+    kickStartSteps = 0,
+    kickStartDt = 1 / 60,
+    emitAtStart = 0,
+    _ownedImage = image,
+  }
+end
+
+local function createDefaultSystems(template)
+  if template == "explosion" then
+    local core = createDefaultSystem(1, "explosion-core")
+    core.title = "Core Blast"
+    core.blendMode = "add"
+    core.emitAtStart = 220
+
+    local smoke = createDefaultSystem(2, "explosion-smoke")
+    smoke.title = "Smoke Bloom"
+    smoke.blendMode = "alpha"
+    smoke.emitAtStart = 90
+
+    local sparks = createDefaultSystem(3, "sparkles")
+    sparks.title = "Sparks"
+    sparks.blendMode = "add"
+    sparks.emitAtStart = 140
+    return { core, smoke, sparks }
+  end
+
+  if template == "smoke" then
+    local smoke = createDefaultSystem(1, "smoke")
+    smoke.title = "Smoke"
+    return { smoke }
+  end
+
+  if template == "sparkles" then
+    local sparks = createDefaultSystem(1, "sparkles")
+    sparks.title = "Sparkles"
+    sparks.blendMode = "add"
+    return { sparks }
+  end
+
+  local fire = createDefaultSystem(1, "fire")
+  fire.title = "Flame"
+  return { fire }
+end
+
+local function computeMovementOffset(movement, dt)
+  if type(movement) ~= "table" or movement.pattern == nil or movement.pattern == "none" then
+    return 0, 0
+  end
+  movement.t = (movement.t or 0) + dt
+  local t = movement.t * (movement.speed or 1)
+
+  if movement.pattern == "circle" then
+    local radius = movement.radius or 50
+    return math.cos(t) * radius, math.sin(t) * radius
+  end
+
+  if movement.pattern == "figure-eight" then
+    local rx = movement.radiusX or 80
+    local ry = movement.radiusY or 40
+    return math.sin(t) * rx, math.sin(t * 2) * ry * 0.5
+  end
+
+  if movement.pattern == "irregular" then
+    local scale = movement.scale or 50
+    return
+      (math.sin(t * 0.7 + 1.2) * 0.55 + math.sin(t * 1.9) * 0.3 + math.sin(t * 3.1) * 0.15) * scale,
+      (math.sin(t * 0.9 + 2.4) * 0.55 + math.sin(t * 1.7 + 0.3) * 0.3 + math.sin(t * 2.9) * 0.15) * scale
+  end
+
+  return 0, 0
+end
+
+function HotParticlesPlugin:init(config)
+  Base.init(self, config)
+  self.composites = {}
+  self.compositeOrder = {}
+  self.activeComposite = nil
+  self.activeSystem = 1
+end
+
+function HotParticlesPlugin:addComposite(name, getter)
+  if type(name) ~= "string" or name == "" or type(getter) ~= "function" then
+    return false
+  end
+  if self.composites[name] then
+    return false
+  end
+  self.composites[name] = {
+    kind = "game",
+    name = name,
+    getter = getter,
+    meta = {},
+  }
+  self.compositeOrder[#self.compositeOrder + 1] = name
+  if not self.activeComposite then
+    self.activeComposite = name
+  end
+  return true
+end
+
+function HotParticlesPlugin:removeComposite(name)
+  local entry = self.composites[name]
+  if not entry then
+    return false
+  end
+  self.composites[name] = nil
+  for i, item in ipairs(self.compositeOrder) do
+    if item == name then
+      table.remove(self.compositeOrder, i)
+      break
+    end
+  end
+  if self.activeComposite == name then
+    self.activeComposite = self.compositeOrder[1]
+    self.activeSystem = 1
+  end
+  return true
+end
+
+function HotParticlesPlugin:_newComposite(name, template)
+  local base = safeString(name, "")
+  if base == "" then
+    base = "Effect " .. tostring(#self.compositeOrder + 1)
+  end
+  local final = base
+  local suffix = 2
+  while self.composites[final] do
+    final = base .. " " .. tostring(suffix)
+    suffix = suffix + 1
+  end
+
+  self.composites[final] = {
+    kind = "scratch",
+    name = final,
+    x = DEFAULT_X,
+    y = DEFAULT_Y,
+    movement = { pattern = "none", radius = 50, radiusX = 80, radiusY = 40, speed = 1, scale = 50 },
+    offsetX = 0,
+    offsetY = 0,
+    systems = createDefaultSystems(template),
+  }
+  self.compositeOrder[#self.compositeOrder + 1] = final
+  self.activeComposite = final
+  self.activeSystem = 1
+  return final
+end
+
+function HotParticlesPlugin:_getCompositeTable(name)
+  local entry = self.composites[name or self.activeComposite]
+  if not entry then
+    return nil
+  end
+  if entry.kind == "game" then
+    local ok, composite = pcall(entry.getter)
+    if ok and type(composite) == "table" then
+      return composite
+    end
+    return nil
+  end
+  return entry
+end
+
+function HotParticlesPlugin:_getSystemEntry(name, index)
+  local entry = self.composites[name or self.activeComposite]
+  if not entry then
+    return nil
+  end
+  if entry.kind == "scratch" then
+    return entry.systems and entry.systems[index]
+  end
+  local composite = self:_getCompositeTable(name)
+  return composite and composite[index] or nil
+end
+
+function HotParticlesPlugin:_systemCount(name)
+  local entry = self.composites[name or self.activeComposite]
+  if not entry then
+    return 0
+  end
+  if entry.kind == "scratch" then
+    return entry.systems and #entry.systems or 0
+  end
+  local composite = self:_getCompositeTable(name)
+  if not composite then
+    return 0
+  end
+  local count = 0
+  while composite[count + 1] do
+    count = count + 1
+  end
+  return count
+end
+
+function HotParticlesPlugin:_meta(name, index)
+  local entry = self.composites[name or self.activeComposite]
+  if not entry then
+    return {}
+  end
+  if entry.kind == "scratch" then
+    return entry.systems and entry.systems[index] or {}
+  end
+  entry.meta[index] = entry.meta[index] or {}
+  return entry.meta[index]
+end
+
+function HotParticlesPlugin:update(dt)
+  for _, name in ipairs(self.compositeOrder) do
+    local entry = self.composites[name]
+    if entry and entry.kind == "scratch" then
+      entry.offsetX, entry.offsetY = computeMovementOffset(entry.movement, dt)
+      for _, system in ipairs(entry.systems or {}) do
+        if system.system then
+          pcall(system.system.update, system.system, dt)
+        end
+      end
+    end
+  end
+end
+
+function HotParticlesPlugin:onDraw()
+  if not love or not love.graphics then
+    return
+  end
+
+  local previousBlend, previousAlphaMode = love.graphics.getBlendMode()
+  local previousShader = love.graphics.getShader()
+  local r, g, b, a = love.graphics.getColor()
+
+  for _, name in ipairs(self.compositeOrder) do
+    local entry = self.composites[name]
+    if entry and entry.kind == "scratch" then
+      local x = (entry.x or DEFAULT_X) + (entry.offsetX or 0)
+      local y = (entry.y or DEFAULT_Y) + (entry.offsetY or 0)
+      for _, system in ipairs(entry.systems or {}) do
+        if system.system then
+          pcall(love.graphics.setBlendMode, system.blendMode or "alpha")
+          love.graphics.setShader(system.shader)
+          love.graphics.setColor(1, 1, 1, 1)
+          love.graphics.draw(system.system, x + (system.x or 0), y + (system.y or 0))
+        end
+      end
+    end
+  end
+
+  love.graphics.setBlendMode(previousBlend, previousAlphaMode)
+  love.graphics.setShader(previousShader)
+  love.graphics.setColor(r, g, b, a)
+end
+
+function HotParticlesPlugin:handleRequest()
+  local names = {}
+  for _, name in ipairs(self.compositeOrder) do
+    names[#names + 1] = name
+  end
+
+  local active = self.activeComposite
+  local data = nil
+  local entry = active and self.composites[active]
+  if entry then
+    local composite = self:_getCompositeTable(active)
+    local systems = {}
+    for i = 1, self:_systemCount(active) do
+      local sys = self:_getSystemEntry(active, i) or {}
+      local meta = self:_meta(active, i)
+      local ps = sys.system
+      systems[#systems + 1] = {
+        index = i,
+        title = safeString(meta.title or sys.title, "Emitter " .. tostring(i)),
+        blendMode = safeString(sys.blendMode, "alpha"),
+        x = safeNumber(sys.x, 0),
+        y = safeNumber(sys.y, 0),
+        kickStartSteps = safeNumber(sys.kickStartSteps, 0),
+        kickStartDt = safeNumber(sys.kickStartDt, 1 / 60),
+        emitAtStart = safeNumber(sys.emitAtStart, 0),
+        texturePath = safeString(meta.texturePath or sys.texturePath, ""),
+        texturePreset = safeString(meta.texturePreset or sys.texturePreset, ""),
+        textureFilename = safeString(meta.textureFilename or sys.textureFilename, ""),
+        shaderPath = safeString(meta.shaderPath or sys.shaderPath, ""),
+        shaderFilename = safeString(meta.shaderFilename or sys.shaderFilename, ""),
+        shaderSource = safeString(meta.shaderSource or sys.shaderSource, ""),
+        exportReady = (meta.texturePath or sys.texturePath or meta.textureAssetBase64 or sys.textureAssetBase64 or meta.texturePreset or sys.texturePreset) and true or false,
+        properties = snapshotPS(ps),
+      }
+    end
+    data = {
+      compositeType = entry.kind,
+      x = entry.kind == "scratch" and safeNumber(entry.x, DEFAULT_X) or safeNumber(composite and composite.x, 0),
+      y = entry.kind == "scratch" and safeNumber(entry.y, DEFAULT_Y) or safeNumber(composite and composite.y, 0),
+      movement = entry.kind == "scratch" and entry.movement or { pattern = "none" },
+      systems = systems,
+    }
+  end
+
+  return {
+    type = "hot-particles",
+    loading = false,
+    composites = names,
+    activeComposite = active,
+    activeSystem = self.activeSystem,
+    data = data,
+  }
+end
+
+function HotParticlesPlugin:handleParamsUpdate(request)
+  local params = request.params or {}
+  if params.composite and self.composites[params.composite] then
+    self.activeComposite = params.composite
+  end
+  if params.systemIndex then
+    self.activeSystem = math.max(1, safeNumber(params.systemIndex, self.activeSystem))
+  end
+
+  local name = params.composite or self.activeComposite
+  local entry = self.composites[name]
+  if not entry then
+    return
+  end
+
+  if entry.kind == "scratch" then
+    if params.compositeX ~= nil then entry.x = safeNumber(params.compositeX, entry.x) end
+    if params.compositeY ~= nil then entry.y = safeNumber(params.compositeY, entry.y) end
+    entry.movement = entry.movement or { pattern = "none" }
+    if params["movement.pattern"] ~= nil then entry.movement.pattern = tostring(params["movement.pattern"]) end
+    for _, key in ipairs({ "radius", "radiusX", "radiusY", "speed", "scale" }) do
+      local paramKey = "movement." .. key
+      if params[paramKey] ~= nil then
+        entry.movement[key] = safeNumber(params[paramKey], entry.movement[key])
+      end
+    end
+  end
+
+  local index = math.max(1, safeNumber(params.systemIndex, self.activeSystem))
+  local sys = self:_getSystemEntry(name, index)
+  if not sys then
+    return
+  end
+  local meta = self:_meta(name, index)
+
+  if params.title ~= nil then meta.title = tostring(params.title); sys.title = tostring(params.title) end
+  if params.blendMode ~= nil then sys.blendMode = tostring(params.blendMode) end
+  if params.emitterOffsetX ~= nil then sys.x = safeNumber(params.emitterOffsetX, sys.x) end
+  if params.emitterOffsetY ~= nil then sys.y = safeNumber(params.emitterOffsetY, sys.y) end
+  if params.kickStartSteps ~= nil then sys.kickStartSteps = safeNumber(params.kickStartSteps, sys.kickStartSteps) end
+  if params.kickStartDt ~= nil then sys.kickStartDt = safeNumber(params.kickStartDt, sys.kickStartDt) end
+  if params.emitAtStart ~= nil then sys.emitAtStart = safeNumber(params.emitAtStart, sys.emitAtStart) end
+
+  for key, value in pairs(params) do
+    setProp(sys.system, key, value)
+  end
+end
+
+function HotParticlesPlugin:_replaceTexture(sys, image)
+  if not sys or not image then
+    return
+  end
+  local old = sys.system
+  if old and old.setTexture then
+    local ok = pcall(old.setTexture, old, image)
+    if ok then
+      sys._ownedImage = image
+      return
+    end
+  end
+
+  local new = love.graphics.newParticleSystem(image, old and old:getBufferSize() or DEFAULT_BUFFER_SIZE)
+  copyParticleProperties(old, new)
+  sys.system = new
+  sys._ownedImage = image
+  new:start()
+end
+
+function HotParticlesPlugin:_applyTexture(name, index, params)
+  local sys = self:_getSystemEntry(name, index)
+  if not sys then
+    return nil, "System not found"
+  end
+  local meta = self:_meta(name, index)
+
+  if params.dataBase64 then
+    local raw = decodeBase64(params.dataBase64)
+    if not raw then
+      return nil, "Texture data is not valid base64"
+    end
+    local filename = sanitizeFilename(params.filename, "texture.png")
+    local okData, fileData = pcall(love.filesystem.newFileData, raw, filename)
+    if not okData or not fileData then
+      return nil, "Could not create texture file data"
+    end
+    local okImage, image = pcall(love.graphics.newImage, fileData)
+    if not okImage or not image then
+      return nil, "Could not create image from uploaded texture"
+    end
+    self:_replaceTexture(sys, image)
+    sys.texturePath = ""
+    sys.texturePreset = ""
+    sys.textureFilename = filename
+    sys.textureAssetBase64 = params.dataBase64
+    meta.texturePath = ""
+    meta.texturePreset = ""
+    meta.textureFilename = filename
+    meta.textureAssetBase64 = params.dataBase64
+    return true
+  end
+
+  if params.texturePath and params.texturePath ~= "" then
+    local ok, image = pcall(love.graphics.newImage, params.texturePath)
+    if not ok or not image then
+      return nil, "Could not load texture: " .. tostring(params.texturePath)
+    end
+    self:_replaceTexture(sys, image)
+    sys.texturePath = tostring(params.texturePath)
+    sys.texturePreset = ""
+    sys.textureFilename = sanitizeFilename(params.texturePath, "texture.png")
+    sys.textureAssetBase64 = nil
+    meta.texturePath = sys.texturePath
+    meta.texturePreset = ""
+    meta.textureFilename = sys.textureFilename
+    meta.textureAssetBase64 = nil
+    return true
+  end
+
+  local preset = safeString(params.preset, "")
+  if preset ~= "" then
+    local image, png = generatePresetImage(preset)
+    if not image then
+      return nil, "Could not generate texture preset"
+    end
+    self:_replaceTexture(sys, image)
+    sys.texturePath = ""
+    sys.texturePreset = preset
+    sys.textureFilename = preset .. ".png"
+    sys.textureAssetBase64 = png and base64.encode(png) or nil
+    meta.texturePath = ""
+    meta.texturePreset = preset
+    meta.textureFilename = sys.textureFilename
+    meta.textureAssetBase64 = sys.textureAssetBase64
+    return true
+  end
+
+  return nil, "No texture supplied"
+end
+
+function HotParticlesPlugin:_applyShader(name, index, params)
+  local sys = self:_getSystemEntry(name, index)
+  if not sys then
+    return nil, "System not found"
+  end
+  local meta = self:_meta(name, index)
+
+  if params.clearShader then
+    sys.shader = nil
+    sys.shaderPath = ""
+    sys.shaderFilename = ""
+    sys.shaderSource = ""
+    meta.shaderPath = ""
+    meta.shaderFilename = ""
+    meta.shaderSource = ""
+    return true
+  end
+
+  local source = params.shaderSource
+  local filename = sanitizeFilename(params.filename, "shader.glsl")
+  local path = safeString(params.shaderPath, "")
+  if path ~= "" then
+    local okRead, readSource = pcall(love.filesystem.read, path)
+    if not okRead or not readSource then
+      return nil, "Could not read shader: " .. path
+    end
+    source = readSource
+    filename = sanitizeFilename(path, "shader.glsl")
+  end
+
+  if not source or source == "" then
+    return nil, "No shader source supplied"
+  end
+
+  local okShader, shader = pcall(love.graphics.newShader, source)
+  if not okShader then
+    return nil, tostring(shader)
+  end
+
+  sys.shader = shader
+  sys.shaderPath = path
+  sys.shaderFilename = filename
+  sys.shaderSource = source
+  meta.shaderPath = path
+  meta.shaderFilename = filename
+  meta.shaderSource = source
+  return true
+end
+
+function HotParticlesPlugin:handleActionRequest(request)
+  local params = request.params or {}
+  local action = params.action
+  local name = params.composite or self.activeComposite
+  local index = math.max(1, safeNumber(params.systemIndex, self.activeSystem))
+
+  if action == "new-composite" then
+    return { composite = self:_newComposite(params.name, params.template) }
+  end
+
+  if action == "select-composite" then
+    if params.composite and self.composites[params.composite] then
+      self.activeComposite = params.composite
+      self.activeSystem = 1
+    end
+    return true
+  end
+
+  if action == "select-system" then
+    self.activeSystem = index
+    return true
+  end
+
+  local entry = name and self.composites[name]
+  if not entry then
+    return nil, "Composite not found"
+  end
+
+  if action == "delete-composite" then
+    if entry.kind ~= "scratch" then
+      return nil, "Only scratch composites can be deleted"
+    end
+    self:removeComposite(name)
+    return true
+  end
+
+  if action == "add-system" then
+    if entry.kind ~= "scratch" then
+      return nil, "Only scratch composites can add emitters"
+    end
+    local newIndex = #entry.systems + 1
+    entry.systems[newIndex] = createDefaultSystem(newIndex, params.template)
+    self.activeSystem = newIndex
+    return { systemIndex = newIndex }
+  end
+
+  if action == "remove-system" then
+    if entry.kind ~= "scratch" then
+      return nil, "Only scratch composites can remove emitters"
+    end
+    if #entry.systems <= 1 then
+      return nil, "A composite needs at least one emitter"
+    end
+    local sys = entry.systems[index]
+    if sys and sys.system and sys.system.release then pcall(sys.system.release, sys.system) end
+    table.remove(entry.systems, index)
+    self.activeSystem = math.min(self.activeSystem, #entry.systems)
+    return true
+  end
+
+  if action == "set-texture" then
+    return self:_applyTexture(name, index, params)
+  end
+
+  if action == "set-shader" then
+    return self:_applyShader(name, index, params)
+  end
+
+  local sys = self:_getSystemEntry(name, index)
+  if not sys or not sys.system then
+    return nil, "System not found"
+  end
+
+  if action == "emit" then
+    sys.system:emit(math.max(1, safeNumber(params.count, 100)))
+    return true
+  end
+
+  if action == "emit-all" then
+    for i = 1, self:_systemCount(name) do
+      local item = self:_getSystemEntry(name, i)
+      if item and item.system then
+        item.system:emit(math.max(1, safeNumber(params.count, 100)))
+      end
+    end
+    return true
+  end
+
+  if action == "reset" then
+    sys.system:reset()
+    sys.system:start()
+    return true
+  end
+
+  if action == "reset-all" then
+    for i = 1, self:_systemCount(name) do
+      local item = self:_getSystemEntry(name, i)
+      if item and item.system then
+        item.system:reset()
+        item.system:start()
+      end
+    end
+    return true
+  end
+
+  if action == "kick-start" then
+    local steps = math.max(0, safeNumber(sys.kickStartSteps, 0))
+    local dt = safeNumber(sys.kickStartDt, 1 / 60)
+    for _ = 1, steps do
+      sys.system:update(dt)
+    end
+    return true
+  end
+
+  if action == "export-code" then
+    return { clipboard = self:_generateCode(name), exportCode = self:_generateCode(name) }
+  end
+
+  if action == "export-zip" then
+    return { zipAssets = self:_buildZip(name) }
+  end
+
+  return true
+end
+
+function HotParticlesPlugin:_assetInfo(name, index, sys)
+  local meta = self:_meta(name, index)
+  local texturePath = safeString(meta.texturePath or sys.texturePath, "")
+  local texturePreset = safeString(meta.texturePreset or sys.texturePreset, "")
+  local textureFilename = sanitizeFilename(meta.textureFilename or sys.textureFilename or texturePath or texturePreset .. ".png", "texture.png")
+  local textureAssetBase64 = meta.textureAssetBase64 or sys.textureAssetBase64
+
+  if textureAssetBase64 == nil and texturePath ~= "" then
+    textureAssetBase64 = readFileBase64(texturePath)
+  end
+
+  if textureAssetBase64 == nil and texturePreset ~= "" then
+    local _, png = generatePresetImage(texturePreset)
+    textureAssetBase64 = png and base64.encode(png) or nil
+    textureFilename = sanitizeFilename(texturePreset .. ".png", "texture.png")
+  end
+
+  local shaderPath = safeString(meta.shaderPath or sys.shaderPath, "")
+  local shaderSource = safeString(meta.shaderSource or sys.shaderSource, "")
+  local shaderFilename = sanitizeFilename(meta.shaderFilename or sys.shaderFilename or shaderPath or ("shader_" .. tostring(index) .. ".glsl"), "shader.glsl")
+  if shaderSource == "" and shaderPath ~= "" then
+    local ok, source = pcall(love.filesystem.read, shaderPath)
+    if ok and source then
+      shaderSource = source
+    end
+  end
+
+  return {
+    texturePath = texturePath,
+    texturePreset = texturePreset,
+    textureFilename = textureFilename,
+    textureAssetBase64 = textureAssetBase64,
+    shaderPath = shaderPath,
+    shaderSource = shaderSource,
+    shaderFilename = shaderFilename,
+  }
+end
+
+function HotParticlesPlugin:_textureLoadPath(asset)
+  if asset.texturePath ~= "" then
+    return asset.texturePath
+  end
+  if asset.texturePreset ~= "" then
+    return "particles/" .. sanitizeFilename(asset.textureFilename, "texture.png")
+  end
+  return sanitizeFilename(asset.textureFilename, "texture.png")
+end
+
+function HotParticlesPlugin:_generateCode(name)
+  local count = self:_systemCount(name)
+  local entry = self.composites[name]
+  if not entry or count == 0 then
+    return "-- No Hot Particles composite selected"
+  end
+
+  local imageVars = {}
+  local shaderVars = {}
+  local imageCount = 0
+  local shaderCount = 0
+  local lines = {
+    "-- Generated by Feather Hot Particles",
+    "-- " .. os.date("%Y-%m-%d %H:%M:%S"),
+    "local LG = love.graphics",
+    "local particles = {x = " .. fmt(entry.x or 0) .. ", y = " .. fmt(entry.y or 0) .. "}",
+    "",
+  }
+
+  for i = 1, count do
+    local sys = self:_getSystemEntry(name, i)
+    if sys then
+      local asset = self:_assetInfo(name, i, sys)
+      local imageKey = self:_textureLoadPath(asset)
+      if not imageVars[imageKey] then
+        imageCount = imageCount + 1
+        local var = "image" .. tostring(imageCount)
+        imageVars[imageKey] = var
+        local loadPath = self:_textureLoadPath(asset)
+        lines[#lines + 1] = "local " .. var .. " = LG.newImage(" .. quote(loadPath) .. ")"
+        lines[#lines + 1] = var .. ':setFilter("nearest", "nearest")'
+      end
+
+      if asset.shaderSource ~= "" or asset.shaderPath ~= "" then
+        local shaderKey = asset.shaderPath ~= "" and asset.shaderPath or asset.shaderFilename
+        if not shaderVars[shaderKey] then
+          shaderCount = shaderCount + 1
+          local var = "shader" .. tostring(shaderCount)
+          shaderVars[shaderKey] = var
+          local loadPath = asset.shaderPath ~= "" and asset.shaderPath or asset.shaderFilename
+          lines[#lines + 1] = "local " .. var .. " = LG.newShader(love.filesystem.read(" .. quote(loadPath) .. "))"
+        end
+      end
+    end
+  end
+
+  for i = 1, count do
+    local sys = self:_getSystemEntry(name, i)
+    if sys and sys.system then
+      local ps = sys.system
+      local asset = self:_assetInfo(name, i, sys)
+      local imageKey = self:_textureLoadPath(asset)
+      local imageVar = imageVars[imageKey]
+      local psVar = "ps" .. tostring(i)
+      lines[#lines + 1] = ""
+      lines[#lines + 1] = "local " .. psVar .. " = LG.newParticleSystem(" .. imageVar .. ", " .. tostring(ps:getBufferSize()) .. ")"
+
+      local colors = { ps:getColors() }
+      if #colors > 0 then
+        local parts = {}
+        for _, value in ipairs(colors) do
+          if type(value) == "table" then
+            for _, item in ipairs(value) do parts[#parts + 1] = fmt(item) end
+          else
+            parts[#parts + 1] = fmt(value)
+          end
+        end
+        lines[#lines + 1] = psVar .. ":setColors(" .. table.concat(parts, ", ") .. ")"
+      end
+
+      local dist, dx, dy, angle, rel = ps:getEmissionArea()
+      local xmin, ymin, xmax, ymax = ps:getLinearAcceleration()
+      local dampMin, dampMax = ps:getLinearDamping()
+      local lifeMin, lifeMax = ps:getParticleLifetime()
+      local radialMin, radialMax = ps:getRadialAcceleration()
+      local rotMin, rotMax = ps:getRotation()
+      local speedMin, speedMax = ps:getSpeed()
+      local spinMin, spinMax = ps:getSpin()
+      local tangentMin, tangentMax = ps:getTangentialAcceleration()
+      local offsetX, offsetY = ps:getOffset()
+      local sizes = {}
+      for _, value in ipairs({ ps:getSizes() }) do sizes[#sizes + 1] = fmt(value) end
+
+      lines[#lines + 1] = psVar .. ":setDirection(" .. fmt(ps:getDirection()) .. ")"
+      lines[#lines + 1] = psVar .. ":setEmissionArea(" .. quote(dist) .. ", " .. fmt(dx) .. ", " .. fmt(dy) .. ", " .. fmt(angle) .. ", " .. tostring(rel) .. ")"
+      lines[#lines + 1] = psVar .. ":setEmissionRate(" .. fmt(ps:getEmissionRate()) .. ")"
+      lines[#lines + 1] = psVar .. ":setEmitterLifetime(" .. fmt(ps:getEmitterLifetime()) .. ")"
+      lines[#lines + 1] = psVar .. ":setInsertMode(" .. quote(ps:getInsertMode()) .. ")"
+      lines[#lines + 1] = psVar .. ":setLinearAcceleration(" .. table.concat({ fmt(xmin), fmt(ymin), fmt(xmax), fmt(ymax) }, ", ") .. ")"
+      lines[#lines + 1] = psVar .. ":setLinearDamping(" .. fmt(dampMin) .. ", " .. fmt(dampMax) .. ")"
+      lines[#lines + 1] = psVar .. ":setOffset(" .. fmt(offsetX) .. ", " .. fmt(offsetY) .. ")"
+      lines[#lines + 1] = psVar .. ":setParticleLifetime(" .. fmt(lifeMin) .. ", " .. fmt(lifeMax) .. ")"
+      lines[#lines + 1] = psVar .. ":setRadialAcceleration(" .. fmt(radialMin) .. ", " .. fmt(radialMax) .. ")"
+      lines[#lines + 1] = psVar .. ":setRelativeRotation(" .. tostring(ps:hasRelativeRotation()) .. ")"
+      lines[#lines + 1] = psVar .. ":setRotation(" .. fmt(rotMin) .. ", " .. fmt(rotMax) .. ")"
+      if #sizes > 0 then lines[#lines + 1] = psVar .. ":setSizes(" .. table.concat(sizes, ", ") .. ")" end
+      lines[#lines + 1] = psVar .. ":setSizeVariation(" .. fmt(ps:getSizeVariation()) .. ")"
+      lines[#lines + 1] = psVar .. ":setSpeed(" .. fmt(speedMin) .. ", " .. fmt(speedMax) .. ")"
+      lines[#lines + 1] = psVar .. ":setSpin(" .. fmt(spinMin) .. ", " .. fmt(spinMax) .. ")"
+      lines[#lines + 1] = psVar .. ":setSpinVariation(" .. fmt(ps:getSpinVariation()) .. ")"
+      lines[#lines + 1] = psVar .. ":setSpread(" .. fmt(ps:getSpread()) .. ")"
+      lines[#lines + 1] = psVar .. ":setTangentialAcceleration(" .. fmt(tangentMin) .. ", " .. fmt(tangentMax) .. ")"
+
+      local shaderKey = asset.shaderPath ~= "" and asset.shaderPath or asset.shaderFilename
+      local shaderValue = shaderVars[shaderKey] or "nil"
+      lines[#lines + 1] = "particles[" .. tostring(i) .. "] = {system = " .. psVar
+        .. ", kickStartSteps = " .. tostring(math.floor(safeNumber(sys.kickStartSteps, 0)))
+        .. ", kickStartDt = " .. fmt(sys.kickStartDt or (1 / 60))
+        .. ", emitAtStart = " .. tostring(math.floor(safeNumber(sys.emitAtStart, 0)))
+        .. ", blendMode = " .. quote(sys.blendMode or "alpha")
+        .. ", shader = " .. shaderValue
+        .. ", texturePreset = " .. quote(asset.texturePreset)
+        .. ", texturePath = " .. quote(asset.texturePath)
+        .. ", shaderPath = " .. quote(asset.shaderPath)
+        .. ", shaderFilename = " .. quote(asset.shaderSource ~= "" and asset.shaderFilename or "")
+        .. ", x = " .. fmt(sys.x or 0)
+        .. ", y = " .. fmt(sys.y or 0)
+        .. "}"
+    end
+  end
+
+  lines[#lines + 1] = ""
+  lines[#lines + 1] = "return particles"
+  return table.concat(lines, "\n")
+end
+
+function HotParticlesPlugin:_buildZip(name)
+  local files = {
+    { name = "init.lua", data = self:_generateCode(name), encoding = "text" },
+  }
+  local seen = { ["init.lua"] = true }
+
+  for i = 1, self:_systemCount(name) do
+    local sys = self:_getSystemEntry(name, i)
+    if sys then
+      local asset = self:_assetInfo(name, i, sys)
+      if asset.textureAssetBase64 then
+        local filename = self:_textureLoadPath(asset)
+        if asset.texturePath ~= "" then
+          filename = archivePath(asset.texturePath, asset.textureFilename)
+        end
+        if not seen[filename] then
+          seen[filename] = true
+          files[#files + 1] = { name = filename, data = asset.textureAssetBase64, encoding = "base64" }
+        end
+      end
+      if asset.shaderSource ~= "" then
+        local filename = sanitizeFilename(asset.shaderFilename, "shader_" .. tostring(i) .. ".glsl")
+        if not seen[filename] then
+          seen[filename] = true
+          files[#files + 1] = { name = filename, data = asset.shaderSource, encoding = "text" }
+        end
+      end
+    end
+  end
+
+  return {
+    filename = sanitizeFilename(name or "hot-particles", "hot-particles") .. ".zip",
+    files = files,
+  }
+end
+
+function HotParticlesPlugin:getConfig()
+  return {
+    type = "hot-particles",
+    tabName = "Hot Particles",
+    icon = "sparkles",
+  }
+end
+
+return HotParticlesPlugin
diff --git a/src-lua/plugins/hot-particles/manifest.lua b/src-lua/plugins/hot-particles/manifest.lua
new file mode 100644
index 00000000..6fa6f0de
--- /dev/null
+++ b/src-lua/plugins/hot-particles/manifest.lua
@@ -0,0 +1,10 @@
+return {
+  id = "hot-particles",
+  name = "Hot Particles",
+  description = "Author HotParticles-compatible composite particle effects with live in-game preview",
+  version = "1.0.0",
+  capabilities = { "draw", "filesystem" },
+  optIn = false,
+  disabled = false,
+  api = 5,
+}
diff --git a/src/components/app-sidebar/nav-main.tsx b/src/components/app-sidebar/nav-main.tsx
index 046e75e5..284b7007 100644
--- a/src/components/app-sidebar/nav-main.tsx
+++ b/src/components/app-sidebar/nav-main.tsx
@@ -7,7 +7,17 @@ import {
 } from '@/components/ui/sidebar';
 import { cn } from '@/utils/styles';
 import { NavLink, useLocation } from 'react-router';
-import { BugIcon, ClockIcon, GaugeIcon, GitCompareArrowsIcon, ImagesIcon, LogsIcon, TelescopeIcon, TerminalIcon } from 'lucide-react';
+import {
+  BugIcon,
+  ClockIcon,
+  GaugeIcon,
+  GitCompareArrowsIcon,
+  ImagesIcon,
+  LogsIcon,
+  SparklesIcon,
+  TelescopeIcon,
+  TerminalIcon,
+} from 'lucide-react';
 import { useDebuggerStore } from '@/store/debugger';
 import { useSessionStore } from '@/store/session';
 
@@ -52,6 +62,11 @@ export function NavMain() {
       url: '/assets',
       icon: ImagesIcon,
     },
+    {
+      title: 'Hot Particles',
+      url: '/hot-particles',
+      icon: SparklesIcon,
+    },
     {
       title: 'Compare',
       url: '/compare',
diff --git a/src/hooks/use-hot-particles.ts b/src/hooks/use-hot-particles.ts
new file mode 100644
index 00000000..2615bd00
--- /dev/null
+++ b/src/hooks/use-hot-particles.ts
@@ -0,0 +1,252 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { sendCommand } from '@/lib/send-command';
+import { useConfigStore } from '@/store/config';
+import { useSessionStore } from '@/store/session';
+import { debounce } from '@/utils/timers';
+import { sessionQueryKey } from './use-ws-connection';
+import type { HotParticlesData, HotParticlesSystem, HotParticlesTemplate } from '@/types/hot-particles';
+
+const PLUGIN_ID = 'hot-particles';
+
+const EMPTY_DATA: HotParticlesData = {
+  type: 'hot-particles',
+  composites: [],
+  activeComposite: null,
+  activeSystem: 1,
+  data: null,
+};
+
+type ParamValue = string | number | boolean;
+
+function updateSystemDraft(system: HotParticlesSystem, key: string, value: ParamValue): HotParticlesSystem {
+  if (key === 'title') return { ...system, title: String(value) };
+  if (key === 'blendMode') return { ...system, blendMode: String(value) };
+  if (key === 'emitterOffsetX') return { ...system, x: Number(value) };
+  if (key === 'emitterOffsetY') return { ...system, y: Number(value) };
+  if (key === 'kickStartSteps') return { ...system, kickStartSteps: Number(value) };
+  if (key === 'kickStartDt') return { ...system, kickStartDt: Number(value) };
+  if (key === 'emitAtStart') return { ...system, emitAtStart: Number(value) };
+  return { ...system, properties: { ...system.properties, [key]: value } };
+}
+
+function updateDraft(data: HotParticlesData | undefined, params: Record<string, ParamValue>): HotParticlesData | undefined {
+  if (!data?.data) return data;
+  const targetComposite = String(params.composite ?? data.activeComposite ?? '');
+  if (targetComposite && targetComposite !== data.activeComposite) return data;
+
+  const next: HotParticlesData = {
+    ...data,
+    activeSystem: Number(params.systemIndex ?? data.activeSystem),
+    data: {
+      ...data.data,
+      movement: { ...data.data.movement },
+      systems: data.data.systems.map((system) => ({ ...system, properties: { ...system.properties } })),
+    },
+  };
+  const nextData = next.data;
+  if (!nextData) return next;
+
+  if (params.compositeX !== undefined) nextData.x = Number(params.compositeX);
+  if (params.compositeY !== undefined) nextData.y = Number(params.compositeY);
+
+  for (const [key, value] of Object.entries(params)) {
+    if (key.startsWith('movement.')) {
+      const movementKey = key.slice('movement.'.length);
+      nextData.movement = { ...nextData.movement, [movementKey]: value };
+    }
+  }
+
+  const systemIndex = Number(params.systemIndex ?? data.activeSystem);
+  nextData.systems = nextData.systems.map((system) => {
+    if (system.index !== systemIndex) return system;
+    let draft = system;
+    for (const [key, value] of Object.entries(params)) {
+      if (key === 'composite' || key === 'systemIndex' || key === 'compositeX' || key === 'compositeY' || key.startsWith('movement.')) {
+        continue;
+      }
+      draft = updateSystemDraft(draft, key, value);
+    }
+    return draft;
+  });
+
+  return next;
+}
+
+function updateTextureDraft(
+  data: HotParticlesData | undefined,
+  systemIndex: number,
+  texture: Partial<Pick<HotParticlesSystem, 'texturePath' | 'texturePreset' | 'textureFilename' | 'exportReady'>>,
+): HotParticlesData | undefined {
+  if (!data?.data) return data;
+  return {
+    ...data,
+    data: {
+      ...data.data,
+      systems: data.data.systems.map((system) => (system.index === systemIndex ? { ...system, ...texture } : system)),
+    },
+  };
+}
+
+export function useHotParticles() {
+  const sessionId = useSessionStore((state) => state.sessionId);
+  const plugin = useConfigStore((state) => state.config?.plugins?.[PLUGIN_ID]);
+  const queryClient = useQueryClient();
+  const pendingParams = useRef<Record<string, ParamValue>>({});
+
+  const { data } = useQuery<HotParticlesData>({
+    queryKey: sessionQueryKey.plugin(sessionId ?? '', PLUGIN_ID),
+    queryFn: () => EMPTY_DATA,
+    enabled: false,
+    initialData: EMPTY_DATA,
+  });
+
+  const lastShaderResponse = useQuery<{ status?: string; message?: string }>({
+    queryKey: sessionQueryKey.pluginAction(sessionId ?? '', PLUGIN_ID, 'set-shader'),
+    queryFn: () => ({}),
+    enabled: false,
+  }).data;
+
+  const send = useCallback(
+    (message: Record<string, unknown>) => {
+      if (!sessionId) return Promise.resolve();
+      return sendCommand(sessionId, message).catch((error: unknown) => {
+        toast.error(error instanceof Error ? error.message : 'Hot Particles command failed');
+      });
+    },
+    [sessionId],
+  );
+
+  const pluginQueryKey = sessionQueryKey.plugin(sessionId ?? '', PLUGIN_ID);
+  const setOptimisticData = useCallback(
+    (params: Record<string, ParamValue>) => {
+      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) => updateDraft(current, params));
+    },
+    [pluginQueryKey, queryClient],
+  );
+
+  const flushParams = useMemo(
+    () =>
+      debounce(() => {
+        const params = pendingParams.current;
+        pendingParams.current = {};
+        if (Object.keys(params).length === 0) return;
+        send({ type: 'cmd:plugin:params', plugin: PLUGIN_ID, params });
+      }, 150),
+    [send],
+  );
+
+  const updateParam = useCallback(
+    (key: string, value: ParamValue) => {
+      setOptimisticData({ composite: data.activeComposite ?? '', systemIndex: data.activeSystem, [key]: value });
+      pendingParams.current[key] = value;
+      flushParams();
+    },
+    [data.activeComposite, data.activeSystem, flushParams, setOptimisticData],
+  );
+
+  const updateActiveParam = useCallback(
+    (key: string, value: ParamValue) => {
+      pendingParams.current.composite = data.activeComposite ?? '';
+      pendingParams.current.systemIndex = data.activeSystem;
+      setOptimisticData({ composite: data.activeComposite ?? '', systemIndex: data.activeSystem, [key]: value });
+      pendingParams.current[key] = value;
+      flushParams();
+    },
+    [data.activeComposite, data.activeSystem, flushParams, setOptimisticData],
+  );
+
+  const sendAction = useCallback(
+    (action: string, extra: Record<string, ParamValue> = {}) => {
+      return send({
+        type: 'cmd:plugin:action',
+        plugin: PLUGIN_ID,
+        action,
+        params: {
+          composite: data.activeComposite ?? '',
+          systemIndex: data.activeSystem,
+          ...extra,
+        },
+      });
+    },
+    [data.activeComposite, data.activeSystem, send],
+  );
+
+  const setTextureFromUpload = useCallback(
+    (filename: string, dataBase64: string) => {
+      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) =>
+        updateTextureDraft(current, data.activeSystem, {
+          texturePath: '',
+          texturePreset: '',
+          textureFilename: filename,
+          exportReady: true,
+        }),
+      );
+      return sendAction('set-texture', { filename, dataBase64 });
+    },
+    [data.activeSystem, pluginQueryKey, queryClient, sendAction],
+  );
+
+  const refreshAfterAction = useCallback(
+    (action: string, extra?: Record<string, ParamValue>) => {
+      sendAction(action, extra).then(() => {
+        queryClient.invalidateQueries({ queryKey: sessionQueryKey.plugin(sessionId ?? '', PLUGIN_ID) }).catch(() => {});
+      });
+    },
+    [queryClient, sendAction, sessionId],
+  );
+
+  return {
+    plugin,
+    available: !!plugin,
+    enabled: !!plugin && !plugin.disabled && !plugin.incompatible,
+    data,
+    composites: data.composites,
+    activeComposite: data.activeComposite,
+    activeSystemIndex: data.activeSystem,
+    composite: data.data,
+    activeSystem: data.data?.systems.find((system) => system.index === data.activeSystem) ?? null,
+    shaderError: lastShaderResponse?.status === 'error' ? lastShaderResponse.message : '',
+    updateActiveParam,
+    updateParam,
+    sendAction,
+    refreshAfterAction,
+    selectComposite: (name: string) => refreshAfterAction('select-composite', { composite: name }),
+    selectSystem: (index: number) => refreshAfterAction('select-system', { systemIndex: index }),
+    createComposite: (name?: string, template?: HotParticlesTemplate) =>
+      refreshAfterAction('new-composite', { ...(name ? { name } : {}), ...(template ? { template } : {}) }),
+    deleteComposite: () => refreshAfterAction('delete-composite'),
+    addSystem: () => refreshAfterAction('add-system'),
+    removeSystem: (systemIndex: number) => refreshAfterAction('remove-system', { systemIndex }),
+    emit: (all = false, count = 100) => refreshAfterAction(all ? 'emit-all' : 'emit', { count }),
+    reset: (all = false) => refreshAfterAction(all ? 'reset-all' : 'reset'),
+    kickStart: () => refreshAfterAction('kick-start'),
+    setTexturePreset: (preset: string) => {
+      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) =>
+        updateTextureDraft(current, data.activeSystem, {
+          texturePath: '',
+          texturePreset: preset,
+          textureFilename: `${preset}.png`,
+          exportReady: true,
+        }),
+      );
+      refreshAfterAction('set-texture', { preset });
+    },
+    setTexturePath: (texturePath: string) => {
+      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) =>
+        updateTextureDraft(current, data.activeSystem, {
+          texturePath,
+          texturePreset: '',
+          textureFilename: texturePath.split(/[\\/]/).pop() || 'texture.png',
+          exportReady: true,
+        }),
+      );
+      refreshAfterAction('set-texture', { texturePath });
+    },
+    setTextureFromUpload,
+    setShader: (params: Record<string, ParamValue>) => refreshAfterAction('set-shader', params),
+    exportCode: () => refreshAfterAction('export-code'),
+    exportZip: () => refreshAfterAction('export-zip'),
+  };
+}
diff --git a/src/hooks/use-ws-connection.ts b/src/hooks/use-ws-connection.ts
index 349db7c6..ebf7c7af 100644
--- a/src/hooks/use-ws-connection.ts
+++ b/src/hooks/use-ws-connection.ts
@@ -2,8 +2,9 @@ import { useEffect, useRef } from 'react';
 import { listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
 import { save as saveFileDialog } from '@tauri-apps/plugin-dialog';
-import { writeTextFile } from '@tauri-apps/plugin-fs';
+import { writeFile, writeTextFile } from '@tauri-apps/plugin-fs';
 import { useQueryClient } from '@tanstack/react-query';
+import { zipSync, strToU8 } from 'fflate';
 import { useConfigStore } from '@/store/config';
 import { useSessionStore } from '@/store/session';
 import { useSettingsStore } from '@/store/settings';
@@ -18,6 +19,7 @@ import { isWeb } from '@/utils/platform';
 import { useDebuggerStore, type PausedState } from '@/store/debugger';
 import { FEATHER_PLUGIN_API } from '@/constants/feather-api';
 import { sendCommand } from '@/lib/send-command';
+import { base64ToUint8Array } from '@/utils/arrays';
 
 // Cache key helpers — all indexed by the Rust-assigned session ID
 export const sessionQueryKey = {
@@ -27,6 +29,7 @@ export const sessionQueryKey = {
   observers: (sessionId: string) => [sessionId, 'observers'],
   assets: (sessionId: string) => [sessionId, 'assets'],
   plugin: (sessionId: string, pluginId: string) => [sessionId, 'plugin', pluginId],
+  pluginAction: (sessionId: string, pluginId: string, action: string) => [sessionId, 'plugin-action', pluginId, action],
   console: (sessionId: string) => [sessionId, 'console'],
   timeTravel: (sessionId: string) => [sessionId, 'time-travel'],
   timeTravelFrames: (sessionId: string) => [sessionId, 'time-travel-frames'],
@@ -468,8 +471,34 @@ export const useWsConnection = () => {
           case 'plugin:action:response': {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const response = msg as any;
+            const pluginId = response.plugin;
+            const action = response.action;
+            if (pluginId && action) {
+              queryClient.setQueryData(sessionQueryKey.pluginAction(sessionId, pluginId, action), response);
+            }
             if (response.status === 'error') {
               toast.error(`Plugin action failed: ${response.message || 'Unknown error'}`);
+            } else if (response.zipAssets && isWeb()) {
+              toast.error('ZIP export is available in the desktop app');
+            } else if (response.zipAssets && !isWeb()) {
+              const archive: Record<string, Uint8Array> = {};
+              for (const file of response.zipAssets.files ?? []) {
+                archive[file.name] =
+                  file.encoding === 'base64' ? base64ToUint8Array(file.data) : strToU8(String(file.data ?? ''));
+              }
+              const bytes = zipSync(archive);
+              saveFileDialog({
+                defaultPath: response.zipAssets.filename ?? 'hot-particles.zip',
+                filters: [{ name: 'ZIP archive', extensions: ['zip'] }],
+              })
+                .then(async (path) => {
+                  if (!path) return;
+                  await writeFile(path, bytes);
+                  toast.success(`Saved to ${path}`);
+                })
+                .catch(() => {
+                  toast.error('Failed to save ZIP');
+                });
             } else if (response.download && !isWeb()) {
               // Generic file download: plugin returned data to save
               const { filename, content, extension } = response.download;
diff --git a/src/pages/hot-particles/components/ColorGradientEditor.tsx b/src/pages/hot-particles/components/ColorGradientEditor.tsx
new file mode 100644
index 00000000..a3a404e3
--- /dev/null
+++ b/src/pages/hot-particles/components/ColorGradientEditor.tsx
@@ -0,0 +1,134 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useState } from 'react';
+
+type Stop = { r: number; g: number; b: number; a: number };
+
+function clamp(value: number) {
+  return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
+}
+
+function parse(value: string): Stop[] {
+  const nums = value
+    .split(',')
+    .map((part) => Number(part.trim()))
+    .filter(Number.isFinite)
+    .map(clamp);
+  const stops: Stop[] = [];
+  for (let i = 0; i + 3 < nums.length; i += 4) {
+    stops.push({ r: nums[i], g: nums[i + 1], b: nums[i + 2], a: nums[i + 3] });
+  }
+  return stops.length ? stops : [{ r: 1, g: 1, b: 1, a: 1 }];
+}
+
+function serialize(stops: Stop[]) {
+  return stops.flatMap((stop) => [stop.r, stop.g, stop.b, stop.a].map((value) => clamp(value).toFixed(3))).join(', ');
+}
+
+function hex(stop: Stop) {
+  const part = (value: number) =>
+    Math.round(clamp(value) * 255)
+      .toString(16)
+      .padStart(2, '0');
+  return `#${part(stop.r)}${part(stop.g)}${part(stop.b)}`;
+}
+
+function fromHex(value: string) {
+  const match = value.match(/^#?([0-9a-f]{6})$/i);
+  if (!match) return null;
+  const int = Number.parseInt(match[1], 16);
+  return { r: ((int >> 16) & 255) / 255, g: ((int >> 8) & 255) / 255, b: (int & 255) / 255 };
+}
+
+export function ColorGradientEditor({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+  const stops = parse(value);
+  const [selected, setSelected] = useState(0);
+  const stop = stops[Math.min(selected, stops.length - 1)];
+
+  const update = (index: number, patch: Partial<Stop>) => {
+    onChange(serialize(stops.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item))));
+  };
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex h-7 overflow-hidden rounded border">
+        {stops.map((item, index) => (
+          <button
+            key={index}
+            className="min-w-6 flex-1"
+            style={{
+              background: `rgba(${item.r * 255}, ${item.g * 255}, ${item.b * 255}, ${item.a})`,
+              boxShadow: selected === index ? 'inset 0 0 0 2px currentColor' : undefined,
+            }}
+            onClick={() => setSelected(index)}
+          />
+        ))}
+      </div>
+      <div className="grid grid-cols-[auto_1fr_6rem_auto] items-end gap-2">
+        <div className="grid gap-1">
+          <Label className="text-[10px]">Color</Label>
+          <input
+            className="size-8 rounded border bg-transparent p-1"
+            type="color"
+            value={hex(stop)}
+            onChange={(event) => {
+              const color = fromHex(event.target.value);
+              if (color) update(selected, color);
+            }}
+          />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px]">Hex</Label>
+          <Input
+            className="h-8 font-mono text-xs"
+            value={hex(stop)}
+            onChange={(event) => {
+              const color = fromHex(event.target.value);
+              if (color) update(selected, color);
+            }}
+          />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px]">Alpha</Label>
+          <Input
+            className="h-8 text-xs"
+            type="number"
+            min={0}
+            max={1}
+            step={0.01}
+            value={stop.a}
+            onChange={(event) => update(selected, { a: clamp(Number(event.target.value)) })}
+          />
+        </div>
+        <div className="flex gap-1">
+          <Button
+            size="icon"
+            variant="outline"
+            className="size-8"
+            disabled={stops.length >= 8}
+            onClick={() => {
+              onChange(serialize([...stops, { ...stop }]));
+              setSelected(stops.length);
+            }}
+          >
+            <PlusIcon className="size-4" />
+          </Button>
+          <Button
+            size="icon"
+            variant="outline"
+            className="size-8"
+            disabled={stops.length <= 1}
+            onClick={() => {
+              onChange(serialize(stops.filter((_, index) => index !== selected)));
+              setSelected(Math.max(0, selected - 1));
+            }}
+          >
+            <Trash2Icon className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/CompositeSelector.tsx b/src/pages/hot-particles/components/CompositeSelector.tsx
new file mode 100644
index 00000000..2eb43b2f
--- /dev/null
+++ b/src/pages/hot-particles/components/CompositeSelector.tsx
@@ -0,0 +1,83 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { HOT_PARTICLES_TEMPLATES, type HotParticlesTemplate } from '@/types/hot-particles';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useState } from 'react';
+
+type Props = {
+  composites: string[];
+  activeComposite: string | null;
+  compositeType?: 'scratch' | 'game';
+  onSelect: (name: string) => void;
+  onCreate: (name?: string, template?: HotParticlesTemplate) => void;
+  onDelete: () => void;
+};
+
+export function CompositeSelector({ composites, activeComposite, compositeType, onSelect, onCreate, onDelete }: Props) {
+  const [name, setName] = useState('');
+
+  return (
+    <div className="grid gap-2 border-b p-3">
+      <div className="flex gap-2">
+        <Select value={activeComposite ?? ''} onValueChange={onSelect}>
+          <SelectTrigger className="h-8 min-w-0 flex-1 text-xs">
+            <SelectValue placeholder="No composites" />
+          </SelectTrigger>
+          <SelectContent>
+            {composites.map((composite) => (
+              <SelectItem key={composite} value={composite}>
+                {composite}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          size="icon"
+          variant="outline"
+          className="size-8 shrink-0"
+          title="Delete scratch composite"
+          disabled={compositeType !== 'scratch'}
+          onClick={onDelete}
+        >
+          <Trash2Icon className="size-4" />
+        </Button>
+      </div>
+      <div className="flex gap-2">
+        <Input
+          className="h-8 text-xs"
+          placeholder="New composite"
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+        <Button
+          size="icon"
+          className="size-8 shrink-0"
+          title="New composite"
+          onClick={() => {
+            onCreate(name.trim() || undefined);
+            setName('');
+          }}
+        >
+          <PlusIcon className="size-4" />
+        </Button>
+      </div>
+      <div className="grid grid-cols-2 gap-1">
+        {HOT_PARTICLES_TEMPLATES.map((template) => (
+          <Button
+            key={template.value}
+            size="sm"
+            variant="outline"
+            className="h-7 justify-start px-2 text-xs"
+            onClick={() => {
+              onCreate(name.trim() || undefined, template.value);
+              setName('');
+            }}
+          >
+            {template.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/EmitterList.tsx b/src/pages/hot-particles/components/EmitterList.tsx
new file mode 100644
index 00000000..a1eec6c5
--- /dev/null
+++ b/src/pages/hot-particles/components/EmitterList.tsx
@@ -0,0 +1,68 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/styles';
+import type { HotParticlesSystem } from '@/types/hot-particles';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+
+type Props = {
+  systems: HotParticlesSystem[];
+  activeIndex: number;
+  isGameComposite: boolean;
+  onSelect: (index: number) => void;
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+};
+
+export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, onAdd, onRemove }: Props) {
+  return (
+    <div className="grid gap-1 p-2">
+      {systems.map((system) => {
+        const active = system.index === activeIndex;
+        return (
+          <button
+            key={system.index}
+            className={cn(
+              'group grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-2 rounded px-2 py-2 text-left text-xs',
+              active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+            )}
+            onClick={() => onSelect(system.index)}
+          >
+            <span className="flex size-6 items-center justify-center rounded border bg-background/20 font-mono text-[10px]">
+              {system.index}
+            </span>
+            <span className="min-w-0">
+              <span className="block truncate font-medium">{system.title}</span>
+              <span className={cn('block truncate text-[10px]', active ? 'text-primary-foreground/70' : 'text-muted-foreground')}>
+                {system.properties.count ?? 0} / {system.properties.bufferSize ?? 0}
+              </span>
+            </span>
+            <span className="flex items-center gap-1">
+              <Badge variant="outline" className={cn('h-5 px-1.5 text-[10px]', active && 'border-primary-foreground/40')}>
+                {system.blendMode}
+              </Badge>
+              {!isGameComposite && systems.length > 1 && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="size-6 opacity-0 group-hover:opacity-100"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onRemove(system.index);
+                  }}
+                >
+                  <Trash2Icon className="size-3" />
+                </Button>
+              )}
+            </span>
+          </button>
+        );
+      })}
+      {!isGameComposite && (
+        <Button variant="ghost" size="sm" className="mt-1 h-8 justify-start gap-2 text-xs" onClick={onAdd}>
+          <PlusIcon className="size-4" />
+          Add Emitter
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/ExportPanel.tsx b/src/pages/hot-particles/components/ExportPanel.tsx
new file mode 100644
index 00000000..d65920c3
--- /dev/null
+++ b/src/pages/hot-particles/components/ExportPanel.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@/components/ui/button';
+import { CodeIcon, FileArchiveIcon } from 'lucide-react';
+
+export function ExportPanel({ onExportCode, onExportZip }: { onExportCode: () => void; onExportZip: () => void }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button size="sm" className="h-8 gap-2 text-xs" onClick={onExportCode}>
+        <CodeIcon className="size-4" />
+        Copy Code
+      </Button>
+      <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={onExportZip}>
+        <FileArchiveIcon className="size-4" />
+        Save ZIP
+      </Button>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/MovementPatternEditor.tsx b/src/pages/hot-particles/components/MovementPatternEditor.tsx
new file mode 100644
index 00000000..7b4bee57
--- /dev/null
+++ b/src/pages/hot-particles/components/MovementPatternEditor.tsx
@@ -0,0 +1,62 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import type { HotParticlesMovement, MovementPattern } from '@/types/hot-particles';
+
+type Props = {
+  movement: HotParticlesMovement;
+  disabled?: boolean;
+  onChange: (key: string, value: string | number) => void;
+};
+
+function NumberField({ label, value, onChange }: { label: string; value?: number; onChange: (value: number) => void }) {
+  return (
+    <div className="grid gap-1">
+      <Label className="text-[10px] text-muted-foreground">{label}</Label>
+      <Input className="h-8 text-xs" type="number" value={value ?? 0} onChange={(event) => onChange(Number(event.target.value))} />
+    </div>
+  );
+}
+
+export function MovementPatternEditor({ movement, disabled, onChange }: Props) {
+  const pattern = movement.pattern ?? 'none';
+
+  return (
+    <div className="grid gap-2">
+      <Select
+        value={pattern}
+        disabled={disabled}
+        onValueChange={(value) => onChange('movement.pattern', value as MovementPattern)}
+      >
+        <SelectTrigger className="h-8 text-xs">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="none">None</SelectItem>
+          <SelectItem value="circle">Circle</SelectItem>
+          <SelectItem value="figure-eight">Figure Eight</SelectItem>
+          <SelectItem value="irregular">Irregular</SelectItem>
+        </SelectContent>
+      </Select>
+      {pattern === 'circle' && (
+        <div className="grid grid-cols-2 gap-2">
+          <NumberField label="Radius" value={movement.radius} onChange={(value) => onChange('movement.radius', value)} />
+          <NumberField label="Speed" value={movement.speed} onChange={(value) => onChange('movement.speed', value)} />
+        </div>
+      )}
+      {pattern === 'figure-eight' && (
+        <div className="grid grid-cols-3 gap-2">
+          <NumberField label="Radius X" value={movement.radiusX} onChange={(value) => onChange('movement.radiusX', value)} />
+          <NumberField label="Radius Y" value={movement.radiusY} onChange={(value) => onChange('movement.radiusY', value)} />
+          <NumberField label="Speed" value={movement.speed} onChange={(value) => onChange('movement.speed', value)} />
+        </div>
+      )}
+      {pattern === 'irregular' && (
+        <div className="grid grid-cols-2 gap-2">
+          <NumberField label="Scale" value={movement.scale} onChange={(value) => onChange('movement.scale', value)} />
+          <NumberField label="Speed" value={movement.speed} onChange={(value) => onChange('movement.speed', value)} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/PropertiesPanel.tsx b/src/pages/hot-particles/components/PropertiesPanel.tsx
new file mode 100644
index 00000000..ca89cc8e
--- /dev/null
+++ b/src/pages/hot-particles/components/PropertiesPanel.tsx
@@ -0,0 +1,215 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { BLEND_MODES, EMISSION_AREA_DISTRIBUTIONS, type HotParticlesSystem } from '@/types/hot-particles';
+import { ColorGradientEditor } from './ColorGradientEditor';
+
+type Props = {
+  system: HotParticlesSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+type Field = {
+  key: string;
+  label: string;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+const groups: Array<{ title: string; fields: Field[] }> = [
+  {
+    title: 'Emission',
+    fields: [
+      { key: 'emissionRate', label: 'Rate', min: 0, step: 1 },
+      { key: 'emitterLifetime', label: 'Emitter Lifetime', min: -1, step: 0.1 },
+      { key: 'particleLifetimeMin', label: 'Particle Life Min', min: 0, step: 0.01 },
+      { key: 'particleLifetimeMax', label: 'Particle Life Max', min: 0, step: 0.01 },
+      { key: 'emitAtStart', label: 'Emit At Start', min: 0, step: 1 },
+      { key: 'kickStartSteps', label: 'Kick Steps', min: 0, step: 1 },
+      { key: 'kickStartDt', label: 'Kick Dt', min: 0, step: 0.001 },
+    ],
+  },
+  {
+    title: 'Direction And Speed',
+    fields: [
+      { key: 'direction', label: 'Direction', step: 0.01 },
+      { key: 'spread', label: 'Spread', min: 0, step: 0.01 },
+      { key: 'speedMin', label: 'Speed Min', step: 1 },
+      { key: 'speedMax', label: 'Speed Max', step: 1 },
+    ],
+  },
+  {
+    title: 'Acceleration And Damping',
+    fields: [
+      { key: 'linearAccelXMin', label: 'Linear X Min', step: 1 },
+      { key: 'linearAccelYMin', label: 'Linear Y Min', step: 1 },
+      { key: 'linearAccelXMax', label: 'Linear X Max', step: 1 },
+      { key: 'linearAccelYMax', label: 'Linear Y Max', step: 1 },
+      { key: 'radialAccelMin', label: 'Radial Min', step: 1 },
+      { key: 'radialAccelMax', label: 'Radial Max', step: 1 },
+      { key: 'tangentialAccelMin', label: 'Tangential Min', step: 1 },
+      { key: 'tangentialAccelMax', label: 'Tangential Max', step: 1 },
+      { key: 'linearDampingMin', label: 'Damping Min', min: 0, step: 0.01 },
+      { key: 'linearDampingMax', label: 'Damping Max', min: 0, step: 0.01 },
+    ],
+  },
+  {
+    title: 'Rotation And Size',
+    fields: [
+      { key: 'rotationMin', label: 'Rotation Min', step: 0.01 },
+      { key: 'rotationMax', label: 'Rotation Max', step: 0.01 },
+      { key: 'spinMin', label: 'Spin Min', step: 0.01 },
+      { key: 'spinMax', label: 'Spin Max', step: 0.01 },
+      { key: 'spinVariation', label: 'Spin Variation', min: 0, max: 1, step: 0.01 },
+      { key: 'sizeVariation', label: 'Size Variation', min: 0, max: 1, step: 0.01 },
+      { key: 'offsetX', label: 'Texture Offset X', step: 1 },
+      { key: 'offsetY', label: 'Texture Offset Y', step: 1 },
+    ],
+  },
+  {
+    title: 'Emitter Offset',
+    fields: [
+      { key: 'emitterOffsetX', label: 'Emitter X', step: 1 },
+      { key: 'emitterOffsetY', label: 'Emitter Y', step: 1 },
+    ],
+  },
+];
+
+function valueFor(system: HotParticlesSystem, key: string): string | number | boolean {
+  if (key === 'emitterOffsetX') return system.x;
+  if (key === 'emitterOffsetY') return system.y;
+  if (key === 'kickStartSteps') return system.kickStartSteps;
+  if (key === 'kickStartDt') return system.kickStartDt;
+  if (key === 'emitAtStart') return system.emitAtStart;
+  return system.properties[key as keyof typeof system.properties] ?? '';
+}
+
+function NumberField({ field, system, onChange }: { field: Field; system: HotParticlesSystem; onChange: Props['onChange'] }) {
+  return (
+    <div className="grid gap-1">
+      <Label className="text-[10px] text-muted-foreground">{field.label}</Label>
+      <Input
+        className="h-8 text-xs"
+        type="number"
+        min={field.min}
+        max={field.max}
+        step={field.step ?? 1}
+        value={String(valueFor(system, field.key))}
+        onChange={(event) => onChange(field.key, Number(event.target.value))}
+      />
+    </div>
+  );
+}
+
+export function PropertiesPanel({ system, onChange }: Props) {
+  return (
+    <div className="grid gap-5">
+      <div className="grid gap-3">
+        <div className="grid grid-cols-[1fr_10rem_9rem] gap-2">
+          <div className="grid gap-1">
+            <Label className="text-[10px] text-muted-foreground">Title</Label>
+            <Input className="h-8 text-xs" value={system.title} onChange={(event) => onChange('title', event.target.value)} />
+          </div>
+          <div className="grid gap-1">
+            <Label className="text-[10px] text-muted-foreground">Blend</Label>
+            <Select value={system.blendMode} onValueChange={(value) => onChange('blendMode', value)}>
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {BLEND_MODES.map((mode) => (
+                  <SelectItem key={mode} value={mode}>
+                    {mode}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-end gap-2 pb-2">
+            <Checkbox
+              id="relative-rotation"
+              checked={!!system.properties.relativeRotation}
+              onCheckedChange={(checked) => onChange('relativeRotation', checked === true)}
+            />
+            <Label htmlFor="relative-rotation" className="text-xs">
+              Relative rotation
+            </Label>
+          </div>
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px] text-muted-foreground">Sizes</Label>
+          <Input
+            className="h-8 font-mono text-xs"
+            value={system.properties.sizes ?? ''}
+            onChange={(event) => onChange('sizes', event.target.value)}
+          />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px] text-muted-foreground">Color Gradient</Label>
+          <ColorGradientEditor value={system.properties.colors ?? '1, 1, 1, 1'} onChange={(value) => onChange('colors', value)} />
+        </div>
+      </div>
+
+      {groups.map((group) => (
+        <section key={group.title} className="grid gap-3">
+          <div className="flex items-center gap-3">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{group.title}</h3>
+            <Separator className="flex-1" />
+          </div>
+          <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+            {group.fields.map((field) => (
+              <NumberField key={field.key} field={field} system={system} onChange={onChange} />
+            ))}
+          </div>
+        </section>
+      ))}
+
+      <section className="grid gap-3">
+        <div className="flex items-center gap-3">
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Emission Area</h3>
+          <Separator className="flex-1" />
+        </div>
+        <div className="grid grid-cols-2 gap-2 lg:grid-cols-5">
+          <div className="grid gap-1">
+            <Label className="text-[10px] text-muted-foreground">Distribution</Label>
+            <Select
+              value={system.properties.emissionAreaDist ?? 'none'}
+              onValueChange={(value) => onChange('emissionAreaDist', value)}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {EMISSION_AREA_DISTRIBUTIONS.map((dist) => (
+                  <SelectItem key={dist} value={dist}>
+                    {dist}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          {[
+            { key: 'emissionAreaDx', label: 'Width' },
+            { key: 'emissionAreaDy', label: 'Height' },
+            { key: 'emissionAreaAngle', label: 'Angle' },
+          ].map((field) => (
+            <NumberField key={field.key} field={field} system={system} onChange={onChange} />
+          ))}
+          <div className="flex items-end gap-2 pb-2">
+            <Checkbox
+              id="emission-area-relative"
+              checked={!!system.properties.emissionAreaRelative}
+              onCheckedChange={(checked) => onChange('emissionAreaRelative', checked === true)}
+            />
+            <Label htmlFor="emission-area-relative" className="text-xs">
+              Relative
+            </Label>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/ShaderEditor.tsx b/src/pages/hot-particles/components/ShaderEditor.tsx
new file mode 100644
index 00000000..321d466b
--- /dev/null
+++ b/src/pages/hot-particles/components/ShaderEditor.tsx
@@ -0,0 +1,66 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { AlertTriangleIcon, EraserIcon, PlayIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type Props = {
+  shaderPath: string;
+  shaderFilename: string;
+  shaderSource: string;
+  error?: string;
+  onApply: (params: { shaderPath?: string; shaderSource?: string; filename?: string; clearShader?: boolean }) => void;
+};
+
+export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error, onApply }: Props) {
+  const [path, setPath] = useState(shaderPath);
+  const [source, setSource] = useState(shaderSource);
+  const [filename, setFilename] = useState(shaderFilename || 'shader.glsl');
+
+  useEffect(() => {
+    setPath(shaderPath);
+    setSource(shaderSource);
+    setFilename(shaderFilename || 'shader.glsl');
+  }, [shaderFilename, shaderPath, shaderSource]);
+
+  return (
+    <div className="grid gap-2">
+      <div className="grid grid-cols-[1fr_10rem] gap-2">
+        <div className="grid gap-1">
+          <Label className="text-[10px] text-muted-foreground">Shader path</Label>
+          <Input className="h-8 font-mono text-xs" value={path} onChange={(event) => setPath(event.target.value)} />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px] text-muted-foreground">Export file</Label>
+          <Input className="h-8 font-mono text-xs" value={filename} onChange={(event) => setFilename(event.target.value)} />
+        </div>
+      </div>
+      <Textarea
+        className="min-h-36 resize-y font-mono text-xs"
+        placeholder="vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) { return Texel(tex, texture_coords) * color; }"
+        value={source}
+        onChange={(event) => setSource(event.target.value)}
+      />
+      {error && (
+        <div className="flex items-start gap-2 rounded border border-destructive/30 bg-destructive/10 p-2 text-xs text-destructive">
+          <AlertTriangleIcon className="mt-0.5 size-4 shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+      <div className="flex gap-2">
+        <Button size="sm" className="h-8 gap-2 text-xs" onClick={() => onApply({ shaderSource: source, filename })}>
+          <PlayIcon className="size-4" />
+          Apply Source
+        </Button>
+        <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => path && onApply({ shaderPath: path })}>
+          Apply Path
+        </Button>
+        <Button size="sm" variant="ghost" className="h-8 gap-2 text-xs" onClick={() => onApply({ clearShader: true })}>
+          <EraserIcon className="size-4" />
+          Clear
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/TextureImporter.tsx b/src/pages/hot-particles/components/TextureImporter.tsx
new file mode 100644
index 00000000..cf00cf10
--- /dev/null
+++ b/src/pages/hot-particles/components/TextureImporter.tsx
@@ -0,0 +1,85 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { TEXTURE_PRESETS } from '@/types/hot-particles';
+import { isWeb } from '@/utils/platform';
+import { open as openFileDialog } from '@tauri-apps/plugin-dialog';
+import { readFile } from '@tauri-apps/plugin-fs';
+import { FolderOpenIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+function bytesToBase64(bytes: Uint8Array) {
+  let binary = '';
+  const chunkSize = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+  }
+  return btoa(binary);
+}
+
+function filename(path: string) {
+  return path.split(/[\\/]/).pop() || 'texture.png';
+}
+
+type Props = {
+  texturePath: string;
+  texturePreset: string;
+  textureFilename: string;
+  onPreset: (preset: string) => void;
+  onPath: (path: string) => void;
+  onUpload: (filename: string, dataBase64: string) => void;
+};
+
+export function TextureImporter({ texturePath, texturePreset, textureFilename, onPreset, onPath, onUpload }: Props) {
+  const current = texturePath || textureFilename || (texturePreset ? `preset:${texturePreset}` : 'No texture');
+
+  const pickFile = async () => {
+    if (isWeb()) {
+      toast.error('Texture file import is available in the desktop app');
+      return;
+    }
+    const path = await openFileDialog({
+      multiple: false,
+      filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'bmp', 'tga'] }],
+    });
+    if (!path || typeof path !== 'string') return;
+    const bytes = await readFile(path);
+    onUpload(filename(path), bytesToBase64(bytes));
+  };
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex gap-2">
+        <Input className="h-8 min-w-0 flex-1 font-mono text-xs" value={current} readOnly />
+        <Button size="icon" variant="outline" className="size-8" title="Import texture" onClick={pickFile}>
+          <FolderOpenIcon className="size-4" />
+        </Button>
+      </div>
+      <div className="grid gap-1">
+        <Label className="text-[10px] text-muted-foreground">Game path</Label>
+        <Input
+          className="h-8 font-mono text-xs"
+          placeholder="gfx/fire.png"
+          defaultValue={texturePath}
+          onBlur={(event) => {
+            const value = event.target.value.trim();
+            if (value && value !== texturePath) onPath(value);
+          }}
+        />
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {TEXTURE_PRESETS.map((preset) => (
+          <Button
+            key={preset}
+            size="sm"
+            variant={texturePreset === preset && !texturePath ? 'default' : 'outline'}
+            className="h-7 px-2 text-xs capitalize"
+            onClick={() => onPreset(preset)}
+          >
+            {preset}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/index.tsx b/src/pages/hot-particles/index.tsx
new file mode 100644
index 00000000..cd5b12a0
--- /dev/null
+++ b/src/pages/hot-particles/index.tsx
@@ -0,0 +1,207 @@
+import { AlertTriangleIcon, FileWarningIcon, RotateCcwIcon, SparklesIcon, ZapIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { useHotParticles } from '@/hooks/use-hot-particles';
+import { CompositeSelector } from './components/CompositeSelector';
+import { EmitterList } from './components/EmitterList';
+import { ExportPanel } from './components/ExportPanel';
+import { MovementPatternEditor } from './components/MovementPatternEditor';
+import { PropertiesPanel } from './components/PropertiesPanel';
+import { ShaderEditor } from './components/ShaderEditor';
+import { TextureImporter } from './components/TextureImporter';
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="grid gap-3 rounded-md border bg-card p-3">
+      <h2 className="text-sm font-semibold">{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+export default function HotParticlesPage() {
+  const hot = useHotParticles();
+  const composite = hot.composite;
+  const system = hot.activeSystem;
+  const isGameComposite = composite?.compositeType === 'game';
+
+  if (!hot.available) {
+    return (
+      <div className="flex min-h-0 flex-1 items-center justify-center p-8">
+        <div className="grid max-w-md justify-items-center gap-3 text-center">
+          <FileWarningIcon className="size-8 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">Hot Particles is not available in this session</h1>
+          <p className="text-sm text-muted-foreground">
+            Run with the bundled Feather plugins or update the game runtime.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!hot.enabled) {
+    return (
+      <div className="flex min-h-0 flex-1 items-center justify-center p-8">
+        <div className="grid max-w-md justify-items-center gap-3 text-center">
+          <AlertTriangleIcon className="size-8 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">Hot Particles is disabled</h1>
+          <p className="text-sm text-muted-foreground">
+            Enable the built-in plugin for this session to author particle effects.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[18rem_minmax(0,1fr)] overflow-hidden">
+      <aside className="min-h-0 border-r bg-muted/20">
+        <CompositeSelector
+          composites={hot.composites}
+          activeComposite={hot.activeComposite}
+          compositeType={composite?.compositeType}
+          onSelect={hot.selectComposite}
+          onCreate={hot.createComposite}
+          onDelete={hot.deleteComposite}
+        />
+        <ScrollArea className="h-[calc(100vh-9rem)]">
+          {composite ? (
+            <EmitterList
+              systems={composite.systems}
+              activeIndex={hot.activeSystemIndex}
+              isGameComposite={isGameComposite}
+              onSelect={hot.selectSystem}
+              onAdd={hot.addSystem}
+              onRemove={hot.removeSystem}
+            />
+          ) : (
+            <div className="grid gap-3 p-4 text-sm text-muted-foreground">
+              <SparklesIcon className="size-5" />
+              <p>No composites yet.</p>
+              <Button size="sm" className="h-8 text-xs" onClick={() => hot.createComposite()}>
+                New Composite
+              </Button>
+            </div>
+          )}
+        </ScrollArea>
+      </aside>
+
+      <main className="min-h-0 overflow-hidden">
+        <ScrollArea className="h-full">
+          <div className="grid gap-3 p-4">
+            <header className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h1 className="text-lg font-semibold">Hot Particles</h1>
+                <p className="text-sm text-muted-foreground">
+                  {hot.activeComposite ?? 'Create a composite'}{' '}
+                  {isGameComposite ? 'game composite' : 'scratch composite'}
+                </p>
+              </div>
+              {system && (
+                <div className="flex gap-2">
+                  <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={() => hot.emit(false)}>
+                    <ZapIcon className="size-4" />
+                    Emit
+                  </Button>
+                  <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={() => hot.reset(false)}>
+                    <RotateCcwIcon className="size-4" />
+                    Reset
+                  </Button>
+                  <Button size="sm" variant="outline" className="h-8 text-xs" onClick={hot.kickStart}>
+                    Kick Start
+                  </Button>
+                </div>
+              )}
+            </header>
+
+            {!system || !composite ? (
+              <div className="grid min-h-72 place-items-center rounded-md border bg-card p-8 text-center text-sm text-muted-foreground">
+                <div className="grid justify-items-center gap-3">
+                  <SparklesIcon className="size-7" />
+                  <p>Create a scratch composite or register one from game code.</p>
+                  <Button size="sm" className="h-8 text-xs" onClick={() => hot.createComposite()}>
+                    New Composite
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <>
+                {isGameComposite && !system.exportReady && (
+                  <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-700 dark:text-amber-300">
+                    This game composite is editable, but export metadata is incomplete. Add texture/shader metadata or
+                    import a texture before relying on ZIP export.
+                  </div>
+                )}
+
+                <div className="grid grid-cols-1 gap-3 xl:grid-cols-[minmax(0,1fr)_22rem]">
+                  <Section title="Emitter Properties">
+                    <PropertiesPanel system={system} onChange={hot.updateActiveParam} />
+                  </Section>
+
+                  <div className="grid content-start gap-3">
+                    <Section title="Composite Preview">
+                      <div className="grid grid-cols-2 gap-2">
+                        <label className="grid gap-1 text-[10px] text-muted-foreground">
+                          X
+                          <input
+                            className="h-8 rounded border bg-background px-2 text-xs text-foreground"
+                            type="number"
+                            value={composite.x}
+                            disabled={isGameComposite}
+                            onChange={(event) => hot.updateParam('compositeX', Number(event.target.value))}
+                          />
+                        </label>
+                        <label className="grid gap-1 text-[10px] text-muted-foreground">
+                          Y
+                          <input
+                            className="h-8 rounded border bg-background px-2 text-xs text-foreground"
+                            type="number"
+                            value={composite.y}
+                            disabled={isGameComposite}
+                            onChange={(event) => hot.updateParam('compositeY', Number(event.target.value))}
+                          />
+                        </label>
+                      </div>
+                      <Separator />
+                      <MovementPatternEditor
+                        movement={composite.movement}
+                        disabled={isGameComposite}
+                        onChange={hot.updateParam}
+                      />
+                    </Section>
+
+                    <Section title="Texture">
+                      <TextureImporter
+                        texturePath={system.texturePath}
+                        texturePreset={system.texturePreset}
+                        textureFilename={system.textureFilename}
+                        onPreset={hot.setTexturePreset}
+                        onPath={hot.setTexturePath}
+                        onUpload={hot.setTextureFromUpload}
+                      />
+                    </Section>
+
+                    <Section title="Shader">
+                      <ShaderEditor
+                        shaderPath={system.shaderPath}
+                        shaderFilename={system.shaderFilename}
+                        shaderSource={system.shaderSource}
+                        error={hot.shaderError}
+                        onApply={hot.setShader}
+                      />
+                    </Section>
+
+                    <Section title="Export">
+                      <ExportPanel onExportCode={hot.exportCode} onExportZip={hot.exportZip} />
+                    </Section>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}
diff --git a/src/router.tsx b/src/router.tsx
index 5d7a901b..4cebf2a6 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -24,6 +24,7 @@ import Debugger from './pages/debugger';
 import TimeTravel from './pages/time-travel';
 import Compare from './pages/compare';
 import Assets from './pages/assets';
+import HotParticles from './pages/hot-particles';
 import { SettingsModal } from './pages/settings';
 import { useConfigStore } from './store/config';
 import { AboutModal } from './pages/about';
@@ -229,6 +230,14 @@ export const Router = () => {
                   </RequireSession>
                 }
               />
+              <Route
+                path="/hot-particles"
+                element={
+                  <RequireSession>
+                    <HotParticles />
+                  </RequireSession>
+                }
+              />
               <Route
                 path="/compare"
                 element={
diff --git a/src/types/hot-particles.ts b/src/types/hot-particles.ts
new file mode 100644
index 00000000..17697cef
--- /dev/null
+++ b/src/types/hot-particles.ts
@@ -0,0 +1,105 @@
+export type MovementPattern = 'none' | 'circle' | 'figure-eight' | 'irregular';
+export type CompositeType = 'scratch' | 'game';
+export type HotParticlesTemplate = 'fire' | 'explosion' | 'smoke' | 'sparkles';
+
+export type HotParticlesMovement = {
+  pattern: MovementPattern;
+  radius?: number;
+  radiusX?: number;
+  radiusY?: number;
+  speed?: number;
+  scale?: number;
+};
+
+export type HotParticlesSystemProperties = {
+  emissionRate?: number;
+  emitterLifetime?: number;
+  particleLifetimeMin?: number;
+  particleLifetimeMax?: number;
+  direction?: number;
+  spread?: number;
+  speedMin?: number;
+  speedMax?: number;
+  linearAccelXMin?: number;
+  linearAccelYMin?: number;
+  linearAccelXMax?: number;
+  linearAccelYMax?: number;
+  radialAccelMin?: number;
+  radialAccelMax?: number;
+  tangentialAccelMin?: number;
+  tangentialAccelMax?: number;
+  linearDampingMin?: number;
+  linearDampingMax?: number;
+  sizes?: string;
+  sizeVariation?: number;
+  rotationMin?: number;
+  rotationMax?: number;
+  relativeRotation?: boolean;
+  spinMin?: number;
+  spinMax?: number;
+  spinVariation?: number;
+  offsetX?: number;
+  offsetY?: number;
+  insertMode?: string;
+  colors?: string;
+  emissionAreaDist?: string;
+  emissionAreaDx?: number;
+  emissionAreaDy?: number;
+  emissionAreaAngle?: number;
+  emissionAreaRelative?: boolean;
+  count?: number;
+  bufferSize?: number;
+};
+
+export type HotParticlesSystem = {
+  index: number;
+  title: string;
+  blendMode: string;
+  x: number;
+  y: number;
+  kickStartSteps: number;
+  kickStartDt: number;
+  emitAtStart: number;
+  texturePath: string;
+  texturePreset: string;
+  textureFilename: string;
+  shaderPath: string;
+  shaderFilename: string;
+  shaderSource: string;
+  exportReady: boolean;
+  properties: HotParticlesSystemProperties;
+};
+
+export type HotParticlesCompositeData = {
+  compositeType: CompositeType;
+  x: number;
+  y: number;
+  movement: HotParticlesMovement;
+  systems: HotParticlesSystem[];
+};
+
+export type HotParticlesData = {
+  type: 'hot-particles';
+  loading?: boolean;
+  composites: string[];
+  activeComposite: string | null;
+  activeSystem: number;
+  data: HotParticlesCompositeData | null;
+};
+
+export const BLEND_MODES = ['alpha', 'add', 'subtract', 'multiply', 'screen', 'replace', 'lighten', 'darken'] as const;
+export const TEXTURE_PRESETS = ['circle', 'ring', 'light', 'star', 'spiral'] as const;
+export const HOT_PARTICLES_TEMPLATES: Array<{ value: HotParticlesTemplate; label: string }> = [
+  { value: 'fire', label: 'Fire' },
+  { value: 'explosion', label: 'Explosion' },
+  { value: 'smoke', label: 'Smoke' },
+  { value: 'sparkles', label: 'Sparkles' },
+];
+export const EMISSION_AREA_DISTRIBUTIONS = [
+  'none',
+  'uniform',
+  'normal',
+  'ellipse',
+  'borderellipse',
+  'borderrectangle',
+] as const;

From e7ba0e10354651e12eb5635195e5720c5a1491b6 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 17:35:59 -0400
Subject: [PATCH 02/14] feather: add particle system playground

---
 cli/src/generated/plugin-catalog.ts           |  26 +-
 shader-graph-plan.md                          | 261 +++++++
 src-lua/example/test_auto/main.lua            |   2 +-
 src-lua/example/test_cli/feather.config.lua   |   4 +-
 src-lua/manifest.txt                          |   4 +-
 src-lua/plugins/hot-particles/manifest.lua    |  10 -
 .../particle-system-playground/README.md      | 127 +++
 .../init.lua                                  | 723 +++++++++++++++---
 .../particle-system-playground/manifest.lua   |  10 +
 src/components/app-sidebar/nav-main.tsx       |   6 +-
 ...s.ts => use-particle-system-playground.ts} | 114 ++-
 src/hooks/use-ws-connection.ts                |   2 +-
 .../components/ColorGradientEditor.tsx        | 134 ----
 .../hot-particles/components/EmitterList.tsx  |  68 --
 .../components/AccelerationEditor.tsx         |  51 ++
 .../components/CircularForceGizmo.tsx         | 234 ++++++
 .../components/ColorGradientEditor.tsx        | 229 ++++++
 .../components/CompositeSelector.tsx          |  88 ++-
 .../components/DampingRangeEditor.tsx         | 150 ++++
 .../components/EmitterList.tsx                |  72 ++
 .../components/ExportPanel.tsx                |   0
 .../components/LinearAccelPlane.tsx           | 258 +++++++
 .../components/MotionPresets.tsx              | 255 ++++++
 .../components/MovementPatternEditor.tsx      |   4 +-
 .../components/PropertiesPanel.tsx            |  90 ++-
 .../components/RangePairField.tsx             |  46 ++
 .../components/ShaderEditor.tsx               |   0
 .../components/SizeCurveEditor.tsx            | 176 +++++
 .../components/TextureImporter.tsx            |   2 +-
 .../components/curveUtils.ts                  |  25 +
 .../index.tsx                                 |  80 +-
 .../particle-system-playground/presets.ts     | 533 +++++++++++++
 src/router.tsx                                |   6 +-
 ...icles.ts => particle-system-playground.ts} |  24 +-
 34 files changed, 3321 insertions(+), 493 deletions(-)
 create mode 100644 shader-graph-plan.md
 delete mode 100644 src-lua/plugins/hot-particles/manifest.lua
 create mode 100644 src-lua/plugins/particle-system-playground/README.md
 rename src-lua/plugins/{hot-particles => particle-system-playground}/init.lua (68%)
 create mode 100644 src-lua/plugins/particle-system-playground/manifest.lua
 rename src/hooks/{use-hot-particles.ts => use-particle-system-playground.ts} (67%)
 delete mode 100644 src/pages/hot-particles/components/ColorGradientEditor.tsx
 delete mode 100644 src/pages/hot-particles/components/EmitterList.tsx
 create mode 100644 src/pages/particle-system-playground/components/AccelerationEditor.tsx
 create mode 100644 src/pages/particle-system-playground/components/CircularForceGizmo.tsx
 create mode 100644 src/pages/particle-system-playground/components/ColorGradientEditor.tsx
 rename src/pages/{hot-particles => particle-system-playground}/components/CompositeSelector.tsx (54%)
 create mode 100644 src/pages/particle-system-playground/components/DampingRangeEditor.tsx
 create mode 100644 src/pages/particle-system-playground/components/EmitterList.tsx
 rename src/pages/{hot-particles => particle-system-playground}/components/ExportPanel.tsx (100%)
 create mode 100644 src/pages/particle-system-playground/components/LinearAccelPlane.tsx
 create mode 100644 src/pages/particle-system-playground/components/MotionPresets.tsx
 rename src/pages/{hot-particles => particle-system-playground}/components/MovementPatternEditor.tsx (94%)
 rename src/pages/{hot-particles => particle-system-playground}/components/PropertiesPanel.tsx (76%)
 create mode 100644 src/pages/particle-system-playground/components/RangePairField.tsx
 rename src/pages/{hot-particles => particle-system-playground}/components/ShaderEditor.tsx (100%)
 create mode 100644 src/pages/particle-system-playground/components/SizeCurveEditor.tsx
 rename src/pages/{hot-particles => particle-system-playground}/components/TextureImporter.tsx (97%)
 create mode 100644 src/pages/particle-system-playground/components/curveUtils.ts
 rename src/pages/{hot-particles => particle-system-playground}/index.tsx (73%)
 create mode 100644 src/pages/particle-system-playground/presets.ts
 rename src/types/{hot-particles.ts => particle-system-playground.ts} (75%)

diff --git a/cli/src/generated/plugin-catalog.ts b/cli/src/generated/plugin-catalog.ts
index 5396c46c..d850b13c 100644
--- a/cli/src/generated/plugin-catalog.ts
+++ b/cli/src/generated/plugin-catalog.ts
@@ -112,19 +112,6 @@ export const pluginCatalog = [
     "optIn": false,
     "disabled": true
   },
-  {
-    "id": "hot-particles",
-    "sourceDir": "hot-particles",
-    "name": "Hot Particles",
-    "description": "Author HotParticles-compatible composite particle effects with live in-game preview",
-    "version": "1.0.0",
-    "capabilities": [
-      "draw",
-      "filesystem"
-    ],
-    "optIn": false,
-    "disabled": false
-  },
   {
     "id": "hot-reload",
     "sourceDir": "hot-reload",
@@ -216,6 +203,19 @@ export const pluginCatalog = [
     "optIn": false,
     "disabled": true
   },
+  {
+    "id": "particle-system-playground",
+    "sourceDir": "particle-system-playground",
+    "name": "Particles Playground",
+    "description": "Author composite particle effects with live in-game preview",
+    "version": "1.0.0",
+    "capabilities": [
+      "draw",
+      "filesystem"
+    ],
+    "optIn": false,
+    "disabled": false
+  },
   {
     "id": "physics-debug",
     "sourceDir": "physics-debug",
diff --git a/shader-graph-plan.md b/shader-graph-plan.md
new file mode 100644
index 00000000..c07362bd
--- /dev/null
+++ b/shader-graph-plan.md
@@ -0,0 +1,261 @@
+# Shader Graph — Visual Node-Based GLSL Editor for Feather + Love2D
+
+## Context
+
+Unity's ShaderGraph lets you build shaders visually by connecting nodes instead of writing GLSL by hand. This plan adds an equivalent feature to Feather: a dedicated `/shader-graph` page where you compose GLSL pixel + vertex shaders from a palette of nodes, see the generated code live, validate it against Love2D's compiler, and apply it directly to a particle-system-playground emitter. The particle-system-playground plugin already supports `set-shader`, so the Lua footprint for this feature is minimal.
+
+---
+
+## Architecture
+
+```
+Desktop (React)                           Game (Lua)
+  │                                          │
+  ├─ /shader-graph page                      ├─ shader-graph plugin
+  │   NodePalette │ ReactFlow canvas │ Code  │   compile-shader action (validation only)
+  │   playground target selector                     │
+  │   codegen.ts (pure TS, browser-side)     ├─ particle-system-playground plugin (modified)
+  │                                          │   update(dt) → shader:send("u_time", t)
+  │   use-shader-graph.ts hook               │
+  │   Zustand store (localStorage)           │
+  └─                                        └─
+```
+
+---
+
+## Phase Breakdown
+
+| Phase                    | Goal                                                                                            |
+| ------------------------ | ----------------------------------------------------------------------------------------------- |
+| 1 — Foundation           | Types, Zustand store, install `@xyflow/react`, codegen engine, Lua plugin skeleton, route + nav |
+| 2 — Lua backend          | `compile-shader` action, `u_time` update in particle-system-playground                          |
+| 3 — Node components      | ReactFlow custom nodes for all categories + palette                                             |
+| 4 — Page assembly        | 3-panel layout, code preview, toolbar, playground target selector                               |
+| 5 — Integration + polish | Validate round-trip, apply-to-Playground, error display, localStorage persistence               |
+
+---
+
+## New Files
+
+### TypeScript/React
+
+**`src/types/shader-graph.ts`**
+`GlslType`, `PortDef`, `NodeType` (full enum), `ShaderNodeData`, `ShaderNodeInstance`, `ShaderEdge`, `ParticleSystemPlaygroundTarget` types. Also exports the static node definition registry (`Record<NodeType, NodeDef>`) with port shapes for each node.
+
+**`src/store/shader-graph.ts`**
+Zustand store persisted to `localStorage` key `'feather-shader-graph'`. Persisted fields: `nodes`, `edges`, `shaderName`, `hotParticlesTarget`. Transient: `validationStatus`, `validationErrors`, `lastGeneratedGlsl`.
+
+```typescript
+type Store = {
+  nodes: ShaderNodeInstance[];
+  edges: ShaderEdge[];
+  selectedNodeId: string | null;
+  shaderName: string;
+  hotParticlesTarget: { composite: string; systemIndex: number } | null;
+  lastGeneratedGlsl: { pixel: string; vertex: string | null; hash: string } | null;
+  validationStatus: 'idle' | 'validating' | 'ok' | 'error';
+  validationErrors: { pixelError?: string; vertexError?: string };
+  // Actions: setNodes, setEdges, addNode, removeNode, updateNodeData, selectNode, setPlaygroundTarget, setLastGlsl, setValidationStatus
+};
+```
+
+**`src/pages/shader-graph/codegen.ts`**
+Pure TS GLSL generation. Input: `nodes`, `edges`. Output: `{ pixel: string; vertex: string | null }`.
+
+Algorithm:
+
+1. DFS from `FragmentOutput` (and `VertexOutput` if present) to collect reachable nodes in post-order
+2. Assign variable names: `v_<shortId>_<portId>`
+3. Collect `extern` declarations (e.g. `extern float u_time;`) in a pre-pass; deduplicate
+4. Emit per-node GLSL using an emitter registry, with type coercion for mismatched port types (float→vec4 expands to `vec4(x,x,x,1.0)`, vec4→float narrows to `.x`)
+5. Wrap in `vec4 effect(vec4 color, Image VarTex0, vec2 texture_coords, vec2 screen_coords)` for pixel; `vec4 position(mat4 transform_projection, vec4 vertex_position)` for vertex
+6. Prepend helper functions (e.g. `feather_hash`, `feather_noise`) if any noise nodes exist
+7. Fallback: empty graph → passthrough `return Texel(VarTex0, texture_coords) * color;`
+
+**`src/pages/shader-graph/index.tsx`**
+Top-level page. Toolbar (shader name, Validate, Apply to Playground, Copy buttons) above a `ResizablePanelGroup` with 3 panels: `NodePalette` 20% | `ShaderCanvas` 55% | `NodeInspector` + `CodePreview` 25%.
+
+**`src/pages/shader-graph/ShaderCanvas.tsx`**
+Wraps `<ReactFlow nodeTypes={nodeTypes} ...>` in controlled mode: reads `nodes`/`edges` from Zustand, applies `applyNodeChanges`/`applyEdgeChanges` on callbacks, writes back to store. Handles `onDrop` for drag-from-palette: reads `event.dataTransfer.getData('application/shader-node-type')`, converts screen→flow coords with `reactFlowInstance.screenToFlowPosition()`, dispatches `addNode`.
+
+**`src/pages/shader-graph/NodePalette.tsx`**
+Left panel. Collapsible sections by category. Each node type is `draggable` (sets dataTransfer on `dragStart`). Section below: playground target selector (`<Select>` for composite + number input for emitter index), visible only when particle-system-playground data is available.
+
+**`src/pages/shader-graph/NodeInspector.tsx`**
+Right panel top. Editable props for selected node (float inputs, vec4 RGBA swatches). Empty state when nothing selected.
+
+**`src/pages/shader-graph/CodePreview.tsx`**
+Right panel bottom. Syntax-highlighted GLSL via `prism-react-renderer` with `glsl` language (already in deps). Inline error display with `AlertTriangleIcon`. Toolbar buttons: Validate, Apply to Playground, Copy Pixel, Copy Vertex.
+
+**`src/pages/shader-graph/nodes/`**
+Node components registered in `nodeTypes`. One file per category:
+
+- `InputNodes.tsx` — TextureColor, TextureCoords, ScreenCoords, VertexColor, Time, Resolution, FloatConstant, Vec2Constant, Vec4Constant
+- `MathNodes.tsx` — Add, Multiply, Subtract, Divide, Power, Clamp, Lerp, Step, Smoothstep, Sin, Cos, Abs, Fract, Floor
+- `VectorNodes.tsx` — Split, Combine, Normalize, Length, Dot
+- `ColorNodes.tsx` — Desaturate, OneMinus, HueShift
+- `NoiseNodes.tsx` — SimpleNoise, Ripple
+- `OutputNodes.tsx` — FragmentOutput
+- `VertexNodes.tsx` — VertexPosition, TransformMatrix, VertexOutput
+
+All nodes follow this pattern:
+
+```tsx
+export function AddNode({ data, selected }: NodeProps<ShaderNodeData>) {
+  return (
+    <div
+      className={cn(
+        'rounded border bg-card px-3 py-2 shadow-sm text-xs min-w-24 border-l-2 border-l-orange-500',
+        selected && 'ring-2 ring-primary',
+      )}
+    >
+      <Handle type="target" position={Position.Left} id="in0" style={{ top: '33%' }} />
+      <Handle type="target" position={Position.Left} id="in1" style={{ top: '66%' }} />
+      <div className="text-[10px] uppercase text-muted-foreground mb-1">Math</div>
+      <div className="font-semibold">{data.label}</div>
+      <Handle type="source" position={Position.Right} id="out0" />
+    </div>
+  );
+}
+```
+
+Color coding: Input=blue, Math=orange, Vector=purple, Color=pink, Noise=green, Output=red.
+
+**`src/hooks/use-shader-graph.ts`**
+Composes Zustand store + `useParticleSystemPlayground()` + WS sending. Exposes:
+
+- `generateAndStore()` — runs codegen, updates store
+- `validateShader()` — sends `compile-shader` to shader-graph plugin; watches React Query key `pluginAction(sessionId, 'shader-graph', 'compile-shader')` for result
+- `applyToParticleSystemPlayground()` — sends `cmd:plugin:action` to particle-system-playground `set-shader` with `shaderSource` from store
+- `shaderApplyError` — from `playground.shaderError`
+
+### Lua
+
+**`src-lua/plugins/shader-graph/manifest.lua`**
+
+```lua
+return {
+  id = "shader-graph", name = "Shader Graph",
+  description = "Visual GLSL shader authoring with live validation",
+  version = "1.0.0", capabilities = {}, optIn = false, disabled = false, api = 5,
+}
+```
+
+**`src-lua/plugins/shader-graph/init.lua`**
+Minimal plugin — only validates GLSL.
+
+- `handleRequest()` → `{type="shader-graph"}`
+- `handleActionRequest()`:
+  - `compile-shader`: `pcall(love.graphics.newShader, pixelSource)` (and combined if vertex non-empty). Return `{status="ok"}` or `{status="error", pixelError=..., vertexError=...}`. Note: Love2D's combined shader format puts vertex and pixel in one string separated by `varying` declarations; for validation we can test each separately.
+- `getConfig()` → `{type="shader-graph"}` (no `tabName` — not shown in plugins sidebar)
+
+---
+
+## Modified Files
+
+**`src/router.tsx`**
+Add `import ShaderGraph from './pages/shader-graph'` and route:
+
+```tsx
+<Route
+  path="/shader-graph"
+  element={
+    <RequireSession>
+      <ShaderGraph />
+    </RequireSession>
+  }
+/>
+```
+
+**`src/components/app-sidebar/nav-main.tsx`**
+Add `WorkflowIcon` import from `lucide-react`. Add to `items`:
+
+```tsx
+{ title: 'Shader Graph', url: '/shader-graph', icon: WorkflowIcon }
+```
+
+**`package.json`**
+Add `"@xyflow/react": "^12.x"` to `dependencies`. Run `npm install`.
+
+**`src-lua/plugins/particle-system-playground/init.lua`**
+In `ParticleSystemPlaygroundPlugin:update(dt)`:
+
+1. Add `self.time = (self.time or 0) + dt` at the top
+2. In the scratch composites loop, after each `system.system:update(dt)`:
+   ```lua
+   if system.shader then
+     pcall(system.shader.send, system.shader, "u_time", self.time)
+   end
+   ```
+   `shader:send` on a non-existent extern is a silent no-op in Love2D — existing shaders are unaffected.
+
+**`src-lua/manifest.txt`**
+Add before `plugin:hot-reload` entries (alphabetical):
+
+```
+plugin:shader-graph:init.lua
+plugin:shader-graph:manifest.lua
+```
+
+**`cli/src/generated/plugin-catalog.ts`**
+Regenerate via `npm run generate:plugin-catalog` after manifest entries are added.
+
+---
+
+## "Apply to Particles Playground" WS Flow
+
+1. Desktop generates GLSL via `codegen(nodes, edges)`
+2. Sends to particle-system-playground plugin:
+   ```json
+   {
+     "type": "cmd:plugin:action",
+     "plugin": "particle-system-playground",
+     "action": "set-shader",
+     "params": { "composite": "<name>", "systemIndex": 1, "shaderSource": "...", "filename": "my-shader.glsl" }
+   }
+   ```
+3. Response arrives in React Query at `pluginAction(sessionId, 'particle-system-playground', 'set-shader')`
+4. `useParticleSystemPlayground().shaderError` surfaces any compile error
+5. Hot-particles Lua plugin's `update(dt)` sends `u_time` every frame to the shader automatically
+
+---
+
+## Node Types Reference
+
+| Category     | Nodes                                                                                                               |
+| ------------ | ------------------------------------------------------------------------------------------------------------------- |
+| Input        | TextureColor, TextureCoords, ScreenCoords, VertexColor, Time, Resolution, FloatConstant, Vec2Constant, Vec4Constant |
+| Math         | Add, Subtract, Multiply, Divide, Power, Clamp, Lerp, Step, Smoothstep, Sin, Cos, Abs, Fract, Floor                  |
+| Vector       | Split, Combine, Normalize, Length, Dot                                                                              |
+| Color        | Desaturate, OneMinus, HueShift                                                                                      |
+| Noise        | SimpleNoise (hash-based), Ripple (sin-wave UV distortion)                                                           |
+| Pixel Output | FragmentOutput                                                                                                      |
+| Vertex       | VertexPosition, TransformMatrix, VertexOutput                                                                       |
+
+---
+
+## Codegen Type Coercion Rules
+
+| Source type | Target type | Coercion                 |
+| ----------- | ----------- | ------------------------ |
+| `float`     | `vec2`      | `vec2(x, x)`             |
+| `float`     | `vec4`      | `vec4(x, x, x, 1.0)`     |
+| `vec4`      | `float`     | `x.r`                    |
+| `vec2`      | `vec4`      | `vec4(x, 0.0, 0.0, 1.0)` |
+| same        | same        | identity                 |
+
+---
+
+## Verification
+
+1. **Dependency + TypeScript**: `npm install && npm run typecheck` — 0 errors
+2. **Route + nav**: Navigate to `/shader-graph` — page renders; sidebar shows "Shader Graph"
+3. **Drag-drop**: Drag "Float Constant" from palette → node appears on canvas at drop position
+4. **Codegen — empty**: No nodes → code preview shows passthrough `return Texel(...)` shader
+5. **Codegen — graph**: `Time` → `Sin` → `Combine` → `FragmentOutput` → correct GLSL with `u_time` and `sin()` visible
+6. **Lua validation**: Click "Validate" → `compile-shader` WS roundtrip → status `ok` visible in UI. Add syntax error manually → `error` with message.
+7. **Apply to Playground**: Select playground composite + emitter in palette target selector → click "Apply to Playground" → switch to Particles Playground tab → system shows shader source populated
+8. **Time animation**: Shader with `sin(u_time)` applied to Playground emitter → particles visibly animate over time
+9. **Persistence**: Reload app → graph nodes/edges restored from localStorage
+10. **manifest.txt**: `npm run generate:plugin-catalog` succeeds; `shader-graph` appears in catalog
+11. **No regression**: Particles Playground page works normally; existing particle-editor plugin unaffected
diff --git a/src-lua/example/test_auto/main.lua b/src-lua/example/test_auto/main.lua
index 9c5310a7..eca1572b 100644
--- a/src-lua/example/test_auto/main.lua
+++ b/src-lua/example/test_auto/main.lua
@@ -34,7 +34,7 @@ function love.load()
     "audio-debug",
     "coroutine-monitor",
     "filesystem",
-    "hot-particles",
+    "particle-system-playground",
     "runtime-snapshot",
   }
   local missing = {}
diff --git a/src-lua/example/test_cli/feather.config.lua b/src-lua/example/test_cli/feather.config.lua
index cdbae0ad..a4c59504 100644
--- a/src-lua/example/test_cli/feather.config.lua
+++ b/src-lua/example/test_cli/feather.config.lua
@@ -3,8 +3,8 @@
 
 return {
   sessionName = "CLI Example",
-  include = { "screenshots", "profiler", "console", "hot-particles" },
-  capabilities = { "draw", "filesystem", "hot-particles" },
+  include = { "screenshots", "profiler", "console", "particle-system-playground" },
+  capabilities = { "draw", "filesystem", "particle-system-playground" },
   exclude = { "hump.signal", "lua-state-machine", "animation-inspector" },
   sampleRate = 1,
   captureScreenshot = false,
diff --git a/src-lua/manifest.txt b/src-lua/manifest.txt
index dd987b5e..754f3a6d 100644
--- a/src-lua/manifest.txt
+++ b/src-lua/manifest.txt
@@ -36,8 +36,6 @@ plugin:entity-inspector:init.lua
 plugin:entity-inspector:manifest.lua
 plugin:filesystem:init.lua
 plugin:filesystem:manifest.lua
-plugin:hot-particles:init.lua
-plugin:hot-particles:manifest.lua
 plugin:hot-reload:hot_reloader.lua
 plugin:hot-reload:init.lua
 plugin:hot-reload:manifest.lua
@@ -56,6 +54,8 @@ plugin:network-inspector:init.lua
 plugin:network-inspector:manifest.lua
 plugin:particle-editor:init.lua
 plugin:particle-editor:manifest.lua
+plugin:particle-system-playground:init.lua
+plugin:particle-system-playground:manifest.lua
 plugin:physics-debug:init.lua
 plugin:physics-debug:manifest.lua
 plugin:profiler:init.lua
diff --git a/src-lua/plugins/hot-particles/manifest.lua b/src-lua/plugins/hot-particles/manifest.lua
deleted file mode 100644
index 6fa6f0de..00000000
--- a/src-lua/plugins/hot-particles/manifest.lua
+++ /dev/null
@@ -1,10 +0,0 @@
-return {
-  id = "hot-particles",
-  name = "Hot Particles",
-  description = "Author HotParticles-compatible composite particle effects with live in-game preview",
-  version = "1.0.0",
-  capabilities = { "draw", "filesystem" },
-  optIn = false,
-  disabled = false,
-  api = 5,
-}
diff --git a/src-lua/plugins/particle-system-playground/README.md b/src-lua/plugins/particle-system-playground/README.md
new file mode 100644
index 00000000..86250034
--- /dev/null
+++ b/src-lua/plugins/particle-system-playground/README.md
@@ -0,0 +1,127 @@
+# Particle System Playground Runtime Plugin
+
+This built-in plugin backs Feather's Particle System Playground page. It lets the desktop create scratch particle composites, preview them in the running game, edit registered game-owned composites, and export a Lua module/ZIP.
+
+The feature is inspired by [ReFreezed/HotParticles](https://github.com/ReFreezed/HotParticles), a particle effect editor/exporter for LÖVE. Feather's implementation is clean-room and does not vendor upstream code or assets.
+
+The plugin id is:
+
+```lua
+particle-system-playground
+```
+
+## Game API
+
+Game code can register an existing composite for inspection and live editing:
+
+```lua
+local playground = DEBUGGER.pluginManager:getPlugin("particle-system-playground").instance
+
+playground:addComposite("Fire", function()
+  return fireParticles
+end)
+
+playground:removeComposite("Fire")
+```
+
+`addComposite(name, getter)` expects `getter()` to return a HotParticles-style table:
+
+```lua
+{
+  x = 400,
+  y = 300,
+  [1] = {
+    system = love.graphics.newParticleSystem(image, 1000),
+    blendMode = "alpha",
+    shader = nil,
+    texturePath = "gfx/fire.png",
+    texturePreset = "",
+    shaderPath = "",
+    shaderFilename = "",
+    x = 0,
+    y = 0,
+    kickStartSteps = 0,
+    kickStartDt = 1 / 60,
+    emitAtStart = 0,
+  },
+}
+```
+
+Game composites are not drawn by this plugin. The game remains responsible for drawing them. Feather edits their `ParticleSystem` values and metadata best-effort in place.
+
+## Scratch Composites
+
+Scratch composites are created from the desktop playground. The plugin owns their `love.ParticleSystem` instances, updates them, and draws them in the running game.
+
+Composite preview `x`/`y` and preview movement patterns change emitter positions via `ParticleSystem:setPosition(...)`. They do not translate the whole particle cloud during draw. Already-emitted particles keep moving naturally.
+
+Supported preview movement patterns:
+
+- `none`
+- `circle`
+- `figure-eight`
+- `irregular`
+
+Movement is preview-only behavior and is not exported as runtime logic.
+
+## Desktop Protocol
+
+The desktop uses Feather's existing plugin protocol:
+
+- `handleRequest()` returns the current composite list, active composite, active emitter, metadata, and particle properties.
+- `handleParamsUpdate()` receives debounced property updates from the UI.
+- `handleActionRequest()` handles selection, emitter/composite mutations, asset changes, and exports.
+
+Important actions:
+
+| Action | Effect |
+| --- | --- |
+| `new-composite` | Create a scratch composite |
+| `delete-composite` | Delete the active scratch composite |
+| `add-system` | Add an emitter to a scratch composite |
+| `remove-system` | Remove an emitter from a scratch composite |
+| `select-composite` | Select the active composite |
+| `select-system` | Select the active emitter |
+| `set-texture` | Apply a texture preset, game path, or uploaded base64 texture |
+| `set-shader` | Apply inline shader source or a shader path |
+| `emit` / `emit-all` | Burst particles |
+| `reset` / `reset-all` | Reset particle systems |
+| `kick-start` | Advance the active emitter by configured kick-start steps |
+| `export-code` | Return/copy generated Lua module code |
+| `export-zip` | Return generated `init.lua` plus referenced assets |
+
+## Export
+
+Exports produce a Lua module shaped like:
+
+```lua
+local particles = {
+  x = 400,
+  y = 300,
+  [1] = {
+    system = ps1,
+    blendMode = "alpha",
+    shader = shader1,
+    texturePath = "gfx/fire.png",
+    texturePreset = "",
+    shaderPath = "",
+    shaderFilename = "shader.glsl",
+    x = 0,
+    y = 0,
+    kickStartSteps = 0,
+    kickStartDt = 1 / 60,
+    emitAtStart = 0,
+  },
+}
+
+return particles
+```
+
+ZIP export returns `init.lua` and any available texture/shader assets. Imported texture bytes are preserved for ZIP output. Game-path assets are read through `love.filesystem.read` when possible.
+
+## Notes
+
+- This is a Feather-owned clean-room runtime/plugin implementation.
+- It does not depend on upstream HotParticles code or assets.
+- It does not import `.hotparticles` project files.
+- Registered game composites can be edited, but exports are only complete when the plugin has enough texture/shader metadata or uploaded asset bytes.
diff --git a/src-lua/plugins/hot-particles/init.lua b/src-lua/plugins/particle-system-playground/init.lua
similarity index 68%
rename from src-lua/plugins/hot-particles/init.lua
rename to src-lua/plugins/particle-system-playground/init.lua
index f20125d0..fc21e17a 100644
--- a/src-lua/plugins/hot-particles/init.lua
+++ b/src-lua/plugins/particle-system-playground/init.lua
@@ -2,7 +2,7 @@ local Class = require(FEATHER_PATH .. ".lib.class")
 local Base = require(FEATHER_PATH .. ".core.base")
 local base64 = require(FEATHER_PATH .. ".lib.base64")
 
-local HotParticlesPlugin = Class({ __includes = Base })
+local ParticleSystemPlaygroundPlugin = Class({ __includes = Base })
 
 local DEFAULT_BUFFER_SIZE = 1000
 local DEFAULT_X = 400
@@ -237,41 +237,453 @@ local function copyParticleProperties(from, to)
 end
 
 local PS_PROPERTIES = {
-  { key = "emissionRate", get = function(ps) return ps:getEmissionRate() end, set = function(ps, v) ps:setEmissionRate(v) end, type = "number", min = 0, max = 10000 },
-  { key = "emitterLifetime", get = function(ps) return ps:getEmitterLifetime() end, set = function(ps, v) ps:setEmitterLifetime(v) end, type = "number", min = -1, max = 600 },
-  { key = "particleLifetimeMin", get = function(ps) local a = ps:getParticleLifetime(); return a end, set = function(ps, v) local _, b = ps:getParticleLifetime(); ps:setParticleLifetime(v, b) end, type = "number", min = 0 },
-  { key = "particleLifetimeMax", get = function(ps) local _, b = ps:getParticleLifetime(); return b end, set = function(ps, v) local a = ps:getParticleLifetime(); ps:setParticleLifetime(a, v) end, type = "number", min = 0 },
-  { key = "direction", get = function(ps) return ps:getDirection() end, set = function(ps, v) ps:setDirection(v) end, type = "number" },
-  { key = "spread", get = function(ps) return ps:getSpread() end, set = function(ps, v) ps:setSpread(v) end, type = "number", min = 0 },
-  { key = "speedMin", get = function(ps) local a = ps:getSpeed(); return a end, set = function(ps, v) local _, b = ps:getSpeed(); ps:setSpeed(v, b) end, type = "number" },
-  { key = "speedMax", get = function(ps) local _, b = ps:getSpeed(); return b end, set = function(ps, v) local a = ps:getSpeed(); ps:setSpeed(a, v) end, type = "number" },
-  { key = "linearAccelXMin", get = function(ps) local a = ps:getLinearAcceleration(); return a end, set = function(ps, v) local _, b, c, d = ps:getLinearAcceleration(); ps:setLinearAcceleration(v, b, c, d) end, type = "number" },
-  { key = "linearAccelYMin", get = function(ps) local _, b = ps:getLinearAcceleration(); return b end, set = function(ps, v) local a, _, c, d = ps:getLinearAcceleration(); ps:setLinearAcceleration(a, v, c, d) end, type = "number" },
-  { key = "linearAccelXMax", get = function(ps) local _, _, c = ps:getLinearAcceleration(); return c end, set = function(ps, v) local a, b, _, d = ps:getLinearAcceleration(); ps:setLinearAcceleration(a, b, v, d) end, type = "number" },
-  { key = "linearAccelYMax", get = function(ps) local _, _, _, d = ps:getLinearAcceleration(); return d end, set = function(ps, v) local a, b, c = ps:getLinearAcceleration(); ps:setLinearAcceleration(a, b, c, v) end, type = "number" },
-  { key = "radialAccelMin", get = function(ps) local a = ps:getRadialAcceleration(); return a end, set = function(ps, v) local _, b = ps:getRadialAcceleration(); ps:setRadialAcceleration(v, b) end, type = "number" },
-  { key = "radialAccelMax", get = function(ps) local _, b = ps:getRadialAcceleration(); return b end, set = function(ps, v) local a = ps:getRadialAcceleration(); ps:setRadialAcceleration(a, v) end, type = "number" },
-  { key = "tangentialAccelMin", get = function(ps) local a = ps:getTangentialAcceleration(); return a end, set = function(ps, v) local _, b = ps:getTangentialAcceleration(); ps:setTangentialAcceleration(v, b) end, type = "number" },
-  { key = "tangentialAccelMax", get = function(ps) local _, b = ps:getTangentialAcceleration(); return b end, set = function(ps, v) local a = ps:getTangentialAcceleration(); ps:setTangentialAcceleration(a, v) end, type = "number" },
-  { key = "linearDampingMin", get = function(ps) local a = ps:getLinearDamping(); return a end, set = function(ps, v) local _, b = ps:getLinearDamping(); ps:setLinearDamping(v, b) end, type = "number", min = 0 },
-  { key = "linearDampingMax", get = function(ps) local _, b = ps:getLinearDamping(); return b end, set = function(ps, v) local a = ps:getLinearDamping(); ps:setLinearDamping(a, v) end, type = "number", min = 0 },
-  { key = "sizes", get = function(ps) local parts = {}; for _, v in ipairs({ ps:getSizes() }) do parts[#parts + 1] = fmt(v) end; return table.concat(parts, ", ") end, set = function(ps, value) local sizes = {}; for raw in tostring(value):gmatch("[^,]+") do local n = tonumber(raw); if n then sizes[#sizes + 1] = n end end; if #sizes > 0 then ps:setSizes(unpack(sizes)) end end, type = "string" },
-  { key = "sizeVariation", get = function(ps) return ps:getSizeVariation() end, set = function(ps, v) ps:setSizeVariation(v) end, type = "number", min = 0, max = 1 },
-  { key = "rotationMin", get = function(ps) local a = ps:getRotation(); return a end, set = function(ps, v) local _, b = ps:getRotation(); ps:setRotation(v, b) end, type = "number" },
-  { key = "rotationMax", get = function(ps) local _, b = ps:getRotation(); return b end, set = function(ps, v) local a = ps:getRotation(); ps:setRotation(a, v) end, type = "number" },
-  { key = "relativeRotation", get = function(ps) return ps:hasRelativeRotation() end, set = function(ps, v) ps:setRelativeRotation(v) end, type = "boolean" },
-  { key = "spinMin", get = function(ps) local a = ps:getSpin(); return a end, set = function(ps, v) local _, b = ps:getSpin(); ps:setSpin(v, b) end, type = "number" },
-  { key = "spinMax", get = function(ps) local _, b = ps:getSpin(); return b end, set = function(ps, v) local a = ps:getSpin(); ps:setSpin(a, v) end, type = "number" },
-  { key = "spinVariation", get = function(ps) return ps:getSpinVariation() end, set = function(ps, v) ps:setSpinVariation(v) end, type = "number", min = 0, max = 1 },
-  { key = "offsetX", get = function(ps) local a = ps:getOffset(); return a end, set = function(ps, v) local _, b = ps:getOffset(); ps:setOffset(v, b) end, type = "number" },
-  { key = "offsetY", get = function(ps) local _, b = ps:getOffset(); return b end, set = function(ps, v) local a = ps:getOffset(); ps:setOffset(a, v) end, type = "number" },
-  { key = "insertMode", get = function(ps) return ps:getInsertMode() end, set = function(ps, v) ps:setInsertMode(v) end, type = "string" },
-  { key = "colors", get = function(ps) local parts = {}; for _, c in ipairs({ ps:getColors() }) do if type(c) == "table" then for _, v in ipairs(c) do parts[#parts + 1] = fmt(v) end else parts[#parts + 1] = fmt(c) end end; return table.concat(parts, ", ") end, set = function(ps, value) local colors = {}; for raw in tostring(value):gmatch("[^,]+") do local n = tonumber(raw); if n then colors[#colors + 1] = n end end; if #colors >= 4 then ps:setColors(unpack(colors)) end end, type = "string" },
-  { key = "emissionAreaDist", get = function(ps) local a = ps:getEmissionArea(); return a end, set = function(ps, v) local _, b, c, d, e = ps:getEmissionArea(); ps:setEmissionArea(v, b, c, d, e) end, type = "string" },
-  { key = "emissionAreaDx", get = function(ps) local _, b = ps:getEmissionArea(); return b end, set = function(ps, v) local a, _, c, d, e = ps:getEmissionArea(); ps:setEmissionArea(a, v, c, d, e) end, type = "number", min = 0 },
-  { key = "emissionAreaDy", get = function(ps) local _, _, c = ps:getEmissionArea(); return c end, set = function(ps, v) local a, b, _, d, e = ps:getEmissionArea(); ps:setEmissionArea(a, b, v, d, e) end, type = "number", min = 0 },
-  { key = "emissionAreaAngle", get = function(ps) local _, _, _, d = ps:getEmissionArea(); return d end, set = function(ps, v) local a, b, c, _, e = ps:getEmissionArea(); ps:setEmissionArea(a, b, c, v, e) end, type = "number" },
-  { key = "emissionAreaRelative", get = function(ps) local _, _, _, _, e = ps:getEmissionArea(); return e end, set = function(ps, v) local a, b, c, d = ps:getEmissionArea(); ps:setEmissionArea(a, b, c, d, v) end, type = "boolean" },
+  {
+    key = "emissionRate",
+    get = function(ps)
+      return ps:getEmissionRate()
+    end,
+    set = function(ps, v)
+      ps:setEmissionRate(v)
+    end,
+    type = "number",
+    min = 0,
+    max = 10000,
+  },
+  {
+    key = "emitterLifetime",
+    get = function(ps)
+      return ps:getEmitterLifetime()
+    end,
+    set = function(ps, v)
+      ps:setEmitterLifetime(v)
+    end,
+    type = "number",
+    min = -1,
+    max = 600,
+  },
+  {
+    key = "particleLifetimeMin",
+    get = function(ps)
+      local a = ps:getParticleLifetime()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getParticleLifetime()
+      ps:setParticleLifetime(v, b)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "particleLifetimeMax",
+    get = function(ps)
+      local _, b = ps:getParticleLifetime()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getParticleLifetime()
+      ps:setParticleLifetime(a, v)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "direction",
+    get = function(ps)
+      return ps:getDirection()
+    end,
+    set = function(ps, v)
+      ps:setDirection(v)
+    end,
+    type = "number",
+  },
+  {
+    key = "spread",
+    get = function(ps)
+      return ps:getSpread()
+    end,
+    set = function(ps, v)
+      ps:setSpread(v)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "speedMin",
+    get = function(ps)
+      local a = ps:getSpeed()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getSpeed()
+      ps:setSpeed(v, b)
+    end,
+    type = "number",
+  },
+  {
+    key = "speedMax",
+    get = function(ps)
+      local _, b = ps:getSpeed()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getSpeed()
+      ps:setSpeed(a, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "linearAccelXMin",
+    get = function(ps)
+      local a = ps:getLinearAcceleration()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b, c, d = ps:getLinearAcceleration()
+      ps:setLinearAcceleration(v, b, c, d)
+    end,
+    type = "number",
+  },
+  {
+    key = "linearAccelYMin",
+    get = function(ps)
+      local _, b = ps:getLinearAcceleration()
+      return b
+    end,
+    set = function(ps, v)
+      local a, _, c, d = ps:getLinearAcceleration()
+      ps:setLinearAcceleration(a, v, c, d)
+    end,
+    type = "number",
+  },
+  {
+    key = "linearAccelXMax",
+    get = function(ps)
+      local _, _, c = ps:getLinearAcceleration()
+      return c
+    end,
+    set = function(ps, v)
+      local a, b, _, d = ps:getLinearAcceleration()
+      ps:setLinearAcceleration(a, b, v, d)
+    end,
+    type = "number",
+  },
+  {
+    key = "linearAccelYMax",
+    get = function(ps)
+      local _, _, _, d = ps:getLinearAcceleration()
+      return d
+    end,
+    set = function(ps, v)
+      local a, b, c = ps:getLinearAcceleration()
+      ps:setLinearAcceleration(a, b, c, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "radialAccelMin",
+    get = function(ps)
+      local a = ps:getRadialAcceleration()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getRadialAcceleration()
+      ps:setRadialAcceleration(v, b)
+    end,
+    type = "number",
+  },
+  {
+    key = "radialAccelMax",
+    get = function(ps)
+      local _, b = ps:getRadialAcceleration()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getRadialAcceleration()
+      ps:setRadialAcceleration(a, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "tangentialAccelMin",
+    get = function(ps)
+      local a = ps:getTangentialAcceleration()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getTangentialAcceleration()
+      ps:setTangentialAcceleration(v, b)
+    end,
+    type = "number",
+  },
+  {
+    key = "tangentialAccelMax",
+    get = function(ps)
+      local _, b = ps:getTangentialAcceleration()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getTangentialAcceleration()
+      ps:setTangentialAcceleration(a, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "linearDampingMin",
+    get = function(ps)
+      local a = ps:getLinearDamping()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getLinearDamping()
+      ps:setLinearDamping(v, b)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "linearDampingMax",
+    get = function(ps)
+      local _, b = ps:getLinearDamping()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getLinearDamping()
+      ps:setLinearDamping(a, v)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "sizes",
+    get = function(ps)
+      local parts = {}
+      for _, v in ipairs({ ps:getSizes() }) do
+        parts[#parts + 1] = fmt(v)
+      end
+      return table.concat(parts, ", ")
+    end,
+    set = function(ps, value)
+      local sizes = {}
+      for raw in tostring(value):gmatch("[^,]+") do
+        local n = tonumber(raw)
+        if n then
+          sizes[#sizes + 1] = n
+        end
+      end
+      if #sizes > 0 then
+        ps:setSizes(unpack(sizes))
+      end
+    end,
+    type = "string",
+  },
+  {
+    key = "sizeVariation",
+    get = function(ps)
+      return ps:getSizeVariation()
+    end,
+    set = function(ps, v)
+      ps:setSizeVariation(v)
+    end,
+    type = "number",
+    min = 0,
+    max = 1,
+  },
+  {
+    key = "rotationMin",
+    get = function(ps)
+      local a = ps:getRotation()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getRotation()
+      ps:setRotation(v, b)
+    end,
+    type = "number",
+  },
+  {
+    key = "rotationMax",
+    get = function(ps)
+      local _, b = ps:getRotation()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getRotation()
+      ps:setRotation(a, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "relativeRotation",
+    get = function(ps)
+      return ps:hasRelativeRotation()
+    end,
+    set = function(ps, v)
+      ps:setRelativeRotation(v)
+    end,
+    type = "boolean",
+  },
+  {
+    key = "spinMin",
+    get = function(ps)
+      local a = ps:getSpin()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getSpin()
+      ps:setSpin(v, b)
+    end,
+    type = "number",
+  },
+  {
+    key = "spinMax",
+    get = function(ps)
+      local _, b = ps:getSpin()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getSpin()
+      ps:setSpin(a, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "spinVariation",
+    get = function(ps)
+      return ps:getSpinVariation()
+    end,
+    set = function(ps, v)
+      ps:setSpinVariation(v)
+    end,
+    type = "number",
+    min = 0,
+    max = 1,
+  },
+  {
+    key = "offsetX",
+    get = function(ps)
+      local a = ps:getOffset()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b = ps:getOffset()
+      ps:setOffset(v, b)
+    end,
+    type = "number",
+  },
+  {
+    key = "offsetY",
+    get = function(ps)
+      local _, b = ps:getOffset()
+      return b
+    end,
+    set = function(ps, v)
+      local a = ps:getOffset()
+      ps:setOffset(a, v)
+    end,
+    type = "number",
+  },
+  {
+    key = "insertMode",
+    get = function(ps)
+      return ps:getInsertMode()
+    end,
+    set = function(ps, v)
+      ps:setInsertMode(v)
+    end,
+    type = "string",
+  },
+  {
+    key = "colors",
+    get = function(ps)
+      local parts = {}
+      for _, c in ipairs({ ps:getColors() }) do
+        if type(c) == "table" then
+          for _, v in ipairs(c) do
+            parts[#parts + 1] = fmt(v)
+          end
+        else
+          parts[#parts + 1] = fmt(c)
+        end
+      end
+      return table.concat(parts, ", ")
+    end,
+    set = function(ps, value)
+      local colors = {}
+      for raw in tostring(value):gmatch("[^,]+") do
+        local n = tonumber(raw)
+        if n then
+          colors[#colors + 1] = n
+        end
+      end
+      if #colors >= 4 then
+        ps:setColors(unpack(colors))
+      end
+    end,
+    type = "string",
+  },
+  {
+    key = "emissionAreaDist",
+    get = function(ps)
+      local a = ps:getEmissionArea()
+      return a
+    end,
+    set = function(ps, v)
+      local _, b, c, d, e = ps:getEmissionArea()
+      ps:setEmissionArea(v, b, c, d, e)
+    end,
+    type = "string",
+  },
+  {
+    key = "emissionAreaDx",
+    get = function(ps)
+      local _, b = ps:getEmissionArea()
+      return b
+    end,
+    set = function(ps, v)
+      local a, _, c, d, e = ps:getEmissionArea()
+      ps:setEmissionArea(a, v, c, d, e)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "emissionAreaDy",
+    get = function(ps)
+      local _, _, c = ps:getEmissionArea()
+      return c
+    end,
+    set = function(ps, v)
+      local a, b, _, d, e = ps:getEmissionArea()
+      ps:setEmissionArea(a, b, v, d, e)
+    end,
+    type = "number",
+    min = 0,
+  },
+  {
+    key = "emissionAreaAngle",
+    get = function(ps)
+      local _, _, _, d = ps:getEmissionArea()
+      return d
+    end,
+    set = function(ps, v)
+      local a, b, c, _, e = ps:getEmissionArea()
+      ps:setEmissionArea(a, b, c, v, e)
+    end,
+    type = "number",
+  },
+  {
+    key = "emissionAreaRelative",
+    get = function(ps)
+      local _, _, _, _, e = ps:getEmissionArea()
+      return e
+    end,
+    set = function(ps, v)
+      local a, b, c, d = ps:getEmissionArea()
+      ps:setEmissionArea(a, b, c, d, v)
+    end,
+    type = "boolean",
+  },
 }
 
 local PS_PROP_MAP = {}
@@ -291,8 +703,12 @@ local function setProp(ps, key, raw)
     if value == nil then
       return false
     end
-    if prop.min and value < prop.min then value = prop.min end
-    if prop.max and value > prop.max then value = prop.max end
+    if prop.min and value < prop.min then
+      value = prop.min
+    end
+    if prop.max and value > prop.max then
+      value = prop.max
+    end
   elseif prop.type == "boolean" then
     value = raw == true or raw == "true" or raw == "1"
   else
@@ -314,18 +730,28 @@ local function snapshotPS(ps)
     end
   end
   local okCount, count = pcall(ps.getCount, ps)
-  if okCount then snapshot.count = count end
+  if okCount then
+    snapshot.count = count
+  end
   local okBuffer, buffer = pcall(ps.getBufferSize, ps)
-  if okBuffer then snapshot.bufferSize = buffer end
+  if okBuffer then
+    snapshot.bufferSize = buffer
+  end
   return snapshot
 end
 
 local function createDefaultSystem(index, template)
   template = template or "fire"
   local texturePreset = "circle"
-  if template == "smoke" then texturePreset = "light" end
-  if template == "sparkles" then texturePreset = "star" end
-  if template == "explosion-smoke" then texturePreset = "light" end
+  if template == "smoke" then
+    texturePreset = "light"
+  end
+  if template == "sparkles" then
+    texturePreset = "star"
+  end
+  if template == "explosion-smoke" then
+    texturePreset = "light"
+  end
 
   local image, png = generatePresetImage(texturePreset)
   local ps = love.graphics.newParticleSystem(image, DEFAULT_BUFFER_SIZE)
@@ -464,15 +890,14 @@ local function computeMovementOffset(movement, dt)
 
   if movement.pattern == "irregular" then
     local scale = movement.scale or 50
-    return
-      (math.sin(t * 0.7 + 1.2) * 0.55 + math.sin(t * 1.9) * 0.3 + math.sin(t * 3.1) * 0.15) * scale,
+    return (math.sin(t * 0.7 + 1.2) * 0.55 + math.sin(t * 1.9) * 0.3 + math.sin(t * 3.1) * 0.15) * scale,
       (math.sin(t * 0.9 + 2.4) * 0.55 + math.sin(t * 1.7 + 0.3) * 0.3 + math.sin(t * 2.9) * 0.15) * scale
   end
 
   return 0, 0
 end
 
-function HotParticlesPlugin:init(config)
+function ParticleSystemPlaygroundPlugin:init(config)
   Base.init(self, config)
   self.composites = {}
   self.compositeOrder = {}
@@ -480,7 +905,7 @@ function HotParticlesPlugin:init(config)
   self.activeSystem = 1
 end
 
-function HotParticlesPlugin:addComposite(name, getter)
+function ParticleSystemPlaygroundPlugin:addComposite(name, getter)
   if type(name) ~= "string" or name == "" or type(getter) ~= "function" then
     return false
   end
@@ -500,7 +925,7 @@ function HotParticlesPlugin:addComposite(name, getter)
   return true
 end
 
-function HotParticlesPlugin:removeComposite(name)
+function ParticleSystemPlaygroundPlugin:removeComposite(name)
   local entry = self.composites[name]
   if not entry then
     return false
@@ -519,7 +944,7 @@ function HotParticlesPlugin:removeComposite(name)
   return true
 end
 
-function HotParticlesPlugin:_newComposite(name, template)
+function ParticleSystemPlaygroundPlugin:_newComposite(name, template)
   local base = safeString(name, "")
   if base == "" then
     base = "Effect " .. tostring(#self.compositeOrder + 1)
@@ -547,7 +972,7 @@ function HotParticlesPlugin:_newComposite(name, template)
   return final
 end
 
-function HotParticlesPlugin:_getCompositeTable(name)
+function ParticleSystemPlaygroundPlugin:_getCompositeTable(name)
   local entry = self.composites[name or self.activeComposite]
   if not entry then
     return nil
@@ -562,7 +987,7 @@ function HotParticlesPlugin:_getCompositeTable(name)
   return entry
 end
 
-function HotParticlesPlugin:_getSystemEntry(name, index)
+function ParticleSystemPlaygroundPlugin:_getSystemEntry(name, index)
   local entry = self.composites[name or self.activeComposite]
   if not entry then
     return nil
@@ -574,7 +999,7 @@ function HotParticlesPlugin:_getSystemEntry(name, index)
   return composite and composite[index] or nil
 end
 
-function HotParticlesPlugin:_systemCount(name)
+function ParticleSystemPlaygroundPlugin:_systemCount(name)
   local entry = self.composites[name or self.activeComposite]
   if not entry then
     return 0
@@ -593,7 +1018,7 @@ function HotParticlesPlugin:_systemCount(name)
   return count
 end
 
-function HotParticlesPlugin:_meta(name, index)
+function ParticleSystemPlaygroundPlugin:_meta(name, index)
   local entry = self.composites[name or self.activeComposite]
   if not entry then
     return {}
@@ -605,13 +1030,17 @@ function HotParticlesPlugin:_meta(name, index)
   return entry.meta[index]
 end
 
-function HotParticlesPlugin:update(dt)
+function ParticleSystemPlaygroundPlugin:update(dt)
   for _, name in ipairs(self.compositeOrder) do
     local entry = self.composites[name]
     if entry and entry.kind == "scratch" then
-      entry.offsetX, entry.offsetY = computeMovementOffset(entry.movement, dt)
+      local offsetX, offsetY = computeMovementOffset(entry.movement, dt)
+      entry.offsetX, entry.offsetY = offsetX, offsetY
+      local x = (entry.x or DEFAULT_X) + offsetX
+      local y = (entry.y or DEFAULT_Y) + offsetY
       for _, system in ipairs(entry.systems or {}) do
         if system.system then
+          pcall(system.system.setPosition, system.system, x + (system.x or 0), y + (system.y or 0))
           pcall(system.system.update, system.system, dt)
         end
       end
@@ -619,7 +1048,7 @@ function HotParticlesPlugin:update(dt)
   end
 end
 
-function HotParticlesPlugin:onDraw()
+function ParticleSystemPlaygroundPlugin:onDraw()
   if not love or not love.graphics then
     return
   end
@@ -631,14 +1060,12 @@ function HotParticlesPlugin:onDraw()
   for _, name in ipairs(self.compositeOrder) do
     local entry = self.composites[name]
     if entry and entry.kind == "scratch" then
-      local x = (entry.x or DEFAULT_X) + (entry.offsetX or 0)
-      local y = (entry.y or DEFAULT_Y) + (entry.offsetY or 0)
       for _, system in ipairs(entry.systems or {}) do
         if system.system then
           pcall(love.graphics.setBlendMode, system.blendMode or "alpha")
           love.graphics.setShader(system.shader)
           love.graphics.setColor(1, 1, 1, 1)
-          love.graphics.draw(system.system, x + (system.x or 0), y + (system.y or 0))
+          love.graphics.draw(system.system, 0, 0)
         end
       end
     end
@@ -649,7 +1076,7 @@ function HotParticlesPlugin:onDraw()
   love.graphics.setColor(r, g, b, a)
 end
 
-function HotParticlesPlugin:handleRequest()
+function ParticleSystemPlaygroundPlugin:handleRequest()
   local names = {}
   for _, name in ipairs(self.compositeOrder) do
     names[#names + 1] = name
@@ -680,7 +1107,16 @@ function HotParticlesPlugin:handleRequest()
         shaderPath = safeString(meta.shaderPath or sys.shaderPath, ""),
         shaderFilename = safeString(meta.shaderFilename or sys.shaderFilename, ""),
         shaderSource = safeString(meta.shaderSource or sys.shaderSource, ""),
-        exportReady = (meta.texturePath or sys.texturePath or meta.textureAssetBase64 or sys.textureAssetBase64 or meta.texturePreset or sys.texturePreset) and true or false,
+        exportReady = (
+          meta.texturePath
+          or sys.texturePath
+          or meta.textureAssetBase64
+          or sys.textureAssetBase64
+          or meta.texturePreset
+          or sys.texturePreset
+        )
+            and true
+          or false,
         properties = snapshotPS(ps),
       }
     end
@@ -694,7 +1130,7 @@ function HotParticlesPlugin:handleRequest()
   end
 
   return {
-    type = "hot-particles",
+    type = "particle-system-playground",
     loading = false,
     composites = names,
     activeComposite = active,
@@ -703,7 +1139,7 @@ function HotParticlesPlugin:handleRequest()
   }
 end
 
-function HotParticlesPlugin:handleParamsUpdate(request)
+function ParticleSystemPlaygroundPlugin:handleParamsUpdate(request)
   local params = request.params or {}
   if params.composite and self.composites[params.composite] then
     self.activeComposite = params.composite
@@ -719,10 +1155,16 @@ function HotParticlesPlugin:handleParamsUpdate(request)
   end
 
   if entry.kind == "scratch" then
-    if params.compositeX ~= nil then entry.x = safeNumber(params.compositeX, entry.x) end
-    if params.compositeY ~= nil then entry.y = safeNumber(params.compositeY, entry.y) end
+    if params.compositeX ~= nil then
+      entry.x = safeNumber(params.compositeX, entry.x)
+    end
+    if params.compositeY ~= nil then
+      entry.y = safeNumber(params.compositeY, entry.y)
+    end
     entry.movement = entry.movement or { pattern = "none" }
-    if params["movement.pattern"] ~= nil then entry.movement.pattern = tostring(params["movement.pattern"]) end
+    if params["movement.pattern"] ~= nil then
+      entry.movement.pattern = tostring(params["movement.pattern"])
+    end
     for _, key in ipairs({ "radius", "radiusX", "radiusY", "speed", "scale" }) do
       local paramKey = "movement." .. key
       if params[paramKey] ~= nil then
@@ -738,20 +1180,35 @@ function HotParticlesPlugin:handleParamsUpdate(request)
   end
   local meta = self:_meta(name, index)
 
-  if params.title ~= nil then meta.title = tostring(params.title); sys.title = tostring(params.title) end
-  if params.blendMode ~= nil then sys.blendMode = tostring(params.blendMode) end
-  if params.emitterOffsetX ~= nil then sys.x = safeNumber(params.emitterOffsetX, sys.x) end
-  if params.emitterOffsetY ~= nil then sys.y = safeNumber(params.emitterOffsetY, sys.y) end
-  if params.kickStartSteps ~= nil then sys.kickStartSteps = safeNumber(params.kickStartSteps, sys.kickStartSteps) end
-  if params.kickStartDt ~= nil then sys.kickStartDt = safeNumber(params.kickStartDt, sys.kickStartDt) end
-  if params.emitAtStart ~= nil then sys.emitAtStart = safeNumber(params.emitAtStart, sys.emitAtStart) end
+  if params.title ~= nil then
+    meta.title = tostring(params.title)
+    sys.title = tostring(params.title)
+  end
+  if params.blendMode ~= nil then
+    sys.blendMode = tostring(params.blendMode)
+  end
+  if params.emitterOffsetX ~= nil then
+    sys.x = safeNumber(params.emitterOffsetX, sys.x)
+  end
+  if params.emitterOffsetY ~= nil then
+    sys.y = safeNumber(params.emitterOffsetY, sys.y)
+  end
+  if params.kickStartSteps ~= nil then
+    sys.kickStartSteps = safeNumber(params.kickStartSteps, sys.kickStartSteps)
+  end
+  if params.kickStartDt ~= nil then
+    sys.kickStartDt = safeNumber(params.kickStartDt, sys.kickStartDt)
+  end
+  if params.emitAtStart ~= nil then
+    sys.emitAtStart = safeNumber(params.emitAtStart, sys.emitAtStart)
+  end
 
   for key, value in pairs(params) do
     setProp(sys.system, key, value)
   end
 end
 
-function HotParticlesPlugin:_replaceTexture(sys, image)
+function ParticleSystemPlaygroundPlugin:_replaceTexture(sys, image)
   if not sys or not image then
     return
   end
@@ -771,7 +1228,7 @@ function HotParticlesPlugin:_replaceTexture(sys, image)
   new:start()
 end
 
-function HotParticlesPlugin:_applyTexture(name, index, params)
+function ParticleSystemPlaygroundPlugin:_applyTexture(name, index, params)
   local sys = self:_getSystemEntry(name, index)
   if not sys then
     return nil, "System not found"
@@ -842,7 +1299,7 @@ function HotParticlesPlugin:_applyTexture(name, index, params)
   return nil, "No texture supplied"
 end
 
-function HotParticlesPlugin:_applyShader(name, index, params)
+function ParticleSystemPlaygroundPlugin:_applyShader(name, index, params)
   local sys = self:_getSystemEntry(name, index)
   if not sys then
     return nil, "System not found"
@@ -891,7 +1348,7 @@ function HotParticlesPlugin:_applyShader(name, index, params)
   return true
 end
 
-function HotParticlesPlugin:handleActionRequest(request)
+function ParticleSystemPlaygroundPlugin:handleActionRequest(request)
   local params = request.params or {}
   local action = params.action
   local name = params.composite or self.activeComposite
@@ -945,7 +1402,9 @@ function HotParticlesPlugin:handleActionRequest(request)
       return nil, "A composite needs at least one emitter"
     end
     local sys = entry.systems[index]
-    if sys and sys.system and sys.system.release then pcall(sys.system.release, sys.system) end
+    if sys and sys.system and sys.system.release then
+      pcall(sys.system.release, sys.system)
+    end
     table.remove(entry.systems, index)
     self.activeSystem = math.min(self.activeSystem, #entry.systems)
     return true
@@ -1016,11 +1475,14 @@ function HotParticlesPlugin:handleActionRequest(request)
   return true
 end
 
-function HotParticlesPlugin:_assetInfo(name, index, sys)
+function ParticleSystemPlaygroundPlugin:_assetInfo(name, index, sys)
   local meta = self:_meta(name, index)
   local texturePath = safeString(meta.texturePath or sys.texturePath, "")
   local texturePreset = safeString(meta.texturePreset or sys.texturePreset, "")
-  local textureFilename = sanitizeFilename(meta.textureFilename or sys.textureFilename or texturePath or texturePreset .. ".png", "texture.png")
+  local textureFilename = sanitizeFilename(
+    meta.textureFilename or sys.textureFilename or texturePath or texturePreset .. ".png",
+    "texture.png"
+  )
   local textureAssetBase64 = meta.textureAssetBase64 or sys.textureAssetBase64
 
   if textureAssetBase64 == nil and texturePath ~= "" then
@@ -1035,7 +1497,10 @@ function HotParticlesPlugin:_assetInfo(name, index, sys)
 
   local shaderPath = safeString(meta.shaderPath or sys.shaderPath, "")
   local shaderSource = safeString(meta.shaderSource or sys.shaderSource, "")
-  local shaderFilename = sanitizeFilename(meta.shaderFilename or sys.shaderFilename or shaderPath or ("shader_" .. tostring(index) .. ".glsl"), "shader.glsl")
+  local shaderFilename = sanitizeFilename(
+    meta.shaderFilename or sys.shaderFilename or shaderPath or ("shader_" .. tostring(index) .. ".glsl"),
+    "shader.glsl"
+  )
   if shaderSource == "" and shaderPath ~= "" then
     local ok, source = pcall(love.filesystem.read, shaderPath)
     if ok and source then
@@ -1054,7 +1519,7 @@ function HotParticlesPlugin:_assetInfo(name, index, sys)
   }
 end
 
-function HotParticlesPlugin:_textureLoadPath(asset)
+function ParticleSystemPlaygroundPlugin:_textureLoadPath(asset)
   if asset.texturePath ~= "" then
     return asset.texturePath
   end
@@ -1064,11 +1529,11 @@ function HotParticlesPlugin:_textureLoadPath(asset)
   return sanitizeFilename(asset.textureFilename, "texture.png")
 end
 
-function HotParticlesPlugin:_generateCode(name)
+function ParticleSystemPlaygroundPlugin:_generateCode(name)
   local count = self:_systemCount(name)
   local entry = self.composites[name]
   if not entry or count == 0 then
-    return "-- No Hot Particles composite selected"
+    return "-- No Particles Playground composite selected"
   end
 
   local imageVars = {}
@@ -1076,7 +1541,7 @@ function HotParticlesPlugin:_generateCode(name)
   local imageCount = 0
   local shaderCount = 0
   local lines = {
-    "-- Generated by Feather Hot Particles",
+    "-- Generated by Feather Particles Playground",
     "-- " .. os.date("%Y-%m-%d %H:%M:%S"),
     "local LG = love.graphics",
     "local particles = {x = " .. fmt(entry.x or 0) .. ", y = " .. fmt(entry.y or 0) .. "}",
@@ -1119,14 +1584,22 @@ function HotParticlesPlugin:_generateCode(name)
       local imageVar = imageVars[imageKey]
       local psVar = "ps" .. tostring(i)
       lines[#lines + 1] = ""
-      lines[#lines + 1] = "local " .. psVar .. " = LG.newParticleSystem(" .. imageVar .. ", " .. tostring(ps:getBufferSize()) .. ")"
+      lines[#lines + 1] = "local "
+        .. psVar
+        .. " = LG.newParticleSystem("
+        .. imageVar
+        .. ", "
+        .. tostring(ps:getBufferSize())
+        .. ")"
 
       local colors = { ps:getColors() }
       if #colors > 0 then
         local parts = {}
         for _, value in ipairs(colors) do
           if type(value) == "table" then
-            for _, item in ipairs(value) do parts[#parts + 1] = fmt(item) end
+            for _, item in ipairs(value) do
+              parts[#parts + 1] = fmt(item)
+            end
           else
             parts[#parts + 1] = fmt(value)
           end
@@ -1145,21 +1618,39 @@ function HotParticlesPlugin:_generateCode(name)
       local tangentMin, tangentMax = ps:getTangentialAcceleration()
       local offsetX, offsetY = ps:getOffset()
       local sizes = {}
-      for _, value in ipairs({ ps:getSizes() }) do sizes[#sizes + 1] = fmt(value) end
+      for _, value in ipairs({ ps:getSizes() }) do
+        sizes[#sizes + 1] = fmt(value)
+      end
 
       lines[#lines + 1] = psVar .. ":setDirection(" .. fmt(ps:getDirection()) .. ")"
-      lines[#lines + 1] = psVar .. ":setEmissionArea(" .. quote(dist) .. ", " .. fmt(dx) .. ", " .. fmt(dy) .. ", " .. fmt(angle) .. ", " .. tostring(rel) .. ")"
+      lines[#lines + 1] = psVar
+        .. ":setEmissionArea("
+        .. quote(dist)
+        .. ", "
+        .. fmt(dx)
+        .. ", "
+        .. fmt(dy)
+        .. ", "
+        .. fmt(angle)
+        .. ", "
+        .. tostring(rel)
+        .. ")"
       lines[#lines + 1] = psVar .. ":setEmissionRate(" .. fmt(ps:getEmissionRate()) .. ")"
       lines[#lines + 1] = psVar .. ":setEmitterLifetime(" .. fmt(ps:getEmitterLifetime()) .. ")"
       lines[#lines + 1] = psVar .. ":setInsertMode(" .. quote(ps:getInsertMode()) .. ")"
-      lines[#lines + 1] = psVar .. ":setLinearAcceleration(" .. table.concat({ fmt(xmin), fmt(ymin), fmt(xmax), fmt(ymax) }, ", ") .. ")"
+      lines[#lines + 1] = psVar
+        .. ":setLinearAcceleration("
+        .. table.concat({ fmt(xmin), fmt(ymin), fmt(xmax), fmt(ymax) }, ", ")
+        .. ")"
       lines[#lines + 1] = psVar .. ":setLinearDamping(" .. fmt(dampMin) .. ", " .. fmt(dampMax) .. ")"
       lines[#lines + 1] = psVar .. ":setOffset(" .. fmt(offsetX) .. ", " .. fmt(offsetY) .. ")"
       lines[#lines + 1] = psVar .. ":setParticleLifetime(" .. fmt(lifeMin) .. ", " .. fmt(lifeMax) .. ")"
       lines[#lines + 1] = psVar .. ":setRadialAcceleration(" .. fmt(radialMin) .. ", " .. fmt(radialMax) .. ")"
       lines[#lines + 1] = psVar .. ":setRelativeRotation(" .. tostring(ps:hasRelativeRotation()) .. ")"
       lines[#lines + 1] = psVar .. ":setRotation(" .. fmt(rotMin) .. ", " .. fmt(rotMax) .. ")"
-      if #sizes > 0 then lines[#lines + 1] = psVar .. ":setSizes(" .. table.concat(sizes, ", ") .. ")" end
+      if #sizes > 0 then
+        lines[#lines + 1] = psVar .. ":setSizes(" .. table.concat(sizes, ", ") .. ")"
+      end
       lines[#lines + 1] = psVar .. ":setSizeVariation(" .. fmt(ps:getSizeVariation()) .. ")"
       lines[#lines + 1] = psVar .. ":setSpeed(" .. fmt(speedMin) .. ", " .. fmt(speedMax) .. ")"
       lines[#lines + 1] = psVar .. ":setSpin(" .. fmt(spinMin) .. ", " .. fmt(spinMax) .. ")"
@@ -1169,18 +1660,32 @@ function HotParticlesPlugin:_generateCode(name)
 
       local shaderKey = asset.shaderPath ~= "" and asset.shaderPath or asset.shaderFilename
       local shaderValue = shaderVars[shaderKey] or "nil"
-      lines[#lines + 1] = "particles[" .. tostring(i) .. "] = {system = " .. psVar
-        .. ", kickStartSteps = " .. tostring(math.floor(safeNumber(sys.kickStartSteps, 0)))
-        .. ", kickStartDt = " .. fmt(sys.kickStartDt or (1 / 60))
-        .. ", emitAtStart = " .. tostring(math.floor(safeNumber(sys.emitAtStart, 0)))
-        .. ", blendMode = " .. quote(sys.blendMode or "alpha")
-        .. ", shader = " .. shaderValue
-        .. ", texturePreset = " .. quote(asset.texturePreset)
-        .. ", texturePath = " .. quote(asset.texturePath)
-        .. ", shaderPath = " .. quote(asset.shaderPath)
-        .. ", shaderFilename = " .. quote(asset.shaderSource ~= "" and asset.shaderFilename or "")
-        .. ", x = " .. fmt(sys.x or 0)
-        .. ", y = " .. fmt(sys.y or 0)
+      lines[#lines + 1] = "particles["
+        .. tostring(i)
+        .. "] = {system = "
+        .. psVar
+        .. ", kickStartSteps = "
+        .. tostring(math.floor(safeNumber(sys.kickStartSteps, 0)))
+        .. ", kickStartDt = "
+        .. fmt(sys.kickStartDt or (1 / 60))
+        .. ", emitAtStart = "
+        .. tostring(math.floor(safeNumber(sys.emitAtStart, 0)))
+        .. ", blendMode = "
+        .. quote(sys.blendMode or "alpha")
+        .. ", shader = "
+        .. shaderValue
+        .. ", texturePreset = "
+        .. quote(asset.texturePreset)
+        .. ", texturePath = "
+        .. quote(asset.texturePath)
+        .. ", shaderPath = "
+        .. quote(asset.shaderPath)
+        .. ", shaderFilename = "
+        .. quote(asset.shaderSource ~= "" and asset.shaderFilename or "")
+        .. ", x = "
+        .. fmt(sys.x or 0)
+        .. ", y = "
+        .. fmt(sys.y or 0)
         .. "}"
     end
   end
@@ -1190,7 +1695,7 @@ function HotParticlesPlugin:_generateCode(name)
   return table.concat(lines, "\n")
 end
 
-function HotParticlesPlugin:_buildZip(name)
+function ParticleSystemPlaygroundPlugin:_buildZip(name)
   local files = {
     { name = "init.lua", data = self:_generateCode(name), encoding = "text" },
   }
@@ -1221,17 +1726,17 @@ function HotParticlesPlugin:_buildZip(name)
   end
 
   return {
-    filename = sanitizeFilename(name or "hot-particles", "hot-particles") .. ".zip",
+    filename = sanitizeFilename(name or "particle-system-playground", "particle-system-playground") .. ".zip",
     files = files,
   }
 end
 
-function HotParticlesPlugin:getConfig()
+function ParticleSystemPlaygroundPlugin:getConfig()
   return {
-    type = "hot-particles",
-    tabName = "Hot Particles",
+    type = "particle-system-playground",
+    tabName = "Particles Playground",
     icon = "sparkles",
   }
 end
 
-return HotParticlesPlugin
+return ParticleSystemPlaygroundPlugin
diff --git a/src-lua/plugins/particle-system-playground/manifest.lua b/src-lua/plugins/particle-system-playground/manifest.lua
new file mode 100644
index 00000000..7a197c13
--- /dev/null
+++ b/src-lua/plugins/particle-system-playground/manifest.lua
@@ -0,0 +1,10 @@
+return {
+  id = "particle-system-playground",
+  name = "Particles Playground",
+  description = "Author composite particle effects with live in-game preview",
+  version = "1.0.0",
+  capabilities = { "draw", "filesystem" },
+  optIn = false,
+  disabled = false,
+  api = 5,
+}
diff --git a/src/components/app-sidebar/nav-main.tsx b/src/components/app-sidebar/nav-main.tsx
index 284b7007..be95e9ca 100644
--- a/src/components/app-sidebar/nav-main.tsx
+++ b/src/components/app-sidebar/nav-main.tsx
@@ -24,7 +24,7 @@ import { useSessionStore } from '@/store/session';
 export function NavMain() {
   const sessionId = useSessionStore((state) => state.sessionId);
   const hasSession = !!sessionId;
-  const isPaused = useDebuggerStore((state) => sessionId ? !!state.pausedState[sessionId] : false);
+  const isPaused = useDebuggerStore((state) => (sessionId ? !!state.pausedState[sessionId] : false));
 
   const items = [
     {
@@ -63,8 +63,8 @@ export function NavMain() {
       icon: ImagesIcon,
     },
     {
-      title: 'Hot Particles',
-      url: '/hot-particles',
+      title: 'Particles Playground',
+      url: '/particle-system-playground',
       icon: SparklesIcon,
     },
     {
diff --git a/src/hooks/use-hot-particles.ts b/src/hooks/use-particle-system-playground.ts
similarity index 67%
rename from src/hooks/use-hot-particles.ts
rename to src/hooks/use-particle-system-playground.ts
index 2615bd00..83f811a2 100644
--- a/src/hooks/use-hot-particles.ts
+++ b/src/hooks/use-particle-system-playground.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { sendCommand } from '@/lib/send-command';
@@ -6,12 +6,16 @@ import { useConfigStore } from '@/store/config';
 import { useSessionStore } from '@/store/session';
 import { debounce } from '@/utils/timers';
 import { sessionQueryKey } from './use-ws-connection';
-import type { HotParticlesData, HotParticlesSystem, HotParticlesTemplate } from '@/types/hot-particles';
+import type {
+  ParticleSystemPlaygroundData,
+  ParticleSystemPlaygroundSystem,
+  ParticleSystemPlaygroundTemplate,
+} from '@/types/particle-system-playground';
 
-const PLUGIN_ID = 'hot-particles';
+const PLUGIN_ID = 'particle-system-playground';
 
-const EMPTY_DATA: HotParticlesData = {
-  type: 'hot-particles',
+const EMPTY_DATA: ParticleSystemPlaygroundData = {
+  type: 'particle-system-playground',
   composites: [],
   activeComposite: null,
   activeSystem: 1,
@@ -20,7 +24,11 @@ const EMPTY_DATA: HotParticlesData = {
 
 type ParamValue = string | number | boolean;
 
-function updateSystemDraft(system: HotParticlesSystem, key: string, value: ParamValue): HotParticlesSystem {
+function updateSystemDraft(
+  system: ParticleSystemPlaygroundSystem,
+  key: string,
+  value: ParamValue,
+): ParticleSystemPlaygroundSystem {
   if (key === 'title') return { ...system, title: String(value) };
   if (key === 'blendMode') return { ...system, blendMode: String(value) };
   if (key === 'emitterOffsetX') return { ...system, x: Number(value) };
@@ -31,12 +39,15 @@ function updateSystemDraft(system: HotParticlesSystem, key: string, value: Param
   return { ...system, properties: { ...system.properties, [key]: value } };
 }
 
-function updateDraft(data: HotParticlesData | undefined, params: Record<string, ParamValue>): HotParticlesData | undefined {
+function updateDraft(
+  data: ParticleSystemPlaygroundData | undefined,
+  params: Record<string, ParamValue>,
+): ParticleSystemPlaygroundData | undefined {
   if (!data?.data) return data;
   const targetComposite = String(params.composite ?? data.activeComposite ?? '');
   if (targetComposite && targetComposite !== data.activeComposite) return data;
 
-  const next: HotParticlesData = {
+  const next: ParticleSystemPlaygroundData = {
     ...data,
     activeSystem: Number(params.systemIndex ?? data.activeSystem),
     data: {
@@ -63,7 +74,13 @@ function updateDraft(data: HotParticlesData | undefined, params: Record<string,
     if (system.index !== systemIndex) return system;
     let draft = system;
     for (const [key, value] of Object.entries(params)) {
-      if (key === 'composite' || key === 'systemIndex' || key === 'compositeX' || key === 'compositeY' || key.startsWith('movement.')) {
+      if (
+        key === 'composite' ||
+        key === 'systemIndex' ||
+        key === 'compositeX' ||
+        key === 'compositeY' ||
+        key.startsWith('movement.')
+      ) {
         continue;
       }
       draft = updateSystemDraft(draft, key, value);
@@ -75,10 +92,12 @@ function updateDraft(data: HotParticlesData | undefined, params: Record<string,
 }
 
 function updateTextureDraft(
-  data: HotParticlesData | undefined,
+  data: ParticleSystemPlaygroundData | undefined,
   systemIndex: number,
-  texture: Partial<Pick<HotParticlesSystem, 'texturePath' | 'texturePreset' | 'textureFilename' | 'exportReady'>>,
-): HotParticlesData | undefined {
+  texture: Partial<
+    Pick<ParticleSystemPlaygroundSystem, 'texturePath' | 'texturePreset' | 'textureFilename' | 'exportReady'>
+  >,
+): ParticleSystemPlaygroundData | undefined {
   if (!data?.data) return data;
   return {
     ...data,
@@ -89,19 +108,57 @@ function updateTextureDraft(
   };
 }
 
-export function useHotParticles() {
+function valuesEqual(a: unknown, b: unknown) {
+  if (typeof a === 'number' || typeof b === 'number') {
+    return Math.abs(Number(a) - Number(b)) < 0.0001;
+  }
+  return a === b;
+}
+
+function valueForParam(
+  data: ParticleSystemPlaygroundData | undefined,
+  params: Record<string, ParamValue>,
+  key: string,
+): ParamValue | undefined {
+  if (!data?.data) return undefined;
+  if (key === 'composite') return data.activeComposite ?? '';
+  if (key === 'systemIndex') return data.activeSystem;
+  if (key === 'compositeX') return data.data.x;
+  if (key === 'compositeY') return data.data.y;
+  if (key.startsWith('movement.')) {
+    const movementKey = key.slice('movement.'.length) as keyof typeof data.data.movement;
+    return data.data.movement[movementKey] as ParamValue | undefined;
+  }
+
+  const systemIndex = Number(params.systemIndex ?? data.activeSystem);
+  const system = data.data.systems.find((item) => item.index === systemIndex);
+  if (!system) return undefined;
+  if (key === 'title') return system.title;
+  if (key === 'blendMode') return system.blendMode;
+  if (key === 'emitterOffsetX') return system.x;
+  if (key === 'emitterOffsetY') return system.y;
+  if (key === 'kickStartSteps') return system.kickStartSteps;
+  if (key === 'kickStartDt') return system.kickStartDt;
+  if (key === 'emitAtStart') return system.emitAtStart;
+  return system.properties[key as keyof typeof system.properties] as ParamValue | undefined;
+}
+
+export function useParticleSystemPlayground() {
   const sessionId = useSessionStore((state) => state.sessionId);
   const plugin = useConfigStore((state) => state.config?.plugins?.[PLUGIN_ID]);
   const queryClient = useQueryClient();
   const pendingParams = useRef<Record<string, ParamValue>>({});
+  const [optimisticParams, setOptimisticParams] = useState<Record<string, ParamValue>>({});
 
-  const { data } = useQuery<HotParticlesData>({
+  const { data: serverData } = useQuery<ParticleSystemPlaygroundData>({
     queryKey: sessionQueryKey.plugin(sessionId ?? '', PLUGIN_ID),
     queryFn: () => EMPTY_DATA,
     enabled: false,
     initialData: EMPTY_DATA,
   });
 
+  const data = useMemo(() => updateDraft(serverData, optimisticParams) ?? serverData, [serverData, optimisticParams]);
+
   const lastShaderResponse = useQuery<{ status?: string; message?: string }>({
     queryKey: sessionQueryKey.pluginAction(sessionId ?? '', PLUGIN_ID, 'set-shader'),
     queryFn: () => ({}),
@@ -112,19 +169,26 @@ export function useHotParticles() {
     (message: Record<string, unknown>) => {
       if (!sessionId) return Promise.resolve();
       return sendCommand(sessionId, message).catch((error: unknown) => {
-        toast.error(error instanceof Error ? error.message : 'Hot Particles command failed');
+        toast.error(error instanceof Error ? error.message : 'Particles Playground command failed');
       });
     },
     [sessionId],
   );
 
   const pluginQueryKey = sessionQueryKey.plugin(sessionId ?? '', PLUGIN_ID);
-  const setOptimisticData = useCallback(
-    (params: Record<string, ParamValue>) => {
-      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) => updateDraft(current, params));
-    },
-    [pluginQueryKey, queryClient],
-  );
+  const setOptimisticData = useCallback((params: Record<string, ParamValue>) => {
+    setOptimisticParams((current) => ({ ...current, ...params }));
+  }, []);
+
+  useEffect(() => {
+    setOptimisticParams((current) => {
+      const entries = Object.entries(current).filter(([key, value]) => {
+        const serverValue = valueForParam(serverData, current, key);
+        return serverValue === undefined || !valuesEqual(serverValue, value);
+      });
+      return entries.length === Object.keys(current).length ? current : Object.fromEntries(entries);
+    });
+  }, [serverData]);
 
   const flushParams = useMemo(
     () =>
@@ -175,7 +239,7 @@ export function useHotParticles() {
 
   const setTextureFromUpload = useCallback(
     (filename: string, dataBase64: string) => {
-      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) =>
+      queryClient.setQueryData<ParticleSystemPlaygroundData>(pluginQueryKey, (current) =>
         updateTextureDraft(current, data.activeSystem, {
           texturePath: '',
           texturePreset: '',
@@ -214,7 +278,7 @@ export function useHotParticles() {
     refreshAfterAction,
     selectComposite: (name: string) => refreshAfterAction('select-composite', { composite: name }),
     selectSystem: (index: number) => refreshAfterAction('select-system', { systemIndex: index }),
-    createComposite: (name?: string, template?: HotParticlesTemplate) =>
+    createComposite: (name?: string, template?: ParticleSystemPlaygroundTemplate) =>
       refreshAfterAction('new-composite', { ...(name ? { name } : {}), ...(template ? { template } : {}) }),
     deleteComposite: () => refreshAfterAction('delete-composite'),
     addSystem: () => refreshAfterAction('add-system'),
@@ -223,7 +287,7 @@ export function useHotParticles() {
     reset: (all = false) => refreshAfterAction(all ? 'reset-all' : 'reset'),
     kickStart: () => refreshAfterAction('kick-start'),
     setTexturePreset: (preset: string) => {
-      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) =>
+      queryClient.setQueryData<ParticleSystemPlaygroundData>(pluginQueryKey, (current) =>
         updateTextureDraft(current, data.activeSystem, {
           texturePath: '',
           texturePreset: preset,
@@ -234,7 +298,7 @@ export function useHotParticles() {
       refreshAfterAction('set-texture', { preset });
     },
     setTexturePath: (texturePath: string) => {
-      queryClient.setQueryData<HotParticlesData>(pluginQueryKey, (current) =>
+      queryClient.setQueryData<ParticleSystemPlaygroundData>(pluginQueryKey, (current) =>
         updateTextureDraft(current, data.activeSystem, {
           texturePath,
           texturePreset: '',
diff --git a/src/hooks/use-ws-connection.ts b/src/hooks/use-ws-connection.ts
index ebf7c7af..2d990fe4 100644
--- a/src/hooks/use-ws-connection.ts
+++ b/src/hooks/use-ws-connection.ts
@@ -488,7 +488,7 @@ export const useWsConnection = () => {
               }
               const bytes = zipSync(archive);
               saveFileDialog({
-                defaultPath: response.zipAssets.filename ?? 'hot-particles.zip',
+                defaultPath: response.zipAssets.filename ?? 'particle-system-playground.zip',
                 filters: [{ name: 'ZIP archive', extensions: ['zip'] }],
               })
                 .then(async (path) => {
diff --git a/src/pages/hot-particles/components/ColorGradientEditor.tsx b/src/pages/hot-particles/components/ColorGradientEditor.tsx
deleted file mode 100644
index a3a404e3..00000000
--- a/src/pages/hot-particles/components/ColorGradientEditor.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { PlusIcon, Trash2Icon } from 'lucide-react';
-import { useState } from 'react';
-
-type Stop = { r: number; g: number; b: number; a: number };
-
-function clamp(value: number) {
-  return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
-}
-
-function parse(value: string): Stop[] {
-  const nums = value
-    .split(',')
-    .map((part) => Number(part.trim()))
-    .filter(Number.isFinite)
-    .map(clamp);
-  const stops: Stop[] = [];
-  for (let i = 0; i + 3 < nums.length; i += 4) {
-    stops.push({ r: nums[i], g: nums[i + 1], b: nums[i + 2], a: nums[i + 3] });
-  }
-  return stops.length ? stops : [{ r: 1, g: 1, b: 1, a: 1 }];
-}
-
-function serialize(stops: Stop[]) {
-  return stops.flatMap((stop) => [stop.r, stop.g, stop.b, stop.a].map((value) => clamp(value).toFixed(3))).join(', ');
-}
-
-function hex(stop: Stop) {
-  const part = (value: number) =>
-    Math.round(clamp(value) * 255)
-      .toString(16)
-      .padStart(2, '0');
-  return `#${part(stop.r)}${part(stop.g)}${part(stop.b)}`;
-}
-
-function fromHex(value: string) {
-  const match = value.match(/^#?([0-9a-f]{6})$/i);
-  if (!match) return null;
-  const int = Number.parseInt(match[1], 16);
-  return { r: ((int >> 16) & 255) / 255, g: ((int >> 8) & 255) / 255, b: (int & 255) / 255 };
-}
-
-export function ColorGradientEditor({ value, onChange }: { value: string; onChange: (value: string) => void }) {
-  const stops = parse(value);
-  const [selected, setSelected] = useState(0);
-  const stop = stops[Math.min(selected, stops.length - 1)];
-
-  const update = (index: number, patch: Partial<Stop>) => {
-    onChange(serialize(stops.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item))));
-  };
-
-  return (
-    <div className="grid gap-2">
-      <div className="flex h-7 overflow-hidden rounded border">
-        {stops.map((item, index) => (
-          <button
-            key={index}
-            className="min-w-6 flex-1"
-            style={{
-              background: `rgba(${item.r * 255}, ${item.g * 255}, ${item.b * 255}, ${item.a})`,
-              boxShadow: selected === index ? 'inset 0 0 0 2px currentColor' : undefined,
-            }}
-            onClick={() => setSelected(index)}
-          />
-        ))}
-      </div>
-      <div className="grid grid-cols-[auto_1fr_6rem_auto] items-end gap-2">
-        <div className="grid gap-1">
-          <Label className="text-[10px]">Color</Label>
-          <input
-            className="size-8 rounded border bg-transparent p-1"
-            type="color"
-            value={hex(stop)}
-            onChange={(event) => {
-              const color = fromHex(event.target.value);
-              if (color) update(selected, color);
-            }}
-          />
-        </div>
-        <div className="grid gap-1">
-          <Label className="text-[10px]">Hex</Label>
-          <Input
-            className="h-8 font-mono text-xs"
-            value={hex(stop)}
-            onChange={(event) => {
-              const color = fromHex(event.target.value);
-              if (color) update(selected, color);
-            }}
-          />
-        </div>
-        <div className="grid gap-1">
-          <Label className="text-[10px]">Alpha</Label>
-          <Input
-            className="h-8 text-xs"
-            type="number"
-            min={0}
-            max={1}
-            step={0.01}
-            value={stop.a}
-            onChange={(event) => update(selected, { a: clamp(Number(event.target.value)) })}
-          />
-        </div>
-        <div className="flex gap-1">
-          <Button
-            size="icon"
-            variant="outline"
-            className="size-8"
-            disabled={stops.length >= 8}
-            onClick={() => {
-              onChange(serialize([...stops, { ...stop }]));
-              setSelected(stops.length);
-            }}
-          >
-            <PlusIcon className="size-4" />
-          </Button>
-          <Button
-            size="icon"
-            variant="outline"
-            className="size-8"
-            disabled={stops.length <= 1}
-            onClick={() => {
-              onChange(serialize(stops.filter((_, index) => index !== selected)));
-              setSelected(Math.max(0, selected - 1));
-            }}
-          >
-            <Trash2Icon className="size-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/hot-particles/components/EmitterList.tsx b/src/pages/hot-particles/components/EmitterList.tsx
deleted file mode 100644
index a1eec6c5..00000000
--- a/src/pages/hot-particles/components/EmitterList.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/utils/styles';
-import type { HotParticlesSystem } from '@/types/hot-particles';
-import { PlusIcon, Trash2Icon } from 'lucide-react';
-
-type Props = {
-  systems: HotParticlesSystem[];
-  activeIndex: number;
-  isGameComposite: boolean;
-  onSelect: (index: number) => void;
-  onAdd: () => void;
-  onRemove: (index: number) => void;
-};
-
-export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, onAdd, onRemove }: Props) {
-  return (
-    <div className="grid gap-1 p-2">
-      {systems.map((system) => {
-        const active = system.index === activeIndex;
-        return (
-          <button
-            key={system.index}
-            className={cn(
-              'group grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-2 rounded px-2 py-2 text-left text-xs',
-              active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',
-            )}
-            onClick={() => onSelect(system.index)}
-          >
-            <span className="flex size-6 items-center justify-center rounded border bg-background/20 font-mono text-[10px]">
-              {system.index}
-            </span>
-            <span className="min-w-0">
-              <span className="block truncate font-medium">{system.title}</span>
-              <span className={cn('block truncate text-[10px]', active ? 'text-primary-foreground/70' : 'text-muted-foreground')}>
-                {system.properties.count ?? 0} / {system.properties.bufferSize ?? 0}
-              </span>
-            </span>
-            <span className="flex items-center gap-1">
-              <Badge variant="outline" className={cn('h-5 px-1.5 text-[10px]', active && 'border-primary-foreground/40')}>
-                {system.blendMode}
-              </Badge>
-              {!isGameComposite && systems.length > 1 && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="size-6 opacity-0 group-hover:opacity-100"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onRemove(system.index);
-                  }}
-                >
-                  <Trash2Icon className="size-3" />
-                </Button>
-              )}
-            </span>
-          </button>
-        );
-      })}
-      {!isGameComposite && (
-        <Button variant="ghost" size="sm" className="mt-1 h-8 justify-start gap-2 text-xs" onClick={onAdd}>
-          <PlusIcon className="size-4" />
-          Add Emitter
-        </Button>
-      )}
-    </div>
-  );
-}
diff --git a/src/pages/particle-system-playground/components/AccelerationEditor.tsx b/src/pages/particle-system-playground/components/AccelerationEditor.tsx
new file mode 100644
index 00000000..3e904ab5
--- /dev/null
+++ b/src/pages/particle-system-playground/components/AccelerationEditor.tsx
@@ -0,0 +1,51 @@
+import { Separator } from '@/components/ui/separator';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { useState } from 'react';
+import { CircularForceGizmo } from './CircularForceGizmo';
+import { DampingRangeEditor } from './DampingRangeEditor';
+import { LinearAccelPlane } from './LinearAccelPlane';
+import { RangePairField } from './RangePairField';
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+export function AccelerationEditor({ system, onChange }: Props) {
+  const [mode, setMode] = useState<'visual' | 'raw'>('visual');
+
+  return (
+    <section className="grid gap-3">
+      <div className="flex items-center gap-3">
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Acceleration And Damping</h3>
+        <Separator className="flex-1" />
+        <ToggleGroup
+          type="single"
+          value={mode}
+          onValueChange={(v) => v && setMode(v as 'visual' | 'raw')}
+          className="h-6"
+        >
+          <ToggleGroupItem value="visual" className="h-6 px-2 text-[10px]">Visual</ToggleGroupItem>
+          <ToggleGroupItem value="raw" className="h-6 px-2 text-[10px]">Raw</ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
+      {mode === 'visual' ? (
+        <div className="grid gap-4">
+          <LinearAccelPlane system={system} onChange={onChange} />
+          <CircularForceGizmo system={system} onChange={onChange} />
+          <DampingRangeEditor system={system} onChange={onChange} />
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+          <RangePairField label="Linear X" minKey="linearAccelXMin" maxKey="linearAccelXMax" system={system} onChange={onChange} step={1} />
+          <RangePairField label="Linear Y" minKey="linearAccelYMin" maxKey="linearAccelYMax" system={system} onChange={onChange} step={1} />
+          <RangePairField label="Radial" minKey="radialAccelMin" maxKey="radialAccelMax" system={system} onChange={onChange} step={1} />
+          <RangePairField label="Tangential" minKey="tangentialAccelMin" maxKey="tangentialAccelMax" system={system} onChange={onChange} step={1} />
+          <RangePairField label="Damping" minKey="linearDampingMin" maxKey="linearDampingMax" system={system} onChange={onChange} step={0.01} />
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/CircularForceGizmo.tsx b/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
new file mode 100644
index 00000000..91cdb5e8
--- /dev/null
+++ b/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
@@ -0,0 +1,234 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const H = 180;
+const EMITTER_R = 18;
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+// Build a curved arrow path along a circle arc (for tangential indicators)
+function arcArrow(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string {
+  const sx = cx + Math.cos(startAngle) * r;
+  const sy = cy + Math.sin(startAngle) * r;
+  const ex = cx + Math.cos(endAngle) * r;
+  const ey = cy + Math.sin(endAngle) * r;
+  const largeArc = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+  const sweep = endAngle > startAngle ? 1 : 0;
+  return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} ${sweep} ${ex} ${ey}`;
+}
+
+export function CircularForceGizmo({ system, onChange }: Props) {
+  const p = system.properties;
+  const radialMin = p.radialAccelMin ?? 0;
+  const radialMax = p.radialAccelMax ?? 0;
+  const tangMin = p.tangentialAccelMin ?? 0;
+  const tangMax = p.tangentialAccelMax ?? 0;
+
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [svgW, setSvgW] = useState(300);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([e]) => setSvgW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const cx = svgW / 2;
+  const cy = H / 2;
+
+  const maxAbs = Math.max(Math.abs(radialMin), Math.abs(radialMax), Math.abs(tangMin), Math.abs(tangMax), 50);
+  const [range, setRange] = useState(() => Math.ceil(maxAbs * 1.5 / 50) * 50);
+  const halfSide = Math.min(svgW, H) / 2 - 24;
+  const scale = halfSide / range;
+
+  const stateRef = useRef({ cx, cy, scale, range });
+  stateRef.current = { cx, cy, scale, range };
+
+  type DragTarget = 'radialMin' | 'radialMax' | 'tangMin' | 'tangMax';
+  const [dragging, setDragging] = useState<DragTarget | null>(null);
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<SVGSVGElement>) => {
+      if (!dragging || !svgRef.current) return;
+      const { cx, cy, scale } = stateRef.current;
+      const rect = svgRef.current.getBoundingClientRect();
+      const dx = e.clientX - rect.left - cx;
+      const dy = e.clientY - rect.top - cy;
+      const round = (v: number) => Math.round(v * 10) / 10;
+
+      const { range } = stateRef.current;
+      const clamp = (v: number) => Math.max(-range, Math.min(range, v));
+      if (dragging === 'radialMin' || dragging === 'radialMax') {
+        const v = round(clamp(dx / scale));
+        onChange(dragging === 'radialMin' ? 'radialAccelMin' : 'radialAccelMax', v);
+      } else {
+        const v = round(clamp(dy / scale));
+        onChange(dragging === 'tangMin' ? 'tangentialAccelMin' : 'tangentialAccelMax', v);
+      }
+    },
+    [dragging, onChange],
+  );
+
+  const stopDrag = useCallback(() => setDragging(null), []);
+
+  // Radial handle positions: along horizontal axis
+  const radialMinX = cx + radialMin * scale;
+  const radialMaxX = cx + radialMax * scale;
+  // Tangential handle positions: along vertical axis
+  const tangMinY = cy + tangMin * scale;
+  const tangMaxY = cy + tangMax * scale;
+
+  // Decorative: show 8 radial arrows around the emitter circle
+  const avgRadial = (radialMin + radialMax) / 2;
+  const avgTang = (tangMin + tangMax) / 2;
+
+  const arrows8 = Array.from({ length: 8 }, (_, i) => {
+    const angle = (i / 8) * 2 * Math.PI;
+    const baseR = EMITTER_R + 4;
+    const tipR = baseR + Math.min(Math.abs(avgRadial) * scale * 0.4, 28) + 4;
+    const dir = avgRadial >= 0 ? 1 : -1; // outward or inward
+    const bx = cx + Math.cos(angle) * baseR;
+    const by = cy + Math.sin(angle) * baseR;
+    const ax = cx + Math.cos(angle) * (EMITTER_R + 4 + (dir > 0 ? tipR - baseR : 0));
+    const ay = cy + Math.sin(angle) * (EMITTER_R + 4 + (dir > 0 ? tipR - baseR : 0));
+    return { bx, by, tx: ax, ty: ay, angle: dir > 0 ? angle : angle + Math.PI };
+  });
+
+  // Tangential arc display
+  const tangArcR = EMITTER_R + 12;
+  const tangStrength = Math.abs(avgTang);
+  const tangArcSpan = Math.min((tangStrength / range) * Math.PI * 1.5 + 0.3, Math.PI * 1.8);
+  const tangCW = avgTang >= 0;
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Radial &amp; Tangential</span>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-muted-foreground">Range ±</span>
+          <Input
+            className="h-6 w-20 text-xs"
+            type="number"
+            step={50}
+            min={10}
+            value={range}
+            onChange={(e) => { const v = parseFloat(e.target.value); if (v > 0) setRange(v); }}
+          />
+        </div>
+      </div>
+
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={H}
+        className="rounded border bg-card touch-none"
+        onPointerMove={onPointerMove}
+        onPointerUp={stopDrag}
+        onPointerLeave={stopDrag}
+      >
+        {/* Reference circles */}
+        {[0.33, 0.66, 1].map((t) => (
+          <circle key={t} cx={cx} cy={cy} r={halfSide * t}
+            fill="none" stroke="currentColor" strokeOpacity={0.06} strokeDasharray="3 3" />
+        ))}
+
+        {/* Axes */}
+        <line x1={cx - halfSide} y1={cy} x2={cx + halfSide} y2={cy} stroke="currentColor" strokeOpacity={0.15} />
+        <line x1={cx} y1={cy - halfSide} x2={cx} y2={cy + halfSide} stroke="currentColor" strokeOpacity={0.15} />
+        <text x={cx + halfSide - 12} y={cy - 4} fontSize={8} fill="currentColor" fillOpacity={0.35}>radial</text>
+        <text x={cx + 4} y={cy - halfSide + 10} fontSize={8} fill="currentColor" fillOpacity={0.35}>tang</text>
+
+        {/* Radial arrows around emitter */}
+        {arrows8.map(({ bx, by, tx, ty, angle }, i) => (
+          <g key={i}>
+            <line x1={bx} y1={by} x2={tx} y2={ty} stroke="var(--chart-1)" strokeOpacity={0.5} strokeWidth={1.5} />
+            <path
+              d={`M ${tx} ${ty} L ${tx + Math.cos(angle + 2.5) * 5} ${ty + Math.sin(angle + 2.5) * 5} M ${tx} ${ty} L ${tx + Math.cos(angle - 2.5) * 5} ${ty + Math.sin(angle - 2.5) * 5}`}
+              stroke="var(--chart-1)" strokeOpacity={0.5} strokeWidth={1} fill="none" strokeLinecap="round"
+            />
+          </g>
+        ))}
+
+        {/* Tangential arc arrows */}
+        {tangStrength > 1 && (
+          <>
+            <path
+              d={arcArrow(cx, cy, tangArcR, -Math.PI / 2, -Math.PI / 2 + (tangCW ? tangArcSpan : -tangArcSpan))}
+              fill="none" stroke="var(--chart-2)" strokeWidth={2} strokeOpacity={0.6} strokeLinecap="round"
+            />
+            {/* arrowhead at end of arc */}
+            {(() => {
+              const endAngle = -Math.PI / 2 + (tangCW ? tangArcSpan : -tangArcSpan);
+              const ex = cx + Math.cos(endAngle) * tangArcR;
+              const ey = cy + Math.sin(endAngle) * tangArcR;
+              const ta = endAngle + (tangCW ? Math.PI / 2 : -Math.PI / 2);
+              return (
+                <path
+                  d={`M ${ex} ${ey} L ${ex + Math.cos(ta + 2.5) * 6} ${ey + Math.sin(ta + 2.5) * 6} M ${ex} ${ey} L ${ex + Math.cos(ta - 2.5) * 6} ${ey + Math.sin(ta - 2.5) * 6}`}
+                  stroke="var(--chart-2)" strokeWidth={1.5} strokeOpacity={0.6} fill="none" strokeLinecap="round"
+                />
+              );
+            })()}
+          </>
+        )}
+
+        {/* Emitter circle */}
+        <circle cx={cx} cy={cy} r={EMITTER_R} fill="hsl(var(--card))" stroke="currentColor" strokeOpacity={0.3} strokeWidth={1.5} />
+        <circle cx={cx} cy={cy} r={3} fill="currentColor" fillOpacity={0.4} />
+
+        {/* Radial handles (horizontal axis) */}
+        <circle cx={radialMinX} cy={cy} r={6}
+          fill={dragging === 'radialMin' ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)" strokeWidth={2} style={{ cursor: 'ew-resize' }}
+          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('radialMin'); }}
+        />
+        <circle cx={radialMaxX} cy={cy} r={6}
+          fill={dragging === 'radialMax' ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)" strokeWidth={2} strokeDasharray="3 2" style={{ cursor: 'ew-resize' }}
+          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('radialMax'); }}
+        />
+
+        {/* Tangential handles (vertical axis) */}
+        <circle cx={cx} cy={tangMinY} r={6}
+          fill={dragging === 'tangMin' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)" strokeWidth={2} style={{ cursor: 'ns-resize' }}
+          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('tangMin'); }}
+        />
+        <circle cx={cx} cy={tangMaxY} r={6}
+          fill={dragging === 'tangMax' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)" strokeWidth={2} strokeDasharray="3 2" style={{ cursor: 'ns-resize' }}
+          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('tangMax'); }}
+        />
+
+        {/* Legends */}
+        <circle cx={20} cy={H - 14} r={4} fill="var(--chart-1)" />
+        <text x={28} y={H - 10} fontSize={9} fill="currentColor" fillOpacity={0.5}>radial (± outward)</text>
+        <circle cx={120} cy={H - 14} r={4} fill="var(--chart-2)" />
+        <text x={128} y={H - 10} fontSize={9} fill="currentColor" fillOpacity={0.5}>tang (± CW)</text>
+      </svg>
+
+      <div className="grid grid-cols-2 gap-2">
+        {([
+          { label: 'Radial Min', key: 'radialAccelMin', val: radialMin },
+          { label: 'Radial Max', key: 'radialAccelMax', val: radialMax },
+          { label: 'Tang Min', key: 'tangentialAccelMin', val: tangMin },
+          { label: 'Tang Max', key: 'tangentialAccelMax', val: tangMax },
+        ]).map(({ label, key, val }) => (
+          <div key={key} className="grid gap-1">
+            <Label className="text-[10px] text-muted-foreground">{label}</Label>
+            <Input className="h-8 text-xs" type="number" step={1} value={val}
+              onChange={(e) => onChange(key, Number(e.target.value))} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/ColorGradientEditor.tsx b/src/pages/particle-system-playground/components/ColorGradientEditor.tsx
new file mode 100644
index 00000000..1289696a
--- /dev/null
+++ b/src/pages/particle-system-playground/components/ColorGradientEditor.tsx
@@ -0,0 +1,229 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { catmullRomPath } from './curveUtils';
+
+type Stop = { r: number; g: number; b: number; a: number };
+
+const ALPHA_H = 64;
+const ALPHA_PAD = { top: 8, right: 8, bottom: 8, left: 8 };
+
+function clamp(value: number) {
+  return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
+}
+
+function parse(value: string): Stop[] {
+  const nums = value
+    .split(',')
+    .map((part) => Number(part.trim()))
+    .filter(Number.isFinite)
+    .map(clamp);
+  const stops: Stop[] = [];
+  for (let i = 0; i + 3 < nums.length; i += 4) {
+    stops.push({ r: nums[i], g: nums[i + 1], b: nums[i + 2], a: nums[i + 3] });
+  }
+  return stops.length ? stops : [{ r: 1, g: 1, b: 1, a: 1 }];
+}
+
+function serialize(stops: Stop[]) {
+  return stops.flatMap((stop) => [stop.r, stop.g, stop.b, stop.a].map((value) => clamp(value).toFixed(3))).join(', ');
+}
+
+function hex(stop: Stop) {
+  const part = (value: number) =>
+    Math.round(clamp(value) * 255)
+      .toString(16)
+      .padStart(2, '0');
+  return `#${part(stop.r)}${part(stop.g)}${part(stop.b)}`;
+}
+
+function fromHex(value: string) {
+  const match = value.match(/^#?([0-9a-f]{6})$/i);
+  if (!match) return null;
+  const int = Number.parseInt(match[1], 16);
+  return { r: ((int >> 16) & 255) / 255, g: ((int >> 8) & 255) / 255, b: (int & 255) / 255 };
+}
+
+export function ColorGradientEditor({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+  const stops = parse(value);
+  const [selected, setSelected] = useState(0);
+  const [draggingAlpha, setDraggingAlpha] = useState<number | null>(null);
+  const alphaRef = useRef<SVGSVGElement>(null);
+  const gradientId = useId();
+  const [svgW, setSvgW] = useState(300);
+
+  useEffect(() => {
+    const el = alphaRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([e]) => setSvgW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const stop = stops[Math.min(selected, stops.length - 1)];
+
+  const update = (index: number, patch: Partial<Stop>) => {
+    onChange(serialize(stops.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item))));
+  };
+
+  const innerW = svgW - ALPHA_PAD.left - ALPHA_PAD.right;
+  const innerH = ALPHA_H - ALPHA_PAD.top - ALPHA_PAD.bottom;
+
+  const alphaPoints = stops.map((s, i) => ({
+    x: ALPHA_PAD.left + (stops.length === 1 ? innerW / 2 : (i / (stops.length - 1)) * innerW),
+    y: ALPHA_PAD.top + (1 - s.a) * innerH,
+  }));
+  const alphaPath = catmullRomPath(alphaPoints);
+  const baselineY = ALPHA_PAD.top + innerH;
+
+  const onAlphaPointerMove = useCallback(
+    (e: React.PointerEvent<SVGSVGElement>) => {
+      if (draggingAlpha === null || !alphaRef.current) return;
+      const rect = alphaRef.current.getBoundingClientRect();
+      const relY = e.clientY - rect.top;
+      const a = clamp(1 - (relY - ALPHA_PAD.top) / innerH);
+      update(draggingAlpha, { a });
+    },
+    [draggingAlpha, stops, innerH],
+  );
+
+  const stopAlphaDrag = useCallback(() => setDraggingAlpha(null), []);
+
+  // CSS gradient string for the color bar (with alpha, shown over checkerboard)
+  const gradientCss = stops
+    .map((s, i) => {
+      const pct = stops.length === 1 ? '50%' : `${((i / (stops.length - 1)) * 100).toFixed(1)}%`;
+      return `rgba(${Math.round(s.r * 255)},${Math.round(s.g * 255)},${Math.round(s.b * 255)},${s.a.toFixed(3)}) ${pct}`;
+    })
+    .join(', ');
+
+  return (
+    <div className="grid gap-2">
+      {/* Alpha curve */}
+      <svg
+        ref={alphaRef}
+        width="100%"
+        height={ALPHA_H}
+        className="rounded border bg-card touch-none"
+        onPointerMove={onAlphaPointerMove}
+        onPointerUp={stopAlphaDrag}
+        onPointerLeave={stopAlphaDrag}
+      >
+        <line
+          x1={ALPHA_PAD.left} y1={ALPHA_PAD.top + innerH * 0.5}
+          x2={svgW - ALPHA_PAD.right} y2={ALPHA_PAD.top + innerH * 0.5}
+          stroke="currentColor" strokeOpacity={0.07}
+        />
+        <line
+          x1={ALPHA_PAD.left} y1={baselineY}
+          x2={svgW - ALPHA_PAD.right} y2={baselineY}
+          stroke="currentColor" strokeOpacity={0.2} strokeDasharray="3 3"
+        />
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
+            {stops.map((s, i) => (
+              <stop
+                key={i}
+                offset={`${(stops.length === 1 ? 50 : (i / (stops.length - 1)) * 100).toFixed(1)}%`}
+                stopColor={`rgb(${Math.round(s.r * 255)},${Math.round(s.g * 255)},${Math.round(s.b * 255)})`}
+                stopOpacity={0.5}
+              />
+            ))}
+          </linearGradient>
+        </defs>
+        <path
+          d={`${alphaPath} L ${alphaPoints[alphaPoints.length - 1].x} ${baselineY} L ${alphaPoints[0].x} ${baselineY} Z`}
+          fill={`url(#${gradientId})`}
+        />
+        <path d={alphaPath} fill="none" stroke="var(--chart-2)" strokeWidth={1.5} strokeLinecap="round" />
+        {alphaPoints.map((pt, i) => (
+          <circle
+            key={i} cx={pt.x} cy={pt.y} r={5}
+            fill={selected === i ? 'var(--chart-2)' : 'hsl(var(--card))'}
+            stroke="var(--chart-2)" strokeWidth={2}
+            style={{ cursor: 'ns-resize' }}
+            onPointerDown={(e) => {
+              e.currentTarget.setPointerCapture(e.pointerId);
+              setDraggingAlpha(i);
+              setSelected(i);
+            }}
+          />
+        ))}
+      </svg>
+
+      {/* Color gradient bar with checkerboard for alpha visibility */}
+      <div
+        className="relative h-7 overflow-hidden rounded border"
+        style={{
+          backgroundImage: `linear-gradient(to right, ${gradientCss}), repeating-conic-gradient(#80808040 0% 25%, transparent 0% 50%)`,
+          backgroundSize: '100% 100%, 8px 8px',
+        }}
+      >
+        <div className="absolute inset-0 flex">
+          {stops.map((_, index) => (
+            <button
+              key={index}
+              className="min-w-6 flex-1"
+              style={{ boxShadow: selected === index ? 'inset 0 0 0 2px white' : undefined }}
+              onClick={() => setSelected(index)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-[auto_1fr_6rem_auto] items-end gap-2">
+        <div className="grid gap-1">
+          <Label className="text-[10px]">Color</Label>
+          <input
+            className="size-8 rounded border bg-transparent p-1"
+            type="color"
+            value={hex(stop)}
+            onChange={(event) => {
+              const color = fromHex(event.target.value);
+              if (color) update(selected, color);
+            }}
+          />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px]">Hex</Label>
+          <Input
+            className="h-8 font-mono text-xs"
+            value={hex(stop)}
+            onChange={(event) => {
+              const color = fromHex(event.target.value);
+              if (color) update(selected, color);
+            }}
+          />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px]">Alpha</Label>
+          <Input
+            className="h-8 text-xs"
+            type="number" min={0} max={1} step={0.01}
+            value={stop.a}
+            onChange={(event) => update(selected, { a: clamp(Number(event.target.value)) })}
+          />
+        </div>
+        <div className="flex gap-1">
+          <Button
+            size="icon" variant="outline" className="size-8"
+            disabled={stops.length >= 8}
+            onClick={() => { onChange(serialize([...stops, { ...stop }])); setSelected(stops.length); }}
+          >
+            <PlusIcon className="size-4" />
+          </Button>
+          <Button
+            size="icon" variant="outline" className="size-8"
+            disabled={stops.length <= 1}
+            onClick={() => { onChange(serialize(stops.filter((_, index) => index !== selected))); setSelected(Math.max(0, selected - 1)); }}
+          >
+            <Trash2Icon className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/CompositeSelector.tsx b/src/pages/particle-system-playground/components/CompositeSelector.tsx
similarity index 54%
rename from src/pages/hot-particles/components/CompositeSelector.tsx
rename to src/pages/particle-system-playground/components/CompositeSelector.tsx
index 2eb43b2f..830edaef 100644
--- a/src/pages/hot-particles/components/CompositeSelector.tsx
+++ b/src/pages/particle-system-playground/components/CompositeSelector.tsx
@@ -1,7 +1,14 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { HOT_PARTICLES_TEMPLATES, type HotParticlesTemplate } from '@/types/hot-particles';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { PlusIcon, Trash2Icon } from 'lucide-react';
 import { useState } from 'react';
 
@@ -10,12 +17,20 @@ type Props = {
   activeComposite: string | null;
   compositeType?: 'scratch' | 'game';
   onSelect: (name: string) => void;
-  onCreate: (name?: string, template?: HotParticlesTemplate) => void;
+  onCreate: (name?: string) => void;
   onDelete: () => void;
 };
 
 export function CompositeSelector({ composites, activeComposite, compositeType, onSelect, onCreate, onDelete }: Props) {
   const [name, setName] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const createComposite = () => {
+    const trimmed = name.trim();
+    onCreate(trimmed || undefined);
+    setName('');
+    setCreateOpen(false);
+  };
 
   return (
     <div className="grid gap-2 border-b p-3">
@@ -34,50 +49,53 @@ export function CompositeSelector({ composites, activeComposite, compositeType,
         </Select>
         <Button
           size="icon"
-          variant="outline"
           className="size-8 shrink-0"
-          title="Delete scratch composite"
-          disabled={compositeType !== 'scratch'}
-          onClick={onDelete}
+          title="New composite"
+          onClick={() => setCreateOpen(true)}
         >
-          <Trash2Icon className="size-4" />
+          <PlusIcon className="size-4" />
         </Button>
-      </div>
-      <div className="flex gap-2">
-        <Input
-          className="h-8 text-xs"
-          placeholder="New composite"
-          value={name}
-          onChange={(event) => setName(event.target.value)}
-        />
         <Button
           size="icon"
+          variant="outline"
           className="size-8 shrink-0"
-          title="New composite"
-          onClick={() => {
-            onCreate(name.trim() || undefined);
-            setName('');
-          }}
+          title="Delete scratch composite"
+          disabled={compositeType !== 'scratch'}
+          onClick={onDelete}
         >
-          <PlusIcon className="size-4" />
+          <Trash2Icon className="size-4" />
         </Button>
       </div>
-      <div className="grid grid-cols-2 gap-1">
-        {HOT_PARTICLES_TEMPLATES.map((template) => (
-          <Button
-            key={template.value}
-            size="sm"
-            variant="outline"
-            className="h-7 justify-start px-2 text-xs"
-            onClick={() => {
-              onCreate(name.trim() || undefined, template.value);
-              setName('');
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>New Composite</DialogTitle>
+            <DialogDescription>Name the particle effect you want to create.</DialogDescription>
+          </DialogHeader>
+          <form
+            className="grid gap-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              createComposite();
             }}
           >
-            {template.label}
-          </Button>
-        ))}
-      </div>
+            <Input
+              autoFocus
+              className="h-9 text-sm"
+              placeholder="Explosion"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+            />
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit">Create</Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/particle-system-playground/components/DampingRangeEditor.tsx b/src/pages/particle-system-playground/components/DampingRangeEditor.tsx
new file mode 100644
index 00000000..cb3eb202
--- /dev/null
+++ b/src/pages/particle-system-playground/components/DampingRangeEditor.tsx
@@ -0,0 +1,150 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { useEffect, useRef, useState } from 'react';
+
+const H = 100;
+const PAD = { top: 10, right: 12, bottom: 10, left: 12 };
+const STEPS = 60;
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+function decayCurve(
+  svgW: number,
+  dampingValue: number,
+): string {
+  const innerW = svgW - PAD.left - PAD.right;
+  const innerH = H - PAD.top - PAD.bottom;
+  const points: string[] = [];
+  for (let i = 0; i <= STEPS; i++) {
+    const t = i / STEPS;
+    const v = Math.exp(-dampingValue * t * 3);
+    const x = PAD.left + t * innerW;
+    const y = PAD.top + (1 - v) * innerH;
+    points.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`);
+  }
+  return points.join(' ');
+}
+
+export function DampingRangeEditor({ system, onChange }: Props) {
+  const p = system.properties;
+  const dampMin = p.linearDampingMin ?? 0;
+  const dampMax = p.linearDampingMax ?? 0;
+
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [svgW, setSvgW] = useState(300);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([e]) => setSvgW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const innerW = svgW - PAD.left - PAD.right;
+  const innerH = H - PAD.top - PAD.bottom;
+
+  const minPath = decayCurve(svgW, dampMin);
+  const maxPath = decayCurve(svgW, dampMax);
+
+  // Fill area between the two curves
+  const minPoints: { x: number; y: number }[] = [];
+  const maxPointsRev: { x: number; y: number }[] = [];
+  for (let i = 0; i <= STEPS; i++) {
+    const t = i / STEPS;
+    const x = PAD.left + t * innerW;
+    minPoints.push({ x, y: PAD.top + (1 - Math.exp(-dampMin * t * 3)) * innerH });
+    maxPointsRev.push({ x, y: PAD.top + (1 - Math.exp(-dampMax * t * 3)) * innerH });
+  }
+  const bandPath =
+    minPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ') +
+    ' ' +
+    maxPointsRev
+      .slice()
+      .reverse()
+      .map((p) => `L ${p.x.toFixed(1)} ${p.y.toFixed(1)}`)
+      .join(' ') +
+    ' Z';
+
+  return (
+    <div className="grid gap-2">
+      <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Damping</span>
+
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={H}
+        className="rounded border bg-card"
+      >
+        {/* Guide lines at 25%, 50%, 75% velocity */}
+        {[0.25, 0.5, 0.75].map((t) => (
+          <line
+            key={t}
+            x1={PAD.left}
+            y1={PAD.top + (1 - t) * innerH}
+            x2={svgW - PAD.right}
+            y2={PAD.top + (1 - t) * innerH}
+            stroke="currentColor"
+            strokeOpacity={0.06}
+            strokeDasharray="3 3"
+          />
+        ))}
+
+        {/* Baseline (velocity = 0) */}
+        <line
+          x1={PAD.left}
+          y1={PAD.top + innerH}
+          x2={svgW - PAD.right}
+          y2={PAD.top + innerH}
+          stroke="currentColor"
+          strokeOpacity={0.15}
+        />
+
+        {/* Band between min and max curves */}
+        <path d={bandPath} fill="var(--chart-1)" fillOpacity={0.1} />
+
+        {/* Min curve */}
+        <path d={minPath} fill="none" stroke="var(--chart-1)" strokeWidth={1.5} strokeOpacity={0.6} strokeLinecap="round" />
+
+        {/* Max curve */}
+        <path d={maxPath} fill="none" stroke="var(--chart-1)" strokeWidth={1.5} strokeDasharray="4 3" strokeOpacity={0.9} strokeLinecap="round" />
+
+        {/* Axis labels */}
+        <text x={PAD.left} y={PAD.top - 1} fontSize={8} fill="currentColor" fillOpacity={0.35}>1.0</text>
+        <text x={PAD.left} y={PAD.top + innerH * 0.5 + 3} fontSize={8} fill="currentColor" fillOpacity={0.25}>0.5</text>
+        <text x={svgW - PAD.right - 6} y={PAD.top + 8} fontSize={8} fill="currentColor" fillOpacity={0.25}>t</text>
+        <text x={PAD.left} y={H - 2} fontSize={8} fill="currentColor" fillOpacity={0.25}>velocity decay</text>
+      </svg>
+
+      <div className="grid grid-cols-2 gap-2">
+        <div className="grid gap-1">
+          <Label className="text-[10px] text-muted-foreground">Damping Min</Label>
+          <Input
+            className="h-8 text-xs"
+            type="number"
+            step={0.01}
+            min={0}
+            value={dampMin}
+            onChange={(e) => onChange('linearDampingMin', Number(e.target.value))}
+          />
+        </div>
+        <div className="grid gap-1">
+          <Label className="text-[10px] text-muted-foreground">Damping Max</Label>
+          <Input
+            className="h-8 text-xs"
+            type="number"
+            step={0.01}
+            min={0}
+            value={dampMax}
+            onChange={(e) => onChange('linearDampingMax', Number(e.target.value))}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/EmitterList.tsx b/src/pages/particle-system-playground/components/EmitterList.tsx
new file mode 100644
index 00000000..55fb1cd4
--- /dev/null
+++ b/src/pages/particle-system-playground/components/EmitterList.tsx
@@ -0,0 +1,72 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/styles';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+
+type Props = {
+  systems: ParticleSystemPlaygroundSystem[];
+  activeIndex: number;
+  isGameComposite: boolean;
+  onSelect: (index: number) => void;
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+};
+
+export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, onAdd, onRemove }: Props) {
+  return (
+    <div className="grid gap-1 p-2">
+      {systems.map((system) => {
+        const active = system.index === activeIndex;
+        return (
+          <div
+            key={system.index}
+            className={cn(
+              'group grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded text-xs',
+              active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+            )}
+          >
+            <button
+              className="grid min-w-0 grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-2 px-2 py-2 text-left"
+              onClick={() => onSelect(system.index)}
+            >
+              <span className="flex size-6 items-center justify-center rounded border bg-background/20 font-mono text-[10px]">
+                {system.index}
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate font-medium">{system.title}</span>
+                <span className={cn('block truncate text-[10px]', active ? 'text-primary-foreground/70' : 'text-muted-foreground')}>
+                  {system.properties.count ?? 0} / {system.properties.bufferSize ?? 0}
+                </span>
+              </span>
+              <Badge variant="outline" className={cn('h-5 px-1.5 text-[10px]', active && 'border-primary-foreground/40')}>
+                {system.blendMode}
+              </Badge>
+            </button>
+            {!isGameComposite && (
+              <Button
+                size="icon"
+                variant="ghost"
+                className={cn(
+                  'mr-1 size-7 shrink-0',
+                  active ? 'text-primary-foreground/80 hover:text-primary-foreground' : 'text-muted-foreground hover:text-destructive',
+                )}
+                title={systems.length > 1 ? 'Delete emitter' : 'A composite needs at least one emitter'}
+                disabled={systems.length <= 1}
+                onClick={() => onRemove(system.index)}
+              >
+                <Trash2Icon className="size-3.5" />
+              </Button>
+            )}
+          </div>
+        );
+      })}
+      {!isGameComposite && (
+        <Button variant="ghost" size="sm" className="mt-1 h-8 justify-start gap-2 text-xs" onClick={onAdd}>
+          <PlusIcon className="size-4" />
+          Add Emitter
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/ExportPanel.tsx b/src/pages/particle-system-playground/components/ExportPanel.tsx
similarity index 100%
rename from src/pages/hot-particles/components/ExportPanel.tsx
rename to src/pages/particle-system-playground/components/ExportPanel.tsx
diff --git a/src/pages/particle-system-playground/components/LinearAccelPlane.tsx b/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
new file mode 100644
index 00000000..134eb9b8
--- /dev/null
+++ b/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
@@ -0,0 +1,258 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const H = 200;
+const PAD = 20;
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+type ArtistState = { direction: number; spread: number; speedMin: number; speedMax: number };
+
+function rawToArtist(minX: number, minY: number, maxX: number, maxY: number): ArtistState {
+  const minAngle = Math.atan2(minY, minX);
+  const maxAngle = Math.atan2(maxY, maxX);
+  let diff = maxAngle - minAngle;
+  while (diff > Math.PI) diff -= 2 * Math.PI;
+  while (diff < -Math.PI) diff += 2 * Math.PI;
+  return {
+    direction: minAngle + diff / 2,
+    spread: Math.abs(diff),
+    speedMin: Math.hypot(minX, minY),
+    speedMax: Math.hypot(maxX, maxY),
+  };
+}
+
+function artistToRaw({ direction, spread, speedMin, speedMax }: ArtistState) {
+  const a0 = direction - spread / 2;
+  const a1 = direction + spread / 2;
+  return {
+    linearAccelXMin: Math.cos(a0) * speedMin,
+    linearAccelYMin: Math.sin(a0) * speedMin,
+    linearAccelXMax: Math.cos(a1) * speedMax,
+    linearAccelYMax: Math.sin(a1) * speedMax,
+  };
+}
+
+function niceInterval(range: number): number {
+  const raw = range / 3;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const norm = raw / mag;
+  if (norm < 2) return mag;
+  if (norm < 5) return 2 * mag;
+  return 5 * mag;
+}
+
+function arrowHead(x: number, y: number, angle: number, size = 6): string {
+  const a1 = angle + 2.5;
+  const a2 = angle - 2.5;
+  return `M ${x} ${y} L ${x + Math.cos(a1) * size} ${y + Math.sin(a1) * size} M ${x} ${y} L ${x + Math.cos(a2) * size} ${y + Math.sin(a2) * size}`;
+}
+
+export function LinearAccelPlane({ system, onChange }: Props) {
+  const p = system.properties;
+  const minX = p.linearAccelXMin ?? 0;
+  const minY = p.linearAccelYMin ?? 0;
+  const maxX = p.linearAccelXMax ?? 0;
+  const maxY = p.linearAccelYMax ?? 0;
+
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [svgW, setSvgW] = useState(300);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([e]) => setSvgW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const [inputMode, setInputMode] = useState<'raw' | 'artist'>('raw');
+  const [artist, setArtist] = useState<ArtistState>(() => rawToArtist(minX, minY, maxX, maxY));
+
+  const maxVal = Math.max(Math.abs(minX), Math.abs(minY), Math.abs(maxX), Math.abs(maxY), 50);
+  const [range, setRange] = useState(() => Math.ceil(maxVal * 1.5 / 50) * 50);
+
+  const cx = svgW / 2;
+  const cy = H / 2;
+  const innerR = Math.min(svgW - PAD * 2, H - PAD * 2) / 2;
+  const scale = innerR / range;
+
+  const stateRef = useRef({ cx, cy, scale });
+  stateRef.current = { cx, cy, scale };
+
+  const [dragging, setDragging] = useState<'min' | 'max' | null>(null);
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<SVGSVGElement>) => {
+      if (!dragging || !svgRef.current) return;
+      const { cx, cy, scale } = stateRef.current;
+      const rect = svgRef.current.getBoundingClientRect();
+      const px = (e.clientX - rect.left - cx) / scale;
+      const py = (e.clientY - rect.top - cy) / scale;
+      const round = (v: number) => Math.round(v * 10) / 10;
+      if (dragging === 'min') {
+        onChange('linearAccelXMin', round(px));
+        onChange('linearAccelYMin', round(py));
+      } else {
+        onChange('linearAccelXMax', round(px));
+        onChange('linearAccelYMax', round(py));
+      }
+    },
+    [dragging, onChange],
+  );
+
+  const stopDrag = useCallback(() => setDragging(null), []);
+
+  const toSvg = (px: number, py: number) => ({ x: cx + px * scale, y: cy + py * scale });
+
+  const minPt = toSvg(minX, minY);
+  const maxPt = toSvg(maxX, maxY);
+  const origin = toSvg(0, 0);
+
+  const interval = niceInterval(range);
+  const gridVals: number[] = [];
+  for (let v = interval; v < range; v += interval) {
+    gridVals.push(v);
+    gridVals.push(-v);
+  }
+
+  const minAngle = Math.atan2(minY, minX);
+  const maxAngle = Math.atan2(maxY, maxX);
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Linear Acceleration</span>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-muted-foreground">Range ±</span>
+          <Input
+            className="h-6 w-20 text-xs"
+            type="number"
+            step={50}
+            min={10}
+            value={range}
+            onChange={(e) => { const v = parseFloat(e.target.value); if (v > 0) setRange(v); }}
+          />
+        </div>
+      </div>
+
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={H}
+        className="rounded border bg-card touch-none"
+        onPointerMove={onPointerMove}
+        onPointerUp={stopDrag}
+        onPointerLeave={stopDrag}
+      >
+        {/* Grid lines */}
+        {gridVals.map((v) => (
+          <g key={v}>
+            <line x1={PAD} y1={cy + v * scale} x2={svgW - PAD} y2={cy + v * scale} stroke="currentColor" strokeOpacity={0.07} />
+            <line x1={cx + v * scale} y1={PAD} x2={cx + v * scale} y2={H - PAD} stroke="currentColor" strokeOpacity={0.07} />
+            <text x={cx + v * scale + 2} y={cy - 3} fontSize={8} fill="currentColor" fillOpacity={0.3}>{v}</text>
+          </g>
+        ))}
+
+        {/* Axes */}
+        <line x1={PAD} y1={cy} x2={svgW - PAD} y2={cy} stroke="currentColor" strokeOpacity={0.25} />
+        <line x1={cx} y1={PAD} x2={cx} y2={H - PAD} stroke="currentColor" strokeOpacity={0.25} />
+        <text x={svgW - PAD - 10} y={cy - 4} fontSize={9} fill="currentColor" fillOpacity={0.4}>X</text>
+        <text x={cx + 4} y={PAD + 10} fontSize={9} fill="currentColor" fillOpacity={0.4}>Y</text>
+
+        {/* Min vector */}
+        <line x1={origin.x} y1={origin.y} x2={minPt.x} y2={minPt.y} stroke="var(--chart-1)" strokeWidth={1.5} />
+        <path d={arrowHead(minPt.x, minPt.y, minAngle)} stroke="var(--chart-1)" strokeWidth={1.5} fill="none" strokeLinecap="round" />
+
+        {/* Max vector */}
+        <line x1={origin.x} y1={origin.y} x2={maxPt.x} y2={maxPt.y} stroke="var(--chart-2)" strokeWidth={1.5} />
+        <path d={arrowHead(maxPt.x, maxPt.y, maxAngle)} stroke="var(--chart-2)" strokeWidth={1.5} fill="none" strokeLinecap="round" />
+
+        {/* Origin */}
+        <circle cx={origin.x} cy={origin.y} r={3} fill="currentColor" fillOpacity={0.4} />
+
+        {/* Handles */}
+        <circle
+          cx={minPt.x} cy={minPt.y} r={6}
+          fill={dragging === 'min' ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)" strokeWidth={2} style={{ cursor: 'grab' }}
+          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('min'); }}
+        />
+        <circle
+          cx={maxPt.x} cy={maxPt.y} r={6}
+          fill={dragging === 'max' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)" strokeWidth={2} style={{ cursor: 'grab' }}
+          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('max'); }}
+        />
+
+        {/* Legend */}
+        <circle cx={PAD} cy={H - PAD + 2} r={4} fill="var(--chart-1)" />
+        <text x={PAD + 7} y={H - PAD + 6} fontSize={9} fill="currentColor" fillOpacity={0.5}>min</text>
+        <circle cx={PAD + 35} cy={H - PAD + 2} r={4} fill="var(--chart-2)" />
+        <text x={PAD + 42} y={H - PAD + 6} fontSize={9} fill="currentColor" fillOpacity={0.5}>max</text>
+      </svg>
+
+      {/* Input mode tabs */}
+      <ToggleGroup
+        type="single"
+        value={inputMode}
+        onValueChange={(v) => {
+          if (!v) return;
+          if (v === 'artist') setArtist(rawToArtist(minX, minY, maxX, maxY));
+          setInputMode(v as 'raw' | 'artist');
+        }}
+        className="h-6 w-fit"
+      >
+        <ToggleGroupItem value="raw" className="h-6 px-2 text-[10px]">Raw</ToggleGroupItem>
+        <ToggleGroupItem value="artist" className="h-6 px-2 text-[10px]">Artist</ToggleGroupItem>
+      </ToggleGroup>
+
+      {inputMode === 'raw' ? (
+        <div className="grid grid-cols-2 gap-2">
+          {[
+            { label: 'Min X', key: 'linearAccelXMin', val: minX },
+            { label: 'Min Y', key: 'linearAccelYMin', val: minY },
+            { label: 'Max X', key: 'linearAccelXMax', val: maxX },
+            { label: 'Max Y', key: 'linearAccelYMax', val: maxY },
+          ].map(({ label, key, val }) => (
+            <div key={key} className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">{label}</Label>
+              <Input className="h-8 text-xs" type="number" step={1} value={val}
+                onChange={(e) => onChange(key, Number(e.target.value))} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-2">
+          {([
+            { label: 'Direction (rad)', key: 'direction', step: 0.01 },
+            { label: 'Spread (rad)', key: 'spread', step: 0.01, min: 0 },
+            { label: 'Speed Min', key: 'speedMin', step: 1, min: 0 },
+            { label: 'Speed Max', key: 'speedMax', step: 1, min: 0 },
+          ] as { label: string; key: keyof ArtistState; step: number; min?: number }[]).map(({ label, key, step, min }) => (
+            <div key={key} className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">{label}</Label>
+              <Input
+                className="h-8 text-xs" type="number" step={step} min={min}
+                value={artist[key]}
+                onChange={(e) => {
+                  const updated = { ...artist, [key]: Number(e.target.value) };
+                  setArtist(updated);
+                  const raw = artistToRaw(updated);
+                  Object.entries(raw).forEach(([k, v]) => onChange(k, Math.round(v * 10) / 10));
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/MotionPresets.tsx b/src/pages/particle-system-playground/components/MotionPresets.tsx
new file mode 100644
index 00000000..e30a63d7
--- /dev/null
+++ b/src/pages/particle-system-playground/components/MotionPresets.tsx
@@ -0,0 +1,255 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { Trash2Icon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import {
+  NAMED_PRESETS,
+  type MotionPreset,
+  applyValues,
+  extractValues,
+  loadCustomPresets,
+  mixValues,
+  randomizeValues,
+  saveCustomPresets,
+} from '../presets';
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+export function MotionPresets({ system, onChange }: Props) {
+  const [open, setOpen] = useState(true);
+  const [mixA, setMixA] = useState(NAMED_PRESETS[0].name);
+  const [mixB, setMixB] = useState(NAMED_PRESETS[1].name);
+  const [customPresets, setCustomPresets] = useState<MotionPreset[]>(loadCustomPresets);
+  const [saveName, setSaveName] = useState('');
+  const [renamingIndex, setRenamingIndex] = useState<number | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const importRef = useRef<HTMLInputElement>(null);
+
+  const allPresets = [...NAMED_PRESETS, ...customPresets];
+
+  function apply(preset: MotionPreset) {
+    applyValues(preset.values, onChange);
+  }
+
+  function handleMix() {
+    const a = allPresets.find((p) => p.name === mixA);
+    const b = allPresets.find((p) => p.name === mixB);
+    if (a && b) applyValues(mixValues(a.values, b.values), onChange);
+  }
+
+  function handleRandomize() {
+    applyValues(randomizeValues(extractValues(system)), onChange);
+  }
+
+  function updateCustom(presets: MotionPreset[]) {
+    setCustomPresets(presets);
+    saveCustomPresets(presets);
+  }
+
+  function handleSave() {
+    const name = saveName.trim() || `Custom ${customPresets.length + 1}`;
+    updateCustom([...customPresets, { name, values: extractValues(system) }]);
+    setSaveName('');
+  }
+
+  function handleDelete(i: number) {
+    updateCustom(customPresets.filter((_, idx) => idx !== i));
+  }
+
+  function commitRename(i: number) {
+    const name = renameValue.trim();
+    if (name) {
+      updateCustom(customPresets.map((p, idx) => (idx === i ? { ...p, name } : p)));
+    }
+    setRenamingIndex(null);
+  }
+
+  function handleExport() {
+    const blob = new Blob([JSON.stringify(customPresets, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'particle-system-playground-presets.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function handleImport(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    file.text().then((text) => {
+      try {
+        const imported = JSON.parse(text) as MotionPreset[];
+        if (Array.isArray(imported)) updateCustom([...customPresets, ...imported]);
+      } catch {
+        return;
+      }
+    });
+    e.target.value = '';
+  }
+
+  return (
+    <section className="grid gap-3">
+      <div className="flex items-center gap-3">
+        <button
+          className="text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setOpen((v) => !v)}
+        >
+          Motion Presets {open ? '▴' : '▾'}
+        </button>
+        <Separator className="flex-1" />
+      </div>
+
+      {open && (
+        <div className="grid gap-3">
+          {/* Named presets */}
+          <div className="grid max-h-44 grid-cols-4 gap-1 overflow-auto pr-1 lg:grid-cols-5">
+            {NAMED_PRESETS.map((preset) => (
+              <Button
+                key={preset.name}
+                variant="outline"
+                size="sm"
+                className="h-7 px-1 text-[10px]"
+                onClick={() => apply(preset)}
+                title={preset.description}
+              >
+                {preset.name}
+              </Button>
+            ))}
+          </div>
+
+          {/* Randomize */}
+          <Button variant="secondary" size="sm" className="h-7 text-[10px]" onClick={handleRandomize}>
+            Randomize ±20%
+          </Button>
+
+          <Separator />
+
+          {/* Mix */}
+          <div className="grid gap-1">
+            <Label className="text-[10px] text-muted-foreground">Mix Presets</Label>
+            <div className="flex items-center gap-1">
+              <Select value={mixA} onValueChange={setMixA}>
+                <SelectTrigger className="h-7 flex-1 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {allPresets.map((p) => (
+                    <SelectItem key={p.name} value={p.name} className="text-xs">{p.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span className="shrink-0 text-[10px] text-muted-foreground">+</span>
+              <Select value={mixB} onValueChange={setMixB}>
+                <SelectTrigger className="h-7 flex-1 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {allPresets.map((p) => (
+                    <SelectItem key={p.name} value={p.name} className="text-xs">{p.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button variant="secondary" size="sm" className="h-7 shrink-0 px-3 text-[10px]" onClick={handleMix}>
+                Mix
+              </Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Custom presets */}
+          <div className="grid gap-2">
+            <Label className="text-[10px] text-muted-foreground">Custom Presets</Label>
+
+            <div className="flex gap-1">
+              <Input
+                className="h-7 flex-1 text-xs"
+                placeholder="Preset name…"
+                value={saveName}
+                onChange={(e) => setSaveName(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+              />
+              <Button variant="secondary" size="sm" className="h-7 shrink-0 px-3 text-[10px]" onClick={handleSave}>
+                Save Custom Preset
+              </Button>
+            </div>
+
+            {customPresets.length > 0 && (
+              <div className="grid max-h-40 gap-1 overflow-auto pr-1">
+                {customPresets.map((preset, i) => (
+                  <div key={i} className="flex items-center gap-1">
+                    {renamingIndex === i ? (
+                      <>
+                        <Input
+                          autoFocus
+                          className="h-6 flex-1 text-xs"
+                          value={renameValue}
+                          onChange={(e) => setRenameValue(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') commitRename(i);
+                            if (e.key === 'Escape') setRenamingIndex(null);
+                          }}
+                          onBlur={() => commitRename(i)}
+                        />
+                      </>
+                    ) : (
+                      <>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="h-6 flex-1 justify-start truncate px-2 text-[10px]"
+                          onClick={() => apply(preset)}
+                          onDoubleClick={() => { setRenamingIndex(i); setRenameValue(preset.name); }}
+                          title="Click to apply · Double-click to rename"
+                        >
+                          {preset.name}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                          onClick={() => handleDelete(i)}
+                        >
+                          <Trash2Icon className="size-3" />
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <div className="flex gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 flex-1 text-[10px]"
+                disabled={customPresets.length === 0}
+                onClick={handleExport}
+              >
+                Export JSON
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 flex-1 text-[10px]"
+                onClick={() => importRef.current?.click()}
+              >
+                Import JSON
+              </Button>
+              <input ref={importRef} type="file" accept=".json" className="hidden" onChange={handleImport} />
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/pages/hot-particles/components/MovementPatternEditor.tsx b/src/pages/particle-system-playground/components/MovementPatternEditor.tsx
similarity index 94%
rename from src/pages/hot-particles/components/MovementPatternEditor.tsx
rename to src/pages/particle-system-playground/components/MovementPatternEditor.tsx
index 7b4bee57..2a7e887f 100644
--- a/src/pages/hot-particles/components/MovementPatternEditor.tsx
+++ b/src/pages/particle-system-playground/components/MovementPatternEditor.tsx
@@ -1,10 +1,10 @@
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import type { HotParticlesMovement, MovementPattern } from '@/types/hot-particles';
+import type { ParticleSystemPlaygroundMovement, MovementPattern } from '@/types/particle-system-playground';
 
 type Props = {
-  movement: HotParticlesMovement;
+  movement: ParticleSystemPlaygroundMovement;
   disabled?: boolean;
   onChange: (key: string, value: string | number) => void;
 };
diff --git a/src/pages/hot-particles/components/PropertiesPanel.tsx b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
similarity index 76%
rename from src/pages/hot-particles/components/PropertiesPanel.tsx
rename to src/pages/particle-system-playground/components/PropertiesPanel.tsx
index ca89cc8e..5761233b 100644
--- a/src/pages/hot-particles/components/PropertiesPanel.tsx
+++ b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
@@ -3,15 +3,20 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
-import { BLEND_MODES, EMISSION_AREA_DISTRIBUTIONS, type HotParticlesSystem } from '@/types/hot-particles';
+import { BLEND_MODES, EMISSION_AREA_DISTRIBUTIONS, type ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { AccelerationEditor } from './AccelerationEditor';
 import { ColorGradientEditor } from './ColorGradientEditor';
+import { MotionPresets } from './MotionPresets';
+import { RangePairField } from './RangePairField';
+import { SizeCurveEditor } from './SizeCurveEditor';
 
 type Props = {
-  system: HotParticlesSystem;
+  system: ParticleSystemPlaygroundSystem;
   onChange: (key: string, value: string | number | boolean) => void;
 };
 
-type Field = {
+type NumberFieldDef = {
+  type?: 'number';
   key: string;
   label: string;
   min?: number;
@@ -19,14 +24,23 @@ type Field = {
   step?: number;
 };
 
-const groups: Array<{ title: string; fields: Field[] }> = [
+type RangeFieldDef = {
+  type: 'range';
+  minKey: string;
+  maxKey: string;
+  label: string;
+  step?: number;
+};
+
+type FieldDef = NumberFieldDef | RangeFieldDef;
+
+const groups: Array<{ title: string; fields: FieldDef[] }> = [
   {
     title: 'Emission',
     fields: [
       { key: 'emissionRate', label: 'Rate', min: 0, step: 1 },
       { key: 'emitterLifetime', label: 'Emitter Lifetime', min: -1, step: 0.1 },
-      { key: 'particleLifetimeMin', label: 'Particle Life Min', min: 0, step: 0.01 },
-      { key: 'particleLifetimeMax', label: 'Particle Life Max', min: 0, step: 0.01 },
+      { type: 'range', minKey: 'particleLifetimeMin', maxKey: 'particleLifetimeMax', label: 'Particle Life', step: 0.01 },
       { key: 'emitAtStart', label: 'Emit At Start', min: 0, step: 1 },
       { key: 'kickStartSteps', label: 'Kick Steps', min: 0, step: 1 },
       { key: 'kickStartDt', label: 'Kick Dt', min: 0, step: 0.001 },
@@ -37,32 +51,14 @@ const groups: Array<{ title: string; fields: Field[] }> = [
     fields: [
       { key: 'direction', label: 'Direction', step: 0.01 },
       { key: 'spread', label: 'Spread', min: 0, step: 0.01 },
-      { key: 'speedMin', label: 'Speed Min', step: 1 },
-      { key: 'speedMax', label: 'Speed Max', step: 1 },
-    ],
-  },
-  {
-    title: 'Acceleration And Damping',
-    fields: [
-      { key: 'linearAccelXMin', label: 'Linear X Min', step: 1 },
-      { key: 'linearAccelYMin', label: 'Linear Y Min', step: 1 },
-      { key: 'linearAccelXMax', label: 'Linear X Max', step: 1 },
-      { key: 'linearAccelYMax', label: 'Linear Y Max', step: 1 },
-      { key: 'radialAccelMin', label: 'Radial Min', step: 1 },
-      { key: 'radialAccelMax', label: 'Radial Max', step: 1 },
-      { key: 'tangentialAccelMin', label: 'Tangential Min', step: 1 },
-      { key: 'tangentialAccelMax', label: 'Tangential Max', step: 1 },
-      { key: 'linearDampingMin', label: 'Damping Min', min: 0, step: 0.01 },
-      { key: 'linearDampingMax', label: 'Damping Max', min: 0, step: 0.01 },
+      { type: 'range', minKey: 'speedMin', maxKey: 'speedMax', label: 'Speed', step: 1 },
     ],
   },
   {
     title: 'Rotation And Size',
     fields: [
-      { key: 'rotationMin', label: 'Rotation Min', step: 0.01 },
-      { key: 'rotationMax', label: 'Rotation Max', step: 0.01 },
-      { key: 'spinMin', label: 'Spin Min', step: 0.01 },
-      { key: 'spinMax', label: 'Spin Max', step: 0.01 },
+      { type: 'range', minKey: 'rotationMin', maxKey: 'rotationMax', label: 'Rotation', step: 0.01 },
+      { type: 'range', minKey: 'spinMin', maxKey: 'spinMax', label: 'Spin', step: 0.01 },
       { key: 'spinVariation', label: 'Spin Variation', min: 0, max: 1, step: 0.01 },
       { key: 'sizeVariation', label: 'Size Variation', min: 0, max: 1, step: 0.01 },
       { key: 'offsetX', label: 'Texture Offset X', step: 1 },
@@ -78,7 +74,7 @@ const groups: Array<{ title: string; fields: Field[] }> = [
   },
 ];
 
-function valueFor(system: HotParticlesSystem, key: string): string | number | boolean {
+function valueFor(system: ParticleSystemPlaygroundSystem, key: string): string | number | boolean {
   if (key === 'emitterOffsetX') return system.x;
   if (key === 'emitterOffsetY') return system.y;
   if (key === 'kickStartSteps') return system.kickStartSteps;
@@ -87,7 +83,15 @@ function valueFor(system: HotParticlesSystem, key: string): string | number | bo
   return system.properties[key as keyof typeof system.properties] ?? '';
 }
 
-function NumberField({ field, system, onChange }: { field: Field; system: HotParticlesSystem; onChange: Props['onChange'] }) {
+function NumberField({
+  field,
+  system,
+  onChange,
+}: {
+  field: NumberFieldDef;
+  system: ParticleSystemPlaygroundSystem;
+  onChange: Props['onChange'];
+}) {
   return (
     <div className="grid gap-1">
       <Label className="text-[10px] text-muted-foreground">{field.label}</Label>
@@ -141,11 +145,7 @@ export function PropertiesPanel({ system, onChange }: Props) {
         </div>
         <div className="grid gap-1">
           <Label className="text-[10px] text-muted-foreground">Sizes</Label>
-          <Input
-            className="h-8 font-mono text-xs"
-            value={system.properties.sizes ?? ''}
-            onChange={(event) => onChange('sizes', event.target.value)}
-          />
+          <SizeCurveEditor value={system.properties.sizes ?? '1'} onChange={(v) => onChange('sizes', v)} />
         </div>
         <div className="grid gap-1">
           <Label className="text-[10px] text-muted-foreground">Color Gradient</Label>
@@ -153,6 +153,8 @@ export function PropertiesPanel({ system, onChange }: Props) {
         </div>
       </div>
 
+      <MotionPresets system={system} onChange={onChange} />
+
       {groups.map((group) => (
         <section key={group.title} className="grid gap-3">
           <div className="flex items-center gap-3">
@@ -160,13 +162,27 @@ export function PropertiesPanel({ system, onChange }: Props) {
             <Separator className="flex-1" />
           </div>
           <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-            {group.fields.map((field) => (
-              <NumberField key={field.key} field={field} system={system} onChange={onChange} />
-            ))}
+            {group.fields.map((field) =>
+              field.type === 'range' ? (
+                <RangePairField
+                  key={field.label}
+                  label={field.label}
+                  minKey={field.minKey}
+                  maxKey={field.maxKey}
+                  system={system}
+                  onChange={onChange}
+                  step={field.step}
+                />
+              ) : (
+                <NumberField key={field.key} field={field} system={system} onChange={onChange} />
+              ),
+            )}
           </div>
         </section>
       ))}
 
+      <AccelerationEditor system={system} onChange={onChange} />
+
       <section className="grid gap-3">
         <div className="flex items-center gap-3">
           <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Emission Area</h3>
diff --git a/src/pages/particle-system-playground/components/RangePairField.tsx b/src/pages/particle-system-playground/components/RangePairField.tsx
new file mode 100644
index 00000000..9b69366d
--- /dev/null
+++ b/src/pages/particle-system-playground/components/RangePairField.tsx
@@ -0,0 +1,46 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+
+type Props = {
+  label: string;
+  minKey: string;
+  maxKey: string;
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+  step?: number;
+};
+
+function getValue(system: ParticleSystemPlaygroundSystem, key: string): number {
+  return (system.properties[key as keyof typeof system.properties] as number) ?? 0;
+}
+
+export function RangePairField({ label, minKey, maxKey, system, onChange, step = 1 }: Props) {
+  const minVal = getValue(system, minKey);
+  const maxVal = getValue(system, maxKey);
+
+  return (
+    <div className="col-span-2 grid gap-1">
+      <Label className="text-[10px] text-muted-foreground">{label}</Label>
+      <div className="flex items-center gap-1">
+        <Input
+          className="h-8 text-xs"
+          type="number"
+          step={step}
+          placeholder="Min"
+          value={String(minVal)}
+          onChange={(e) => onChange(minKey, Number(e.target.value))}
+        />
+        <div className="h-px w-3 shrink-0 bg-border" />
+        <Input
+          className="h-8 text-xs"
+          type="number"
+          step={step}
+          placeholder="Max"
+          value={String(maxVal)}
+          onChange={(e) => onChange(maxKey, Number(e.target.value))}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/ShaderEditor.tsx b/src/pages/particle-system-playground/components/ShaderEditor.tsx
similarity index 100%
rename from src/pages/hot-particles/components/ShaderEditor.tsx
rename to src/pages/particle-system-playground/components/ShaderEditor.tsx
diff --git a/src/pages/particle-system-playground/components/SizeCurveEditor.tsx b/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
new file mode 100644
index 00000000..8ca5babb
--- /dev/null
+++ b/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
@@ -0,0 +1,176 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { catmullRomPath } from './curveUtils';
+
+const PAD = { top: 8, right: 8, bottom: 8, left: 8 };
+const SVG_H = 128;
+
+function parse(value: string): number[] {
+  const nums = value
+    .split(',')
+    .map((s) => parseFloat(s.trim()))
+    .filter((n) => Number.isFinite(n) && n >= 0);
+  return nums.length ? nums : [1];
+}
+
+function serialize(values: number[]): string {
+  return values.map((v) => Math.max(0, v).toFixed(3)).join(', ');
+}
+
+export function SizeCurveEditor({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+  const values = parse(value);
+  const count = values.length;
+  const [dragging, setDragging] = useState<number | null>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [svgW, setSvgW] = useState(300);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([e]) => setSvgW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const [axisMin, setAxisMin] = useState(0);
+  const [axisMax, setAxisMax] = useState(() => Math.max(...parse(value), 1));
+
+  const range = Math.max(axisMax - axisMin, 0.001);
+  const innerW = svgW - PAD.left - PAD.right;
+  const innerH = SVG_H - PAD.top - PAD.bottom;
+
+  const toSvg = (i: number, v: number) => ({
+    x: PAD.left + (count === 1 ? innerW / 2 : (i / (count - 1)) * innerW),
+    y: PAD.top + (1 - (v - axisMin) / range) * innerH,
+  });
+
+  const points = values.map((v, i) => toSvg(i, v));
+  const path = catmullRomPath(points);
+
+  const baselineY = Math.max(PAD.top, Math.min(PAD.top + innerH, PAD.top + (1 - (0 - axisMin) / range) * innerH));
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<SVGSVGElement>) => {
+      if (dragging === null || !svgRef.current) return;
+      const rect = svgRef.current.getBoundingClientRect();
+      const relY = e.clientY - rect.top;
+      const rawV = axisMin + (1 - (relY - PAD.top) / innerH) * range;
+      const clamped = Math.max(axisMin, Math.min(axisMax, rawV));
+      onChange(serialize(values.map((v, i) => (i === dragging ? clamped : v))));
+    },
+    [dragging, values, axisMin, axisMax, range, innerH, onChange],
+  );
+
+  const stopDrag = useCallback(() => setDragging(null), []);
+
+  return (
+    <div className="grid gap-1">
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={SVG_H}
+        className="rounded border bg-card touch-none"
+        onPointerMove={onPointerMove}
+        onPointerUp={stopDrag}
+        onPointerLeave={stopDrag}
+      >
+        {[0.25, 0.5, 0.75].map((t) => (
+          <line
+            key={t}
+            x1={PAD.left}
+            y1={PAD.top + (1 - t) * innerH}
+            x2={svgW - PAD.right}
+            y2={PAD.top + (1 - t) * innerH}
+            stroke="currentColor"
+            strokeOpacity={0.07}
+          />
+        ))}
+        <line
+          x1={PAD.left}
+          y1={baselineY}
+          x2={svgW - PAD.right}
+          y2={baselineY}
+          stroke="currentColor"
+          strokeOpacity={0.2}
+          strokeDasharray="3 3"
+        />
+        <path
+          d={`${path} L ${points[points.length - 1].x} ${baselineY} L ${points[0].x} ${baselineY} Z`}
+          fill="var(--chart-1)"
+          fillOpacity={0.15}
+        />
+        <path d={path} fill="none" stroke="var(--chart-1)" strokeWidth={1.5} strokeLinecap="round" />
+        {points.map((pt, i) => (
+          <circle
+            key={i}
+            cx={pt.x}
+            cy={pt.y}
+            r={5}
+            fill={dragging === i ? 'var(--chart-1)' : 'hsl(var(--card))'}
+            stroke="var(--chart-1)"
+            strokeWidth={2}
+            style={{ cursor: 'ns-resize' }}
+            onPointerDown={(e) => {
+              e.currentTarget.setPointerCapture(e.pointerId);
+              setDragging(i);
+            }}
+          />
+        ))}
+      </svg>
+
+      <div className="flex items-center gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          <span className="shrink-0 text-[10px] text-muted-foreground">Min</span>
+          <Input
+            className="h-6 text-xs"
+            type="number"
+            step={0.1}
+            min={0}
+            value={axisMin}
+            onChange={(e) => {
+              const v = parseFloat(e.target.value);
+              if (Number.isFinite(v) && v < axisMax) setAxisMin(v);
+            }}
+          />
+        </div>
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          <span className="shrink-0 text-[10px] text-muted-foreground">Max</span>
+          <Input
+            className="h-6 text-xs"
+            type="number"
+            step={0.1}
+            min={0}
+            value={axisMax}
+            onChange={(e) => {
+              const v = parseFloat(e.target.value);
+              if (Number.isFinite(v) && v > axisMin) setAxisMax(v);
+            }}
+          />
+        </div>
+        <div className="flex gap-1">
+          <Button
+            size="icon"
+            variant="outline"
+            className="size-6"
+            disabled={count >= 8}
+            onClick={() => onChange(serialize([...values, values[values.length - 1]]))}
+          >
+            <PlusIcon className="size-3" />
+          </Button>
+          <Button
+            size="icon"
+            variant="outline"
+            className="size-6"
+            disabled={count <= 1}
+            onClick={() => onChange(serialize(values.slice(0, -1)))}
+          >
+            <Trash2Icon className="size-3" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/hot-particles/components/TextureImporter.tsx b/src/pages/particle-system-playground/components/TextureImporter.tsx
similarity index 97%
rename from src/pages/hot-particles/components/TextureImporter.tsx
rename to src/pages/particle-system-playground/components/TextureImporter.tsx
index cf00cf10..b8c1f8ff 100644
--- a/src/pages/hot-particles/components/TextureImporter.tsx
+++ b/src/pages/particle-system-playground/components/TextureImporter.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { TEXTURE_PRESETS } from '@/types/hot-particles';
+import { TEXTURE_PRESETS } from '@/types/particle-system-playground';
 import { isWeb } from '@/utils/platform';
 import { open as openFileDialog } from '@tauri-apps/plugin-dialog';
 import { readFile } from '@tauri-apps/plugin-fs';
diff --git a/src/pages/particle-system-playground/components/curveUtils.ts b/src/pages/particle-system-playground/components/curveUtils.ts
new file mode 100644
index 00000000..415c1401
--- /dev/null
+++ b/src/pages/particle-system-playground/components/curveUtils.ts
@@ -0,0 +1,25 @@
+type Point = { x: number; y: number };
+
+export function catmullRomPath(points: Point[], tension = 0.5): string {
+  if (points.length === 0) return '';
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  if (points.length === 2) return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+
+  const parts: string[] = [`M ${points[0].x} ${points[0].y}`];
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(i - 1, 0)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(i + 2, points.length - 1)];
+
+    const cp1x = p1.x + ((p2.x - p0.x) * tension) / 3;
+    const cp1y = p1.y + ((p2.y - p0.y) * tension) / 3;
+    const cp2x = p2.x - ((p3.x - p1.x) * tension) / 3;
+    const cp2y = p2.y - ((p3.y - p1.y) * tension) / 3;
+
+    parts.push(`C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`);
+  }
+
+  return parts.join(' ');
+}
diff --git a/src/pages/hot-particles/index.tsx b/src/pages/particle-system-playground/index.tsx
similarity index 73%
rename from src/pages/hot-particles/index.tsx
rename to src/pages/particle-system-playground/index.tsx
index cd5b12a0..271dc3e7 100644
--- a/src/pages/hot-particles/index.tsx
+++ b/src/pages/particle-system-playground/index.tsx
@@ -2,7 +2,7 @@ import { AlertTriangleIcon, FileWarningIcon, RotateCcwIcon, SparklesIcon, ZapIco
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
-import { useHotParticles } from '@/hooks/use-hot-particles';
+import { useParticleSystemPlayground } from '@/hooks/use-particle-system-playground';
 import { CompositeSelector } from './components/CompositeSelector';
 import { EmitterList } from './components/EmitterList';
 import { ExportPanel } from './components/ExportPanel';
@@ -20,18 +20,18 @@ function Section({ title, children }: { title: string; children: React.ReactNode
   );
 }
 
-export default function HotParticlesPage() {
-  const hot = useHotParticles();
-  const composite = hot.composite;
-  const system = hot.activeSystem;
+export default function ParticleSystemPlaygroundPage() {
+  const playground = useParticleSystemPlayground();
+  const composite = playground.composite;
+  const system = playground.activeSystem;
   const isGameComposite = composite?.compositeType === 'game';
 
-  if (!hot.available) {
+  if (!playground.available) {
     return (
       <div className="flex min-h-0 flex-1 items-center justify-center p-8">
         <div className="grid max-w-md justify-items-center gap-3 text-center">
           <FileWarningIcon className="size-8 text-muted-foreground" />
-          <h1 className="text-lg font-semibold">Hot Particles is not available in this session</h1>
+          <h1 className="text-lg font-semibold">Particles Playground is not available in this session</h1>
           <p className="text-sm text-muted-foreground">
             Run with the bundled Feather plugins or update the game runtime.
           </p>
@@ -40,12 +40,12 @@ export default function HotParticlesPage() {
     );
   }
 
-  if (!hot.enabled) {
+  if (!playground.enabled) {
     return (
       <div className="flex min-h-0 flex-1 items-center justify-center p-8">
         <div className="grid max-w-md justify-items-center gap-3 text-center">
           <AlertTriangleIcon className="size-8 text-muted-foreground" />
-          <h1 className="text-lg font-semibold">Hot Particles is disabled</h1>
+          <h1 className="text-lg font-semibold">Particles Playground is disabled</h1>
           <p className="text-sm text-muted-foreground">
             Enable the built-in plugin for this session to author particle effects.
           </p>
@@ -58,28 +58,28 @@ export default function HotParticlesPage() {
     <div className="grid min-h-0 flex-1 grid-cols-[18rem_minmax(0,1fr)] overflow-hidden">
       <aside className="min-h-0 border-r bg-muted/20">
         <CompositeSelector
-          composites={hot.composites}
-          activeComposite={hot.activeComposite}
+          composites={playground.composites}
+          activeComposite={playground.activeComposite}
           compositeType={composite?.compositeType}
-          onSelect={hot.selectComposite}
-          onCreate={hot.createComposite}
-          onDelete={hot.deleteComposite}
+          onSelect={playground.selectComposite}
+          onCreate={playground.createComposite}
+          onDelete={playground.deleteComposite}
         />
         <ScrollArea className="h-[calc(100vh-9rem)]">
           {composite ? (
             <EmitterList
               systems={composite.systems}
-              activeIndex={hot.activeSystemIndex}
+              activeIndex={playground.activeSystemIndex}
               isGameComposite={isGameComposite}
-              onSelect={hot.selectSystem}
-              onAdd={hot.addSystem}
-              onRemove={hot.removeSystem}
+              onSelect={playground.selectSystem}
+              onAdd={playground.addSystem}
+              onRemove={playground.removeSystem}
             />
           ) : (
             <div className="grid gap-3 p-4 text-sm text-muted-foreground">
               <SparklesIcon className="size-5" />
               <p>No composites yet.</p>
-              <Button size="sm" className="h-8 text-xs" onClick={() => hot.createComposite()}>
+              <Button size="sm" className="h-8 text-xs" onClick={() => playground.createComposite()}>
                 New Composite
               </Button>
             </div>
@@ -92,23 +92,33 @@ export default function HotParticlesPage() {
           <div className="grid gap-3 p-4">
             <header className="flex flex-wrap items-center justify-between gap-3">
               <div>
-                <h1 className="text-lg font-semibold">Hot Particles</h1>
+                <h1 className="text-lg font-semibold">Particles Playground</h1>
                 <p className="text-sm text-muted-foreground">
-                  {hot.activeComposite ?? 'Create a composite'}{' '}
+                  {playground.activeComposite ?? 'Create a composite'}{' '}
                   {isGameComposite ? 'game composite' : 'scratch composite'}
                 </p>
               </div>
               {system && (
                 <div className="flex gap-2">
-                  <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={() => hot.emit(false)}>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8 gap-2 text-xs"
+                    onClick={() => playground.emit(false)}
+                  >
                     <ZapIcon className="size-4" />
                     Emit
                   </Button>
-                  <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={() => hot.reset(false)}>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-8 gap-2 text-xs"
+                    onClick={() => playground.reset(false)}
+                  >
                     <RotateCcwIcon className="size-4" />
                     Reset
                   </Button>
-                  <Button size="sm" variant="outline" className="h-8 text-xs" onClick={hot.kickStart}>
+                  <Button size="sm" variant="outline" className="h-8 text-xs" onClick={playground.kickStart}>
                     Kick Start
                   </Button>
                 </div>
@@ -120,7 +130,7 @@ export default function HotParticlesPage() {
                 <div className="grid justify-items-center gap-3">
                   <SparklesIcon className="size-7" />
                   <p>Create a scratch composite or register one from game code.</p>
-                  <Button size="sm" className="h-8 text-xs" onClick={() => hot.createComposite()}>
+                  <Button size="sm" className="h-8 text-xs" onClick={() => playground.createComposite()}>
                     New Composite
                   </Button>
                 </div>
@@ -136,7 +146,7 @@ export default function HotParticlesPage() {
 
                 <div className="grid grid-cols-1 gap-3 xl:grid-cols-[minmax(0,1fr)_22rem]">
                   <Section title="Emitter Properties">
-                    <PropertiesPanel system={system} onChange={hot.updateActiveParam} />
+                    <PropertiesPanel system={system} onChange={playground.updateActiveParam} />
                   </Section>
 
                   <div className="grid content-start gap-3">
@@ -149,7 +159,7 @@ export default function HotParticlesPage() {
                             type="number"
                             value={composite.x}
                             disabled={isGameComposite}
-                            onChange={(event) => hot.updateParam('compositeX', Number(event.target.value))}
+                            onChange={(event) => playground.updateParam('compositeX', Number(event.target.value))}
                           />
                         </label>
                         <label className="grid gap-1 text-[10px] text-muted-foreground">
@@ -159,7 +169,7 @@ export default function HotParticlesPage() {
                             type="number"
                             value={composite.y}
                             disabled={isGameComposite}
-                            onChange={(event) => hot.updateParam('compositeY', Number(event.target.value))}
+                            onChange={(event) => playground.updateParam('compositeY', Number(event.target.value))}
                           />
                         </label>
                       </div>
@@ -167,7 +177,7 @@ export default function HotParticlesPage() {
                       <MovementPatternEditor
                         movement={composite.movement}
                         disabled={isGameComposite}
-                        onChange={hot.updateParam}
+                        onChange={playground.updateParam}
                       />
                     </Section>
 
@@ -176,9 +186,9 @@ export default function HotParticlesPage() {
                         texturePath={system.texturePath}
                         texturePreset={system.texturePreset}
                         textureFilename={system.textureFilename}
-                        onPreset={hot.setTexturePreset}
-                        onPath={hot.setTexturePath}
-                        onUpload={hot.setTextureFromUpload}
+                        onPreset={playground.setTexturePreset}
+                        onPath={playground.setTexturePath}
+                        onUpload={playground.setTextureFromUpload}
                       />
                     </Section>
 
@@ -187,13 +197,13 @@ export default function HotParticlesPage() {
                         shaderPath={system.shaderPath}
                         shaderFilename={system.shaderFilename}
                         shaderSource={system.shaderSource}
-                        error={hot.shaderError}
-                        onApply={hot.setShader}
+                        error={playground.shaderError}
+                        onApply={playground.setShader}
                       />
                     </Section>
 
                     <Section title="Export">
-                      <ExportPanel onExportCode={hot.exportCode} onExportZip={hot.exportZip} />
+                      <ExportPanel onExportCode={playground.exportCode} onExportZip={playground.exportZip} />
                     </Section>
                   </div>
                 </div>
diff --git a/src/pages/particle-system-playground/presets.ts b/src/pages/particle-system-playground/presets.ts
new file mode 100644
index 00000000..08231141
--- /dev/null
+++ b/src/pages/particle-system-playground/presets.ts
@@ -0,0 +1,533 @@
+import type { ParticleSystemPlaygroundSystem, ParticleSystemPlaygroundSystemProperties } from '@/types/particle-system-playground';
+
+const D = Math.PI / 180;
+
+export type PresetValues = Required<
+  Pick<
+    ParticleSystemPlaygroundSystemProperties,
+    | 'direction'
+    | 'spread'
+    | 'speedMin'
+    | 'speedMax'
+    | 'linearAccelXMin'
+    | 'linearAccelYMin'
+    | 'linearAccelXMax'
+    | 'linearAccelYMax'
+    | 'radialAccelMin'
+    | 'radialAccelMax'
+    | 'tangentialAccelMin'
+    | 'tangentialAccelMax'
+    | 'linearDampingMin'
+    | 'linearDampingMax'
+  >
+>;
+
+export type MotionPreset = {
+  name: string;
+  values: Partial<PresetValues>;
+  description?: string;
+};
+
+type FullPreset = MotionPreset & { values: PresetValues };
+
+type OnChange = (key: string, value: string | number | boolean) => void;
+
+export const MOTION_KEYS = [
+  'direction',
+  'spread',
+  'speedMin',
+  'speedMax',
+  'linearAccelXMin',
+  'linearAccelYMin',
+  'linearAccelXMax',
+  'linearAccelYMax',
+  'radialAccelMin',
+  'radialAccelMax',
+  'tangentialAccelMin',
+  'tangentialAccelMax',
+  'linearDampingMin',
+  'linearDampingMax',
+] as const satisfies (keyof PresetValues)[];
+
+const ZERO_VALUES: PresetValues = {
+  direction: 0,
+  spread: 0,
+  speedMin: 0,
+  speedMax: 0,
+  linearAccelXMin: 0,
+  linearAccelYMin: 0,
+  linearAccelXMax: 0,
+  linearAccelYMax: 0,
+  radialAccelMin: 0,
+  radialAccelMax: 0,
+  tangentialAccelMin: 0,
+  tangentialAccelMax: 0,
+  linearDampingMin: 0,
+  linearDampingMax: 0,
+};
+
+function round(value: number, places = 3) {
+  const factor = 10 ** places;
+  return Math.round(value * factor) / factor;
+}
+
+function damping(drag: number, randomness = 0): Pick<PresetValues, 'linearDampingMin' | 'linearDampingMax'> {
+  return {
+    linearDampingMin: round(Math.max(0, drag * (1 - randomness))),
+    linearDampingMax: round(Math.max(0, drag * (1 + randomness))),
+  };
+}
+
+function accelVector(directionDeg: number, min: number, max = min) {
+  const angle = directionDeg * D;
+  return {
+    linearAccelXMin: round(Math.cos(angle) * min),
+    linearAccelYMin: round(Math.sin(angle) * min),
+    linearAccelXMax: round(Math.cos(angle) * max),
+    linearAccelYMax: round(Math.sin(angle) * max),
+  };
+}
+
+function preset(name: string, values: Partial<PresetValues>, description?: string): FullPreset {
+  return {
+    name,
+    description,
+    values: normalizeValues(values),
+  };
+}
+
+export function normalizeValues(values: Partial<PresetValues> = {}): PresetValues {
+  const normalized = { ...ZERO_VALUES };
+  for (const key of MOTION_KEYS) {
+    const value = values[key];
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      normalized[key] = value;
+    }
+  }
+  return normalized;
+}
+
+const SPEED_KEYS = new Set<keyof PresetValues>(['speedMin', 'speedMax']);
+const FORCE_KEYS = new Set<keyof PresetValues>([
+  'linearAccelXMin',
+  'linearAccelYMin',
+  'linearAccelXMax',
+  'linearAccelYMax',
+  'radialAccelMin',
+  'radialAccelMax',
+  'tangentialAccelMin',
+  'tangentialAccelMax',
+]);
+
+function intensifyPreset(item: FullPreset): FullPreset {
+  const values = { ...item.values };
+  for (const key of SPEED_KEYS) {
+    values[key] = round(values[key] * 1.3);
+  }
+  for (const key of FORCE_KEYS) {
+    values[key] = round(values[key] * 1.45);
+  }
+  return { ...item, values };
+}
+
+export const NAMED_PRESETS: FullPreset[] = [
+  preset('Explosion', {
+    direction: 270 * D,
+    spread: 360 * D,
+    speedMin: 200,
+    speedMax: 700,
+    radialAccelMin: 100,
+    radialAccelMax: 300,
+    tangentialAccelMin: 0,
+    tangentialAccelMax: 30,
+    ...damping(0.2, 0.1),
+  }, 'Fireworks, blasts, fragments, debris'),
+  preset('Whirlpool', {
+    direction: 0,
+    spread: 360 * D,
+    speedMin: 80,
+    speedMax: 180,
+    radialAccelMin: -220,
+    radialAccelMax: -90,
+    tangentialAccelMin: 320,
+    tangentialAccelMax: 520,
+    ...damping(0.03),
+  }, 'Black holes, portals, water vortices'),
+  preset('Tornado', {
+    direction: 270 * D,
+    spread: 30 * D,
+    speedMin: 150,
+    speedMax: 300,
+    radialAccelMin: -30,
+    radialAccelMax: -10,
+    tangentialAccelMin: 100,
+    tangentialAccelMax: 250,
+    ...accelVector(270, 20, 80),
+    ...damping(0.08, 0.2),
+  }, 'Columns, funnels, upward spirals'),
+  preset('Wind Drift', {
+    direction: 0,
+    spread: 15 * D,
+    speedMin: 50,
+    speedMax: 120,
+    ...accelVector(0, 15, 45),
+    ...damping(0.12, 0.2),
+  }, 'Leaves, ash, side-scrolling weather'),
+  preset('Smoke Rise', {
+    direction: 270 * D,
+    spread: 70 * D,
+    speedMin: 20,
+    speedMax: 80,
+    ...accelVector(270, 20, 65),
+    ...damping(0.6, 0.2),
+  }, 'Smoke, steam, drifting dust'),
+  preset('Gravity Fall', {
+    direction: 90 * D,
+    spread: 5 * D,
+    speedMin: 300,
+    speedMax: 500,
+    ...accelVector(90, 180, 420),
+    ...damping(0.03),
+  }, 'Rain, falling chunks, heavy drops'),
+  preset('Orbit', {
+    direction: 0,
+    spread: 360 * D,
+    speedMin: 120,
+    speedMax: 180,
+    radialAccelMin: -120,
+    radialAccelMax: -70,
+    tangentialAccelMin: 180,
+    tangentialAccelMax: 280,
+    ...damping(0.01),
+  }, 'Magic rings, satellites, orbital wisps'),
+  preset('Shockwave', {
+    direction: 270 * D,
+    spread: 360 * D,
+    speedMin: 500,
+    speedMax: 500,
+    radialAccelMin: 400,
+    radialAccelMax: 400,
+    ...damping(0.15),
+  }, 'Rings, pulses, impact fronts'),
+  preset('Fountain', {
+    direction: 270 * D,
+    spread: 50 * D,
+    speedMin: 300,
+    speedMax: 500,
+    radialAccelMin: 0,
+    radialAccelMax: 40,
+    ...accelVector(90, 180, 320),
+    ...damping(0.02),
+  }, 'Sparks, water jets, fountains'),
+  preset('Fire Sparks', {
+    direction: 270 * D,
+    spread: 120 * D,
+    speedMin: 150,
+    speedMax: 600,
+    ...accelVector(270, 30, 95),
+    tangentialAccelMin: -20,
+    tangentialAccelMax: 20,
+    ...damping(0.1, 0.05),
+  }, 'Campfires, welders, embers'),
+  preset('Ember Float', {
+    direction: 270 * D,
+    spread: 35 * D,
+    speedMin: 15,
+    speedMax: 65,
+    ...accelVector(270, 15, 50),
+    tangentialAccelMin: -35,
+    tangentialAccelMax: 35,
+    ...damping(0.28, 0.25),
+  }),
+  preset('Rain', {
+    direction: 90 * D,
+    spread: 3 * D,
+    speedMin: 450,
+    speedMax: 850,
+    ...accelVector(90, 120, 240),
+    ...damping(0.01),
+  }),
+  preset('Snow Drift', {
+    direction: 95 * D,
+    spread: 28 * D,
+    speedMin: 20,
+    speedMax: 70,
+    ...accelVector(100, 8, 25),
+    tangentialAccelMin: -20,
+    tangentialAccelMax: 20,
+    ...damping(0.35, 0.15),
+  }),
+  preset('Magic Swirl', {
+    direction: 270 * D,
+    spread: 360 * D,
+    speedMin: 40,
+    speedMax: 160,
+    radialAccelMin: -90,
+    radialAccelMax: -25,
+    tangentialAccelMin: -260,
+    tangentialAccelMax: -120,
+    ...damping(0.04),
+  }),
+  preset('Portal Inhale', {
+    spread: 360 * D,
+    speedMin: 10,
+    speedMax: 90,
+    radialAccelMin: -350,
+    radialAccelMax: -160,
+    tangentialAccelMin: 120,
+    tangentialAccelMax: 260,
+    ...damping(0.06),
+  }),
+  preset('Portal Burst', {
+    spread: 360 * D,
+    speedMin: 120,
+    speedMax: 380,
+    radialAccelMin: 160,
+    radialAccelMax: 420,
+    tangentialAccelMin: -160,
+    tangentialAccelMax: 160,
+    ...damping(0.12),
+  }),
+  preset('Spiral Up', {
+    direction: 270 * D,
+    spread: 45 * D,
+    speedMin: 80,
+    speedMax: 180,
+    ...accelVector(270, 30, 95),
+    radialAccelMin: -60,
+    radialAccelMax: -15,
+    tangentialAccelMin: 160,
+    tangentialAccelMax: 260,
+    ...damping(0.08),
+  }),
+  preset('Spiral Down', {
+    direction: 90 * D,
+    spread: 45 * D,
+    speedMin: 80,
+    speedMax: 180,
+    ...accelVector(90, 30, 95),
+    radialAccelMin: -60,
+    radialAccelMax: -15,
+    tangentialAccelMin: -260,
+    tangentialAccelMax: -160,
+    ...damping(0.08),
+  }),
+  preset('Jet Thruster', {
+    direction: 90 * D,
+    spread: 18 * D,
+    speedMin: 350,
+    speedMax: 950,
+    ...accelVector(90, 60, 180),
+    radialAccelMin: 15,
+    radialAccelMax: 75,
+    ...damping(0.04),
+  }),
+  preset('Muzzle Flash', {
+    direction: 0,
+    spread: 24 * D,
+    speedMin: 700,
+    speedMax: 1200,
+    ...accelVector(0, -40, 60),
+    radialAccelMin: 80,
+    radialAccelMax: 220,
+    ...damping(0.28, 0.1),
+  }),
+  preset('Blood Spray', {
+    direction: 0,
+    spread: 70 * D,
+    speedMin: 160,
+    speedMax: 520,
+    ...accelVector(90, 120, 320),
+    radialAccelMin: 20,
+    radialAccelMax: 80,
+    ...damping(0.12, 0.15),
+  }),
+  preset('Debris Arc', {
+    direction: 300 * D,
+    spread: 95 * D,
+    speedMin: 160,
+    speedMax: 500,
+    ...accelVector(90, 260, 500),
+    radialAccelMin: 40,
+    radialAccelMax: 160,
+    tangentialAccelMin: -30,
+    tangentialAccelMax: 30,
+    ...damping(0.08),
+  }),
+  preset('Dust Puff', {
+    direction: 270 * D,
+    spread: 360 * D,
+    speedMin: 30,
+    speedMax: 180,
+    ...accelVector(270, 5, 35),
+    radialAccelMin: 50,
+    radialAccelMax: 140,
+    ...damping(0.7, 0.18),
+  }),
+  preset('Steam Vent', {
+    direction: 270 * D,
+    spread: 18 * D,
+    speedMin: 180,
+    speedMax: 420,
+    ...accelVector(270, 20, 70),
+    tangentialAccelMin: -25,
+    tangentialAccelMax: 25,
+    ...damping(0.42, 0.2),
+  }),
+  preset('Bubbles', {
+    direction: 270 * D,
+    spread: 30 * D,
+    speedMin: 20,
+    speedMax: 100,
+    ...accelVector(270, 25, 80),
+    radialAccelMin: -15,
+    radialAccelMax: 35,
+    tangentialAccelMin: -45,
+    tangentialAccelMax: 45,
+    ...damping(0.22, 0.25),
+  }),
+  preset('Water Splash', {
+    direction: 270 * D,
+    spread: 95 * D,
+    speedMin: 180,
+    speedMax: 620,
+    ...accelVector(90, 220, 520),
+    radialAccelMin: 20,
+    radialAccelMax: 100,
+    ...damping(0.03),
+  }),
+  preset('Leaf Gust', {
+    direction: 350 * D,
+    spread: 45 * D,
+    speedMin: 60,
+    speedMax: 220,
+    ...accelVector(0, 25, 85),
+    radialAccelMin: -20,
+    radialAccelMax: 20,
+    tangentialAccelMin: -160,
+    tangentialAccelMax: 160,
+    ...damping(0.16, 0.25),
+  }),
+  preset('Sparks Shower', {
+    direction: 70 * D,
+    spread: 55 * D,
+    speedMin: 220,
+    speedMax: 720,
+    ...accelVector(90, 260, 560),
+    tangentialAccelMin: -20,
+    tangentialAccelMax: 20,
+    ...damping(0.05),
+  }),
+  preset('Energy Beam', {
+    direction: 0,
+    spread: 8 * D,
+    speedMin: 500,
+    speedMax: 900,
+    ...accelVector(0, 0, 120),
+    radialAccelMin: -40,
+    radialAccelMax: -5,
+    ...damping(0.02),
+  }),
+  preset('Implosion', {
+    spread: 360 * D,
+    speedMin: 30,
+    speedMax: 160,
+    radialAccelMin: -520,
+    radialAccelMax: -260,
+    tangentialAccelMin: -80,
+    tangentialAccelMax: 80,
+    ...damping(0.08),
+  }),
+  preset('Fireflies', {
+    spread: 360 * D,
+    speedMin: 5,
+    speedMax: 45,
+    radialAccelMin: -20,
+    radialAccelMax: 20,
+    tangentialAccelMin: -90,
+    tangentialAccelMax: 90,
+    ...damping(0.45, 0.25),
+  }),
+  preset('Laser Scatter', {
+    direction: 0,
+    spread: 18 * D,
+    speedMin: 350,
+    speedMax: 1100,
+    radialAccelMin: 120,
+    radialAccelMax: 320,
+    tangentialAccelMin: -40,
+    tangentialAccelMax: 40,
+    ...damping(0.05),
+  }),
+].map(intensifyPreset).sort((a, b) => a.name.localeCompare(b.name));
+
+export function extractValues(system: ParticleSystemPlaygroundSystem): PresetValues {
+  const p = system.properties;
+  return normalizeValues({
+    direction: p.direction,
+    spread: p.spread,
+    speedMin: p.speedMin,
+    speedMax: p.speedMax,
+    linearAccelXMin: p.linearAccelXMin,
+    linearAccelYMin: p.linearAccelYMin,
+    linearAccelXMax: p.linearAccelXMax,
+    linearAccelYMax: p.linearAccelYMax,
+    radialAccelMin: p.radialAccelMin,
+    radialAccelMax: p.radialAccelMax,
+    tangentialAccelMin: p.tangentialAccelMin,
+    tangentialAccelMax: p.tangentialAccelMax,
+    linearDampingMin: p.linearDampingMin,
+    linearDampingMax: p.linearDampingMax,
+  });
+}
+
+export function applyValues(values: Partial<PresetValues>, onChange: OnChange) {
+  const normalized = normalizeValues(values);
+  for (const key of MOTION_KEYS) {
+    onChange(key, round(normalized[key]));
+  }
+}
+
+export function mixValues(a: Partial<PresetValues>, b: Partial<PresetValues>): PresetValues {
+  const aa = normalizeValues(a);
+  const bb = normalizeValues(b);
+  const result: Partial<PresetValues> = {};
+  for (const key of MOTION_KEYS) {
+    result[key] = (aa[key] + bb[key]) / 2;
+  }
+  return normalizeValues(result);
+}
+
+export function randomizeValues(values: Partial<PresetValues>): PresetValues {
+  const normalized = normalizeValues(values);
+  const result: Partial<PresetValues> = {};
+  for (const key of MOTION_KEYS) {
+    const value = normalized[key];
+    const factor = 0.8 + Math.random() * 0.4;
+    result[key] = round(value * factor);
+  }
+  return normalizeValues(result);
+}
+
+const STORAGE_KEY = 'feather:hpf:custom-presets';
+
+function sanitizePreset(preset: MotionPreset, index: number): FullPreset {
+  return {
+    name: typeof preset.name === 'string' && preset.name.trim() ? preset.name.trim() : `Imported ${index + 1}`,
+    description: typeof preset.description === 'string' ? preset.description : undefined,
+    values: normalizeValues(preset.values),
+  };
+}
+
+export function loadCustomPresets(): FullPreset[] {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '[]') as MotionPreset[];
+    return Array.isArray(raw) ? raw.map(sanitizePreset) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveCustomPresets(presets: MotionPreset[]): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(presets.map(sanitizePreset)));
+}
diff --git a/src/router.tsx b/src/router.tsx
index 4cebf2a6..f24a7e61 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -24,7 +24,7 @@ import Debugger from './pages/debugger';
 import TimeTravel from './pages/time-travel';
 import Compare from './pages/compare';
 import Assets from './pages/assets';
-import HotParticles from './pages/hot-particles';
+import ParticleSystemPlayground from './pages/particle-system-playground';
 import { SettingsModal } from './pages/settings';
 import { useConfigStore } from './store/config';
 import { AboutModal } from './pages/about';
@@ -231,10 +231,10 @@ export const Router = () => {
                 }
               />
               <Route
-                path="/hot-particles"
+                path="/particle-system-playground"
                 element={
                   <RequireSession>
-                    <HotParticles />
+                    <ParticleSystemPlayground />
                   </RequireSession>
                 }
               />
diff --git a/src/types/hot-particles.ts b/src/types/particle-system-playground.ts
similarity index 75%
rename from src/types/hot-particles.ts
rename to src/types/particle-system-playground.ts
index 17697cef..411b3e5c 100644
--- a/src/types/hot-particles.ts
+++ b/src/types/particle-system-playground.ts
@@ -1,8 +1,8 @@
 export type MovementPattern = 'none' | 'circle' | 'figure-eight' | 'irregular';
 export type CompositeType = 'scratch' | 'game';
-export type HotParticlesTemplate = 'fire' | 'explosion' | 'smoke' | 'sparkles';
+export type ParticleSystemPlaygroundTemplate = 'fire' | 'explosion' | 'smoke' | 'sparkles';
 
-export type HotParticlesMovement = {
+export type ParticleSystemPlaygroundMovement = {
   pattern: MovementPattern;
   radius?: number;
   radiusX?: number;
@@ -11,7 +11,7 @@ export type HotParticlesMovement = {
   scale?: number;
 };
 
-export type HotParticlesSystemProperties = {
+export type ParticleSystemPlaygroundSystemProperties = {
   emissionRate?: number;
   emitterLifetime?: number;
   particleLifetimeMin?: number;
@@ -51,7 +51,7 @@ export type HotParticlesSystemProperties = {
   bufferSize?: number;
 };
 
-export type HotParticlesSystem = {
+export type ParticleSystemPlaygroundSystem = {
   index: number;
   title: string;
   blendMode: string;
@@ -67,29 +67,29 @@ export type HotParticlesSystem = {
   shaderFilename: string;
   shaderSource: string;
   exportReady: boolean;
-  properties: HotParticlesSystemProperties;
+  properties: ParticleSystemPlaygroundSystemProperties;
 };
 
-export type HotParticlesCompositeData = {
+export type ParticleSystemPlaygroundCompositeData = {
   compositeType: CompositeType;
   x: number;
   y: number;
-  movement: HotParticlesMovement;
-  systems: HotParticlesSystem[];
+  movement: ParticleSystemPlaygroundMovement;
+  systems: ParticleSystemPlaygroundSystem[];
 };
 
-export type HotParticlesData = {
-  type: 'hot-particles';
+export type ParticleSystemPlaygroundData = {
+  type: 'particle-system-playground';
   loading?: boolean;
   composites: string[];
   activeComposite: string | null;
   activeSystem: number;
-  data: HotParticlesCompositeData | null;
+  data: ParticleSystemPlaygroundCompositeData | null;
 };
 
 export const BLEND_MODES = ['alpha', 'add', 'subtract', 'multiply', 'screen', 'replace', 'lighten', 'darken'] as const;
 export const TEXTURE_PRESETS = ['circle', 'ring', 'light', 'star', 'spiral'] as const;
-export const HOT_PARTICLES_TEMPLATES: Array<{ value: HotParticlesTemplate; label: string }> = [
+export const PARTICLE_SYSTEM_PLAYGROUND_TEMPLATES: Array<{ value: ParticleSystemPlaygroundTemplate; label: string }> = [
   { value: 'fire', label: 'Fire' },
   { value: 'explosion', label: 'Explosion' },
   { value: 'smoke', label: 'Smoke' },

From d02f6ccd21e65b8483f4e25c04e063b17c9360c3 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 18:30:58 -0400
Subject: [PATCH 03/14] feather: improve shader

---
 .../particle-system-playground/README.md      |  12 ++
 .../particle-system-playground/init.lua       |   4 +-
 .../components/RangePairField.tsx             |   5 +-
 .../components/ShaderCodeInput.tsx            | 115 ++++++++++++
 .../components/ShaderEditor.tsx               |  47 ++++-
 .../particle-system-playground/index.tsx      |  17 +-
 .../shader-presets.ts                         | 165 ++++++++++++++++++
 7 files changed, 355 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/particle-system-playground/components/ShaderCodeInput.tsx
 create mode 100644 src/pages/particle-system-playground/shader-presets.ts

diff --git a/src-lua/plugins/particle-system-playground/README.md b/src-lua/plugins/particle-system-playground/README.md
index 86250034..de420ac3 100644
--- a/src-lua/plugins/particle-system-playground/README.md
+++ b/src-lua/plugins/particle-system-playground/README.md
@@ -119,6 +119,18 @@ return particles
 
 ZIP export returns `init.lua` and any available texture/shader assets. Imported texture bytes are preserved for ZIP output. Game-path assets are read through `love.filesystem.read` when possible.
 
+## Shaders
+
+The desktop editor includes built-in particle shader presets such as glow, smoke, sparkle, dissolve, ring, and energy effects. Presets are plain LÖVE pixel shader source and can be edited before applying.
+
+Animated presets may declare:
+
+```glsl
+extern number u_time;
+```
+
+When a scratch composite is drawn, the plugin sends `u_time` with `love.timer.getTime()` if the active shader accepts it. Shaders that do not declare `u_time` are unaffected.
+
 ## Notes
 
 - This is a Feather-owned clean-room runtime/plugin implementation.
diff --git a/src-lua/plugins/particle-system-playground/init.lua b/src-lua/plugins/particle-system-playground/init.lua
index fc21e17a..d5d9852a 100644
--- a/src-lua/plugins/particle-system-playground/init.lua
+++ b/src-lua/plugins/particle-system-playground/init.lua
@@ -1063,6 +1063,9 @@ function ParticleSystemPlaygroundPlugin:onDraw()
       for _, system in ipairs(entry.systems or {}) do
         if system.system then
           pcall(love.graphics.setBlendMode, system.blendMode or "alpha")
+          if system.shader and system.shader.send and love.timer then
+            pcall(system.shader.send, system.shader, "u_time", love.timer.getTime())
+          end
           love.graphics.setShader(system.shader)
           love.graphics.setColor(1, 1, 1, 1)
           love.graphics.draw(system.system, 0, 0)
@@ -1734,7 +1737,6 @@ end
 function ParticleSystemPlaygroundPlugin:getConfig()
   return {
     type = "particle-system-playground",
-    tabName = "Particles Playground",
     icon = "sparkles",
   }
 end
diff --git a/src/pages/particle-system-playground/components/RangePairField.tsx b/src/pages/particle-system-playground/components/RangePairField.tsx
index 9b69366d..2ead3711 100644
--- a/src/pages/particle-system-playground/components/RangePairField.tsx
+++ b/src/pages/particle-system-playground/components/RangePairField.tsx
@@ -22,7 +22,8 @@ export function RangePairField({ label, minKey, maxKey, system, onChange, step =
   return (
     <div className="col-span-2 grid gap-1">
       <Label className="text-[10px] text-muted-foreground">{label}</Label>
-      <div className="flex items-center gap-1">
+      <div className="grid grid-cols-[auto_minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-1.5">
+        <span className="text-[10px] font-medium text-muted-foreground">Min</span>
         <Input
           className="h-8 text-xs"
           type="number"
@@ -31,7 +32,7 @@ export function RangePairField({ label, minKey, maxKey, system, onChange, step =
           value={String(minVal)}
           onChange={(e) => onChange(minKey, Number(e.target.value))}
         />
-        <div className="h-px w-3 shrink-0 bg-border" />
+        <span className="text-[10px] font-medium text-muted-foreground">Max</span>
         <Input
           className="h-8 text-xs"
           type="number"
diff --git a/src/pages/particle-system-playground/components/ShaderCodeInput.tsx b/src/pages/particle-system-playground/components/ShaderCodeInput.tsx
new file mode 100644
index 00000000..0f6699df
--- /dev/null
+++ b/src/pages/particle-system-playground/components/ShaderCodeInput.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useRef } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { useTheme } from '@/hooks/use-theme';
+import oneLight from '@/assets/theme/light';
+import onDark from '@/assets/theme/dark';
+import { cn } from '@/utils/styles';
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+const codeStyle: React.CSSProperties = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: '0.75rem',
+  lineHeight: '1.5',
+  padding: '8px 12px 8px 52px',
+  tabSize: 2,
+};
+
+export function ShaderCodeInput({ value, onChange, placeholder, className }: Props) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const highlightTheme = theme === 'dark' ? onDark : oneLight;
+  const lineCount = Math.max(1, value.split('\n').length);
+
+  const syncScroll = () => {
+    if (!textareaRef.current || !backdropRef.current) return;
+    backdropRef.current.scrollTop = textareaRef.current.scrollTop;
+    backdropRef.current.scrollLeft = textareaRef.current.scrollLeft;
+  };
+
+  useEffect(() => {
+    syncScroll();
+  }, [value]);
+
+  return (
+    <div
+      className={cn(
+        'relative min-h-48 overflow-hidden rounded-md border bg-background shadow-sm',
+        'focus-within:ring-1 focus-within:ring-ring',
+        className,
+      )}
+    >
+      <div ref={backdropRef} aria-hidden className="pointer-events-none absolute inset-0 overflow-auto">
+        <div
+          className="absolute left-0 top-0 grid w-10 select-none justify-items-end pr-2 text-xs text-muted-foreground/55"
+          style={{
+            fontFamily: codeStyle.fontFamily,
+            fontSize: codeStyle.fontSize,
+            lineHeight: codeStyle.lineHeight,
+            paddingTop: 8,
+          }}
+        >
+          {Array.from({ length: lineCount }, (_, index) => (
+            <span key={index}>{index + 1}</span>
+          ))}
+        </div>
+        <SyntaxHighlighter
+          language="glsl"
+          style={{
+            ...highlightTheme,
+            hljs: {
+              ...(highlightTheme as Record<string, React.CSSProperties>).hljs,
+              background: 'transparent',
+              padding: 0,
+            },
+          }}
+          customStyle={{
+            ...codeStyle,
+            minHeight: '12rem',
+            background: 'transparent',
+            margin: 0,
+            whiteSpace: 'pre',
+            overflow: 'visible',
+          }}
+          showLineNumbers={false}
+        >
+          {value + ' '}
+        </SyntaxHighlighter>
+      </div>
+      <textarea
+        ref={textareaRef}
+        value={value}
+        spellCheck={false}
+        placeholder={placeholder}
+        onScroll={syncScroll}
+        onChange={(event) => onChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key !== 'Tab') return;
+          event.preventDefault();
+          const target = event.currentTarget;
+          const start = target.selectionStart;
+          const end = target.selectionEnd;
+          const next = value.slice(0, start) + '  ' + value.slice(end);
+          onChange(next);
+          requestAnimationFrame(() => {
+            target.selectionStart = start + 2;
+            target.selectionEnd = start + 2;
+          });
+        }}
+        className={cn(
+          'relative z-10 min-h-48 w-full resize-y overflow-auto bg-transparent font-mono text-xs',
+          'text-transparent [caret-color:var(--foreground)]',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none',
+        )}
+        style={codeStyle}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/ShaderEditor.tsx b/src/pages/particle-system-playground/components/ShaderEditor.tsx
index 321d466b..03f61d91 100644
--- a/src/pages/particle-system-playground/components/ShaderEditor.tsx
+++ b/src/pages/particle-system-playground/components/ShaderEditor.tsx
@@ -1,9 +1,11 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { AlertTriangleIcon, EraserIcon, PlayIcon } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { AlertTriangleIcon, EraserIcon, PlayIcon, WandSparklesIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { SHADER_PRESETS } from '../shader-presets';
+import { ShaderCodeInput } from './ShaderCodeInput';
 
 type Props = {
   shaderPath: string;
@@ -26,7 +28,30 @@ export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error,
 
   return (
     <div className="grid gap-2">
-      <div className="grid grid-cols-[1fr_10rem] gap-2">
+      <div className="grid gap-1">
+        <Label className="text-[10px] text-muted-foreground">Shader preset</Label>
+        <Select
+          onValueChange={(name) => {
+            const preset = SHADER_PRESETS.find((item) => item.name === name);
+            if (!preset) return;
+            setSource(preset.source);
+            setFilename(preset.filename);
+            setPath('');
+          }}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue placeholder="Choose a particle shader preset" />
+          </SelectTrigger>
+          <SelectContent>
+            {SHADER_PRESETS.map((preset) => (
+              <SelectItem key={preset.name} value={preset.name} title={preset.description}>
+                {preset.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_10rem]">
         <div className="grid gap-1">
           <Label className="text-[10px] text-muted-foreground">Shader path</Label>
           <Input className="h-8 font-mono text-xs" value={path} onChange={(event) => setPath(event.target.value)} />
@@ -36,11 +61,11 @@ export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error,
           <Input className="h-8 font-mono text-xs" value={filename} onChange={(event) => setFilename(event.target.value)} />
         </div>
       </div>
-      <Textarea
-        className="min-h-36 resize-y font-mono text-xs"
+      <ShaderCodeInput
+        className="min-h-48"
         placeholder="vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) { return Texel(tex, texture_coords) * color; }"
         value={source}
-        onChange={(event) => setSource(event.target.value)}
+        onChange={setSource}
       />
       {error && (
         <div className="flex items-start gap-2 rounded border border-destructive/30 bg-destructive/10 p-2 text-xs text-destructive">
@@ -53,6 +78,16 @@ export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error,
           <PlayIcon className="size-4" />
           Apply Source
         </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          className="h-8 gap-2 text-xs"
+          onClick={() => onApply({ shaderSource: source, filename })}
+          disabled={!SHADER_PRESETS.some((preset) => preset.source === source)}
+        >
+          <WandSparklesIcon className="size-4" />
+          Apply Preset
+        </Button>
         <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => path && onApply({ shaderPath: path })}>
           Apply Path
         </Button>
diff --git a/src/pages/particle-system-playground/index.tsx b/src/pages/particle-system-playground/index.tsx
index 271dc3e7..47992ce8 100644
--- a/src/pages/particle-system-playground/index.tsx
+++ b/src/pages/particle-system-playground/index.tsx
@@ -2,6 +2,7 @@ import { AlertTriangleIcon, FileWarningIcon, RotateCcwIcon, SparklesIcon, ZapIco
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { usePluginControl } from '@/hooks/use-plugin-control';
 import { useParticleSystemPlayground } from '@/hooks/use-particle-system-playground';
 import { CompositeSelector } from './components/CompositeSelector';
 import { EmitterList } from './components/EmitterList';
@@ -22,6 +23,7 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 
 export default function ParticleSystemPlaygroundPage() {
   const playground = useParticleSystemPlayground();
+  const pluginControl = usePluginControl('particle-system-playground');
   const composite = playground.composite;
   const system = playground.activeSystem;
   const isGameComposite = composite?.compositeType === 'game';
@@ -49,6 +51,19 @@ export default function ParticleSystemPlaygroundPage() {
           <p className="text-sm text-muted-foreground">
             Enable the built-in plugin for this session to author particle effects.
           </p>
+          <Button
+            size="sm"
+            className="h-8 text-xs"
+            disabled={!!pluginControl.plugin?.incompatible}
+            onClick={() => pluginControl.setEnabled(true)}
+          >
+            Enable Particles Playground
+          </Button>
+          {pluginControl.plugin?.incompatible && (
+            <p className="text-xs text-muted-foreground">
+              This plugin is incompatible with the current Feather runtime.
+            </p>
+          )}
         </div>
       </div>
     );
@@ -144,7 +159,7 @@ export default function ParticleSystemPlaygroundPage() {
                   </div>
                 )}
 
-                <div className="grid grid-cols-1 gap-3 xl:grid-cols-[minmax(0,1fr)_22rem]">
+                <div className="grid grid-cols-1 gap-3 2xl:grid-cols-[minmax(0,1fr)_minmax(28rem,38rem)]">
                   <Section title="Emitter Properties">
                     <PropertiesPanel system={system} onChange={playground.updateActiveParam} />
                   </Section>
diff --git a/src/pages/particle-system-playground/shader-presets.ts b/src/pages/particle-system-playground/shader-presets.ts
new file mode 100644
index 00000000..2651ad55
--- /dev/null
+++ b/src/pages/particle-system-playground/shader-presets.ts
@@ -0,0 +1,165 @@
+export type ShaderPreset = {
+  name: string;
+  filename: string;
+  description: string;
+  source: string;
+};
+
+const header = `// Generated by Feather Particle System Playground
+// LÖVE pixel shader for particle systems.
+`;
+
+export const SHADER_PRESETS: ShaderPreset[] = [
+  {
+    name: 'Default Test Shader',
+    filename: 'default-test-shader.glsl',
+    description: 'Obvious animated tint shader for verifying shader compile, apply, and u_time.',
+    source: `${header}
+extern number u_time;
+
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float pulse = 0.65 + 0.35 * sin(u_time * 4.0);
+  vec3 tint = mix(vec3(0.25, 0.75, 1.0), vec3(1.0, 0.25, 0.85), pulse);
+  return vec4(px.rgb * tint * 1.8, px.a);
+}
+`,
+  },
+  {
+    name: 'Clean Alpha',
+    filename: 'clean-alpha.glsl',
+    description: 'Neutral passthrough shader. Good reset point before custom edits.',
+    source: `${header}
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords);
+  return px * color;
+}
+`,
+  },
+  {
+    name: 'Soft Glow',
+    filename: 'soft-glow.glsl',
+    description: 'Boosts bright particles and feathered edges for fire, magic, and sparks.',
+    source: `${header}
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float alpha = smoothstep(0.02, 0.85, px.a);
+  vec3 glow = px.rgb * (1.0 + alpha * 1.35);
+  return vec4(glow, px.a * alpha);
+}
+`,
+  },
+  {
+    name: 'Ember Heat',
+    filename: 'ember-heat.glsl',
+    description: 'Warm animated flicker for embers, flames, and explosions.',
+    source: `${header}
+extern number u_time;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float n = hash(floor(texture_coords * 18.0 + u_time * 9.0));
+  float heat = 0.85 + n * 0.45;
+  vec3 warm = vec3(px.r * 1.35, px.g * 0.82, px.b * 0.35);
+  return vec4(mix(px.rgb, warm, 0.65) * heat, px.a);
+}
+`,
+  },
+  {
+    name: 'Smoke Softener',
+    filename: 'smoke-softener.glsl',
+    description: 'Desaturates and softens alpha for smoke, mist, and dust.',
+    source: `${header}
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float gray = dot(px.rgb, vec3(0.299, 0.587, 0.114));
+  vec3 smoke = mix(vec3(gray), px.rgb, 0.18);
+  float alpha = smoothstep(0.05, 0.95, px.a) * 0.72;
+  return vec4(smoke, px.a * alpha);
+}
+`,
+  },
+  {
+    name: 'Sparkle Pulse',
+    filename: 'sparkle-pulse.glsl',
+    description: 'Time-based shimmer for stars, glitter, and magical sparks.',
+    source: `${header}
+extern number u_time;
+
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  vec2 centered = texture_coords - vec2(0.5);
+  float ray = abs(centered.x * centered.y) * 18.0;
+  float pulse = 0.75 + 0.45 * sin(u_time * 9.0 + (texture_coords.x + texture_coords.y) * 18.0);
+  vec3 tint = mix(px.rgb, vec3(1.0, 0.92, 0.45), 0.45);
+  return vec4(tint * (pulse + ray), px.a);
+}
+`,
+  },
+  {
+    name: 'Magic Chromatic',
+    filename: 'magic-chromatic.glsl',
+    description: 'Hue-split magical tint with subtle animated color cycling.',
+    source: `${header}
+extern number u_time;
+
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  vec3 cycle = 0.65 + 0.35 * cos(vec3(0.0, 2.1, 4.2) + u_time * 2.4 + texture_coords.xyx * 5.0);
+  vec3 magic = mix(px.rgb, cycle, 0.55);
+  return vec4(magic * (1.0 + px.a * 0.6), px.a);
+}
+`,
+  },
+  {
+    name: 'Dissolve Noise',
+    filename: 'dissolve-noise.glsl',
+    description: 'Noisy broken edges for sparks, ash, teleport effects, and debris.',
+    source: `${header}
+extern number u_time;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(41.0, 289.0))) * 45758.5453);
+}
+
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float n = hash(floor(texture_coords * 28.0 + u_time * 5.0));
+  float edge = smoothstep(0.18, 0.62, n + px.a * 0.75);
+  return vec4(px.rgb * (0.9 + n * 0.5), px.a * edge);
+}
+`,
+  },
+  {
+    name: 'Radial Ring',
+    filename: 'radial-ring.glsl',
+    description: 'Turns soft blobs into ring-like pulses and shockwave particles.',
+    source: `${header}
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float d = distance(texture_coords, vec2(0.5));
+  float ring = smoothstep(0.46, 0.34, abs(d - 0.33));
+  float core = smoothstep(0.5, 0.1, d) * 0.2;
+  return vec4(px.rgb * (1.0 + ring * 1.8), px.a * max(ring, core));
+}
+`,
+  },
+  {
+    name: 'Energy Core',
+    filename: 'energy-core.glsl',
+    description: 'Bright center with colored falloff for plasma, portals, and beams.',
+    source: `${header}
+vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {
+  vec4 px = Texel(tex, texture_coords) * color;
+  float d = distance(texture_coords, vec2(0.5));
+  float core = smoothstep(0.42, 0.0, d);
+  vec3 energy = mix(px.rgb, vec3(0.35, 0.9, 1.0), 0.55) + core * vec3(0.8, 0.9, 1.0);
+  return vec4(energy, px.a * smoothstep(0.55, 0.08, d));
+}
+`,
+  },
+].sort((a, b) => a.name.localeCompare(b.name));

From 8b2fc46aee347b37489b278176963200197b7998 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 18:31:28 -0400
Subject: [PATCH 04/14] feather: improve graphs

---
 .../components/AccelerationEditor.tsx         |  59 +++---
 .../components/CircularForceGizmo.tsx         |  94 ++++++---
 .../components/DirectionSpreadGizmo.tsx       | 188 ++++++++++++++++++
 .../components/LinearAccelPlane.tsx           |  96 ++++++---
 .../components/PropertiesPanel.tsx            |   2 +
 .../particle-system-playground/index.tsx      | 125 ++++++------
 6 files changed, 430 insertions(+), 134 deletions(-)
 create mode 100644 src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx

diff --git a/src/pages/particle-system-playground/components/AccelerationEditor.tsx b/src/pages/particle-system-playground/components/AccelerationEditor.tsx
index 3e904ab5..8f5d9791 100644
--- a/src/pages/particle-system-playground/components/AccelerationEditor.tsx
+++ b/src/pages/particle-system-playground/components/AccelerationEditor.tsx
@@ -1,7 +1,5 @@
-import { Separator } from '@/components/ui/separator';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
-import { useState } from 'react';
 import { CircularForceGizmo } from './CircularForceGizmo';
 import { DampingRangeEditor } from './DampingRangeEditor';
 import { LinearAccelPlane } from './LinearAccelPlane';
@@ -13,39 +11,40 @@ type Props = {
 };
 
 export function AccelerationEditor({ system, onChange }: Props) {
-  const [mode, setMode] = useState<'visual' | 'raw'>('visual');
-
   return (
     <section className="grid gap-3">
-      <div className="flex items-center gap-3">
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Acceleration And Damping</h3>
-        <Separator className="flex-1" />
-        <ToggleGroup
-          type="single"
-          value={mode}
-          onValueChange={(v) => v && setMode(v as 'visual' | 'raw')}
-          className="h-6"
-        >
-          <ToggleGroupItem value="visual" className="h-6 px-2 text-[10px]">Visual</ToggleGroupItem>
-          <ToggleGroupItem value="raw" className="h-6 px-2 text-[10px]">Raw</ToggleGroupItem>
-        </ToggleGroup>
-      </div>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Acceleration And Damping</h3>
+
+      <Tabs defaultValue="linear" className="gap-3">
+        <TabsList className="grid h-8 w-full grid-cols-4 rounded-md">
+          <TabsTrigger value="linear" className="text-xs">Linear</TabsTrigger>
+          <TabsTrigger value="radial" className="text-xs">Radial</TabsTrigger>
+          <TabsTrigger value="damping" className="text-xs">Damping</TabsTrigger>
+          <TabsTrigger value="raw" className="text-xs">Raw</TabsTrigger>
+        </TabsList>
 
-      {mode === 'visual' ? (
-        <div className="grid gap-4">
+        <TabsContent value="linear" className="mt-0">
           <LinearAccelPlane system={system} onChange={onChange} />
+        </TabsContent>
+
+        <TabsContent value="radial" className="mt-0">
           <CircularForceGizmo system={system} onChange={onChange} />
+        </TabsContent>
+
+        <TabsContent value="damping" className="mt-0">
           <DampingRangeEditor system={system} onChange={onChange} />
-        </div>
-      ) : (
-        <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-          <RangePairField label="Linear X" minKey="linearAccelXMin" maxKey="linearAccelXMax" system={system} onChange={onChange} step={1} />
-          <RangePairField label="Linear Y" minKey="linearAccelYMin" maxKey="linearAccelYMax" system={system} onChange={onChange} step={1} />
-          <RangePairField label="Radial" minKey="radialAccelMin" maxKey="radialAccelMax" system={system} onChange={onChange} step={1} />
-          <RangePairField label="Tangential" minKey="tangentialAccelMin" maxKey="tangentialAccelMax" system={system} onChange={onChange} step={1} />
-          <RangePairField label="Damping" minKey="linearDampingMin" maxKey="linearDampingMax" system={system} onChange={onChange} step={0.01} />
-        </div>
-      )}
+        </TabsContent>
+
+        <TabsContent value="raw" className="mt-0">
+          <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+            <RangePairField label="Linear X" minKey="linearAccelXMin" maxKey="linearAccelXMax" system={system} onChange={onChange} step={1} />
+            <RangePairField label="Linear Y" minKey="linearAccelYMin" maxKey="linearAccelYMax" system={system} onChange={onChange} step={1} />
+            <RangePairField label="Radial" minKey="radialAccelMin" maxKey="radialAccelMax" system={system} onChange={onChange} step={1} />
+            <RangePairField label="Tangential" minKey="tangentialAccelMin" maxKey="tangentialAccelMax" system={system} onChange={onChange} step={1} />
+            <RangePairField label="Damping" minKey="linearDampingMin" maxKey="linearDampingMax" system={system} onChange={onChange} step={0.01} />
+          </div>
+        </TabsContent>
+      </Tabs>
     </section>
   );
 }
diff --git a/src/pages/particle-system-playground/components/CircularForceGizmo.tsx b/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
index 91cdb5e8..e7646816 100644
--- a/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
+++ b/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
@@ -3,8 +3,8 @@ import { Label } from '@/components/ui/label';
 import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-const H = 180;
-const EMITTER_R = 18;
+const H = 260;
+const EMITTER_R = 22;
 
 type Props = {
   system: ParticleSystemPlaygroundSystem;
@@ -22,6 +22,10 @@ function arcArrow(cx: number, cy: number, r: number, startAngle: number, endAngl
   return `M ${sx} ${sy} A ${r} ${r} 0 ${largeArc} ${sweep} ${ex} ${ey}`;
 }
 
+function clamp(value: number, range: number): number {
+  return Math.max(-range, Math.min(range, value));
+}
+
 export function CircularForceGizmo({ system, onChange }: Props) {
   const p = system.properties;
   const radialMin = p.radialAccelMin ?? 0;
@@ -46,7 +50,15 @@ export function CircularForceGizmo({ system, onChange }: Props) {
 
   const maxAbs = Math.max(Math.abs(radialMin), Math.abs(radialMax), Math.abs(tangMin), Math.abs(tangMax), 50);
   const [range, setRange] = useState(() => Math.ceil(maxAbs * 1.5 / 50) * 50);
-  const halfSide = Math.min(svgW, H) / 2 - 24;
+  const rangeWasEditedRef = useRef(false);
+
+  useEffect(() => {
+    if (rangeWasEditedRef.current) return;
+    const nextRange = Math.ceil(maxAbs * 1.35 / 50) * 50;
+    setRange((current) => (nextRange > current ? nextRange : current));
+  }, [maxAbs]);
+
+  const halfSide = Math.min(svgW, H) / 2 - 30;
   const scale = halfSide / range;
 
   const stateRef = useRef({ cx, cy, scale, range });
@@ -65,12 +77,11 @@ export function CircularForceGizmo({ system, onChange }: Props) {
       const round = (v: number) => Math.round(v * 10) / 10;
 
       const { range } = stateRef.current;
-      const clamp = (v: number) => Math.max(-range, Math.min(range, v));
       if (dragging === 'radialMin' || dragging === 'radialMax') {
-        const v = round(clamp(dx / scale));
+        const v = round(clamp(dx / scale, range));
         onChange(dragging === 'radialMin' ? 'radialAccelMin' : 'radialAccelMax', v);
       } else {
-        const v = round(clamp(dy / scale));
+        const v = round(clamp(dy / scale, range));
         onChange(dragging === 'tangMin' ? 'tangentialAccelMin' : 'tangentialAccelMax', v);
       }
     },
@@ -79,12 +90,31 @@ export function CircularForceGizmo({ system, onChange }: Props) {
 
   const stopDrag = useCallback(() => setDragging(null), []);
 
+  const updateRange = useCallback(
+    (nextRange: number) => {
+      if (nextRange <= 0) return;
+      rangeWasEditedRef.current = true;
+      setRange(nextRange);
+      const nextValues = {
+        radialAccelMin: clamp(radialMin, nextRange),
+        radialAccelMax: clamp(radialMax, nextRange),
+        tangentialAccelMin: clamp(tangMin, nextRange),
+        tangentialAccelMax: clamp(tangMax, nextRange),
+      };
+      Object.entries(nextValues).forEach(([key, value]) => {
+        const current = system.properties[key as keyof typeof system.properties] as number;
+        if (current !== value) onChange(key, value);
+      });
+    },
+    [onChange, radialMax, radialMin, system.properties, tangMax, tangMin],
+  );
+
   // Radial handle positions: along horizontal axis
-  const radialMinX = cx + radialMin * scale;
-  const radialMaxX = cx + radialMax * scale;
+  const radialMinX = cx + clamp(radialMin, range) * scale;
+  const radialMaxX = cx + clamp(radialMax, range) * scale;
   // Tangential handle positions: along vertical axis
-  const tangMinY = cy + tangMin * scale;
-  const tangMaxY = cy + tangMax * scale;
+  const tangMinY = cy + clamp(tangMin, range) * scale;
+  const tangMaxY = cy + clamp(tangMax, range) * scale;
 
   // Decorative: show 8 radial arrows around the emitter circle
   const avgRadial = (radialMin + radialMax) / 2;
@@ -120,7 +150,7 @@ export function CircularForceGizmo({ system, onChange }: Props) {
             step={50}
             min={10}
             value={range}
-            onChange={(e) => { const v = parseFloat(e.target.value); if (v > 0) setRange(v); }}
+            onChange={(e) => updateRange(parseFloat(e.target.value))}
           />
         </div>
       </div>
@@ -129,7 +159,7 @@ export function CircularForceGizmo({ system, onChange }: Props) {
         ref={svgRef}
         width="100%"
         height={H}
-        className="rounded border bg-card touch-none"
+        className="touch-none rounded border bg-muted/10"
         onPointerMove={onPointerMove}
         onPointerUp={stopDrag}
         onPointerLeave={stopDrag}
@@ -141,18 +171,20 @@ export function CircularForceGizmo({ system, onChange }: Props) {
         ))}
 
         {/* Axes */}
-        <line x1={cx - halfSide} y1={cy} x2={cx + halfSide} y2={cy} stroke="currentColor" strokeOpacity={0.15} />
-        <line x1={cx} y1={cy - halfSide} x2={cx} y2={cy + halfSide} stroke="currentColor" strokeOpacity={0.15} />
-        <text x={cx + halfSide - 12} y={cy - 4} fontSize={8} fill="currentColor" fillOpacity={0.35}>radial</text>
-        <text x={cx + 4} y={cy - halfSide + 10} fontSize={8} fill="currentColor" fillOpacity={0.35}>tang</text>
+        <line x1={cx - halfSide} y1={cy} x2={cx + halfSide} y2={cy} stroke="currentColor" strokeOpacity={0.22} />
+        <line x1={cx} y1={cy - halfSide} x2={cx} y2={cy + halfSide} stroke="currentColor" strokeOpacity={0.22} />
+        <text x={cx + halfSide - 35} y={cy - 6} fontSize={9} fill="currentColor" fillOpacity={0.4}>outward</text>
+        <text x={cx - halfSide + 4} y={cy - 6} fontSize={9} fill="currentColor" fillOpacity={0.4}>inward</text>
+        <text x={cx + 5} y={cy - halfSide + 12} fontSize={9} fill="currentColor" fillOpacity={0.4}>CW</text>
+        <text x={cx + 5} y={cy + halfSide - 5} fontSize={9} fill="currentColor" fillOpacity={0.4}>CCW</text>
 
         {/* Radial arrows around emitter */}
         {arrows8.map(({ bx, by, tx, ty, angle }, i) => (
           <g key={i}>
-            <line x1={bx} y1={by} x2={tx} y2={ty} stroke="var(--chart-1)" strokeOpacity={0.5} strokeWidth={1.5} />
+            <line x1={bx} y1={by} x2={tx} y2={ty} stroke="var(--chart-1)" strokeOpacity={0.55} strokeWidth={2} />
             <path
               d={`M ${tx} ${ty} L ${tx + Math.cos(angle + 2.5) * 5} ${ty + Math.sin(angle + 2.5) * 5} M ${tx} ${ty} L ${tx + Math.cos(angle - 2.5) * 5} ${ty + Math.sin(angle - 2.5) * 5}`}
-              stroke="var(--chart-1)" strokeOpacity={0.5} strokeWidth={1} fill="none" strokeLinecap="round"
+              stroke="var(--chart-1)" strokeOpacity={0.55} strokeWidth={1.25} fill="none" strokeLinecap="round"
             />
           </g>
         ))}
@@ -181,31 +213,47 @@ export function CircularForceGizmo({ system, onChange }: Props) {
         )}
 
         {/* Emitter circle */}
-        <circle cx={cx} cy={cy} r={EMITTER_R} fill="hsl(var(--card))" stroke="currentColor" strokeOpacity={0.3} strokeWidth={1.5} />
+        <circle cx={cx} cy={cy} r={EMITTER_R} fill="hsl(var(--card))" stroke="currentColor" strokeOpacity={0.35} strokeWidth={1.5} />
         <circle cx={cx} cy={cy} r={3} fill="currentColor" fillOpacity={0.4} />
 
         {/* Radial handles (horizontal axis) */}
         <circle cx={radialMinX} cy={cy} r={6}
           fill={dragging === 'radialMin' ? 'var(--chart-1)' : 'hsl(var(--card))'}
           stroke="var(--chart-1)" strokeWidth={2} style={{ cursor: 'ew-resize' }}
-          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('radialMin'); }}
+          onPointerDown={(e) => {
+            rangeWasEditedRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setDragging('radialMin');
+          }}
         />
         <circle cx={radialMaxX} cy={cy} r={6}
           fill={dragging === 'radialMax' ? 'var(--chart-1)' : 'hsl(var(--card))'}
           stroke="var(--chart-1)" strokeWidth={2} strokeDasharray="3 2" style={{ cursor: 'ew-resize' }}
-          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('radialMax'); }}
+          onPointerDown={(e) => {
+            rangeWasEditedRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setDragging('radialMax');
+          }}
         />
 
         {/* Tangential handles (vertical axis) */}
         <circle cx={cx} cy={tangMinY} r={6}
           fill={dragging === 'tangMin' ? 'var(--chart-2)' : 'hsl(var(--card))'}
           stroke="var(--chart-2)" strokeWidth={2} style={{ cursor: 'ns-resize' }}
-          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('tangMin'); }}
+          onPointerDown={(e) => {
+            rangeWasEditedRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setDragging('tangMin');
+          }}
         />
         <circle cx={cx} cy={tangMaxY} r={6}
           fill={dragging === 'tangMax' ? 'var(--chart-2)' : 'hsl(var(--card))'}
           stroke="var(--chart-2)" strokeWidth={2} strokeDasharray="3 2" style={{ cursor: 'ns-resize' }}
-          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('tangMax'); }}
+          onPointerDown={(e) => {
+            rangeWasEditedRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setDragging('tangMax');
+          }}
         />
 
         {/* Legends */}
diff --git a/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx b/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx
new file mode 100644
index 00000000..c475976f
--- /dev/null
+++ b/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx
@@ -0,0 +1,188 @@
+import { Label } from '@/components/ui/label';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const H = 260;
+const PAD = 24;
+const TAU = Math.PI * 2;
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+type DragTarget = 'direction' | 'spread-start' | 'spread-end';
+
+function clampSpread(value: number): number {
+  return Math.max(0, Math.min(TAU, value));
+}
+
+function round(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+function normalizeDelta(value: number): number {
+  let delta = value;
+  while (delta > Math.PI) delta -= TAU;
+  while (delta < -Math.PI) delta += TAU;
+  return delta;
+}
+
+function polar(cx: number, cy: number, radius: number, angle: number) {
+  return {
+    x: cx + Math.cos(angle) * radius,
+    y: cy + Math.sin(angle) * radius,
+  };
+}
+
+function rayPath(cx: number, cy: number, radius: number, angle: number): string {
+  const point = polar(cx, cy, radius, angle);
+  return `M ${cx} ${cy} L ${point.x} ${point.y}`;
+}
+
+function sectorPath(cx: number, cy: number, radius: number, start: number, end: number, spread: number): string {
+  if (spread >= TAU - 0.001) {
+    return [
+      `M ${cx} ${cy}`,
+      `m ${-radius} 0`,
+      `a ${radius} ${radius} 0 1 0 ${radius * 2} 0`,
+      `a ${radius} ${radius} 0 1 0 ${-radius * 2} 0`,
+      'Z',
+    ].join(' ');
+  }
+
+  const startPoint = polar(cx, cy, radius, start);
+  const endPoint = polar(cx, cy, radius, end);
+  const largeArc = spread > Math.PI ? 1 : 0;
+  return `M ${cx} ${cy} L ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 1 ${endPoint.x} ${endPoint.y} Z`;
+}
+
+function angleFromPointer(event: React.PointerEvent<SVGSVGElement>, svg: SVGSVGElement, cx: number, cy: number): number {
+  const rect = svg.getBoundingClientRect();
+  return Math.atan2(event.clientY - rect.top - cy, event.clientX - rect.left - cx);
+}
+
+export function DirectionSpreadGizmo({ system, onChange }: Props) {
+  const direction = system.properties.direction ?? 0;
+  const spread = clampSpread(system.properties.spread ?? 0);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [svgW, setSvgW] = useState(360);
+  const [dragging, setDragging] = useState<DragTarget | null>(null);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([entry]) => setSvgW(entry.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const cx = svgW / 2;
+  const cy = H / 2;
+  const radius = Math.max(40, Math.min(svgW - PAD * 2, H - PAD * 2) / 2);
+  const startAngle = direction - spread / 2;
+  const endAngle = direction + spread / 2;
+  const directionPoint = polar(cx, cy, radius, direction);
+  const startPoint = polar(cx, cy, radius, startAngle);
+  const endPoint = polar(cx, cy, radius, endAngle);
+  const stateRef = useRef({ cx, cy });
+  stateRef.current = { cx, cy };
+
+  const updateFromPointer = useCallback(
+    (event: React.PointerEvent<SVGSVGElement>, target: DragTarget) => {
+      if (!svgRef.current) return;
+      const { cx, cy } = stateRef.current;
+      const angle = angleFromPointer(event, svgRef.current, cx, cy);
+
+      if (target === 'direction') {
+        onChange('direction', round(angle));
+        return;
+      }
+
+      const delta = Math.abs(normalizeDelta(angle - direction));
+      onChange('spread', round(clampSpread(delta * 2)));
+    },
+    [direction, onChange],
+  );
+
+  const onPointerMove = useCallback(
+    (event: React.PointerEvent<SVGSVGElement>) => {
+      if (!dragging) return;
+      updateFromPointer(event, dragging);
+    },
+    [dragging, updateFromPointer],
+  );
+
+  const stopDrag = useCallback(() => setDragging(null), []);
+
+  const beginDrag = (event: React.PointerEvent<SVGElement>, target: DragTarget) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(target);
+  };
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Direction &amp; Spread</Label>
+        <div className="flex gap-3 text-[10px] text-muted-foreground">
+          <span>{round(direction)} rad</span>
+          <span>{round(spread)} spread</span>
+        </div>
+      </div>
+
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={H}
+        className="touch-none rounded border bg-muted/10"
+        onPointerMove={onPointerMove}
+        onPointerUp={stopDrag}
+        onPointerLeave={stopDrag}
+      >
+        <circle cx={cx} cy={cy} r={radius} fill="none" stroke="currentColor" strokeDasharray="3 4" strokeOpacity={0.1} />
+        <line x1={cx - radius} y1={cy} x2={cx + radius} y2={cy} stroke="currentColor" strokeOpacity={0.12} />
+        <line x1={cx} y1={cy - radius} x2={cx} y2={cy + radius} stroke="currentColor" strokeOpacity={0.12} />
+        <text x={cx + radius - 12} y={cy - 5} fontSize={9} fill="currentColor" fillOpacity={0.35}>0</text>
+        <text x={cx + 5} y={cy + radius - 6} fontSize={9} fill="currentColor" fillOpacity={0.35}>+π/2</text>
+
+        <path d={sectorPath(cx, cy, radius, startAngle, endAngle, spread)} fill="var(--chart-2)" fillOpacity={0.12} />
+        <path d={rayPath(cx, cy, radius, startAngle)} stroke="var(--chart-2)" strokeWidth={1.5} strokeDasharray="5 4" />
+        <path d={rayPath(cx, cy, radius, endAngle)} stroke="var(--chart-2)" strokeWidth={1.5} strokeDasharray="5 4" />
+        <path d={rayPath(cx, cy, radius, direction)} stroke="var(--chart-1)" strokeWidth={2.5} strokeLinecap="round" />
+
+        <circle cx={cx} cy={cy} r={5} fill="currentColor" fillOpacity={0.4} />
+        <circle
+          cx={directionPoint.x}
+          cy={directionPoint.y}
+          r={7}
+          fill={dragging === 'direction' ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          style={{ cursor: 'grab' }}
+          onPointerDown={(event) => beginDrag(event, 'direction')}
+        />
+        <circle
+          cx={startPoint.x}
+          cy={startPoint.y}
+          r={6}
+          fill={dragging === 'spread-start' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          style={{ cursor: 'grab' }}
+          onPointerDown={(event) => beginDrag(event, 'spread-start')}
+        />
+        <circle
+          cx={endPoint.x}
+          cy={endPoint.y}
+          r={6}
+          fill={dragging === 'spread-end' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          style={{ cursor: 'grab' }}
+          onPointerDown={(event) => beginDrag(event, 'spread-end')}
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/LinearAccelPlane.tsx b/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
index 134eb9b8..dacfad25 100644
--- a/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
+++ b/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
@@ -4,8 +4,8 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-const H = 200;
-const PAD = 20;
+const H = 280;
+const PAD = 28;
 
 type Props = {
   system: ParticleSystemPlaygroundSystem;
@@ -54,6 +54,13 @@ function arrowHead(x: number, y: number, angle: number, size = 6): string {
   return `M ${x} ${y} L ${x + Math.cos(a1) * size} ${y + Math.sin(a1) * size} M ${x} ${y} L ${x + Math.cos(a2) * size} ${y + Math.sin(a2) * size}`;
 }
 
+function clampVector(x: number, y: number, range: number): { x: number; y: number } {
+  const magnitude = Math.hypot(x, y);
+  if (magnitude <= range || magnitude === 0) return { x, y };
+  const ratio = range / magnitude;
+  return { x: x * ratio, y: y * ratio };
+}
+
 export function LinearAccelPlane({ system, onChange }: Props) {
   const p = system.properties;
   const minX = p.linearAccelXMin ?? 0;
@@ -78,31 +85,37 @@ export function LinearAccelPlane({ system, onChange }: Props) {
 
   const maxVal = Math.max(Math.abs(minX), Math.abs(minY), Math.abs(maxX), Math.abs(maxY), 50);
   const [range, setRange] = useState(() => Math.ceil(maxVal * 1.5 / 50) * 50);
+  const rangeWasEditedRef = useRef(false);
+
+  useEffect(() => {
+    if (rangeWasEditedRef.current) return;
+    const nextRange = Math.ceil(maxVal * 1.35 / 50) * 50;
+    setRange((current) => (nextRange > current ? nextRange : current));
+  }, [maxVal]);
 
   const cx = svgW / 2;
   const cy = H / 2;
   const innerR = Math.min(svgW - PAD * 2, H - PAD * 2) / 2;
   const scale = innerR / range;
 
-  const stateRef = useRef({ cx, cy, scale });
-  stateRef.current = { cx, cy, scale };
+  const stateRef = useRef({ cx, cy, scale, range });
+  stateRef.current = { cx, cy, scale, range };
 
   const [dragging, setDragging] = useState<'min' | 'max' | null>(null);
 
   const onPointerMove = useCallback(
     (e: React.PointerEvent<SVGSVGElement>) => {
       if (!dragging || !svgRef.current) return;
-      const { cx, cy, scale } = stateRef.current;
+      const { cx, cy, scale, range } = stateRef.current;
       const rect = svgRef.current.getBoundingClientRect();
-      const px = (e.clientX - rect.left - cx) / scale;
-      const py = (e.clientY - rect.top - cy) / scale;
+      const pointer = clampVector((e.clientX - rect.left - cx) / scale, (e.clientY - rect.top - cy) / scale, range);
       const round = (v: number) => Math.round(v * 10) / 10;
       if (dragging === 'min') {
-        onChange('linearAccelXMin', round(px));
-        onChange('linearAccelYMin', round(py));
+        onChange('linearAccelXMin', round(pointer.x));
+        onChange('linearAccelYMin', round(pointer.y));
       } else {
-        onChange('linearAccelXMax', round(px));
-        onChange('linearAccelYMax', round(py));
+        onChange('linearAccelXMax', round(pointer.x));
+        onChange('linearAccelYMax', round(pointer.y));
       }
     },
     [dragging, onChange],
@@ -110,7 +123,31 @@ export function LinearAccelPlane({ system, onChange }: Props) {
 
   const stopDrag = useCallback(() => setDragging(null), []);
 
-  const toSvg = (px: number, py: number) => ({ x: cx + px * scale, y: cy + py * scale });
+  const updateRange = useCallback(
+    (nextRange: number) => {
+      if (nextRange <= 0) return;
+      rangeWasEditedRef.current = true;
+      setRange(nextRange);
+      const minVector = clampVector(minX, minY, nextRange);
+      const maxVector = clampVector(maxX, maxY, nextRange);
+      const nextValues = {
+        linearAccelXMin: minVector.x,
+        linearAccelYMin: minVector.y,
+        linearAccelXMax: maxVector.x,
+        linearAccelYMax: maxVector.y,
+      };
+      Object.entries(nextValues).forEach(([key, value]) => {
+        const current = system.properties[key as keyof typeof system.properties] as number;
+        if (current !== value) onChange(key, value);
+      });
+    },
+    [maxX, maxY, minX, minY, onChange, system.properties],
+  );
+
+  const toSvg = (px: number, py: number) => {
+    const point = clampVector(px, py, range);
+    return { x: cx + point.x * scale, y: cy + point.y * scale };
+  };
 
   const minPt = toSvg(minX, minY);
   const maxPt = toSvg(maxX, maxY);
@@ -138,7 +175,7 @@ export function LinearAccelPlane({ system, onChange }: Props) {
             step={50}
             min={10}
             value={range}
-            onChange={(e) => { const v = parseFloat(e.target.value); if (v > 0) setRange(v); }}
+            onChange={(e) => updateRange(parseFloat(e.target.value))}
           />
         </div>
       </div>
@@ -147,7 +184,7 @@ export function LinearAccelPlane({ system, onChange }: Props) {
         ref={svgRef}
         width="100%"
         height={H}
-        className="rounded border bg-card touch-none"
+        className="touch-none rounded border bg-muted/10"
         onPointerMove={onPointerMove}
         onPointerUp={stopDrag}
         onPointerLeave={stopDrag}
@@ -162,18 +199,19 @@ export function LinearAccelPlane({ system, onChange }: Props) {
         ))}
 
         {/* Axes */}
-        <line x1={PAD} y1={cy} x2={svgW - PAD} y2={cy} stroke="currentColor" strokeOpacity={0.25} />
-        <line x1={cx} y1={PAD} x2={cx} y2={H - PAD} stroke="currentColor" strokeOpacity={0.25} />
+        <line x1={PAD} y1={cy} x2={svgW - PAD} y2={cy} stroke="currentColor" strokeOpacity={0.3} />
+        <line x1={cx} y1={PAD} x2={cx} y2={H - PAD} stroke="currentColor" strokeOpacity={0.3} />
         <text x={svgW - PAD - 10} y={cy - 4} fontSize={9} fill="currentColor" fillOpacity={0.4}>X</text>
         <text x={cx + 4} y={PAD + 10} fontSize={9} fill="currentColor" fillOpacity={0.4}>Y</text>
+        <text x={cx + 6} y={H - PAD - 4} fontSize={8} fill="currentColor" fillOpacity={0.35}>LÖVE +Y</text>
 
         {/* Min vector */}
-        <line x1={origin.x} y1={origin.y} x2={minPt.x} y2={minPt.y} stroke="var(--chart-1)" strokeWidth={1.5} />
-        <path d={arrowHead(minPt.x, minPt.y, minAngle)} stroke="var(--chart-1)" strokeWidth={1.5} fill="none" strokeLinecap="round" />
+        <line x1={origin.x} y1={origin.y} x2={minPt.x} y2={minPt.y} stroke="var(--chart-1)" strokeWidth={2} />
+        <path d={arrowHead(minPt.x, minPt.y, minAngle, 7)} stroke="var(--chart-1)" strokeWidth={2} fill="none" strokeLinecap="round" />
 
         {/* Max vector */}
-        <line x1={origin.x} y1={origin.y} x2={maxPt.x} y2={maxPt.y} stroke="var(--chart-2)" strokeWidth={1.5} />
-        <path d={arrowHead(maxPt.x, maxPt.y, maxAngle)} stroke="var(--chart-2)" strokeWidth={1.5} fill="none" strokeLinecap="round" />
+        <line x1={origin.x} y1={origin.y} x2={maxPt.x} y2={maxPt.y} stroke="var(--chart-2)" strokeWidth={2} />
+        <path d={arrowHead(maxPt.x, maxPt.y, maxAngle, 7)} stroke="var(--chart-2)" strokeWidth={2} fill="none" strokeLinecap="round" />
 
         {/* Origin */}
         <circle cx={origin.x} cy={origin.y} r={3} fill="currentColor" fillOpacity={0.4} />
@@ -183,13 +221,21 @@ export function LinearAccelPlane({ system, onChange }: Props) {
           cx={minPt.x} cy={minPt.y} r={6}
           fill={dragging === 'min' ? 'var(--chart-1)' : 'hsl(var(--card))'}
           stroke="var(--chart-1)" strokeWidth={2} style={{ cursor: 'grab' }}
-          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('min'); }}
+          onPointerDown={(e) => {
+            rangeWasEditedRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setDragging('min');
+          }}
         />
         <circle
           cx={maxPt.x} cy={maxPt.y} r={6}
           fill={dragging === 'max' ? 'var(--chart-2)' : 'hsl(var(--card))'}
           stroke="var(--chart-2)" strokeWidth={2} style={{ cursor: 'grab' }}
-          onPointerDown={(e) => { e.currentTarget.setPointerCapture(e.pointerId); setDragging('max'); }}
+          onPointerDown={(e) => {
+            rangeWasEditedRef.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            setDragging('max');
+          }}
         />
 
         {/* Legend */}
@@ -243,7 +289,11 @@ export function LinearAccelPlane({ system, onChange }: Props) {
                 className="h-8 text-xs" type="number" step={step} min={min}
                 value={artist[key]}
                 onChange={(e) => {
-                  const updated = { ...artist, [key]: Number(e.target.value) };
+                  const nextValue = Number(e.target.value);
+                  const updated = {
+                    ...artist,
+                    [key]: key === 'speedMin' || key === 'speedMax' ? Math.min(nextValue, range) : nextValue,
+                  };
                   setArtist(updated);
                   const raw = artistToRaw(updated);
                   Object.entries(raw).forEach(([k, v]) => onChange(k, Math.round(v * 10) / 10));
diff --git a/src/pages/particle-system-playground/components/PropertiesPanel.tsx b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
index 5761233b..7281112f 100644
--- a/src/pages/particle-system-playground/components/PropertiesPanel.tsx
+++ b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
@@ -6,6 +6,7 @@ import { Separator } from '@/components/ui/separator';
 import { BLEND_MODES, EMISSION_AREA_DISTRIBUTIONS, type ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
 import { AccelerationEditor } from './AccelerationEditor';
 import { ColorGradientEditor } from './ColorGradientEditor';
+import { DirectionSpreadGizmo } from './DirectionSpreadGizmo';
 import { MotionPresets } from './MotionPresets';
 import { RangePairField } from './RangePairField';
 import { SizeCurveEditor } from './SizeCurveEditor';
@@ -161,6 +162,7 @@ export function PropertiesPanel({ system, onChange }: Props) {
             <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{group.title}</h3>
             <Separator className="flex-1" />
           </div>
+          {group.title === 'Direction And Speed' && <DirectionSpreadGizmo system={system} onChange={onChange} />}
           <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
             {group.fields.map((field) =>
               field.type === 'range' ? (
diff --git a/src/pages/particle-system-playground/index.tsx b/src/pages/particle-system-playground/index.tsx
index 47992ce8..914547aa 100644
--- a/src/pages/particle-system-playground/index.tsx
+++ b/src/pages/particle-system-playground/index.tsx
@@ -2,6 +2,7 @@ import { AlertTriangleIcon, FileWarningIcon, RotateCcwIcon, SparklesIcon, ZapIco
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { usePluginControl } from '@/hooks/use-plugin-control';
 import { useParticleSystemPlayground } from '@/hooks/use-particle-system-playground';
 import { CompositeSelector } from './components/CompositeSelector';
@@ -114,7 +115,8 @@ export default function ParticleSystemPlaygroundPage() {
                 </p>
               </div>
               {system && (
-                <div className="flex gap-2">
+                <div className="flex flex-wrap justify-end gap-2">
+                  <ExportPanel onExportCode={playground.exportCode} onExportZip={playground.exportZip} />
                   <Button
                     size="sm"
                     variant="outline"
@@ -159,69 +161,76 @@ export default function ParticleSystemPlaygroundPage() {
                   </div>
                 )}
 
-                <div className="grid grid-cols-1 gap-3 2xl:grid-cols-[minmax(0,1fr)_minmax(28rem,38rem)]">
-                  <Section title="Emitter Properties">
-                    <PropertiesPanel system={system} onChange={playground.updateActiveParam} />
-                  </Section>
+                <Tabs defaultValue="emitter" className="gap-3">
+                  <TabsList className="grid h-8 w-full grid-cols-2 rounded-md lg:w-fit lg:min-w-72">
+                    <TabsTrigger value="emitter" className="text-xs">Emitter</TabsTrigger>
+                    <TabsTrigger value="preview-assets" className="text-xs">Preview &amp; Assets</TabsTrigger>
+                  </TabsList>
 
-                  <div className="grid content-start gap-3">
-                    <Section title="Composite Preview">
-                      <div className="grid grid-cols-2 gap-2">
-                        <label className="grid gap-1 text-[10px] text-muted-foreground">
-                          X
-                          <input
-                            className="h-8 rounded border bg-background px-2 text-xs text-foreground"
-                            type="number"
-                            value={composite.x}
+                  <TabsContent value="emitter" className="mt-0">
+                    <Section title="Emitter Properties">
+                      <PropertiesPanel system={system} onChange={playground.updateActiveParam} />
+                    </Section>
+                  </TabsContent>
+
+                  <TabsContent value="preview-assets" className="mt-0">
+                    <div className="grid gap-3 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]">
+                      <div className="grid content-start gap-3">
+                        <Section title="Composite Preview">
+                          <div className="grid grid-cols-2 gap-2">
+                            <label className="grid gap-1 text-[10px] text-muted-foreground">
+                              X
+                              <input
+                                className="h-8 rounded border bg-background px-2 text-xs text-foreground"
+                                type="number"
+                                value={composite.x}
+                                disabled={isGameComposite}
+                                onChange={(event) => playground.updateParam('compositeX', Number(event.target.value))}
+                              />
+                            </label>
+                            <label className="grid gap-1 text-[10px] text-muted-foreground">
+                              Y
+                              <input
+                                className="h-8 rounded border bg-background px-2 text-xs text-foreground"
+                                type="number"
+                                value={composite.y}
+                                disabled={isGameComposite}
+                                onChange={(event) => playground.updateParam('compositeY', Number(event.target.value))}
+                              />
+                            </label>
+                          </div>
+                          <Separator />
+                          <MovementPatternEditor
+                            movement={composite.movement}
                             disabled={isGameComposite}
-                            onChange={(event) => playground.updateParam('compositeX', Number(event.target.value))}
+                            onChange={playground.updateParam}
                           />
-                        </label>
-                        <label className="grid gap-1 text-[10px] text-muted-foreground">
-                          Y
-                          <input
-                            className="h-8 rounded border bg-background px-2 text-xs text-foreground"
-                            type="number"
-                            value={composite.y}
-                            disabled={isGameComposite}
-                            onChange={(event) => playground.updateParam('compositeY', Number(event.target.value))}
+                        </Section>
+
+                        <Section title="Texture">
+                          <TextureImporter
+                            texturePath={system.texturePath}
+                            texturePreset={system.texturePreset}
+                            textureFilename={system.textureFilename}
+                            onPreset={playground.setTexturePreset}
+                            onPath={playground.setTexturePath}
+                            onUpload={playground.setTextureFromUpload}
                           />
-                        </label>
+                        </Section>
                       </div>
-                      <Separator />
-                      <MovementPatternEditor
-                        movement={composite.movement}
-                        disabled={isGameComposite}
-                        onChange={playground.updateParam}
-                      />
-                    </Section>
-
-                    <Section title="Texture">
-                      <TextureImporter
-                        texturePath={system.texturePath}
-                        texturePreset={system.texturePreset}
-                        textureFilename={system.textureFilename}
-                        onPreset={playground.setTexturePreset}
-                        onPath={playground.setTexturePath}
-                        onUpload={playground.setTextureFromUpload}
-                      />
-                    </Section>
-
-                    <Section title="Shader">
-                      <ShaderEditor
-                        shaderPath={system.shaderPath}
-                        shaderFilename={system.shaderFilename}
-                        shaderSource={system.shaderSource}
-                        error={playground.shaderError}
-                        onApply={playground.setShader}
-                      />
-                    </Section>
 
-                    <Section title="Export">
-                      <ExportPanel onExportCode={playground.exportCode} onExportZip={playground.exportZip} />
-                    </Section>
-                  </div>
-                </div>
+                      <Section title="Shader">
+                        <ShaderEditor
+                          shaderPath={system.shaderPath}
+                          shaderFilename={system.shaderFilename}
+                          shaderSource={system.shaderSource}
+                          error={playground.shaderError}
+                          onApply={playground.setShader}
+                        />
+                      </Section>
+                    </div>
+                  </TabsContent>
+                </Tabs>
               </>
             )}
           </div>

From 77112d627a16f121d2cfc7be1caa28162bfb4cb6 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 18:49:49 -0400
Subject: [PATCH 05/14] feather: add texture anchor and rotation graphs

---
 .../components/PropertiesPanel.tsx            |  23 +-
 .../components/RotationSpinGizmo.tsx          | 178 ++++++++++++++
 .../components/SizeCurveEditor.tsx            |  17 +-
 .../components/TextureOffsetGizmo.tsx         | 224 ++++++++++++++++++
 4 files changed, 436 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/particle-system-playground/components/RotationSpinGizmo.tsx
 create mode 100644 src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx

diff --git a/src/pages/particle-system-playground/components/PropertiesPanel.tsx b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
index 7281112f..30615ca7 100644
--- a/src/pages/particle-system-playground/components/PropertiesPanel.tsx
+++ b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
@@ -9,7 +9,9 @@ import { ColorGradientEditor } from './ColorGradientEditor';
 import { DirectionSpreadGizmo } from './DirectionSpreadGizmo';
 import { MotionPresets } from './MotionPresets';
 import { RangePairField } from './RangePairField';
+import { RotationSpinGizmo } from './RotationSpinGizmo';
 import { SizeCurveEditor } from './SizeCurveEditor';
+import { TextureOffsetGizmo } from './TextureOffsetGizmo';
 
 type Props = {
   system: ParticleSystemPlaygroundSystem;
@@ -56,16 +58,21 @@ const groups: Array<{ title: string; fields: FieldDef[] }> = [
     ],
   },
   {
-    title: 'Rotation And Size',
+    title: 'Shape',
     fields: [
-      { type: 'range', minKey: 'rotationMin', maxKey: 'rotationMax', label: 'Rotation', step: 0.01 },
-      { type: 'range', minKey: 'spinMin', maxKey: 'spinMax', label: 'Spin', step: 0.01 },
-      { key: 'spinVariation', label: 'Spin Variation', min: 0, max: 1, step: 0.01 },
       { key: 'sizeVariation', label: 'Size Variation', min: 0, max: 1, step: 0.01 },
       { key: 'offsetX', label: 'Texture Offset X', step: 1 },
       { key: 'offsetY', label: 'Texture Offset Y', step: 1 },
     ],
   },
+  {
+    title: 'Rotation',
+    fields: [
+      { type: 'range', minKey: 'rotationMin', maxKey: 'rotationMax', label: 'Rotation', step: 0.01 },
+      { type: 'range', minKey: 'spinMin', maxKey: 'spinMax', label: 'Spin', step: 0.01 },
+      { key: 'spinVariation', label: 'Spin Variation', min: 0, max: 1, step: 0.01 },
+    ],
+  },
   {
     title: 'Emitter Offset',
     fields: [
@@ -146,7 +153,11 @@ export function PropertiesPanel({ system, onChange }: Props) {
         </div>
         <div className="grid gap-1">
           <Label className="text-[10px] text-muted-foreground">Sizes</Label>
-          <SizeCurveEditor value={system.properties.sizes ?? '1'} onChange={(v) => onChange('sizes', v)} />
+          <SizeCurveEditor
+            value={system.properties.sizes ?? '1'}
+            variation={system.properties.sizeVariation ?? 0}
+            onChange={(v) => onChange('sizes', v)}
+          />
         </div>
         <div className="grid gap-1">
           <Label className="text-[10px] text-muted-foreground">Color Gradient</Label>
@@ -163,6 +174,8 @@ export function PropertiesPanel({ system, onChange }: Props) {
             <Separator className="flex-1" />
           </div>
           {group.title === 'Direction And Speed' && <DirectionSpreadGizmo system={system} onChange={onChange} />}
+          {group.title === 'Shape' && <TextureOffsetGizmo system={system} onChange={onChange} />}
+          {group.title === 'Rotation' && <RotationSpinGizmo system={system} onChange={onChange} />}
           <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
             {group.fields.map((field) =>
               field.type === 'range' ? (
diff --git a/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx b/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx
new file mode 100644
index 00000000..bfc3dbf8
--- /dev/null
+++ b/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx
@@ -0,0 +1,178 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const H = 260;
+const PAD = 24;
+const TAU = Math.PI * 2;
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+type DragTarget = 'rotationMin' | 'rotationMax' | 'spinMin' | 'spinMax';
+
+function clamp(value: number, range: number): number {
+  return Math.max(-range, Math.min(range, value));
+}
+
+function round(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+function polar(cx: number, cy: number, radius: number, angle: number) {
+  return {
+    x: cx + Math.cos(angle) * radius,
+    y: cy + Math.sin(angle) * radius,
+  };
+}
+
+function angleFromPointer(event: React.PointerEvent<SVGSVGElement>, svg: SVGSVGElement, cx: number, cy: number): number {
+  const rect = svg.getBoundingClientRect();
+  return Math.atan2(event.clientY - rect.top - cy, event.clientX - rect.left - cx);
+}
+
+function arcPath(cx: number, cy: number, radius: number, start: number, end: number) {
+  const startPoint = polar(cx, cy, radius, start);
+  const endPoint = polar(cx, cy, radius, end);
+  let span = end - start;
+  while (span < 0) span += TAU;
+  const largeArc = span > Math.PI ? 1 : 0;
+  return `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 1 ${endPoint.x} ${endPoint.y}`;
+}
+
+export function RotationSpinGizmo({ system, onChange }: Props) {
+  const p = system.properties;
+  const rotationMin = p.rotationMin ?? 0;
+  const rotationMax = p.rotationMax ?? 0;
+  const spinMin = p.spinMin ?? 0;
+  const spinMax = p.spinMax ?? 0;
+  const spinVariation = p.spinVariation ?? 0;
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [svgW, setSvgW] = useState(360);
+  const [dragging, setDragging] = useState<DragTarget | null>(null);
+  const maxAbsSpin = Math.max(Math.abs(spinMin), Math.abs(spinMax), 1);
+  const [spinRange, setSpinRange] = useState(() => Math.ceil((maxAbsSpin * 1.35) / 5) * 5);
+  const spinRangeWasEditedRef = useRef(false);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    setSvgW(el.clientWidth);
+    const ro = new ResizeObserver(([entry]) => setSvgW(entry.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (spinRangeWasEditedRef.current) return;
+    const nextRange = Math.ceil((maxAbsSpin * 1.35) / 5) * 5;
+    setSpinRange((current) => (nextRange > current ? nextRange : current));
+  }, [maxAbsSpin]);
+
+  const cx = svgW / 2;
+  const cy = 96;
+  const radius = Math.max(54, Math.min(svgW - PAD * 2, 150) / 2);
+  const minPoint = polar(cx, cy, radius, rotationMin);
+  const maxPoint = polar(cx, cy, radius, rotationMax);
+  const avgRotation = (rotationMin + rotationMax) / 2;
+  const avgPoint = polar(cx, cy, radius * 0.72, avgRotation);
+  const trackY = H - 42;
+  const trackX1 = PAD;
+  const trackX2 = svgW - PAD;
+  const trackW = Math.max(1, trackX2 - trackX1);
+  const spinToX = (value: number) => trackX1 + ((clamp(value, spinRange) + spinRange) / (spinRange * 2)) * trackW;
+  const stateRef = useRef({ cx, cy, spinRange, trackX1, trackW });
+  stateRef.current = { cx, cy, spinRange, trackX1, trackW };
+
+  const updateSpinRange = useCallback(
+    (nextRange: number) => {
+      if (nextRange <= 0) return;
+      spinRangeWasEditedRef.current = true;
+      setSpinRange(nextRange);
+      const values = {
+        spinMin: clamp(spinMin, nextRange),
+        spinMax: clamp(spinMax, nextRange),
+      };
+      Object.entries(values).forEach(([key, value]) => {
+        const current = system.properties[key as keyof typeof system.properties] as number;
+        if (current !== value) onChange(key, value);
+      });
+    },
+    [onChange, spinMax, spinMin, system.properties],
+  );
+
+  const onPointerMove = useCallback(
+    (event: React.PointerEvent<SVGSVGElement>) => {
+      if (!dragging || !svgRef.current) return;
+      const state = stateRef.current;
+      const rect = svgRef.current.getBoundingClientRect();
+
+      if (dragging === 'rotationMin' || dragging === 'rotationMax') {
+        const angle = angleFromPointer(event, svgRef.current, state.cx, state.cy);
+        onChange(dragging, round(angle));
+        return;
+      }
+
+      const t = (event.clientX - rect.left - state.trackX1) / state.trackW;
+      const value = clamp((t * 2 - 1) * state.spinRange, state.spinRange);
+      onChange(dragging, round(value));
+    },
+    [dragging, onChange],
+  );
+
+  const beginDrag = (event: React.PointerEvent<SVGElement>, target: DragTarget) => {
+    if (target === 'spinMin' || target === 'spinMax') spinRangeWasEditedRef.current = true;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(target);
+  };
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Rotation &amp; Spin</Label>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-muted-foreground">Spin ±</span>
+          <Input
+            className="h-6 w-20 text-xs"
+            type="number"
+            min={0.1}
+            step={1}
+            value={spinRange}
+            onChange={(event) => updateSpinRange(Number(event.target.value))}
+          />
+        </div>
+      </div>
+
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={H}
+        className="touch-none rounded border bg-muted/10"
+        onPointerMove={onPointerMove}
+        onPointerUp={() => setDragging(null)}
+        onPointerLeave={() => setDragging(null)}
+      >
+        <circle cx={cx} cy={cy} r={radius} fill="none" stroke="currentColor" strokeDasharray="3 4" strokeOpacity={0.1} />
+        <path d={arcPath(cx, cy, radius, rotationMin, rotationMax)} fill="none" stroke="var(--chart-2)" strokeWidth={7} strokeOpacity={0.16} />
+        <path d={`M ${cx} ${cy} L ${avgPoint.x} ${avgPoint.y}`} stroke="var(--chart-1)" strokeWidth={2.5} strokeLinecap="round" />
+        <g transform={`translate(${cx} ${cy}) rotate(${(avgRotation * 180) / Math.PI})`}>
+          <rect x="-18" y="-12" width="36" height="24" rx="4" fill="hsl(var(--card))" stroke="currentColor" strokeOpacity={0.35} />
+          <path d="M 8 -7 L 20 0 L 8 7 Z" fill="var(--chart-1)" fillOpacity={0.75} />
+        </g>
+        <circle cx={minPoint.x} cy={minPoint.y} r={6} fill={dragging === 'rotationMin' ? 'var(--chart-2)' : 'hsl(var(--card))'} stroke="var(--chart-2)" strokeWidth={2} onPointerDown={(event) => beginDrag(event, 'rotationMin')} />
+        <circle cx={maxPoint.x} cy={maxPoint.y} r={6} fill={dragging === 'rotationMax' ? 'var(--chart-2)' : 'hsl(var(--card))'} stroke="var(--chart-2)" strokeWidth={2} strokeDasharray="3 2" onPointerDown={(event) => beginDrag(event, 'rotationMax')} />
+
+        <line x1={trackX1} y1={trackY} x2={trackX2} y2={trackY} stroke="currentColor" strokeOpacity={0.18} strokeWidth={4} strokeLinecap="round" />
+        <line x1={spinToX(-spinVariation * spinRange)} y1={trackY - 10} x2={spinToX(spinVariation * spinRange)} y2={trackY - 10} stroke="var(--chart-3)" strokeOpacity={0.45} strokeWidth={5} strokeLinecap="round" />
+        <text x={trackX1} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>CCW</text>
+        <text x={cx - 4} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>0</text>
+        <text x={trackX2 - 18} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>CW</text>
+        <circle cx={spinToX(spinMin)} cy={trackY} r={6} fill={dragging === 'spinMin' ? 'var(--chart-1)' : 'hsl(var(--card))'} stroke="var(--chart-1)" strokeWidth={2} onPointerDown={(event) => beginDrag(event, 'spinMin')} />
+        <circle cx={spinToX(spinMax)} cy={trackY} r={6} fill={dragging === 'spinMax' ? 'var(--chart-1)' : 'hsl(var(--card))'} stroke="var(--chart-1)" strokeWidth={2} strokeDasharray="3 2" onPointerDown={(event) => beginDrag(event, 'spinMax')} />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/pages/particle-system-playground/components/SizeCurveEditor.tsx b/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
index 8ca5babb..0269ce49 100644
--- a/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
+++ b/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
@@ -19,7 +19,15 @@ function serialize(values: number[]): string {
   return values.map((v) => Math.max(0, v).toFixed(3)).join(', ');
 }
 
-export function SizeCurveEditor({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+export function SizeCurveEditor({
+  value,
+  variation = 0,
+  onChange,
+}: {
+  value: string;
+  variation?: number;
+  onChange: (value: string) => void;
+}) {
   const values = parse(value);
   const count = values.length;
   const [dragging, setDragging] = useState<number | null>(null);
@@ -48,7 +56,11 @@ export function SizeCurveEditor({ value, onChange }: { value: string; onChange:
   });
 
   const points = values.map((v, i) => toSvg(i, v));
+  const upperPoints = values.map((v, i) => toSvg(i, v * (1 + variation)));
+  const lowerPoints = values.map((v, i) => toSvg(i, Math.max(0, v * (1 - variation))));
   const path = catmullRomPath(points);
+  const upperPath = catmullRomPath(upperPoints);
+  const lowerPath = catmullRomPath([...lowerPoints].reverse());
 
   const baselineY = Math.max(PAD.top, Math.min(PAD.top + innerH, PAD.top + (1 - (0 - axisMin) / range) * innerH));
 
@@ -102,6 +114,9 @@ export function SizeCurveEditor({ value, onChange }: { value: string; onChange:
           fill="var(--chart-1)"
           fillOpacity={0.15}
         />
+        {variation > 0 && (
+          <path d={`${upperPath} L ${lowerPath.slice(1)} Z`} fill="var(--chart-2)" fillOpacity={0.14} />
+        )}
         <path d={path} fill="none" stroke="var(--chart-1)" strokeWidth={1.5} strokeLinecap="round" />
         {points.map((pt, i) => (
           <circle
diff --git a/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx b/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx
new file mode 100644
index 00000000..1d7c519c
--- /dev/null
+++ b/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx
@@ -0,0 +1,224 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useConfigStore } from '@/store/config';
+import { useSettingsStore } from '@/store/settings';
+import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import { isWeb } from '@/utils/platform';
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+const H = 220;
+const PAD = 26;
+
+type Props = {
+  system: ParticleSystemPlaygroundSystem;
+  onChange: (key: string, value: string | number | boolean) => void;
+};
+
+function clamp(value: number, range: number): number {
+  return Math.max(-range, Math.min(range, value));
+}
+
+function round(value: number): number {
+  return Math.round(value * 10) / 10;
+}
+
+function resolveAssetPath(src: string, sourceDir: string): string {
+  if (!sourceDir || src.startsWith('data:') || src.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(src)) {
+    return src;
+  }
+  return sourceDir.replace(/[/\\]+$/, '') + '/' + src;
+}
+
+function canResolveAssetPath(src: string, sourceDir: string): boolean {
+  return src.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(src) || !!sourceDir;
+}
+
+function svgPointFromPointer(event: React.PointerEvent<SVGSVGElement>, svg: SVGSVGElement) {
+  const point = svg.createSVGPoint();
+  point.x = event.clientX;
+  point.y = event.clientY;
+  const matrix = svg.getScreenCTM();
+  if (!matrix) return null;
+  return point.matrixTransform(matrix.inverse());
+}
+
+function TextureFallback({ preset, cx, cy, size }: { preset: string; cx: number; cy: number; size: number }) {
+  const r = size * 0.3;
+  if (preset === 'ring') {
+    return <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--chart-1)" strokeWidth={size * 0.12} opacity={0.75} />;
+  }
+  if (preset === 'star') {
+    const points = Array.from({ length: 10 }, (_, index) => {
+      const angle = -Math.PI / 2 + (index / 10) * Math.PI * 2;
+      const radius = index % 2 === 0 ? r : r * 0.45;
+      return `${cx + Math.cos(angle) * radius},${cy + Math.sin(angle) * radius}`;
+    }).join(' ');
+    return <polygon points={points} fill="var(--chart-1)" opacity={0.78} />;
+  }
+  if (preset === 'spiral') {
+    return (
+      <path
+        d={`M ${cx - r * 0.8} ${cy} C ${cx - r * 0.4} ${cy - r} ${cx + r} ${cy - r * 0.5} ${cx + r * 0.45} ${cy + r * 0.1} C ${cx} ${cy + r * 0.6} ${cx - r * 0.1} ${cy - r * 0.25} ${cx + r * 0.45} ${cy - r * 0.2}`}
+        fill="none"
+        stroke="var(--chart-1)"
+        strokeWidth={size * 0.1}
+        strokeLinecap="round"
+        opacity={0.78}
+      />
+    );
+  }
+  if (preset === 'light') {
+    return (
+      <>
+        <circle cx={cx} cy={cy} r={r * 1.1} fill="var(--chart-1)" opacity={0.14} />
+        <circle cx={cx} cy={cy} r={r * 0.55} fill="var(--chart-1)" opacity={0.62} />
+      </>
+    );
+  }
+  return <circle cx={cx} cy={cy} r={r} fill="var(--chart-1)" opacity={0.75} />;
+}
+
+export function TextureOffsetGizmo({ system, onChange }: Props) {
+  const offsetX = system.properties.offsetX ?? 0;
+  const offsetY = system.properties.offsetY ?? 0;
+  const manualSourceDir = useSettingsStore((state) => state.assetSourceDir);
+  const configSourceDir = useConfigStore((state) => state.config?.sourceDir ?? '');
+  const sourceDir = manualSourceDir || configSourceDir;
+  const svgRef = useRef<SVGSVGElement>(null);
+  const maxAbs = Math.max(Math.abs(offsetX), Math.abs(offsetY), 32);
+  const [range, setRange] = useState(() => Math.ceil((maxAbs * 1.25) / 16) * 16);
+  const [dragging, setDragging] = useState(false);
+  const cx = 150;
+  const cy = H / 2;
+  const previewSize = Math.min(128, H - PAD * 2);
+  const previewX = cx - previewSize / 2;
+  const previewY = cy - previewSize / 2;
+  const scale = previewSize / (range * 2);
+  const anchorX = cx + clamp(offsetX, range) * scale;
+  const anchorY = cy + clamp(offsetY, range) * scale;
+  const textureSrc = useMemo(() => {
+    if (!system.texturePath || isWeb() || !canResolveAssetPath(system.texturePath, sourceDir)) return '';
+    return convertFileSrc(resolveAssetPath(system.texturePath, sourceDir));
+  }, [sourceDir, system.texturePath]);
+
+  const updateRange = useCallback(
+    (nextRange: number) => {
+      if (nextRange <= 0) return;
+      setRange(nextRange);
+      const values = {
+        offsetX: clamp(offsetX, nextRange),
+        offsetY: clamp(offsetY, nextRange),
+      };
+      Object.entries(values).forEach(([key, value]) => {
+        const current = system.properties[key as keyof typeof system.properties] as number;
+        if (current !== value) onChange(key, value);
+      });
+    },
+    [offsetX, offsetY, onChange, system.properties],
+  );
+
+  const updateFromPointer = useCallback(
+    (event: React.PointerEvent<SVGSVGElement>) => {
+      if (!svgRef.current || !dragging) return;
+      const point = svgPointFromPointer(event, svgRef.current);
+      if (!point) return;
+      const nextX = clamp((point.x - cx) / scale, range);
+      const nextY = clamp((point.y - cy) / scale, range);
+      onChange('offsetX', round(nextX));
+      onChange('offsetY', round(nextY));
+    },
+    [cx, cy, dragging, onChange, range, scale],
+  );
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Texture Anchor</Label>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-muted-foreground">Range ±</span>
+          <Input
+            className="h-6 w-20 text-xs"
+            type="number"
+            min={1}
+            step={8}
+            value={range}
+            onChange={(event) => updateRange(Number(event.target.value))}
+          />
+        </div>
+      </div>
+
+      <svg
+        ref={svgRef}
+        width="100%"
+        height={H}
+        viewBox={`0 0 300 ${H}`}
+        className="touch-none rounded border bg-muted/10"
+        onPointerMove={updateFromPointer}
+        onPointerUp={() => setDragging(false)}
+        onPointerLeave={() => setDragging(false)}
+      >
+        <defs>
+          <pattern id="texture-offset-checker" width="12" height="12" patternUnits="userSpaceOnUse">
+            <rect width="12" height="12" fill="hsl(var(--card))" />
+            <rect width="6" height="6" fill="currentColor" opacity={0.05} />
+            <rect x="6" y="6" width="6" height="6" fill="currentColor" opacity={0.05} />
+          </pattern>
+          <clipPath id="texture-offset-preview-clip">
+            <rect x={previewX} y={previewY} width={previewSize} height={previewSize} rx={8} />
+          </clipPath>
+        </defs>
+        <rect
+          x={previewX}
+          y={previewY}
+          width={previewSize}
+          height={previewSize}
+          rx={8}
+          fill="url(#texture-offset-checker)"
+          stroke="currentColor"
+          strokeOpacity={0.2}
+        />
+        {textureSrc ? (
+          <image
+            href={textureSrc}
+            x={previewX}
+            y={previewY}
+            width={previewSize}
+            height={previewSize}
+            preserveAspectRatio="xMidYMid meet"
+            clipPath="url(#texture-offset-preview-clip)"
+          />
+        ) : (
+          <TextureFallback preset={system.texturePreset} cx={cx} cy={cy} size={previewSize} />
+        )}
+        <path
+          d={`M ${previewX} ${cy} H ${previewX + previewSize} M ${cx} ${previewY} V ${previewY + previewSize}`}
+          stroke="currentColor"
+          strokeOpacity={0.16}
+          strokeDasharray="4 4"
+        />
+        <circle cx={cx} cy={cy} r={4} fill="currentColor" fillOpacity={0.35} />
+        <line x1={cx} y1={cy} x2={anchorX} y2={anchorY} stroke="var(--chart-1)" strokeWidth={2} strokeOpacity={0.7} />
+        <circle
+          cx={anchorX}
+          cy={anchorY}
+          r={8}
+          fill={dragging ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          style={{ cursor: 'grab' }}
+          onPointerDown={(event) => {
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setDragging(true);
+          }}
+        />
+        <text x={previewX} y={previewY + previewSize + 18} fontSize={10} fill="currentColor" fillOpacity={0.5}>
+          origin
+        </text>
+        <text x={anchorX + 10} y={anchorY - 8} fontSize={10} fill="currentColor" fillOpacity={0.55}>
+          offset
+        </text>
+      </svg>
+    </div>
+  );
+}

From 8795b915db20daa91a5cdc75d648c37193117046 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 19:35:36 -0400
Subject: [PATCH 06/14] feather: improve graphs

---
 .../components/CircularForceGizmo.tsx         | 137 +++++++++++---
 .../components/ColorGradientEditor.tsx        |  52 ++++--
 .../components/DampingRangeEditor.tsx         |  67 +++++--
 .../components/DirectionSpreadGizmo.tsx       |  61 ++++++-
 .../components/LinearAccelPlane.tsx           | 144 +++++++++++----
 .../components/MotionPresets.tsx              |  21 ++-
 .../components/PropertiesPanel.tsx            |  37 ++--
 .../components/RangePairField.tsx             |   2 +-
 .../components/RotationSpinGizmo.tsx          | 167 ++++++++++++++++--
 .../components/ShaderEditor.tsx               |  19 +-
 .../components/SizeCurveEditor.tsx            |   2 +-
 .../components/TextureImporter.tsx            |   2 +-
 .../components/TextureOffsetGizmo.tsx         |   6 +-
 13 files changed, 576 insertions(+), 141 deletions(-)

diff --git a/src/pages/particle-system-playground/components/CircularForceGizmo.tsx b/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
index e7646816..508e0d21 100644
--- a/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
+++ b/src/pages/particle-system-playground/components/CircularForceGizmo.tsx
@@ -49,12 +49,12 @@ export function CircularForceGizmo({ system, onChange }: Props) {
   const cy = H / 2;
 
   const maxAbs = Math.max(Math.abs(radialMin), Math.abs(radialMax), Math.abs(tangMin), Math.abs(tangMax), 50);
-  const [range, setRange] = useState(() => Math.ceil(maxAbs * 1.5 / 50) * 50);
+  const [range, setRange] = useState(() => Math.ceil((maxAbs * 1.5) / 50) * 50);
   const rangeWasEditedRef = useRef(false);
 
   useEffect(() => {
     if (rangeWasEditedRef.current) return;
-    const nextRange = Math.ceil(maxAbs * 1.35 / 50) * 50;
+    const nextRange = Math.ceil((maxAbs * 1.35) / 50) * 50;
     setRange((current) => (nextRange > current ? nextRange : current));
   }, [maxAbs]);
 
@@ -141,7 +141,9 @@ export function CircularForceGizmo({ system, onChange }: Props) {
   return (
     <div className="grid gap-2">
       <div className="flex items-center justify-between">
-        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Radial &amp; Tangential</span>
+        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+          Radial &amp; Tangential
+        </span>
         <div className="flex items-center gap-2">
           <span className="text-[10px] text-muted-foreground">Range ±</span>
           <Input
@@ -159,24 +161,40 @@ export function CircularForceGizmo({ system, onChange }: Props) {
         ref={svgRef}
         width="100%"
         height={H}
-        className="touch-none rounded border bg-muted/10"
+        className="touch-none rounded border bg-muted/10 select-none"
         onPointerMove={onPointerMove}
         onPointerUp={stopDrag}
         onPointerLeave={stopDrag}
       >
         {/* Reference circles */}
         {[0.33, 0.66, 1].map((t) => (
-          <circle key={t} cx={cx} cy={cy} r={halfSide * t}
-            fill="none" stroke="currentColor" strokeOpacity={0.06} strokeDasharray="3 3" />
+          <circle
+            key={t}
+            cx={cx}
+            cy={cy}
+            r={halfSide * t}
+            fill="none"
+            stroke="currentColor"
+            strokeOpacity={0.06}
+            strokeDasharray="3 3"
+          />
         ))}
 
         {/* Axes */}
         <line x1={cx - halfSide} y1={cy} x2={cx + halfSide} y2={cy} stroke="currentColor" strokeOpacity={0.22} />
         <line x1={cx} y1={cy - halfSide} x2={cx} y2={cy + halfSide} stroke="currentColor" strokeOpacity={0.22} />
-        <text x={cx + halfSide - 35} y={cy - 6} fontSize={9} fill="currentColor" fillOpacity={0.4}>outward</text>
-        <text x={cx - halfSide + 4} y={cy - 6} fontSize={9} fill="currentColor" fillOpacity={0.4}>inward</text>
-        <text x={cx + 5} y={cy - halfSide + 12} fontSize={9} fill="currentColor" fillOpacity={0.4}>CW</text>
-        <text x={cx + 5} y={cy + halfSide - 5} fontSize={9} fill="currentColor" fillOpacity={0.4}>CCW</text>
+        <text x={cx + halfSide - 35} y={cy - 6} fontSize={9} fill="currentColor" fillOpacity={0.4}>
+          outward
+        </text>
+        <text x={cx - halfSide + 4} y={cy - 6} fontSize={9} fill="currentColor" fillOpacity={0.4}>
+          inward
+        </text>
+        <text x={cx + 5} y={cy - halfSide + 12} fontSize={9} fill="currentColor" fillOpacity={0.4}>
+          CW
+        </text>
+        <text x={cx + 5} y={cy + halfSide - 5} fontSize={9} fill="currentColor" fillOpacity={0.4}>
+          CCW
+        </text>
 
         {/* Radial arrows around emitter */}
         {arrows8.map(({ bx, by, tx, ty, angle }, i) => (
@@ -184,7 +202,11 @@ export function CircularForceGizmo({ system, onChange }: Props) {
             <line x1={bx} y1={by} x2={tx} y2={ty} stroke="var(--chart-1)" strokeOpacity={0.55} strokeWidth={2} />
             <path
               d={`M ${tx} ${ty} L ${tx + Math.cos(angle + 2.5) * 5} ${ty + Math.sin(angle + 2.5) * 5} M ${tx} ${ty} L ${tx + Math.cos(angle - 2.5) * 5} ${ty + Math.sin(angle - 2.5) * 5}`}
-              stroke="var(--chart-1)" strokeOpacity={0.55} strokeWidth={1.25} fill="none" strokeLinecap="round"
+              stroke="var(--chart-1)"
+              strokeOpacity={0.55}
+              strokeWidth={1.25}
+              fill="none"
+              strokeLinecap="round"
             />
           </g>
         ))}
@@ -194,7 +216,11 @@ export function CircularForceGizmo({ system, onChange }: Props) {
           <>
             <path
               d={arcArrow(cx, cy, tangArcR, -Math.PI / 2, -Math.PI / 2 + (tangCW ? tangArcSpan : -tangArcSpan))}
-              fill="none" stroke="var(--chart-2)" strokeWidth={2} strokeOpacity={0.6} strokeLinecap="round"
+              fill="none"
+              stroke="var(--chart-2)"
+              strokeWidth={2}
+              strokeOpacity={0.6}
+              strokeLinecap="round"
             />
             {/* arrowhead at end of arc */}
             {(() => {
@@ -205,7 +231,11 @@ export function CircularForceGizmo({ system, onChange }: Props) {
               return (
                 <path
                   d={`M ${ex} ${ey} L ${ex + Math.cos(ta + 2.5) * 6} ${ey + Math.sin(ta + 2.5) * 6} M ${ex} ${ey} L ${ex + Math.cos(ta - 2.5) * 6} ${ey + Math.sin(ta - 2.5) * 6}`}
-                  stroke="var(--chart-2)" strokeWidth={1.5} strokeOpacity={0.6} fill="none" strokeLinecap="round"
+                  stroke="var(--chart-2)"
+                  strokeWidth={1.5}
+                  strokeOpacity={0.6}
+                  fill="none"
+                  strokeLinecap="round"
                 />
               );
             })()}
@@ -213,67 +243,118 @@ export function CircularForceGizmo({ system, onChange }: Props) {
         )}
 
         {/* Emitter circle */}
-        <circle cx={cx} cy={cy} r={EMITTER_R} fill="hsl(var(--card))" stroke="currentColor" strokeOpacity={0.35} strokeWidth={1.5} />
+        <circle
+          cx={cx}
+          cy={cy}
+          r={EMITTER_R}
+          fill="hsl(var(--card))"
+          stroke="currentColor"
+          strokeOpacity={0.35}
+          strokeWidth={1.5}
+        />
         <circle cx={cx} cy={cy} r={3} fill="currentColor" fillOpacity={0.4} />
 
         {/* Radial handles (horizontal axis) */}
-        <circle cx={radialMinX} cy={cy} r={6}
+        <circle
+          cx={radialMinX}
+          cy={cy}
+          r={6}
           fill={dragging === 'radialMin' ? 'var(--chart-1)' : 'hsl(var(--card))'}
-          stroke="var(--chart-1)" strokeWidth={2} style={{ cursor: 'ew-resize' }}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          style={{ cursor: 'ew-resize' }}
           onPointerDown={(e) => {
             rangeWasEditedRef.current = true;
             e.currentTarget.setPointerCapture(e.pointerId);
             setDragging('radialMin');
           }}
         />
-        <circle cx={radialMaxX} cy={cy} r={6}
+        <text x={radialMinX} y={cy - 10} fontSize={8} fill="var(--chart-1)" fillOpacity={0.7} textAnchor="middle">
+          min
+        </text>
+        <circle
+          cx={radialMaxX}
+          cy={cy}
+          r={6}
           fill={dragging === 'radialMax' ? 'var(--chart-1)' : 'hsl(var(--card))'}
-          stroke="var(--chart-1)" strokeWidth={2} strokeDasharray="3 2" style={{ cursor: 'ew-resize' }}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          strokeDasharray="3 2"
+          style={{ cursor: 'ew-resize' }}
           onPointerDown={(e) => {
             rangeWasEditedRef.current = true;
             e.currentTarget.setPointerCapture(e.pointerId);
             setDragging('radialMax');
           }}
         />
+        <text x={radialMaxX} y={cy - 10} fontSize={8} fill="var(--chart-1)" fillOpacity={0.7} textAnchor="middle">
+          max
+        </text>
 
         {/* Tangential handles (vertical axis) */}
-        <circle cx={cx} cy={tangMinY} r={6}
+        <circle
+          cx={cx}
+          cy={tangMinY}
+          r={6}
           fill={dragging === 'tangMin' ? 'var(--chart-2)' : 'hsl(var(--card))'}
-          stroke="var(--chart-2)" strokeWidth={2} style={{ cursor: 'ns-resize' }}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          style={{ cursor: 'ns-resize' }}
           onPointerDown={(e) => {
             rangeWasEditedRef.current = true;
             e.currentTarget.setPointerCapture(e.pointerId);
             setDragging('tangMin');
           }}
         />
-        <circle cx={cx} cy={tangMaxY} r={6}
+        <text x={cx + 10} y={tangMinY + 3} fontSize={8} fill="var(--chart-2)" fillOpacity={0.7}>
+          min
+        </text>
+        <circle
+          cx={cx}
+          cy={tangMaxY}
+          r={6}
           fill={dragging === 'tangMax' ? 'var(--chart-2)' : 'hsl(var(--card))'}
-          stroke="var(--chart-2)" strokeWidth={2} strokeDasharray="3 2" style={{ cursor: 'ns-resize' }}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          strokeDasharray="3 2"
+          style={{ cursor: 'ns-resize' }}
           onPointerDown={(e) => {
             rangeWasEditedRef.current = true;
             e.currentTarget.setPointerCapture(e.pointerId);
             setDragging('tangMax');
           }}
         />
+        <text x={cx + 10} y={tangMaxY + 3} fontSize={8} fill="var(--chart-2)" fillOpacity={0.7}>
+          max
+        </text>
 
         {/* Legends */}
         <circle cx={20} cy={H - 14} r={4} fill="var(--chart-1)" />
-        <text x={28} y={H - 10} fontSize={9} fill="currentColor" fillOpacity={0.5}>radial (± outward)</text>
+        <text x={28} y={H - 10} fontSize={9} fill="currentColor" fillOpacity={0.5}>
+          radial (± outward)
+        </text>
         <circle cx={120} cy={H - 14} r={4} fill="var(--chart-2)" />
-        <text x={128} y={H - 10} fontSize={9} fill="currentColor" fillOpacity={0.5}>tang (± CW)</text>
+        <text x={128} y={H - 10} fontSize={9} fill="currentColor" fillOpacity={0.5}>
+          tang (± CW)
+        </text>
       </svg>
 
       <div className="grid grid-cols-2 gap-2">
-        {([
+        {[
           { label: 'Radial Min', key: 'radialAccelMin', val: radialMin },
           { label: 'Radial Max', key: 'radialAccelMax', val: radialMax },
           { label: 'Tang Min', key: 'tangentialAccelMin', val: tangMin },
           { label: 'Tang Max', key: 'tangentialAccelMax', val: tangMax },
-        ]).map(({ label, key, val }) => (
+        ].map(({ label, key, val }) => (
           <div key={key} className="grid gap-1">
             <Label className="text-[10px] text-muted-foreground">{label}</Label>
-            <Input className="h-8 text-xs" type="number" step={1} value={val}
-              onChange={(e) => onChange(key, Number(e.target.value))} />
+            <Input
+              className="h-8 text-xs"
+              type="number"
+              step={1}
+              value={val}
+              onChange={(e) => onChange(key, Number(e.target.value))}
+            />
           </div>
         ))}
       </div>
diff --git a/src/pages/particle-system-playground/components/ColorGradientEditor.tsx b/src/pages/particle-system-playground/components/ColorGradientEditor.tsx
index 1289696a..79a75435 100644
--- a/src/pages/particle-system-playground/components/ColorGradientEditor.tsx
+++ b/src/pages/particle-system-playground/components/ColorGradientEditor.tsx
@@ -107,20 +107,27 @@ export function ColorGradientEditor({ value, onChange }: { value: string; onChan
         ref={alphaRef}
         width="100%"
         height={ALPHA_H}
-        className="rounded border bg-card touch-none"
+        className="rounded border bg-card touch-none select-none"
         onPointerMove={onAlphaPointerMove}
         onPointerUp={stopAlphaDrag}
         onPointerLeave={stopAlphaDrag}
       >
         <line
-          x1={ALPHA_PAD.left} y1={ALPHA_PAD.top + innerH * 0.5}
-          x2={svgW - ALPHA_PAD.right} y2={ALPHA_PAD.top + innerH * 0.5}
-          stroke="currentColor" strokeOpacity={0.07}
+          x1={ALPHA_PAD.left}
+          y1={ALPHA_PAD.top + innerH * 0.5}
+          x2={svgW - ALPHA_PAD.right}
+          y2={ALPHA_PAD.top + innerH * 0.5}
+          stroke="currentColor"
+          strokeOpacity={0.07}
         />
         <line
-          x1={ALPHA_PAD.left} y1={baselineY}
-          x2={svgW - ALPHA_PAD.right} y2={baselineY}
-          stroke="currentColor" strokeOpacity={0.2} strokeDasharray="3 3"
+          x1={ALPHA_PAD.left}
+          y1={baselineY}
+          x2={svgW - ALPHA_PAD.right}
+          y2={baselineY}
+          stroke="currentColor"
+          strokeOpacity={0.2}
+          strokeDasharray="3 3"
         />
         <defs>
           <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
@@ -141,9 +148,13 @@ export function ColorGradientEditor({ value, onChange }: { value: string; onChan
         <path d={alphaPath} fill="none" stroke="var(--chart-2)" strokeWidth={1.5} strokeLinecap="round" />
         {alphaPoints.map((pt, i) => (
           <circle
-            key={i} cx={pt.x} cy={pt.y} r={5}
+            key={i}
+            cx={pt.x}
+            cy={pt.y}
+            r={5}
             fill={selected === i ? 'var(--chart-2)' : 'hsl(var(--card))'}
-            stroke="var(--chart-2)" strokeWidth={2}
+            stroke="var(--chart-2)"
+            strokeWidth={2}
             style={{ cursor: 'ns-resize' }}
             onPointerDown={(e) => {
               e.currentTarget.setPointerCapture(e.pointerId);
@@ -202,23 +213,36 @@ export function ColorGradientEditor({ value, onChange }: { value: string; onChan
           <Label className="text-[10px]">Alpha</Label>
           <Input
             className="h-8 text-xs"
-            type="number" min={0} max={1} step={0.01}
+            type="number"
+            min={0}
+            max={1}
+            step={0.01}
             value={stop.a}
             onChange={(event) => update(selected, { a: clamp(Number(event.target.value)) })}
           />
         </div>
         <div className="flex gap-1">
           <Button
-            size="icon" variant="outline" className="size-8"
+            size="icon"
+            variant="outline"
+            className="size-8"
             disabled={stops.length >= 8}
-            onClick={() => { onChange(serialize([...stops, { ...stop }])); setSelected(stops.length); }}
+            onClick={() => {
+              onChange(serialize([...stops, { ...stop }]));
+              setSelected(stops.length);
+            }}
           >
             <PlusIcon className="size-4" />
           </Button>
           <Button
-            size="icon" variant="outline" className="size-8"
+            size="icon"
+            variant="outline"
+            className="size-8"
             disabled={stops.length <= 1}
-            onClick={() => { onChange(serialize(stops.filter((_, index) => index !== selected))); setSelected(Math.max(0, selected - 1)); }}
+            onClick={() => {
+              onChange(serialize(stops.filter((_, index) => index !== selected)));
+              setSelected(Math.max(0, selected - 1));
+            }}
           >
             <Trash2Icon className="size-4" />
           </Button>
diff --git a/src/pages/particle-system-playground/components/DampingRangeEditor.tsx b/src/pages/particle-system-playground/components/DampingRangeEditor.tsx
index cb3eb202..10ec9122 100644
--- a/src/pages/particle-system-playground/components/DampingRangeEditor.tsx
+++ b/src/pages/particle-system-playground/components/DampingRangeEditor.tsx
@@ -12,10 +12,7 @@ type Props = {
   onChange: (key: string, value: string | number | boolean) => void;
 };
 
-function decayCurve(
-  svgW: number,
-  dampingValue: number,
-): string {
+function decayCurve(svgW: number, dampingValue: number): string {
   const innerW = svgW - PAD.left - PAD.right;
   const innerH = H - PAD.top - PAD.bottom;
   const points: string[] = [];
@@ -75,12 +72,7 @@ export function DampingRangeEditor({ system, onChange }: Props) {
     <div className="grid gap-2">
       <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Damping</span>
 
-      <svg
-        ref={svgRef}
-        width="100%"
-        height={H}
-        className="rounded border bg-card"
-      >
+      <svg ref={svgRef} width="100%" height={H} className="rounded border bg-card select-none">
         {/* Guide lines at 25%, 50%, 75% velocity */}
         {[0.25, 0.5, 0.75].map((t) => (
           <line
@@ -109,16 +101,59 @@ export function DampingRangeEditor({ system, onChange }: Props) {
         <path d={bandPath} fill="var(--chart-1)" fillOpacity={0.1} />
 
         {/* Min curve */}
-        <path d={minPath} fill="none" stroke="var(--chart-1)" strokeWidth={1.5} strokeOpacity={0.6} strokeLinecap="round" />
+        <path
+          d={minPath}
+          fill="none"
+          stroke="var(--chart-1)"
+          strokeWidth={1.5}
+          strokeOpacity={0.6}
+          strokeLinecap="round"
+        />
+        <text
+          x={svgW - PAD.right - 2}
+          y={minPoints[STEPS].y - 3}
+          fontSize={8}
+          fill="var(--chart-1)"
+          fillOpacity={0.65}
+          textAnchor="end"
+        >
+          min
+        </text>
 
         {/* Max curve */}
-        <path d={maxPath} fill="none" stroke="var(--chart-1)" strokeWidth={1.5} strokeDasharray="4 3" strokeOpacity={0.9} strokeLinecap="round" />
+        <path
+          d={maxPath}
+          fill="none"
+          stroke="var(--chart-1)"
+          strokeWidth={1.5}
+          strokeDasharray="4 3"
+          strokeOpacity={0.9}
+          strokeLinecap="round"
+        />
+        <text
+          x={svgW - PAD.right - 2}
+          y={maxPointsRev[STEPS].y - 3}
+          fontSize={8}
+          fill="var(--chart-1)"
+          fillOpacity={0.9}
+          textAnchor="end"
+        >
+          max
+        </text>
 
         {/* Axis labels */}
-        <text x={PAD.left} y={PAD.top - 1} fontSize={8} fill="currentColor" fillOpacity={0.35}>1.0</text>
-        <text x={PAD.left} y={PAD.top + innerH * 0.5 + 3} fontSize={8} fill="currentColor" fillOpacity={0.25}>0.5</text>
-        <text x={svgW - PAD.right - 6} y={PAD.top + 8} fontSize={8} fill="currentColor" fillOpacity={0.25}>t</text>
-        <text x={PAD.left} y={H - 2} fontSize={8} fill="currentColor" fillOpacity={0.25}>velocity decay</text>
+        <text x={PAD.left} y={PAD.top - 1} fontSize={8} fill="currentColor" fillOpacity={0.35}>
+          1.0
+        </text>
+        <text x={PAD.left} y={PAD.top + innerH * 0.5 + 3} fontSize={8} fill="currentColor" fillOpacity={0.25}>
+          0.5
+        </text>
+        <text x={svgW - PAD.right - 6} y={PAD.top + 8} fontSize={8} fill="currentColor" fillOpacity={0.25}>
+          t
+        </text>
+        <text x={PAD.left} y={H - 2} fontSize={8} fill="currentColor" fillOpacity={0.25}>
+          velocity decay
+        </text>
       </svg>
 
       <div className="grid grid-cols-2 gap-2">
diff --git a/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx b/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx
index c475976f..9be8fc38 100644
--- a/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx
+++ b/src/pages/particle-system-playground/components/DirectionSpreadGizmo.tsx
@@ -57,7 +57,12 @@ function sectorPath(cx: number, cy: number, radius: number, start: number, end:
   return `M ${cx} ${cy} L ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 1 ${endPoint.x} ${endPoint.y} Z`;
 }
 
-function angleFromPointer(event: React.PointerEvent<SVGSVGElement>, svg: SVGSVGElement, cx: number, cy: number): number {
+function angleFromPointer(
+  event: React.PointerEvent<SVGSVGElement>,
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+): number {
   const rect = svg.getBoundingClientRect();
   return Math.atan2(event.clientY - rect.top - cy, event.clientX - rect.left - cx);
 }
@@ -124,7 +129,9 @@ export function DirectionSpreadGizmo({ system, onChange }: Props) {
   return (
     <div className="grid gap-2">
       <div className="flex items-center justify-between gap-2">
-        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Direction &amp; Spread</Label>
+        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+          Direction &amp; Spread
+        </Label>
         <div className="flex gap-3 text-[10px] text-muted-foreground">
           <span>{round(direction)} rad</span>
           <span>{round(spread)} spread</span>
@@ -135,16 +142,28 @@ export function DirectionSpreadGizmo({ system, onChange }: Props) {
         ref={svgRef}
         width="100%"
         height={H}
-        className="touch-none rounded border bg-muted/10"
+        className="touch-none rounded border bg-muted/10 select-none"
         onPointerMove={onPointerMove}
         onPointerUp={stopDrag}
         onPointerLeave={stopDrag}
       >
-        <circle cx={cx} cy={cy} r={radius} fill="none" stroke="currentColor" strokeDasharray="3 4" strokeOpacity={0.1} />
+        <circle
+          cx={cx}
+          cy={cy}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeDasharray="3 4"
+          strokeOpacity={0.1}
+        />
         <line x1={cx - radius} y1={cy} x2={cx + radius} y2={cy} stroke="currentColor" strokeOpacity={0.12} />
         <line x1={cx} y1={cy - radius} x2={cx} y2={cy + radius} stroke="currentColor" strokeOpacity={0.12} />
-        <text x={cx + radius - 12} y={cy - 5} fontSize={9} fill="currentColor" fillOpacity={0.35}>0</text>
-        <text x={cx + 5} y={cy + radius - 6} fontSize={9} fill="currentColor" fillOpacity={0.35}>+π/2</text>
+        <text x={cx + radius - 12} y={cy - 5} fontSize={9} fill="currentColor" fillOpacity={0.35}>
+          0
+        </text>
+        <text x={cx + 5} y={cy + radius - 6} fontSize={9} fill="currentColor" fillOpacity={0.35}>
+          +π/2
+        </text>
 
         <path d={sectorPath(cx, cy, radius, startAngle, endAngle, spread)} fill="var(--chart-2)" fillOpacity={0.12} />
         <path d={rayPath(cx, cy, radius, startAngle)} stroke="var(--chart-2)" strokeWidth={1.5} strokeDasharray="5 4" />
@@ -162,6 +181,16 @@ export function DirectionSpreadGizmo({ system, onChange }: Props) {
           style={{ cursor: 'grab' }}
           onPointerDown={(event) => beginDrag(event, 'direction')}
         />
+        <text
+          x={directionPoint.x + (directionPoint.x >= cx ? 10 : -10)}
+          y={directionPoint.y - 5}
+          fontSize={8}
+          fill="var(--chart-1)"
+          fillOpacity={0.8}
+          textAnchor={directionPoint.x >= cx ? 'start' : 'end'}
+        >
+          dir
+        </text>
         <circle
           cx={startPoint.x}
           cy={startPoint.y}
@@ -172,6 +201,16 @@ export function DirectionSpreadGizmo({ system, onChange }: Props) {
           style={{ cursor: 'grab' }}
           onPointerDown={(event) => beginDrag(event, 'spread-start')}
         />
+        <text
+          x={startPoint.x + (startPoint.x >= cx ? 9 : -9)}
+          y={startPoint.y - 4}
+          fontSize={8}
+          fill="var(--chart-2)"
+          fillOpacity={0.7}
+          textAnchor={startPoint.x >= cx ? 'start' : 'end'}
+        >
+          start
+        </text>
         <circle
           cx={endPoint.x}
           cy={endPoint.y}
@@ -182,6 +221,16 @@ export function DirectionSpreadGizmo({ system, onChange }: Props) {
           style={{ cursor: 'grab' }}
           onPointerDown={(event) => beginDrag(event, 'spread-end')}
         />
+        <text
+          x={endPoint.x + (endPoint.x >= cx ? 9 : -9)}
+          y={endPoint.y - 4}
+          fontSize={8}
+          fill="var(--chart-2)"
+          fillOpacity={0.7}
+          textAnchor={endPoint.x >= cx ? 'start' : 'end'}
+        >
+          end
+        </text>
       </svg>
     </div>
   );
diff --git a/src/pages/particle-system-playground/components/LinearAccelPlane.tsx b/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
index dacfad25..18d88486 100644
--- a/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
+++ b/src/pages/particle-system-playground/components/LinearAccelPlane.tsx
@@ -84,12 +84,12 @@ export function LinearAccelPlane({ system, onChange }: Props) {
   const [artist, setArtist] = useState<ArtistState>(() => rawToArtist(minX, minY, maxX, maxY));
 
   const maxVal = Math.max(Math.abs(minX), Math.abs(minY), Math.abs(maxX), Math.abs(maxY), 50);
-  const [range, setRange] = useState(() => Math.ceil(maxVal * 1.5 / 50) * 50);
+  const [range, setRange] = useState(() => Math.ceil((maxVal * 1.5) / 50) * 50);
   const rangeWasEditedRef = useRef(false);
 
   useEffect(() => {
     if (rangeWasEditedRef.current) return;
-    const nextRange = Math.ceil(maxVal * 1.35 / 50) * 50;
+    const nextRange = Math.ceil((maxVal * 1.35) / 50) * 50;
     setRange((current) => (nextRange > current ? nextRange : current));
   }, [maxVal]);
 
@@ -166,7 +166,9 @@ export function LinearAccelPlane({ system, onChange }: Props) {
   return (
     <div className="grid gap-2">
       <div className="flex items-center justify-between">
-        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Linear Acceleration</span>
+        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
+          Linear Acceleration
+        </span>
         <div className="flex items-center gap-2">
           <span className="text-[10px] text-muted-foreground">Range ±</span>
           <Input
@@ -184,7 +186,7 @@ export function LinearAccelPlane({ system, onChange }: Props) {
         ref={svgRef}
         width="100%"
         height={H}
-        className="touch-none rounded border bg-muted/10"
+        className="touch-none rounded border bg-muted/10 select-none"
         onPointerMove={onPointerMove}
         onPointerUp={stopDrag}
         onPointerLeave={stopDrag}
@@ -192,57 +194,123 @@ export function LinearAccelPlane({ system, onChange }: Props) {
         {/* Grid lines */}
         {gridVals.map((v) => (
           <g key={v}>
-            <line x1={PAD} y1={cy + v * scale} x2={svgW - PAD} y2={cy + v * scale} stroke="currentColor" strokeOpacity={0.07} />
-            <line x1={cx + v * scale} y1={PAD} x2={cx + v * scale} y2={H - PAD} stroke="currentColor" strokeOpacity={0.07} />
-            <text x={cx + v * scale + 2} y={cy - 3} fontSize={8} fill="currentColor" fillOpacity={0.3}>{v}</text>
+            <line
+              x1={PAD}
+              y1={cy + v * scale}
+              x2={svgW - PAD}
+              y2={cy + v * scale}
+              stroke="currentColor"
+              strokeOpacity={0.07}
+            />
+            <line
+              x1={cx + v * scale}
+              y1={PAD}
+              x2={cx + v * scale}
+              y2={H - PAD}
+              stroke="currentColor"
+              strokeOpacity={0.07}
+            />
+            <text x={cx + v * scale + 2} y={cy - 3} fontSize={8} fill="currentColor" fillOpacity={0.3}>
+              {v}
+            </text>
           </g>
         ))}
 
         {/* Axes */}
         <line x1={PAD} y1={cy} x2={svgW - PAD} y2={cy} stroke="currentColor" strokeOpacity={0.3} />
         <line x1={cx} y1={PAD} x2={cx} y2={H - PAD} stroke="currentColor" strokeOpacity={0.3} />
-        <text x={svgW - PAD - 10} y={cy - 4} fontSize={9} fill="currentColor" fillOpacity={0.4}>X</text>
-        <text x={cx + 4} y={PAD + 10} fontSize={9} fill="currentColor" fillOpacity={0.4}>Y</text>
-        <text x={cx + 6} y={H - PAD - 4} fontSize={8} fill="currentColor" fillOpacity={0.35}>LÖVE +Y</text>
+        <text x={svgW - PAD - 10} y={cy - 4} fontSize={9} fill="currentColor" fillOpacity={0.4}>
+          X
+        </text>
+        <text x={cx + 4} y={PAD + 10} fontSize={9} fill="currentColor" fillOpacity={0.4}>
+          Y
+        </text>
+        <text x={cx + 6} y={H - PAD - 4} fontSize={8} fill="currentColor" fillOpacity={0.35}>
+          LÖVE +Y
+        </text>
 
         {/* Min vector */}
         <line x1={origin.x} y1={origin.y} x2={minPt.x} y2={minPt.y} stroke="var(--chart-1)" strokeWidth={2} />
-        <path d={arrowHead(minPt.x, minPt.y, minAngle, 7)} stroke="var(--chart-1)" strokeWidth={2} fill="none" strokeLinecap="round" />
+        <path
+          d={arrowHead(minPt.x, minPt.y, minAngle, 7)}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          fill="none"
+          strokeLinecap="round"
+        />
 
         {/* Max vector */}
         <line x1={origin.x} y1={origin.y} x2={maxPt.x} y2={maxPt.y} stroke="var(--chart-2)" strokeWidth={2} />
-        <path d={arrowHead(maxPt.x, maxPt.y, maxAngle, 7)} stroke="var(--chart-2)" strokeWidth={2} fill="none" strokeLinecap="round" />
+        <path
+          d={arrowHead(maxPt.x, maxPt.y, maxAngle, 7)}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          fill="none"
+          strokeLinecap="round"
+        />
 
         {/* Origin */}
         <circle cx={origin.x} cy={origin.y} r={3} fill="currentColor" fillOpacity={0.4} />
 
         {/* Handles */}
         <circle
-          cx={minPt.x} cy={minPt.y} r={6}
+          cx={minPt.x}
+          cy={minPt.y}
+          r={6}
           fill={dragging === 'min' ? 'var(--chart-1)' : 'hsl(var(--card))'}
-          stroke="var(--chart-1)" strokeWidth={2} style={{ cursor: 'grab' }}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          style={{ cursor: 'grab' }}
           onPointerDown={(e) => {
             rangeWasEditedRef.current = true;
             e.currentTarget.setPointerCapture(e.pointerId);
             setDragging('min');
           }}
         />
+        <text
+          x={minPt.x + (minPt.x >= cx ? 9 : -9)}
+          y={minPt.y - 6}
+          fontSize={8}
+          fill="var(--chart-1)"
+          fillOpacity={0.8}
+          textAnchor={minPt.x >= cx ? 'start' : 'end'}
+        >
+          min
+        </text>
         <circle
-          cx={maxPt.x} cy={maxPt.y} r={6}
+          cx={maxPt.x}
+          cy={maxPt.y}
+          r={6}
           fill={dragging === 'max' ? 'var(--chart-2)' : 'hsl(var(--card))'}
-          stroke="var(--chart-2)" strokeWidth={2} style={{ cursor: 'grab' }}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          style={{ cursor: 'grab' }}
           onPointerDown={(e) => {
             rangeWasEditedRef.current = true;
             e.currentTarget.setPointerCapture(e.pointerId);
             setDragging('max');
           }}
         />
+        <text
+          x={maxPt.x + (maxPt.x >= cx ? 9 : -9)}
+          y={maxPt.y - 6}
+          fontSize={8}
+          fill="var(--chart-2)"
+          fillOpacity={0.8}
+          textAnchor={maxPt.x >= cx ? 'start' : 'end'}
+        >
+          max
+        </text>
 
         {/* Legend */}
         <circle cx={PAD} cy={H - PAD + 2} r={4} fill="var(--chart-1)" />
-        <text x={PAD + 7} y={H - PAD + 6} fontSize={9} fill="currentColor" fillOpacity={0.5}>min</text>
+        <text x={PAD + 7} y={H - PAD + 6} fontSize={9} fill="currentColor" fillOpacity={0.5}>
+          min
+        </text>
         <circle cx={PAD + 35} cy={H - PAD + 2} r={4} fill="var(--chart-2)" />
-        <text x={PAD + 42} y={H - PAD + 6} fontSize={9} fill="currentColor" fillOpacity={0.5}>max</text>
+        <text x={PAD + 42} y={H - PAD + 6} fontSize={9} fill="currentColor" fillOpacity={0.5}>
+          max
+        </text>
       </svg>
 
       {/* Input mode tabs */}
@@ -256,8 +324,12 @@ export function LinearAccelPlane({ system, onChange }: Props) {
         }}
         className="h-6 w-fit"
       >
-        <ToggleGroupItem value="raw" className="h-6 px-2 text-[10px]">Raw</ToggleGroupItem>
-        <ToggleGroupItem value="artist" className="h-6 px-2 text-[10px]">Artist</ToggleGroupItem>
+        <ToggleGroupItem value="raw" className="h-6 px-2 text-[10px]">
+          Raw
+        </ToggleGroupItem>
+        <ToggleGroupItem value="artist" className="h-6 px-2 text-[10px]">
+          Artist
+        </ToggleGroupItem>
       </ToggleGroup>
 
       {inputMode === 'raw' ? (
@@ -269,24 +341,34 @@ export function LinearAccelPlane({ system, onChange }: Props) {
             { label: 'Max Y', key: 'linearAccelYMax', val: maxY },
           ].map(({ label, key, val }) => (
             <div key={key} className="grid gap-1">
-              <Label className="text-[10px] text-muted-foreground">{label}</Label>
-              <Input className="h-8 text-xs" type="number" step={1} value={val}
-                onChange={(e) => onChange(key, Number(e.target.value))} />
+              <Label className="text-[10px] text-muted-foreground font-semibold">{label}</Label>
+              <Input
+                className="h-8 text-xs"
+                type="number"
+                step={1}
+                value={val}
+                onChange={(e) => onChange(key, Number(e.target.value))}
+              />
             </div>
           ))}
         </div>
       ) : (
         <div className="grid grid-cols-2 gap-2">
-          {([
-            { label: 'Direction (rad)', key: 'direction', step: 0.01 },
-            { label: 'Spread (rad)', key: 'spread', step: 0.01, min: 0 },
-            { label: 'Speed Min', key: 'speedMin', step: 1, min: 0 },
-            { label: 'Speed Max', key: 'speedMax', step: 1, min: 0 },
-          ] as { label: string; key: keyof ArtistState; step: number; min?: number }[]).map(({ label, key, step, min }) => (
+          {(
+            [
+              { label: 'Direction (rad)', key: 'direction', step: 0.01 },
+              { label: 'Spread (rad)', key: 'spread', step: 0.01, min: 0 },
+              { label: 'Speed Min', key: 'speedMin', step: 1, min: 0 },
+              { label: 'Speed Max', key: 'speedMax', step: 1, min: 0 },
+            ] as { label: string; key: keyof ArtistState; step: number; min?: number }[]
+          ).map(({ label, key, step, min }) => (
             <div key={key} className="grid gap-1">
-              <Label className="text-[10px] text-muted-foreground">{label}</Label>
+              <Label className="text-[10px] text-muted-foreground font-semibold">{label}</Label>
               <Input
-                className="h-8 text-xs" type="number" step={step} min={min}
+                className="h-8 text-xs"
+                type="number"
+                step={step}
+                min={min}
                 value={artist[key]}
                 onChange={(e) => {
                   const nextValue = Number(e.target.value);
diff --git a/src/pages/particle-system-playground/components/MotionPresets.tsx b/src/pages/particle-system-playground/components/MotionPresets.tsx
index e30a63d7..467fecf9 100644
--- a/src/pages/particle-system-playground/components/MotionPresets.tsx
+++ b/src/pages/particle-system-playground/components/MotionPresets.tsx
@@ -109,7 +109,6 @@ export function MotionPresets({ system, onChange }: Props) {
 
       {open && (
         <div className="grid gap-3">
-          {/* Named presets */}
           <div className="grid max-h-44 grid-cols-4 gap-1 overflow-auto pr-1 lg:grid-cols-5">
             {NAMED_PRESETS.map((preset) => (
               <Button
@@ -125,16 +124,14 @@ export function MotionPresets({ system, onChange }: Props) {
             ))}
           </div>
 
-          {/* Randomize */}
           <Button variant="secondary" size="sm" className="h-7 text-[10px]" onClick={handleRandomize}>
             Randomize ±20%
           </Button>
 
           <Separator />
 
-          {/* Mix */}
           <div className="grid gap-1">
-            <Label className="text-[10px] text-muted-foreground">Mix Presets</Label>
+            <Label className="text-[10px] text-muted-foreground font-semibold">Mix Presets</Label>
             <div className="flex items-center gap-1">
               <Select value={mixA} onValueChange={setMixA}>
                 <SelectTrigger className="h-7 flex-1 text-xs">
@@ -142,7 +139,9 @@ export function MotionPresets({ system, onChange }: Props) {
                 </SelectTrigger>
                 <SelectContent>
                   {allPresets.map((p) => (
-                    <SelectItem key={p.name} value={p.name} className="text-xs">{p.name}</SelectItem>
+                    <SelectItem key={p.name} value={p.name} className="text-xs">
+                      {p.name}
+                    </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
@@ -153,7 +152,9 @@ export function MotionPresets({ system, onChange }: Props) {
                 </SelectTrigger>
                 <SelectContent>
                   {allPresets.map((p) => (
-                    <SelectItem key={p.name} value={p.name} className="text-xs">{p.name}</SelectItem>
+                    <SelectItem key={p.name} value={p.name} className="text-xs">
+                      {p.name}
+                    </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
@@ -165,9 +166,8 @@ export function MotionPresets({ system, onChange }: Props) {
 
           <Separator />
 
-          {/* Custom presets */}
           <div className="grid gap-2">
-            <Label className="text-[10px] text-muted-foreground">Custom Presets</Label>
+            <Label className="text-[10px] text-muted-foreground font-semibold">Custom Presets</Label>
 
             <div className="flex gap-1">
               <Input
@@ -207,7 +207,10 @@ export function MotionPresets({ system, onChange }: Props) {
                           size="sm"
                           className="h-6 flex-1 justify-start truncate px-2 text-[10px]"
                           onClick={() => apply(preset)}
-                          onDoubleClick={() => { setRenamingIndex(i); setRenameValue(preset.name); }}
+                          onDoubleClick={() => {
+                            setRenamingIndex(i);
+                            setRenameValue(preset.name);
+                          }}
                           title="Click to apply · Double-click to rename"
                         >
                           {preset.name}
diff --git a/src/pages/particle-system-playground/components/PropertiesPanel.tsx b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
index 30615ca7..27683b0b 100644
--- a/src/pages/particle-system-playground/components/PropertiesPanel.tsx
+++ b/src/pages/particle-system-playground/components/PropertiesPanel.tsx
@@ -3,7 +3,11 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
-import { BLEND_MODES, EMISSION_AREA_DISTRIBUTIONS, type ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
+import {
+  BLEND_MODES,
+  EMISSION_AREA_DISTRIBUTIONS,
+  type ParticleSystemPlaygroundSystem,
+} from '@/types/particle-system-playground';
 import { AccelerationEditor } from './AccelerationEditor';
 import { ColorGradientEditor } from './ColorGradientEditor';
 import { DirectionSpreadGizmo } from './DirectionSpreadGizmo';
@@ -43,7 +47,13 @@ const groups: Array<{ title: string; fields: FieldDef[] }> = [
     fields: [
       { key: 'emissionRate', label: 'Rate', min: 0, step: 1 },
       { key: 'emitterLifetime', label: 'Emitter Lifetime', min: -1, step: 0.1 },
-      { type: 'range', minKey: 'particleLifetimeMin', maxKey: 'particleLifetimeMax', label: 'Particle Life', step: 0.01 },
+      {
+        type: 'range',
+        minKey: 'particleLifetimeMin',
+        maxKey: 'particleLifetimeMax',
+        label: 'Particle Life',
+        step: 0.01,
+      },
       { key: 'emitAtStart', label: 'Emit At Start', min: 0, step: 1 },
       { key: 'kickStartSteps', label: 'Kick Steps', min: 0, step: 1 },
       { key: 'kickStartDt', label: 'Kick Dt', min: 0, step: 0.001 },
@@ -102,7 +112,7 @@ function NumberField({
 }) {
   return (
     <div className="grid gap-1">
-      <Label className="text-[10px] text-muted-foreground">{field.label}</Label>
+      <Label className="text-[10px] text-muted-foreground font-semibold">{field.label}</Label>
       <Input
         className="h-8 text-xs"
         type="number"
@@ -122,11 +132,15 @@ export function PropertiesPanel({ system, onChange }: Props) {
       <div className="grid gap-3">
         <div className="grid grid-cols-[1fr_10rem_9rem] gap-2">
           <div className="grid gap-1">
-            <Label className="text-[10px] text-muted-foreground">Title</Label>
-            <Input className="h-8 text-xs" value={system.title} onChange={(event) => onChange('title', event.target.value)} />
+            <Label className="text-[10px] text-muted-foreground font-semibold">Title</Label>
+            <Input
+              className="h-8 text-xs"
+              value={system.title}
+              onChange={(event) => onChange('title', event.target.value)}
+            />
           </div>
           <div className="grid gap-1">
-            <Label className="text-[10px] text-muted-foreground">Blend</Label>
+            <Label className="text-[10px] text-muted-foreground font-semibold">Blend</Label>
             <Select value={system.blendMode} onValueChange={(value) => onChange('blendMode', value)}>
               <SelectTrigger className="h-8 text-xs">
                 <SelectValue />
@@ -152,7 +166,7 @@ export function PropertiesPanel({ system, onChange }: Props) {
           </div>
         </div>
         <div className="grid gap-1">
-          <Label className="text-[10px] text-muted-foreground">Sizes</Label>
+          <Label className="text-[10px] text-muted-foreground font-semibold">Sizes</Label>
           <SizeCurveEditor
             value={system.properties.sizes ?? '1'}
             variation={system.properties.sizeVariation ?? 0}
@@ -160,8 +174,11 @@ export function PropertiesPanel({ system, onChange }: Props) {
           />
         </div>
         <div className="grid gap-1">
-          <Label className="text-[10px] text-muted-foreground">Color Gradient</Label>
-          <ColorGradientEditor value={system.properties.colors ?? '1, 1, 1, 1'} onChange={(value) => onChange('colors', value)} />
+          <Label className="text-[10px] text-muted-foreground font-semibold">Color Gradient</Label>
+          <ColorGradientEditor
+            value={system.properties.colors ?? '1, 1, 1, 1'}
+            onChange={(value) => onChange('colors', value)}
+          />
         </div>
       </div>
 
@@ -205,7 +222,7 @@ export function PropertiesPanel({ system, onChange }: Props) {
         </div>
         <div className="grid grid-cols-2 gap-2 lg:grid-cols-5">
           <div className="grid gap-1">
-            <Label className="text-[10px] text-muted-foreground">Distribution</Label>
+            <Label className="text-[10px] text-muted-foreground font-semibold">Distribution</Label>
             <Select
               value={system.properties.emissionAreaDist ?? 'none'}
               onValueChange={(value) => onChange('emissionAreaDist', value)}
diff --git a/src/pages/particle-system-playground/components/RangePairField.tsx b/src/pages/particle-system-playground/components/RangePairField.tsx
index 2ead3711..a958a60b 100644
--- a/src/pages/particle-system-playground/components/RangePairField.tsx
+++ b/src/pages/particle-system-playground/components/RangePairField.tsx
@@ -21,7 +21,7 @@ export function RangePairField({ label, minKey, maxKey, system, onChange, step =
 
   return (
     <div className="col-span-2 grid gap-1">
-      <Label className="text-[10px] text-muted-foreground">{label}</Label>
+      <Label className="text-[10px] text-muted-foreground font-semibold">{label}</Label>
       <div className="grid grid-cols-[auto_minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-1.5">
         <span className="text-[10px] font-medium text-muted-foreground">Min</span>
         <Input
diff --git a/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx b/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx
index bfc3dbf8..cce0226f 100644
--- a/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx
+++ b/src/pages/particle-system-playground/components/RotationSpinGizmo.tsx
@@ -29,7 +29,12 @@ function polar(cx: number, cy: number, radius: number, angle: number) {
   };
 }
 
-function angleFromPointer(event: React.PointerEvent<SVGSVGElement>, svg: SVGSVGElement, cx: number, cy: number): number {
+function angleFromPointer(
+  event: React.PointerEvent<SVGSVGElement>,
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+): number {
   const rect = svg.getBoundingClientRect();
   return Math.atan2(event.clientY - rect.top - cy, event.clientX - rect.left - cx);
 }
@@ -132,7 +137,9 @@ export function RotationSpinGizmo({ system, onChange }: Props) {
   return (
     <div className="grid gap-2">
       <div className="flex items-center justify-between gap-2">
-        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">Rotation &amp; Spin</Label>
+        <Label className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+          Rotation &amp; Spin
+        </Label>
         <div className="flex items-center gap-2">
           <span className="text-[10px] text-muted-foreground">Spin ±</span>
           <Input
@@ -150,28 +157,154 @@ export function RotationSpinGizmo({ system, onChange }: Props) {
         ref={svgRef}
         width="100%"
         height={H}
-        className="touch-none rounded border bg-muted/10"
+        className="touch-none rounded border bg-muted/10 select-none"
         onPointerMove={onPointerMove}
         onPointerUp={() => setDragging(null)}
         onPointerLeave={() => setDragging(null)}
       >
-        <circle cx={cx} cy={cy} r={radius} fill="none" stroke="currentColor" strokeDasharray="3 4" strokeOpacity={0.1} />
-        <path d={arcPath(cx, cy, radius, rotationMin, rotationMax)} fill="none" stroke="var(--chart-2)" strokeWidth={7} strokeOpacity={0.16} />
-        <path d={`M ${cx} ${cy} L ${avgPoint.x} ${avgPoint.y}`} stroke="var(--chart-1)" strokeWidth={2.5} strokeLinecap="round" />
+        <circle
+          cx={cx}
+          cy={cy}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeDasharray="3 4"
+          strokeOpacity={0.1}
+        />
+        <path
+          d={arcPath(cx, cy, radius, rotationMin, rotationMax)}
+          fill="none"
+          stroke="var(--chart-2)"
+          strokeWidth={7}
+          strokeOpacity={0.16}
+        />
+        <path
+          d={`M ${cx} ${cy} L ${avgPoint.x} ${avgPoint.y}`}
+          stroke="var(--chart-1)"
+          strokeWidth={2.5}
+          strokeLinecap="round"
+        />
         <g transform={`translate(${cx} ${cy}) rotate(${(avgRotation * 180) / Math.PI})`}>
-          <rect x="-18" y="-12" width="36" height="24" rx="4" fill="hsl(var(--card))" stroke="currentColor" strokeOpacity={0.35} />
+          <rect
+            x="-18"
+            y="-12"
+            width="36"
+            height="24"
+            rx="4"
+            fill="hsl(var(--card))"
+            stroke="currentColor"
+            strokeOpacity={0.35}
+          />
           <path d="M 8 -7 L 20 0 L 8 7 Z" fill="var(--chart-1)" fillOpacity={0.75} />
         </g>
-        <circle cx={minPoint.x} cy={minPoint.y} r={6} fill={dragging === 'rotationMin' ? 'var(--chart-2)' : 'hsl(var(--card))'} stroke="var(--chart-2)" strokeWidth={2} onPointerDown={(event) => beginDrag(event, 'rotationMin')} />
-        <circle cx={maxPoint.x} cy={maxPoint.y} r={6} fill={dragging === 'rotationMax' ? 'var(--chart-2)' : 'hsl(var(--card))'} stroke="var(--chart-2)" strokeWidth={2} strokeDasharray="3 2" onPointerDown={(event) => beginDrag(event, 'rotationMax')} />
-
-        <line x1={trackX1} y1={trackY} x2={trackX2} y2={trackY} stroke="currentColor" strokeOpacity={0.18} strokeWidth={4} strokeLinecap="round" />
-        <line x1={spinToX(-spinVariation * spinRange)} y1={trackY - 10} x2={spinToX(spinVariation * spinRange)} y2={trackY - 10} stroke="var(--chart-3)" strokeOpacity={0.45} strokeWidth={5} strokeLinecap="round" />
-        <text x={trackX1} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>CCW</text>
-        <text x={cx - 4} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>0</text>
-        <text x={trackX2 - 18} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>CW</text>
-        <circle cx={spinToX(spinMin)} cy={trackY} r={6} fill={dragging === 'spinMin' ? 'var(--chart-1)' : 'hsl(var(--card))'} stroke="var(--chart-1)" strokeWidth={2} onPointerDown={(event) => beginDrag(event, 'spinMin')} />
-        <circle cx={spinToX(spinMax)} cy={trackY} r={6} fill={dragging === 'spinMax' ? 'var(--chart-1)' : 'hsl(var(--card))'} stroke="var(--chart-1)" strokeWidth={2} strokeDasharray="3 2" onPointerDown={(event) => beginDrag(event, 'spinMax')} />
+        <circle
+          cx={minPoint.x}
+          cy={minPoint.y}
+          r={6}
+          fill={dragging === 'rotationMin' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          onPointerDown={(event) => beginDrag(event, 'rotationMin')}
+        />
+        <text
+          x={minPoint.x + (minPoint.x >= cx ? 9 : -9)}
+          y={minPoint.y - 4}
+          fontSize={8}
+          fill="var(--chart-2)"
+          fillOpacity={0.75}
+          textAnchor={minPoint.x >= cx ? 'start' : 'end'}
+        >
+          min
+        </text>
+        <circle
+          cx={maxPoint.x}
+          cy={maxPoint.y}
+          r={6}
+          fill={dragging === 'rotationMax' ? 'var(--chart-2)' : 'hsl(var(--card))'}
+          stroke="var(--chart-2)"
+          strokeWidth={2}
+          strokeDasharray="3 2"
+          onPointerDown={(event) => beginDrag(event, 'rotationMax')}
+        />
+        <text
+          x={maxPoint.x + (maxPoint.x >= cx ? 9 : -9)}
+          y={maxPoint.y - 4}
+          fontSize={8}
+          fill="var(--chart-2)"
+          fillOpacity={0.75}
+          textAnchor={maxPoint.x >= cx ? 'start' : 'end'}
+        >
+          max
+        </text>
+
+        <line
+          x1={trackX1}
+          y1={trackY}
+          x2={trackX2}
+          y2={trackY}
+          stroke="currentColor"
+          strokeOpacity={0.18}
+          strokeWidth={4}
+          strokeLinecap="round"
+        />
+        <line
+          x1={spinToX(-spinVariation * spinRange)}
+          y1={trackY - 10}
+          x2={spinToX(spinVariation * spinRange)}
+          y2={trackY - 10}
+          stroke="var(--chart-3)"
+          strokeOpacity={0.45}
+          strokeWidth={5}
+          strokeLinecap="round"
+        />
+        <text x={trackX1} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>
+          CCW
+        </text>
+        <text x={cx - 4} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>
+          0
+        </text>
+        <text x={trackX2 - 18} y={trackY + 22} fontSize={9} fill="currentColor" fillOpacity={0.45}>
+          CW
+        </text>
+        <circle
+          cx={spinToX(spinMin)}
+          cy={trackY}
+          r={6}
+          fill={dragging === 'spinMin' ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          onPointerDown={(event) => beginDrag(event, 'spinMin')}
+        />
+        <text
+          x={spinToX(spinMin)}
+          y={trackY - 11}
+          fontSize={8}
+          fill="var(--chart-1)"
+          fillOpacity={0.75}
+          textAnchor="middle"
+        >
+          min
+        </text>
+        <circle
+          cx={spinToX(spinMax)}
+          cy={trackY}
+          r={6}
+          fill={dragging === 'spinMax' ? 'var(--chart-1)' : 'hsl(var(--card))'}
+          stroke="var(--chart-1)"
+          strokeWidth={2}
+          strokeDasharray="3 2"
+          onPointerDown={(event) => beginDrag(event, 'spinMax')}
+        />
+        <text
+          x={spinToX(spinMax)}
+          y={trackY - 11}
+          fontSize={8}
+          fill="var(--chart-1)"
+          fillOpacity={0.75}
+          textAnchor="middle"
+        >
+          max
+        </text>
       </svg>
     </div>
   );
diff --git a/src/pages/particle-system-playground/components/ShaderEditor.tsx b/src/pages/particle-system-playground/components/ShaderEditor.tsx
index 03f61d91..cf249c5d 100644
--- a/src/pages/particle-system-playground/components/ShaderEditor.tsx
+++ b/src/pages/particle-system-playground/components/ShaderEditor.tsx
@@ -29,7 +29,7 @@ export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error,
   return (
     <div className="grid gap-2">
       <div className="grid gap-1">
-        <Label className="text-[10px] text-muted-foreground">Shader preset</Label>
+        <Label className="text-[10px] text-muted-foreground font-semibold">Shader preset</Label>
         <Select
           onValueChange={(name) => {
             const preset = SHADER_PRESETS.find((item) => item.name === name);
@@ -53,12 +53,16 @@ export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error,
       </div>
       <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_10rem]">
         <div className="grid gap-1">
-          <Label className="text-[10px] text-muted-foreground">Shader path</Label>
+          <Label className="text-[10px] text-muted-foreground font-semibold">Shader path</Label>
           <Input className="h-8 font-mono text-xs" value={path} onChange={(event) => setPath(event.target.value)} />
         </div>
         <div className="grid gap-1">
-          <Label className="text-[10px] text-muted-foreground">Export file</Label>
-          <Input className="h-8 font-mono text-xs" value={filename} onChange={(event) => setFilename(event.target.value)} />
+          <Label className="text-[10px] text-muted-foreground font-semibold">Export file</Label>
+          <Input
+            className="h-8 font-mono text-xs"
+            value={filename}
+            onChange={(event) => setFilename(event.target.value)}
+          />
         </div>
       </div>
       <ShaderCodeInput
@@ -88,7 +92,12 @@ export function ShaderEditor({ shaderPath, shaderFilename, shaderSource, error,
           <WandSparklesIcon className="size-4" />
           Apply Preset
         </Button>
-        <Button size="sm" variant="outline" className="h-8 text-xs" onClick={() => path && onApply({ shaderPath: path })}>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-8 text-xs"
+          onClick={() => path && onApply({ shaderPath: path })}
+        >
           Apply Path
         </Button>
         <Button size="sm" variant="ghost" className="h-8 gap-2 text-xs" onClick={() => onApply({ clearShader: true })}>
diff --git a/src/pages/particle-system-playground/components/SizeCurveEditor.tsx b/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
index 0269ce49..aebca74b 100644
--- a/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
+++ b/src/pages/particle-system-playground/components/SizeCurveEditor.tsx
@@ -84,7 +84,7 @@ export function SizeCurveEditor({
         ref={svgRef}
         width="100%"
         height={SVG_H}
-        className="rounded border bg-card touch-none"
+        className="rounded border bg-card touch-none select-none"
         onPointerMove={onPointerMove}
         onPointerUp={stopDrag}
         onPointerLeave={stopDrag}
diff --git a/src/pages/particle-system-playground/components/TextureImporter.tsx b/src/pages/particle-system-playground/components/TextureImporter.tsx
index b8c1f8ff..934c9e29 100644
--- a/src/pages/particle-system-playground/components/TextureImporter.tsx
+++ b/src/pages/particle-system-playground/components/TextureImporter.tsx
@@ -56,7 +56,7 @@ export function TextureImporter({ texturePath, texturePreset, textureFilename, o
         </Button>
       </div>
       <div className="grid gap-1">
-        <Label className="text-[10px] text-muted-foreground">Game path</Label>
+        <Label className="text-[10px] text-muted-foreground font-semibold">Game path</Label>
         <Input
           className="h-8 font-mono text-xs"
           placeholder="gfx/fire.png"
diff --git a/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx b/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx
index 1d7c519c..9159db9e 100644
--- a/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx
+++ b/src/pages/particle-system-playground/components/TextureOffsetGizmo.tsx
@@ -46,7 +46,9 @@ function svgPointFromPointer(event: React.PointerEvent<SVGSVGElement>, svg: SVGS
 function TextureFallback({ preset, cx, cy, size }: { preset: string; cx: number; cy: number; size: number }) {
   const r = size * 0.3;
   if (preset === 'ring') {
-    return <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--chart-1)" strokeWidth={size * 0.12} opacity={0.75} />;
+    return (
+      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--chart-1)" strokeWidth={size * 0.12} opacity={0.75} />
+    );
   }
   if (preset === 'star') {
     const points = Array.from({ length: 10 }, (_, index) => {
@@ -153,7 +155,7 @@ export function TextureOffsetGizmo({ system, onChange }: Props) {
         width="100%"
         height={H}
         viewBox={`0 0 300 ${H}`}
-        className="touch-none rounded border bg-muted/10"
+        className="touch-none rounded border bg-muted/10 select-none"
         onPointerMove={updateFromPointer}
         onPointerUp={() => setDragging(false)}
         onPointerLeave={() => setDragging(false)}

From ff5ad1cd71dd95fc0dca84cd17fa5d12a0692010 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 22:50:23 -0400
Subject: [PATCH 07/14] feather: add shader graph

---
 cli/src/generated/plugin-catalog.ts       |  10 +
 package-lock.json                         | 201 ++++++++++--
 package.json                              |   1 +
 shader-graph-plan.md                      | 261 ----------------
 src-lua/manifest.txt                      |   2 +
 src-lua/plugins/shader-graph/README.md    |  34 +++
 src-lua/plugins/shader-graph/init.lua     |  51 ++++
 src-lua/plugins/shader-graph/manifest.lua |  10 +
 src-tauri/tauri.conf.json                 |   3 +-
 src/components/app-sidebar/nav-main.tsx   |   6 +
 src/hooks/use-shader-graph.ts             |  99 ++++++
 src/pages/shader-graph/CodePreview.tsx    | 138 +++++++++
 src/pages/shader-graph/NodeInspector.tsx  | 196 ++++++++++++
 src/pages/shader-graph/NodePalette.tsx    | 118 +++++++
 src/pages/shader-graph/ShaderCanvas.tsx   | 170 +++++++++++
 src/pages/shader-graph/codegen.ts         | 169 ++++++++++
 src/pages/shader-graph/glslUtils.ts       |   5 +
 src/pages/shader-graph/index.tsx          |  49 +++
 src/pages/shader-graph/nodeDefs.ts        | 357 ++++++++++++++++++++++
 src/pages/shader-graph/nodes/index.tsx    |  81 +++++
 src/router.tsx                            |  13 +
 src/store/shader-graph.ts                 |  85 ++++++
 src/types/shader-graph.ts                 |  59 ++++
 23 files changed, 1826 insertions(+), 292 deletions(-)
 delete mode 100644 shader-graph-plan.md
 create mode 100644 src-lua/plugins/shader-graph/README.md
 create mode 100644 src-lua/plugins/shader-graph/init.lua
 create mode 100644 src-lua/plugins/shader-graph/manifest.lua
 create mode 100644 src/hooks/use-shader-graph.ts
 create mode 100644 src/pages/shader-graph/CodePreview.tsx
 create mode 100644 src/pages/shader-graph/NodeInspector.tsx
 create mode 100644 src/pages/shader-graph/NodePalette.tsx
 create mode 100644 src/pages/shader-graph/ShaderCanvas.tsx
 create mode 100644 src/pages/shader-graph/codegen.ts
 create mode 100644 src/pages/shader-graph/glslUtils.ts
 create mode 100644 src/pages/shader-graph/index.tsx
 create mode 100644 src/pages/shader-graph/nodeDefs.ts
 create mode 100644 src/pages/shader-graph/nodes/index.tsx
 create mode 100644 src/store/shader-graph.ts
 create mode 100644 src/types/shader-graph.ts

diff --git a/cli/src/generated/plugin-catalog.ts b/cli/src/generated/plugin-catalog.ts
index d850b13c..7535e3cb 100644
--- a/cli/src/generated/plugin-catalog.ts
+++ b/cli/src/generated/plugin-catalog.ts
@@ -261,6 +261,16 @@ export const pluginCatalog = [
     "optIn": false,
     "disabled": true
   },
+  {
+    "id": "shader-graph",
+    "sourceDir": "shader-graph",
+    "name": "Shader Graph",
+    "description": "Validate GLSL shaders authored in the Feather shader graph editor",
+    "version": "1.0.0",
+    "capabilities": [],
+    "optIn": false,
+    "disabled": false
+  },
   {
     "id": "time-travel",
     "sourceDir": "time-travel",
diff --git a/package-lock.json b/package-lock.json
index 6e4b070c..6a85ebc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "@tauri-apps/plugin-dialog": "^2.7.1",
         "@tauri-apps/plugin-fs": "^2.5.1",
         "@tauri-apps/plugin-opener": "^2.5.4",
+        "@xyflow/react": "^12.10.2",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "fflate": "^0.8.3",
@@ -585,7 +586,6 @@
       "os": [
         "aix"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -602,7 +602,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -619,7 +618,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -636,7 +634,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -653,7 +650,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -670,7 +666,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -687,7 +682,6 @@
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -704,7 +698,6 @@
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -721,7 +714,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -738,7 +730,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -755,7 +746,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -772,7 +762,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -789,7 +778,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -806,7 +794,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -823,7 +810,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -840,7 +826,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -857,7 +842,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -874,7 +858,6 @@
       "os": [
         "netbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -891,7 +874,6 @@
       "os": [
         "netbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -908,7 +890,6 @@
       "os": [
         "openbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -925,7 +906,6 @@
       "os": [
         "openbsd"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -942,7 +922,6 @@
       "os": [
         "openharmony"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -959,7 +938,6 @@
       "os": [
         "sunos"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -976,7 +954,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -993,7 +970,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1010,7 +986,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -5296,6 +5271,15 @@
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/d3-ease": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
@@ -5326,6 +5310,12 @@
         "@types/d3-time": "*"
       }
     },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-shape": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -5347,6 +5337,25 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -5708,6 +5717,66 @@
         }
       }
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.2",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.2.tgz",
+      "integrity": "sha512-CgIi6HwlcHXwlkTpr0fxLv/0sRVNZ8IdwKLzzeCscaYBwpvfcH1QFOCeaTCuEn1FQEs/B8CjnTSjhs8udgmBgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.76",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/react/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.76",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.76.tgz",
+      "integrity": "sha512-hvwvnRS1B3REwVDlWexsq7YQaPZeG3/mKo1jv38UmnpWmxihp14bW6VtEOuHEwJX2FvzFw8k77LyKSk/wiZVNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -5902,6 +5971,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/cli-boxes": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-4.0.1.tgz",
@@ -6140,6 +6215,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
@@ -6195,6 +6292,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -6240,6 +6346,41 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -7868,9 +8009,10 @@
       }
     },
     "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz",
+      "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/react-redux": {
@@ -8528,7 +8670,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
diff --git a/package.json b/package.json
index a6ff4a66..d1fcf502 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "@tauri-apps/plugin-dialog": "^2.7.1",
     "@tauri-apps/plugin-fs": "^2.5.1",
     "@tauri-apps/plugin-opener": "^2.5.4",
+    "@xyflow/react": "^12.10.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "fflate": "^0.8.3",
diff --git a/shader-graph-plan.md b/shader-graph-plan.md
deleted file mode 100644
index c07362bd..00000000
--- a/shader-graph-plan.md
+++ /dev/null
@@ -1,261 +0,0 @@
-# Shader Graph — Visual Node-Based GLSL Editor for Feather + Love2D
-
-## Context
-
-Unity's ShaderGraph lets you build shaders visually by connecting nodes instead of writing GLSL by hand. This plan adds an equivalent feature to Feather: a dedicated `/shader-graph` page where you compose GLSL pixel + vertex shaders from a palette of nodes, see the generated code live, validate it against Love2D's compiler, and apply it directly to a particle-system-playground emitter. The particle-system-playground plugin already supports `set-shader`, so the Lua footprint for this feature is minimal.
-
----
-
-## Architecture
-
-```
-Desktop (React)                           Game (Lua)
-  │                                          │
-  ├─ /shader-graph page                      ├─ shader-graph plugin
-  │   NodePalette │ ReactFlow canvas │ Code  │   compile-shader action (validation only)
-  │   playground target selector                     │
-  │   codegen.ts (pure TS, browser-side)     ├─ particle-system-playground plugin (modified)
-  │                                          │   update(dt) → shader:send("u_time", t)
-  │   use-shader-graph.ts hook               │
-  │   Zustand store (localStorage)           │
-  └─                                        └─
-```
-
----
-
-## Phase Breakdown
-
-| Phase                    | Goal                                                                                            |
-| ------------------------ | ----------------------------------------------------------------------------------------------- |
-| 1 — Foundation           | Types, Zustand store, install `@xyflow/react`, codegen engine, Lua plugin skeleton, route + nav |
-| 2 — Lua backend          | `compile-shader` action, `u_time` update in particle-system-playground                          |
-| 3 — Node components      | ReactFlow custom nodes for all categories + palette                                             |
-| 4 — Page assembly        | 3-panel layout, code preview, toolbar, playground target selector                               |
-| 5 — Integration + polish | Validate round-trip, apply-to-Playground, error display, localStorage persistence               |
-
----
-
-## New Files
-
-### TypeScript/React
-
-**`src/types/shader-graph.ts`**
-`GlslType`, `PortDef`, `NodeType` (full enum), `ShaderNodeData`, `ShaderNodeInstance`, `ShaderEdge`, `ParticleSystemPlaygroundTarget` types. Also exports the static node definition registry (`Record<NodeType, NodeDef>`) with port shapes for each node.
-
-**`src/store/shader-graph.ts`**
-Zustand store persisted to `localStorage` key `'feather-shader-graph'`. Persisted fields: `nodes`, `edges`, `shaderName`, `hotParticlesTarget`. Transient: `validationStatus`, `validationErrors`, `lastGeneratedGlsl`.
-
-```typescript
-type Store = {
-  nodes: ShaderNodeInstance[];
-  edges: ShaderEdge[];
-  selectedNodeId: string | null;
-  shaderName: string;
-  hotParticlesTarget: { composite: string; systemIndex: number } | null;
-  lastGeneratedGlsl: { pixel: string; vertex: string | null; hash: string } | null;
-  validationStatus: 'idle' | 'validating' | 'ok' | 'error';
-  validationErrors: { pixelError?: string; vertexError?: string };
-  // Actions: setNodes, setEdges, addNode, removeNode, updateNodeData, selectNode, setPlaygroundTarget, setLastGlsl, setValidationStatus
-};
-```
-
-**`src/pages/shader-graph/codegen.ts`**
-Pure TS GLSL generation. Input: `nodes`, `edges`. Output: `{ pixel: string; vertex: string | null }`.
-
-Algorithm:
-
-1. DFS from `FragmentOutput` (and `VertexOutput` if present) to collect reachable nodes in post-order
-2. Assign variable names: `v_<shortId>_<portId>`
-3. Collect `extern` declarations (e.g. `extern float u_time;`) in a pre-pass; deduplicate
-4. Emit per-node GLSL using an emitter registry, with type coercion for mismatched port types (float→vec4 expands to `vec4(x,x,x,1.0)`, vec4→float narrows to `.x`)
-5. Wrap in `vec4 effect(vec4 color, Image VarTex0, vec2 texture_coords, vec2 screen_coords)` for pixel; `vec4 position(mat4 transform_projection, vec4 vertex_position)` for vertex
-6. Prepend helper functions (e.g. `feather_hash`, `feather_noise`) if any noise nodes exist
-7. Fallback: empty graph → passthrough `return Texel(VarTex0, texture_coords) * color;`
-
-**`src/pages/shader-graph/index.tsx`**
-Top-level page. Toolbar (shader name, Validate, Apply to Playground, Copy buttons) above a `ResizablePanelGroup` with 3 panels: `NodePalette` 20% | `ShaderCanvas` 55% | `NodeInspector` + `CodePreview` 25%.
-
-**`src/pages/shader-graph/ShaderCanvas.tsx`**
-Wraps `<ReactFlow nodeTypes={nodeTypes} ...>` in controlled mode: reads `nodes`/`edges` from Zustand, applies `applyNodeChanges`/`applyEdgeChanges` on callbacks, writes back to store. Handles `onDrop` for drag-from-palette: reads `event.dataTransfer.getData('application/shader-node-type')`, converts screen→flow coords with `reactFlowInstance.screenToFlowPosition()`, dispatches `addNode`.
-
-**`src/pages/shader-graph/NodePalette.tsx`**
-Left panel. Collapsible sections by category. Each node type is `draggable` (sets dataTransfer on `dragStart`). Section below: playground target selector (`<Select>` for composite + number input for emitter index), visible only when particle-system-playground data is available.
-
-**`src/pages/shader-graph/NodeInspector.tsx`**
-Right panel top. Editable props for selected node (float inputs, vec4 RGBA swatches). Empty state when nothing selected.
-
-**`src/pages/shader-graph/CodePreview.tsx`**
-Right panel bottom. Syntax-highlighted GLSL via `prism-react-renderer` with `glsl` language (already in deps). Inline error display with `AlertTriangleIcon`. Toolbar buttons: Validate, Apply to Playground, Copy Pixel, Copy Vertex.
-
-**`src/pages/shader-graph/nodes/`**
-Node components registered in `nodeTypes`. One file per category:
-
-- `InputNodes.tsx` — TextureColor, TextureCoords, ScreenCoords, VertexColor, Time, Resolution, FloatConstant, Vec2Constant, Vec4Constant
-- `MathNodes.tsx` — Add, Multiply, Subtract, Divide, Power, Clamp, Lerp, Step, Smoothstep, Sin, Cos, Abs, Fract, Floor
-- `VectorNodes.tsx` — Split, Combine, Normalize, Length, Dot
-- `ColorNodes.tsx` — Desaturate, OneMinus, HueShift
-- `NoiseNodes.tsx` — SimpleNoise, Ripple
-- `OutputNodes.tsx` — FragmentOutput
-- `VertexNodes.tsx` — VertexPosition, TransformMatrix, VertexOutput
-
-All nodes follow this pattern:
-
-```tsx
-export function AddNode({ data, selected }: NodeProps<ShaderNodeData>) {
-  return (
-    <div
-      className={cn(
-        'rounded border bg-card px-3 py-2 shadow-sm text-xs min-w-24 border-l-2 border-l-orange-500',
-        selected && 'ring-2 ring-primary',
-      )}
-    >
-      <Handle type="target" position={Position.Left} id="in0" style={{ top: '33%' }} />
-      <Handle type="target" position={Position.Left} id="in1" style={{ top: '66%' }} />
-      <div className="text-[10px] uppercase text-muted-foreground mb-1">Math</div>
-      <div className="font-semibold">{data.label}</div>
-      <Handle type="source" position={Position.Right} id="out0" />
-    </div>
-  );
-}
-```
-
-Color coding: Input=blue, Math=orange, Vector=purple, Color=pink, Noise=green, Output=red.
-
-**`src/hooks/use-shader-graph.ts`**
-Composes Zustand store + `useParticleSystemPlayground()` + WS sending. Exposes:
-
-- `generateAndStore()` — runs codegen, updates store
-- `validateShader()` — sends `compile-shader` to shader-graph plugin; watches React Query key `pluginAction(sessionId, 'shader-graph', 'compile-shader')` for result
-- `applyToParticleSystemPlayground()` — sends `cmd:plugin:action` to particle-system-playground `set-shader` with `shaderSource` from store
-- `shaderApplyError` — from `playground.shaderError`
-
-### Lua
-
-**`src-lua/plugins/shader-graph/manifest.lua`**
-
-```lua
-return {
-  id = "shader-graph", name = "Shader Graph",
-  description = "Visual GLSL shader authoring with live validation",
-  version = "1.0.0", capabilities = {}, optIn = false, disabled = false, api = 5,
-}
-```
-
-**`src-lua/plugins/shader-graph/init.lua`**
-Minimal plugin — only validates GLSL.
-
-- `handleRequest()` → `{type="shader-graph"}`
-- `handleActionRequest()`:
-  - `compile-shader`: `pcall(love.graphics.newShader, pixelSource)` (and combined if vertex non-empty). Return `{status="ok"}` or `{status="error", pixelError=..., vertexError=...}`. Note: Love2D's combined shader format puts vertex and pixel in one string separated by `varying` declarations; for validation we can test each separately.
-- `getConfig()` → `{type="shader-graph"}` (no `tabName` — not shown in plugins sidebar)
-
----
-
-## Modified Files
-
-**`src/router.tsx`**
-Add `import ShaderGraph from './pages/shader-graph'` and route:
-
-```tsx
-<Route
-  path="/shader-graph"
-  element={
-    <RequireSession>
-      <ShaderGraph />
-    </RequireSession>
-  }
-/>
-```
-
-**`src/components/app-sidebar/nav-main.tsx`**
-Add `WorkflowIcon` import from `lucide-react`. Add to `items`:
-
-```tsx
-{ title: 'Shader Graph', url: '/shader-graph', icon: WorkflowIcon }
-```
-
-**`package.json`**
-Add `"@xyflow/react": "^12.x"` to `dependencies`. Run `npm install`.
-
-**`src-lua/plugins/particle-system-playground/init.lua`**
-In `ParticleSystemPlaygroundPlugin:update(dt)`:
-
-1. Add `self.time = (self.time or 0) + dt` at the top
-2. In the scratch composites loop, after each `system.system:update(dt)`:
-   ```lua
-   if system.shader then
-     pcall(system.shader.send, system.shader, "u_time", self.time)
-   end
-   ```
-   `shader:send` on a non-existent extern is a silent no-op in Love2D — existing shaders are unaffected.
-
-**`src-lua/manifest.txt`**
-Add before `plugin:hot-reload` entries (alphabetical):
-
-```
-plugin:shader-graph:init.lua
-plugin:shader-graph:manifest.lua
-```
-
-**`cli/src/generated/plugin-catalog.ts`**
-Regenerate via `npm run generate:plugin-catalog` after manifest entries are added.
-
----
-
-## "Apply to Particles Playground" WS Flow
-
-1. Desktop generates GLSL via `codegen(nodes, edges)`
-2. Sends to particle-system-playground plugin:
-   ```json
-   {
-     "type": "cmd:plugin:action",
-     "plugin": "particle-system-playground",
-     "action": "set-shader",
-     "params": { "composite": "<name>", "systemIndex": 1, "shaderSource": "...", "filename": "my-shader.glsl" }
-   }
-   ```
-3. Response arrives in React Query at `pluginAction(sessionId, 'particle-system-playground', 'set-shader')`
-4. `useParticleSystemPlayground().shaderError` surfaces any compile error
-5. Hot-particles Lua plugin's `update(dt)` sends `u_time` every frame to the shader automatically
-
----
-
-## Node Types Reference
-
-| Category     | Nodes                                                                                                               |
-| ------------ | ------------------------------------------------------------------------------------------------------------------- |
-| Input        | TextureColor, TextureCoords, ScreenCoords, VertexColor, Time, Resolution, FloatConstant, Vec2Constant, Vec4Constant |
-| Math         | Add, Subtract, Multiply, Divide, Power, Clamp, Lerp, Step, Smoothstep, Sin, Cos, Abs, Fract, Floor                  |
-| Vector       | Split, Combine, Normalize, Length, Dot                                                                              |
-| Color        | Desaturate, OneMinus, HueShift                                                                                      |
-| Noise        | SimpleNoise (hash-based), Ripple (sin-wave UV distortion)                                                           |
-| Pixel Output | FragmentOutput                                                                                                      |
-| Vertex       | VertexPosition, TransformMatrix, VertexOutput                                                                       |
-
----
-
-## Codegen Type Coercion Rules
-
-| Source type | Target type | Coercion                 |
-| ----------- | ----------- | ------------------------ |
-| `float`     | `vec2`      | `vec2(x, x)`             |
-| `float`     | `vec4`      | `vec4(x, x, x, 1.0)`     |
-| `vec4`      | `float`     | `x.r`                    |
-| `vec2`      | `vec4`      | `vec4(x, 0.0, 0.0, 1.0)` |
-| same        | same        | identity                 |
-
----
-
-## Verification
-
-1. **Dependency + TypeScript**: `npm install && npm run typecheck` — 0 errors
-2. **Route + nav**: Navigate to `/shader-graph` — page renders; sidebar shows "Shader Graph"
-3. **Drag-drop**: Drag "Float Constant" from palette → node appears on canvas at drop position
-4. **Codegen — empty**: No nodes → code preview shows passthrough `return Texel(...)` shader
-5. **Codegen — graph**: `Time` → `Sin` → `Combine` → `FragmentOutput` → correct GLSL with `u_time` and `sin()` visible
-6. **Lua validation**: Click "Validate" → `compile-shader` WS roundtrip → status `ok` visible in UI. Add syntax error manually → `error` with message.
-7. **Apply to Playground**: Select playground composite + emitter in palette target selector → click "Apply to Playground" → switch to Particles Playground tab → system shows shader source populated
-8. **Time animation**: Shader with `sin(u_time)` applied to Playground emitter → particles visibly animate over time
-9. **Persistence**: Reload app → graph nodes/edges restored from localStorage
-10. **manifest.txt**: `npm run generate:plugin-catalog` succeeds; `shader-graph` appears in catalog
-11. **No regression**: Particles Playground page works normally; existing particle-editor plugin unaffected
diff --git a/src-lua/manifest.txt b/src-lua/manifest.txt
index 754f3a6d..771c303f 100644
--- a/src-lua/manifest.txt
+++ b/src-lua/manifest.txt
@@ -64,6 +64,8 @@ plugin:runtime-snapshot:init.lua
 plugin:runtime-snapshot:manifest.lua
 plugin:screenshots:init.lua
 plugin:screenshots:manifest.lua
+plugin:shader-graph:init.lua
+plugin:shader-graph:manifest.lua
 plugin:time-travel:init.lua
 plugin:time-travel:manifest.lua
 plugin:timer-inspector:init.lua
diff --git a/src-lua/plugins/shader-graph/README.md b/src-lua/plugins/shader-graph/README.md
new file mode 100644
index 00000000..a5616a2d
--- /dev/null
+++ b/src-lua/plugins/shader-graph/README.md
@@ -0,0 +1,34 @@
+# shader-graph
+
+Feather plugin that validates GLSL shaders authored in the Shader Graph visual editor.
+
+## Actions
+
+### `compile-shader`
+
+Attempts to compile the provided GLSL source using `love.graphics.newShader`. Returns whether each stage compiled successfully, along with the driver error string if it failed.
+
+**Params**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `pixelSource` | `string` | GLSL pixel (fragment) shader source |
+| `vertexSource` | `string` | GLSL vertex shader source (optional) |
+
+**Response**
+
+```lua
+-- success
+{ status = "ok" }
+
+-- failure
+{ status = "error", pixelError = "...", vertexError = "..." }
+```
+
+`pixelError` / `vertexError` are `nil` when that stage compiled successfully.
+
+## Notes
+
+- Validation runs on the game process — a live LÖVE session must be connected.
+- The plugin uses `pcall` so a bad shader never crashes the game.
+- No draw calls are made; the shader object is discarded immediately after compilation.
diff --git a/src-lua/plugins/shader-graph/init.lua b/src-lua/plugins/shader-graph/init.lua
new file mode 100644
index 00000000..8e4adc05
--- /dev/null
+++ b/src-lua/plugins/shader-graph/init.lua
@@ -0,0 +1,51 @@
+local Class = require(FEATHER_PATH .. ".lib.class")
+local Base = require(FEATHER_PATH .. ".core.base")
+
+local ShaderGraphPlugin = Class({ __includes = Base })
+
+function ShaderGraphPlugin:initialize(feather)
+  Base.initialize(self, feather)
+end
+
+local function compileShader(params)
+  local pixelSource = params.pixelSource or ""
+  local vertexSource = params.vertexSource or ""
+
+  local pixelError = nil
+  local vertexError = nil
+
+  local pixelOk, pixelErr = pcall(function()
+    love.graphics.newShader(pixelSource)
+  end)
+  if not pixelOk then
+    pixelError = tostring(pixelErr)
+  end
+
+  if pixelOk and vertexSource and vertexSource ~= "" then
+    local vertOk, vertErr = pcall(function()
+      love.graphics.newShader(pixelSource .. "\n" .. vertexSource)
+    end)
+    if not vertOk then
+      vertexError = tostring(vertErr)
+    end
+  end
+
+  if pixelError or vertexError then
+    return { status = "error", pixelError = pixelError, vertexError = vertexError }
+  end
+
+  return { status = "ok" }
+end
+
+function ShaderGraphPlugin:handleActionRequest(request)
+  local params = request.params or {}
+  local action = params.action
+
+  if action == "compile-shader" then
+    return compileShader(params)
+  end
+
+  return { status = "error", pixelError = "Unknown shader graph action: " .. tostring(action) }
+end
+
+return ShaderGraphPlugin
diff --git a/src-lua/plugins/shader-graph/manifest.lua b/src-lua/plugins/shader-graph/manifest.lua
new file mode 100644
index 00000000..e1b47c8b
--- /dev/null
+++ b/src-lua/plugins/shader-graph/manifest.lua
@@ -0,0 +1,10 @@
+return {
+  id = "shader-graph",
+  name = "Shader Graph",
+  description = "Validate GLSL shaders authored in the Feather shader graph editor",
+  version = "1.0.0",
+  capabilities = {},
+  optIn = false,
+  disabled = false,
+  api = 5,
+}
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 7a93da33..c0afe576 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -17,7 +17,8 @@
         "minHeight": 600,
         "width": 950,
         "height": 670,
-        "resizable": true
+        "resizable": true,
+        "dragDropEnabled": false
       }
     ],
     "security": {
diff --git a/src/components/app-sidebar/nav-main.tsx b/src/components/app-sidebar/nav-main.tsx
index be95e9ca..9b754d3c 100644
--- a/src/components/app-sidebar/nav-main.tsx
+++ b/src/components/app-sidebar/nav-main.tsx
@@ -17,6 +17,7 @@ import {
   SparklesIcon,
   TelescopeIcon,
   TerminalIcon,
+  WorkflowIcon,
 } from 'lucide-react';
 import { useDebuggerStore } from '@/store/debugger';
 import { useSessionStore } from '@/store/session';
@@ -72,6 +73,11 @@ export function NavMain() {
       url: '/compare',
       icon: GitCompareArrowsIcon,
     },
+    {
+      title: 'Shader Graph',
+      url: '/shader-graph',
+      icon: WorkflowIcon,
+    },
   ];
   const location = useLocation();
   return (
diff --git a/src/hooks/use-shader-graph.ts b/src/hooks/use-shader-graph.ts
new file mode 100644
index 00000000..d50c2b99
--- /dev/null
+++ b/src/hooks/use-shader-graph.ts
@@ -0,0 +1,99 @@
+import { useCallback, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { sendCommand } from '@/lib/send-command';
+import { useSessionStore } from '@/store/session';
+import { useShaderGraphStore } from '@/store/shader-graph';
+import { sessionQueryKey } from './use-ws-connection';
+import { codegen } from '@/pages/shader-graph/codegen';
+
+const PLUGIN_ID = 'particle-system-playground';
+const SHADER_GRAPH_PLUGIN = 'shader-graph';
+
+type CompilePayload = { status: 'ok' | 'error'; pixelError?: string; vertexError?: string };
+type CompileResponse = {
+  status?: 'success' | 'error' | 'ok';
+  message?: string;
+  data?: CompilePayload;
+  pixelError?: string;
+  vertexError?: string;
+};
+
+export function useShaderGraph() {
+  const store = useShaderGraphStore();
+  const sessionId = useSessionStore((s) => s.sessionId);
+
+  const compileQuery = useQuery<CompileResponse>({
+    queryKey: sessionQueryKey.pluginAction(sessionId ?? '', SHADER_GRAPH_PLUGIN, 'compile-shader'),
+    queryFn: () => ({ status: 'ok' as const }),
+    enabled: false,
+  });
+
+  const generateAndStore = useCallback(() => {
+    const glsl = codegen(store.nodes, store.edges);
+    store.setLastGlsl(glsl);
+    return glsl;
+  }, [store]);
+
+  const validateShader = useCallback(async () => {
+    if (!sessionId) return;
+    const glsl = generateAndStore();
+    store.setValidationStatus('validating');
+    store.setValidationErrors({});
+    try {
+      await sendCommand(sessionId, {
+        type: 'cmd:plugin:action',
+        plugin: SHADER_GRAPH_PLUGIN,
+        action: 'compile-shader',
+        params: { pixelSource: glsl.pixel, vertexSource: glsl.vertex ?? '' },
+      });
+    } catch {
+      store.setValidationStatus('error');
+      store.setValidationErrors({ pixelError: 'Failed to reach game process' });
+    }
+  }, [generateAndStore, sessionId, store]);
+
+  const applyToPlayground = useCallback(async () => {
+    const target = store.playgroundTarget;
+    if (!target || !sessionId) return;
+    const glsl = generateAndStore();
+    const shaderSource = glsl.vertex ? `${glsl.pixel}\n${glsl.vertex}` : glsl.pixel;
+    await sendCommand(sessionId, {
+      type: 'cmd:plugin:action',
+      plugin: PLUGIN_ID,
+      action: 'set-shader',
+      params: {
+        composite: target.composite,
+        systemIndex: target.systemIndex,
+        shaderSource,
+        filename: `${store.shaderName}.glsl`,
+      },
+    });
+  }, [generateAndStore, sessionId, store]);
+
+  const compileResult = compileQuery.data;
+
+  useEffect(() => {
+    if (!compileResult || store.validationStatus !== 'validating') return;
+
+    if (compileResult.status === 'error' && !compileResult.data) {
+      store.setValidationStatus('error');
+      store.setValidationErrors({ pixelError: compileResult.message ?? 'Shader validation failed' });
+      return;
+    }
+
+    const payload = compileResult.data ?? compileResult;
+    if (payload.status === 'ok') {
+      store.setValidationStatus('ok');
+      store.setValidationErrors({});
+      return;
+    }
+
+    store.setValidationStatus('error');
+    store.setValidationErrors({
+      pixelError: payload.pixelError,
+      vertexError: payload.vertexError,
+    });
+  }, [compileResult, store]);
+
+  return { ...store, generateAndStore, validateShader, applyToPlayground };
+}
diff --git a/src/pages/shader-graph/CodePreview.tsx b/src/pages/shader-graph/CodePreview.tsx
new file mode 100644
index 00000000..4f0e4069
--- /dev/null
+++ b/src/pages/shader-graph/CodePreview.tsx
@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useShaderGraph } from '@/hooks/use-shader-graph';
+import { useSessionStore } from '@/store/session';
+import { useTheme } from '@/hooks/use-theme';
+import oneLight from '@/assets/theme/light';
+import onDark from '@/assets/theme/dark';
+import { cn } from '@/utils/styles';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+
+export function CodePreview() {
+  const sessionId = useSessionStore((s) => s.sessionId);
+  const {
+    lastGeneratedGlsl,
+    validationStatus,
+    validationErrors,
+    generateAndStore,
+    validateShader,
+    applyToPlayground,
+    playgroundTarget,
+  } = useShaderGraph();
+  const theme = useTheme();
+  const hlTheme = theme === 'dark' ? onDark : oneLight;
+  const [copied, setCopied] = useState(false);
+
+  const glsl = lastGeneratedGlsl ?? generateAndStore();
+  const fullSource = glsl.vertex
+    ? `${glsl.pixel}\n\n// ── Vertex ──\n${glsl.vertex}`
+    : glsl.pixel;
+
+  function handleCopy() {
+    navigator.clipboard.writeText(fullSource).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }
+
+  const statusColor = {
+    idle: 'bg-muted text-muted-foreground',
+    validating: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400',
+    ok: 'bg-green-500/20 text-green-600 dark:text-green-400',
+    error: 'bg-red-500/20 text-red-600 dark:text-red-400',
+  }[validationStatus];
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex items-center justify-between gap-2 px-3 py-2 border-b shrink-0">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          GLSL Output
+        </span>
+        <div className="flex items-center gap-2">
+          <Badge className={cn('text-[9px] h-4 px-1.5 rounded-full', statusColor)}>
+            {validationStatus}
+          </Badge>
+          <button
+            onClick={handleCopy}
+            className="flex items-center justify-center size-5 rounded hover:bg-muted text-muted-foreground transition-colors"
+            title="Copy GLSL"
+          >
+            {copied ? <CheckIcon className="size-3 text-green-500" /> : <CopyIcon className="size-3" />}
+          </button>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1 min-h-0">
+        <SyntaxHighlighter
+          language="glsl"
+          style={{
+            ...hlTheme,
+            hljs: {
+              ...(hlTheme as Record<string, React.CSSProperties>).hljs,
+              background: 'transparent',
+              padding: 0,
+            },
+          }}
+          customStyle={{
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontSize: '0.625rem',
+            lineHeight: '1.6',
+            padding: '12px',
+            background: 'transparent',
+            margin: 0,
+          }}
+          showLineNumbers
+          wrapLines
+        >
+          {fullSource}
+        </SyntaxHighlighter>
+      </ScrollArea>
+
+      {(validationErrors.pixelError || validationErrors.vertexError) && (
+        <div className="border-t px-3 py-2 shrink-0 bg-red-500/10">
+          {validationErrors.pixelError && (
+            <p className="text-[10px] text-red-600 dark:text-red-400 font-mono whitespace-pre-wrap break-all">
+              {validationErrors.pixelError}
+            </p>
+          )}
+          {validationErrors.vertexError && (
+            <p className="text-[10px] text-red-600 dark:text-red-400 font-mono whitespace-pre-wrap break-all">
+              {validationErrors.vertexError}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="border-t px-3 py-2 flex gap-2 shrink-0">
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-7 text-xs flex-1"
+          onClick={() => generateAndStore()}
+        >
+          Generate
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-7 text-xs flex-1"
+          disabled={!sessionId || validationStatus === 'validating'}
+          onClick={() => validateShader()}
+        >
+          Validate
+        </Button>
+        <Button
+          size="sm"
+          className="h-7 text-xs flex-1"
+          disabled={!sessionId || !playgroundTarget}
+          onClick={() => applyToPlayground()}
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/shader-graph/NodeInspector.tsx b/src/pages/shader-graph/NodeInspector.tsx
new file mode 100644
index 00000000..617aab78
--- /dev/null
+++ b/src/pages/shader-graph/NodeInspector.tsx
@@ -0,0 +1,196 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useShaderGraphStore } from '@/store/shader-graph';
+import { NODE_DEFS } from './nodeDefs';
+import type { NodeType } from '@/types/shader-graph';
+import { Trash2Icon } from 'lucide-react';
+
+export function NodeInspector() {
+  const {
+    nodes,
+    edges,
+    selectedNodeId,
+    selectedEdgeId,
+    updateNodeData,
+    setShaderName,
+    shaderName,
+    removeNode,
+    removeEdge,
+  } = useShaderGraphStore();
+
+  const selected = selectedNodeId ? nodes.find((n) => n.id === selectedNodeId) : null;
+  const def = selected ? NODE_DEFS[selected.data.nodeType as NodeType] : null;
+  const selectedEdge = selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null;
+
+  return (
+    <div className="flex flex-col gap-3 p-3 text-xs">
+      <div className="grid gap-1">
+        <Label className="text-[10px] text-muted-foreground uppercase tracking-wider">Shader Name</Label>
+        <Input
+          className="h-7 text-xs font-mono"
+          value={shaderName}
+          onChange={(e) => setShaderName(e.target.value)}
+        />
+      </div>
+
+      {selected && def && (
+        <div className="border-t pt-3 grid gap-3">
+          <div className="flex items-start justify-between gap-2">
+            <div>
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-0.5">
+                {def.category}
+              </div>
+              <div className="font-semibold">{def.label}</div>
+            </div>
+            <button
+              onClick={() => removeNode(selected.id)}
+              className="flex items-center justify-center size-6 rounded hover:bg-red-500/10 text-muted-foreground hover:text-red-500 transition-colors shrink-0 mt-0.5"
+              title="Delete node (Del)"
+            >
+              <Trash2Icon className="size-3.5" />
+            </button>
+          </div>
+
+          {selected.data.nodeType === 'FloatConstant' && (
+            <div className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">Value</Label>
+              <Input
+                className="h-7 text-xs"
+                type="number"
+                step={0.01}
+                value={(selected.data.values?.val as number) ?? 0}
+                onChange={(e) =>
+                  updateNodeData(selected.id, {
+                    values: { ...selected.data.values, val: parseFloat(e.target.value) },
+                  })
+                }
+              />
+            </div>
+          )}
+
+          {selected.data.nodeType === 'Vec2Constant' && (
+            <div className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">X / Y</Label>
+              <div className="flex gap-1">
+                {[0, 1].map((idx) => (
+                  <Input
+                    key={idx}
+                    className="h-7 text-xs"
+                    type="number"
+                    step={0.01}
+                    value={((selected.data.values?.val as number[]) ?? [0, 0])[idx]}
+                    onChange={(e) => {
+                      const prev = (selected.data.values?.val as number[]) ?? [0, 0];
+                      const next = [...prev] as [number, number];
+                      next[idx] = parseFloat(e.target.value);
+                      updateNodeData(selected.id, { values: { ...selected.data.values, val: next } });
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {selected.data.nodeType === 'Vec3Constant' && (
+            <div className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">X / Y / Z</Label>
+              <div className="grid grid-cols-3 gap-1">
+                {[0, 1, 2].map((idx) => (
+                  <Input
+                    key={idx}
+                    className="h-7 text-xs"
+                    type="number"
+                    step={0.01}
+                    value={((selected.data.values?.val as number[]) ?? [0, 0, 0])[idx]}
+                    onChange={(e) => {
+                      const prev = (selected.data.values?.val as number[]) ?? [0, 0, 0];
+                      const next = [...prev] as [number, number, number];
+                      next[idx] = parseFloat(e.target.value);
+                      updateNodeData(selected.id, { values: { ...selected.data.values, val: next } });
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {selected.data.nodeType === 'Vec4Constant' && (
+            <div className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">R / G / B / A</Label>
+              <div className="grid grid-cols-2 gap-1">
+                {[0, 1, 2, 3].map((idx) => (
+                  <Input
+                    key={idx}
+                    className="h-7 text-xs"
+                    type="number"
+                    step={0.01}
+                    min={0}
+                    max={1}
+                    value={((selected.data.values?.val as number[]) ?? [0, 0, 0, 1])[idx]}
+                    onChange={(e) => {
+                      const prev = (selected.data.values?.val as number[]) ?? [0, 0, 0, 1];
+                      const next = [...prev] as [number, number, number, number];
+                      next[idx] = parseFloat(e.target.value);
+                      updateNodeData(selected.id, { values: { ...selected.data.values, val: next } });
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {def.inputs.length > 0 && (
+            <div className="grid gap-0.5">
+              <div className="text-[10px] text-muted-foreground font-medium mb-0.5">Inputs</div>
+              {def.inputs.map((port) => (
+                <div key={port.id} className="flex items-center justify-between">
+                  <span className="text-[10px] text-muted-foreground">{port.label}</span>
+                  <span className="text-[10px] font-mono text-muted-foreground/60">{port.type}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {def.outputs.length > 0 && (
+            <div className="grid gap-0.5">
+              <div className="text-[10px] text-muted-foreground font-medium mb-0.5">Outputs</div>
+              {def.outputs.map((port) => (
+                <div key={port.id} className="flex items-center justify-between">
+                  <span className="text-[10px] text-muted-foreground">{port.label}</span>
+                  <span className="text-[10px] font-mono text-muted-foreground/60">{port.type}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {selectedEdge && !selected && (
+        <div className="border-t pt-3 grid gap-3">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-0.5">
+                Edge
+              </div>
+              <div className="font-mono text-[10px] text-muted-foreground">
+                {selectedEdge.source} → {selectedEdge.target}
+              </div>
+            </div>
+            <button
+              onClick={() => removeEdge(selectedEdge.id)}
+              className="flex items-center justify-center size-6 rounded hover:bg-red-500/10 text-muted-foreground hover:text-red-500 transition-colors shrink-0"
+              title="Delete edge (Del)"
+            >
+              <Trash2Icon className="size-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!selected && !selectedEdge && (
+        <p className="text-[10px] text-muted-foreground">
+          Select a node or edge to inspect it.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/shader-graph/NodePalette.tsx b/src/pages/shader-graph/NodePalette.tsx
new file mode 100644
index 00000000..353d9a0e
--- /dev/null
+++ b/src/pages/shader-graph/NodePalette.tsx
@@ -0,0 +1,118 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { useParticleSystemPlayground } from '@/hooks/use-particle-system-playground';
+import { useShaderGraphStore } from '@/store/shader-graph';
+import type { NodeType } from '@/types/shader-graph';
+import { useState } from 'react';
+import { CATEGORY_COLORS, CATEGORY_ORDER, NODE_DEFS } from './nodeDefs';
+
+export function NodePalette() {
+  const [search, setSearch] = useState('');
+  const { playgroundTarget, setPlaygroundTarget } = useShaderGraphStore();
+  const { data } = useParticleSystemPlayground();
+
+  const composites = data?.composites ?? [];
+
+  const filtered = search.trim().toLowerCase();
+
+  function handleDragStart(event: React.DragEvent, nodeType: NodeType) {
+    event.dataTransfer.setData('application/shader-node-type', nodeType);
+    event.dataTransfer.effectAllowed = 'copy';
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-0 overflow-hidden">
+      <div className="p-3">
+        <Input
+          className="h-7 text-xs"
+          placeholder="Search nodes…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+        {CATEGORY_ORDER.map(({ category, nodes }) => {
+          const visible = nodes.filter((n) => {
+            const def = NODE_DEFS[n];
+            return !filtered || def.label.toLowerCase().includes(filtered);
+          });
+          if (visible.length === 0) return null;
+          return (
+            <div key={category} className="mb-3">
+              <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                {category}
+              </div>
+              <div className="grid gap-0.5">
+                {visible.map((nodeType) => {
+                  const def = NODE_DEFS[nodeType];
+                  const colorClass = CATEGORY_COLORS[category] ?? 'border-l-gray-500';
+                  return (
+                    <button
+                      type="button"
+                      key={nodeType}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, nodeType)}
+                      className={`cursor-grab rounded border border-l-2 bg-card px-2 py-1 text-xs select-none hover:bg-muted/50 active:cursor-grabbing ${colorClass}`}
+                    >
+                      {def.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {composites.length > 0 && (
+        <>
+          <Separator />
+          <div className="p-3 grid gap-2">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              Apply Target
+            </span>
+            <div className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">Composite</Label>
+              <select
+                className="h-7 w-full rounded border bg-card px-2 text-xs"
+                value={playgroundTarget?.composite ?? ''}
+                onChange={(e) =>
+                  setPlaygroundTarget(
+                    e.target.value
+                      ? { composite: e.target.value, systemIndex: playgroundTarget?.systemIndex ?? 1 }
+                      : null,
+                  )
+                }
+              >
+                <option value="">— none —</option>
+                {composites.map((c) => (
+                  <option key={c} value={c}>
+                    {c}
+                  </option>
+                ))}
+              </select>
+            </div>
+            {playgroundTarget?.composite && (
+              <div className="grid gap-1">
+                <Label className="text-[10px] text-muted-foreground">Emitter Index</Label>
+                <Input
+                  className="h-7 text-xs"
+                  type="number"
+                  min={1}
+                  value={playgroundTarget.systemIndex}
+                  onChange={(e) =>
+                    setPlaygroundTarget({
+                      ...playgroundTarget,
+                      systemIndex: Number(e.target.value),
+                    })
+                  }
+                />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/shader-graph/ShaderCanvas.tsx b/src/pages/shader-graph/ShaderCanvas.tsx
new file mode 100644
index 00000000..713567a2
--- /dev/null
+++ b/src/pages/shader-graph/ShaderCanvas.tsx
@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  applyNodeChanges,
+  applyEdgeChanges,
+  addEdge,
+  type NodeChange,
+  type EdgeChange,
+  type Connection,
+  type Edge,
+  type Node,
+  type ReactFlowInstance,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { ShaderNodeData, NodeType } from '@/types/shader-graph';
+import { useShaderGraphStore } from '@/store/shader-graph';
+import { NODE_DEFS } from './nodeDefs';
+import { nodeTypes } from './nodes';
+
+let idCounter = Date.now();
+function nextId() {
+  return `node-${++idCounter}`;
+}
+
+export function ShaderCanvas() {
+  const nodes = useShaderGraphStore((s) => s.nodes);
+  const edges = useShaderGraphStore((s) => s.edges);
+  const setNodes = useShaderGraphStore((s) => s.setNodes);
+  const setEdges = useShaderGraphStore((s) => s.setEdges);
+  const addNode = useShaderGraphStore((s) => s.addNode);
+  const removeNode = useShaderGraphStore((s) => s.removeNode);
+  const removeEdge = useShaderGraphStore((s) => s.removeEdge);
+  const selectNode = useShaderGraphStore((s) => s.selectNode);
+  const selectEdge = useShaderGraphStore((s) => s.selectEdge);
+  const selectedNodeId = useShaderGraphStore((s) => s.selectedNodeId);
+  const selectedEdgeId = useShaderGraphStore((s) => s.selectedEdgeId);
+
+  // Captured via onInit — avoids calling useReactFlow() at the same level as <ReactFlow>
+  const rfRef = useRef<ReactFlowInstance<Node<ShaderNodeData>> | null>(null);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange<Node<ShaderNodeData>>[]) => {
+      setNodes(applyNodeChanges(changes, nodes));
+    },
+    [nodes, setNodes],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setEdges(applyEdgeChanges(changes, edges));
+    },
+    [edges, setEdges],
+  );
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges(addEdge(connection, edges));
+    },
+    [edges, setEdges],
+  );
+
+  const onNodeClick = useCallback(
+    (_: React.MouseEvent, node: Node) => {
+      selectNode(node.id);
+    },
+    [selectNode],
+  );
+
+  const onEdgeClick = useCallback(
+    (_: React.MouseEvent, edge: { id: string }) => {
+      selectEdge(edge.id);
+    },
+    [selectEdge],
+  );
+
+  const onPaneClick = useCallback(() => {
+    selectNode(null);
+  }, [selectNode]);
+
+  const isValidConnection = useCallback(
+    (connection: Connection | Edge) => {
+      if (!connection.source || !connection.target) return false;
+      if (connection.source === connection.target) return false;
+      const sourceNode = nodes.find((n) => n.id === connection.source);
+      const targetNode = nodes.find((n) => n.id === connection.target);
+      if (!sourceNode || !targetNode) return false;
+      const sourceDef = NODE_DEFS[sourceNode.data.nodeType as NodeType];
+      const targetDef = NODE_DEFS[targetNode.data.nodeType as NodeType];
+      if (!sourceDef || !targetDef) return false;
+      const sourcePort = sourceDef.outputs.find((p) => p.id === connection.sourceHandle);
+      const targetPort = targetDef.inputs.find((p) => p.id === connection.targetHandle);
+      if (!sourcePort || !targetPort) return false;
+      return sourcePort.type === targetPort.type;
+    },
+    [nodes],
+  );
+
+  // Drop handler lives on the wrapper div so it fires regardless of ReactFlow internals
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      const nodeType = event.dataTransfer.getData('application/shader-node-type') as NodeType;
+      if (!nodeType || !NODE_DEFS[nodeType]) return;
+
+      const rf = rfRef.current;
+      const position = rf
+        ? rf.screenToFlowPosition({ x: event.clientX, y: event.clientY })
+        : { x: event.clientX, y: event.clientY };
+
+      const def = NODE_DEFS[nodeType];
+      const id = nextId();
+
+      addNode({
+        id,
+        type: 'shaderNode',
+        position,
+        data: { label: def.label, nodeType },
+      });
+      selectNode(id);
+    },
+    [addNode, selectNode],
+  );
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Delete' && e.key !== 'Backspace') return;
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement).isContentEditable) return;
+      if (selectedNodeId) removeNode(selectedNodeId);
+      else if (selectedEdgeId) removeEdge(selectedEdgeId);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [selectedNodeId, selectedEdgeId, removeNode, removeEdge]);
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+  }, []);
+
+  return (
+    <div className="h-full w-full" style={{ height: '100%', width: '100%' }} onDrop={onDrop} onDragOver={onDragOver}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={onNodeClick}
+        onEdgeClick={onEdgeClick}
+        onPaneClick={onPaneClick}
+        isValidConnection={isValidConnection}
+        onInit={(instance) => {
+          rfRef.current = instance;
+        }}
+        nodeTypes={nodeTypes}
+        fitView
+        deleteKeyCode={null}
+        className="bg-background"
+      >
+        <Background gap={20} size={1} className="!text-muted-foreground/20" />
+        <Controls className="[&>button]:bg-card [&>button]:border-border [&>button]:text-foreground" />
+        <MiniMap className="!bg-card !border !border-border" nodeColor="hsl(var(--muted))" />
+      </ReactFlow>
+    </div>
+  );
+}
diff --git a/src/pages/shader-graph/codegen.ts b/src/pages/shader-graph/codegen.ts
new file mode 100644
index 00000000..297aced7
--- /dev/null
+++ b/src/pages/shader-graph/codegen.ts
@@ -0,0 +1,169 @@
+import type { ShaderNodeInstance, ShaderEdge, GeneratedGlsl, ShaderNodeData } from '@/types/shader-graph';
+import { NODE_DEFS } from './nodeDefs';
+import { glslFloat } from './glslUtils';
+
+const PASSTHROUGH_PIXEL = [
+  'vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {',
+  '  return Texel(tex, texture_coords) * color;',
+  '}',
+].join('\n');
+
+const NOISE_HELPER = [
+  'float feather_hash(vec2 p) {',
+  '  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);',
+  '}',
+].join('\n');
+
+function varName(nodeId: string, portId: string): string {
+  return `v_${nodeId.replace(/[^a-zA-Z0-9_]/g, '_')}_${portId.replace(/[^a-zA-Z0-9_]/g, '_')}`;
+}
+
+function defaultValue(type: string, nodeData: ShaderNodeData, portId: string): string {
+  const val = nodeData.values?.[portId];
+
+  switch (type) {
+    case 'float':
+      return glslFloat(val);
+    case 'vec2': {
+      const v = (val as number[]) ?? [0, 0];
+      return `vec2(${glslFloat(v[0])}, ${glslFloat(v[1])})`;
+    }
+    case 'vec3': {
+      const v = (val as number[]) ?? [0, 0, 0];
+      return `vec3(${glslFloat(v[0])}, ${glslFloat(v[1])}, ${glslFloat(v[2])})`;
+    }
+    case 'vec4': {
+      const v = (val as number[]) ?? [0, 0, 0, 1];
+      return `vec4(${glslFloat(v[0])}, ${glslFloat(v[1])}, ${glslFloat(v[2])}, ${glslFloat(v[3])})`;
+    }
+    case 'mat4':
+      return 'mat4(1.0)';
+    default:
+      return '0.0';
+  }
+}
+
+function buildNodeBody(node: ShaderNodeInstance, edges: ShaderEdge[]): string[] {
+  const def = NODE_DEFS[node.data.nodeType];
+  if (!def?.emitGlsl) return [];
+
+  const inVars: Record<string, string> = {};
+  for (const port of def.inputs) {
+    const edge = edges.find((e) => e.target === node.id && e.targetHandle === port.id);
+    inVars[port.id] = edge?.sourceHandle
+      ? varName(edge.source, edge.sourceHandle)
+      : defaultValue(port.type, node.data, port.id);
+  }
+
+  const outVars: Record<string, string> = {};
+  for (const port of def.outputs) {
+    outVars[port.id] = varName(node.id, port.id);
+  }
+
+  const glsl = def.emitGlsl(inVars, outVars, node.data);
+  return glsl ? glsl.split('\n').map((s) => s.trim()).filter(Boolean) : [];
+}
+
+function collectReachable(startId: string, nodes: ShaderNodeInstance[], edges: ShaderEdge[]): ShaderNodeInstance[] {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const visited = new Set<string>();
+  const ordered: ShaderNodeInstance[] = [];
+
+  function dfs(id: string) {
+    if (visited.has(id)) return;
+    visited.add(id);
+    for (const edge of edges) {
+      if (edge.target === id) dfs(edge.source);
+    }
+    const node = nodeMap.get(id);
+    if (node) ordered.push(node);
+  }
+
+  dfs(startId);
+  return ordered;
+}
+
+function buildEffect(bodyLines: string[], returnExpr: string): string {
+  return [
+    'vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {',
+    ...bodyLines.map((l) => `  ${l}`),
+    `  return ${returnExpr} * color;`,
+    '}',
+  ].join('\n');
+}
+
+function buildPosition(bodyLines: string[], returnExpr: string): string {
+  return [
+    'vec4 position(mat4 transform_projection, vec4 vertex_position) {',
+    ...bodyLines.map((l) => `  ${l}`),
+    `  return ${returnExpr};`,
+    '}',
+  ].join('\n');
+}
+
+export function codegen(nodes: ShaderNodeInstance[], edges: ShaderEdge[]): GeneratedGlsl {
+  const fragOut = nodes.find((n) => n.data.nodeType === 'FragmentOutput');
+  const vertOut = nodes.find((n) => n.data.nodeType === 'VertexOutput');
+
+  if (!nodes.length || !fragOut) {
+    return { pixel: PASSTHROUGH_PIXEL, vertex: null, hash: 'passthrough' };
+  }
+
+  const reachable = collectReachable(fragOut.id, nodes, edges);
+
+  const externSet = new Set<string>();
+  let needsNoise = false;
+  for (const node of reachable) {
+    const def = NODE_DEFS[node.data.nodeType];
+    def?.externs?.forEach((e) => externSet.add(e));
+    if (def?.helperKey === 'noise') needsNoise = true;
+  }
+
+  let vertReachable: ShaderNodeInstance[] = [];
+  if (vertOut) {
+    vertReachable = collectReachable(vertOut.id, nodes, edges);
+    for (const node of vertReachable) {
+      const def = NODE_DEFS[node.data.nodeType];
+      def?.externs?.forEach((e) => externSet.add(e));
+      if (def?.helperKey === 'noise') needsNoise = true;
+    }
+  }
+
+  const bodyLines: string[] = [];
+  for (const node of reachable) {
+    if (node.data.nodeType !== 'FragmentOutput') {
+      bodyLines.push(...buildNodeBody(node, edges));
+    }
+  }
+
+  const fragColorEdge = edges.find((e) => e.target === fragOut.id && e.targetHandle === 'color');
+  const returnExpr = fragColorEdge?.sourceHandle
+    ? varName(fragColorEdge.source, fragColorEdge.sourceHandle)
+    : 'Texel(tex, texture_coords)';
+
+  const parts: string[] = [];
+  if (externSet.size) parts.push([...externSet].join('\n'));
+  if (needsNoise) parts.push(NOISE_HELPER);
+  parts.push(buildEffect(bodyLines, returnExpr));
+
+  const pixel = parts.join('\n\n');
+
+  let vertex: string | null = null;
+  if (vertOut) {
+    const vertLines: string[] = [];
+    for (const node of vertReachable) {
+      if (node.data.nodeType !== 'VertexOutput') {
+        vertLines.push(...buildNodeBody(node, edges));
+      }
+    }
+    const posEdge = edges.find((e) => e.target === vertOut.id && e.targetHandle === 'pos');
+    const vertReturn = posEdge?.sourceHandle
+      ? varName(posEdge.source, posEdge.sourceHandle)
+      : 'transform_projection * vertex_position';
+
+    vertex = buildPosition(vertLines, vertReturn);
+  }
+
+  const hash = btoa(pixel.slice(0, 64)).slice(0, 16);
+  return { pixel, vertex, hash };
+}
diff --git a/src/pages/shader-graph/glslUtils.ts b/src/pages/shader-graph/glslUtils.ts
new file mode 100644
index 00000000..94cde164
--- /dev/null
+++ b/src/pages/shader-graph/glslUtils.ts
@@ -0,0 +1,5 @@
+export function glslFloat(n: unknown): string {
+  const value = Number(n ?? 0);
+  if (!Number.isFinite(value)) return '0.0';
+  return Number.isInteger(value) ? `${value}.0` : String(value);
+}
diff --git a/src/pages/shader-graph/index.tsx b/src/pages/shader-graph/index.tsx
new file mode 100644
index 00000000..da7b6484
--- /dev/null
+++ b/src/pages/shader-graph/index.tsx
@@ -0,0 +1,49 @@
+import { ReactFlowProvider } from '@xyflow/react';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { NodePalette } from './NodePalette';
+import { ShaderCanvas } from './ShaderCanvas';
+import { NodeInspector } from './NodeInspector';
+import { CodePreview } from './CodePreview';
+
+export default function ShaderGraph() {
+  return (
+    <ReactFlowProvider>
+      <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1 max-h-[92vh]">
+        <ResizablePanel defaultSize="16%" minSize="12%" maxSize="25%" className="flex flex-col border-r">
+          <div className="border-b px-3 py-2 shrink-0">
+            <span className="text-sm font-semibold">Nodes</span>
+          </div>
+          <NodePalette />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        <ResizablePanel defaultSize="57%" minSize="30%" className="min-w-0 overflow-hidden">
+          <ShaderCanvas />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        <ResizablePanel defaultSize="27%" minSize="18%" maxSize="40%" className="flex flex-col border-l">
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel defaultSize="35%" minSize="20%" className="flex flex-col overflow-hidden">
+              <div className="border-b px-3 py-2 shrink-0">
+                <span className="text-sm font-semibold">Inspector</span>
+              </div>
+              <ScrollArea className="flex-1 min-h-0">
+                <NodeInspector />
+              </ScrollArea>
+            </ResizablePanel>
+
+            <ResizableHandle withHandle />
+
+            <ResizablePanel defaultSize="65%" minSize="30%" className="flex flex-col overflow-hidden">
+              <CodePreview />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ReactFlowProvider>
+  );
+}
diff --git a/src/pages/shader-graph/nodeDefs.ts b/src/pages/shader-graph/nodeDefs.ts
new file mode 100644
index 00000000..3784fbee
--- /dev/null
+++ b/src/pages/shader-graph/nodeDefs.ts
@@ -0,0 +1,357 @@
+import type { GlslType, NodeDef, NodeType, ShaderNodeData } from '@/types/shader-graph';
+import { glslFloat } from './glslUtils';
+
+export const PORT_TYPE_COLORS: Record<GlslType, string> = {
+  float: '#94a3b8',
+  vec2: '#4ade80',
+  vec3: '#60a5fa',
+  vec4: '#c084fc',
+  mat4: '#fb923c',
+};
+
+type Emit = (
+  inVars: Record<string, string>,
+  outVars: Record<string, string>,
+  data: ShaderNodeData,
+) => string;
+
+function unary(fn: string): Emit {
+  return (i, o) => `float ${o.out} = ${fn}(${i.in0});`;
+}
+
+function binary(op: string): Emit {
+  return (i, o) => `float ${o.out} = ${i.a} ${op} ${i.b};`;
+}
+
+export const NODE_DEFS: Record<NodeType, NodeDef> = {
+  // ─── Input ──────────────────────────────────────────────────────────────────
+  TextureColor: {
+    category: 'Input', label: 'Texture Color',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (_, o) => `vec4 ${o.out} = Texel(tex, texture_coords);`,
+  },
+  TextureCoords: {
+    category: 'Input', label: 'Texture Coords',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (_, o) => `vec2 ${o.out} = texture_coords;`,
+  },
+  ScreenCoords: {
+    category: 'Input', label: 'Screen Coords',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (_, o) => `vec2 ${o.out} = screen_coords;`,
+  },
+  VertexColor: {
+    category: 'Input', label: 'Vertex Color',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (_, o) => `vec4 ${o.out} = color;`,
+  },
+  Time: {
+    category: 'Input', label: 'Time',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'T', type: 'float' }],
+    externs: ['extern number u_time;'],
+    emitGlsl: (_, o) => `float ${o.out} = u_time;`,
+  },
+  Resolution: {
+    category: 'Input', label: 'Resolution',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (_, o) => `vec2 ${o.out} = love_ScreenSize.xy;`,
+  },
+  FloatConstant: {
+    category: 'Input', label: 'Float',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'Value', type: 'float' }],
+    emitGlsl: (_, o, d) => `float ${o.out} = ${glslFloat(d.values?.val)};`,
+  },
+  Vec2Constant: {
+    category: 'Input', label: 'Vec2',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (_, o, d) => {
+      const v = (d.values?.val as number[]) ?? [0, 0];
+      return `vec2 ${o.out} = vec2(${glslFloat(v[0])}, ${glslFloat(v[1])});`;
+    },
+  },
+  Vec3Constant: {
+    category: 'Input', label: 'Vec3',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (_, o, d) => {
+      const v = (d.values?.val as number[]) ?? [0, 0, 0];
+      return `vec3 ${o.out} = vec3(${glslFloat(v[0])}, ${glslFloat(v[1])}, ${glslFloat(v[2])});`;
+    },
+  },
+  Vec4Constant: {
+    category: 'Input', label: 'Vec4',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (_, o, d) => {
+      const v = (d.values?.val as number[]) ?? [0, 0, 0, 1];
+      return `vec4 ${o.out} = vec4(${glslFloat(v[0])}, ${glslFloat(v[1])}, ${glslFloat(v[2])}, ${glslFloat(v[3])});`;
+    },
+  },
+
+  // ─── Math ────────────────────────────────────────────────────────────────────
+  Add: {
+    category: 'Math', label: 'Add',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: binary('+'),
+  },
+  Subtract: {
+    category: 'Math', label: 'Subtract',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: binary('-'),
+  },
+  Multiply: {
+    category: 'Math', label: 'Multiply',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: binary('*'),
+  },
+  Divide: {
+    category: 'Math', label: 'Divide',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: binary('/'),
+  },
+  Power: {
+    category: 'Math', label: 'Power',
+    inputs: [{ id: 'base', label: 'Base', type: 'float' }, { id: 'exp', label: 'Exp', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = pow(${i.base}, ${i.exp});`,
+  },
+  Clamp: {
+    category: 'Math', label: 'Clamp',
+    inputs: [
+      { id: 'val', label: 'Val', type: 'float' },
+      { id: 'min', label: 'Min', type: 'float' },
+      { id: 'max', label: 'Max', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = clamp(${i.val}, ${i.min}, ${i.max});`,
+  },
+  Lerp: {
+    category: 'Math', label: 'Lerp',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+      { id: 't', label: 'T', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = mix(${i.a}, ${i.b}, ${i.t});`,
+  },
+  Step: {
+    category: 'Math', label: 'Step',
+    inputs: [{ id: 'edge', label: 'Edge', type: 'float' }, { id: 'x', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = step(${i.edge}, ${i.x});`,
+  },
+  Smoothstep: {
+    category: 'Math', label: 'Smoothstep',
+    inputs: [
+      { id: 'edge0', label: 'Edge0', type: 'float' },
+      { id: 'edge1', label: 'Edge1', type: 'float' },
+      { id: 'x', label: 'X', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = smoothstep(${i.edge0}, ${i.edge1}, ${i.x});`,
+  },
+  Sin: { category: 'Math', label: 'Sin', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('sin') },
+  Cos: { category: 'Math', label: 'Cos', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('cos') },
+  Abs: { category: 'Math', label: 'Abs', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('abs') },
+  Fract: { category: 'Math', label: 'Fract', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('fract') },
+  Floor: { category: 'Math', label: 'Floor', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('floor') },
+
+  // ─── Vector ──────────────────────────────────────────────────────────────────
+  Split: {
+    category: 'Vector', label: 'Split',
+    inputs: [{ id: 'vec', label: 'RGBA', type: 'vec4' }],
+    outputs: [
+      { id: 'r', label: 'R', type: 'float' },
+      { id: 'g', label: 'G', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+      { id: 'a', label: 'A', type: 'float' },
+    ],
+    emitGlsl: (i, o) =>
+      `float ${o.r} = ${i.vec}.r;\nfloat ${o.g} = ${i.vec}.g;\nfloat ${o.b} = ${i.vec}.b;\nfloat ${o.a} = ${i.vec}.a;`,
+  },
+  Combine: {
+    category: 'Vector', label: 'Combine',
+    inputs: [
+      { id: 'r', label: 'R', type: 'float' },
+      { id: 'g', label: 'G', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+      { id: 'a', label: 'A', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(${i.r}, ${i.g}, ${i.b}, ${i.a});`,
+  },
+  Normalize: {
+    category: 'Vector', label: 'Normalize',
+    inputs: [{ id: 'vec', label: 'Vec', type: 'vec4' }],
+    outputs: [{ id: 'out', label: 'Vec', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(normalize(${i.vec}.rgb), ${i.vec}.a);`,
+  },
+  Length: {
+    category: 'Vector', label: 'Length',
+    inputs: [{ id: 'vec', label: 'Vec', type: 'vec4' }],
+    outputs: [{ id: 'out', label: 'Len', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = length(${i.vec}.rgb);`,
+  },
+  Dot: {
+    category: 'Vector', label: 'Dot',
+    inputs: [{ id: 'a', label: 'A', type: 'vec4' }, { id: 'b', label: 'B', type: 'vec4' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = dot(${i.a}.rgb, ${i.b}.rgb);`,
+  },
+
+  // ─── Color ───────────────────────────────────────────────────────────────────
+  Desaturate: {
+    category: 'Color', label: 'Desaturate',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Color', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_lum = dot(${i.color}.rgb, vec3(0.299, 0.587, 0.114));\nvec4 ${o.out} = vec4(mix(${i.color}.rgb, vec3(${o.out}_lum), ${i.amount}), ${i.color}.a);`,
+  },
+  OneMinus: {
+    category: 'Color', label: 'One Minus',
+    inputs: [{ id: 'val', label: 'Val', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = 1.0 - ${i.val};`,
+  },
+  HueShift: {
+    category: 'Color', label: 'Hue Shift',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'shift', label: 'Shift', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Color', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec3 ${o.out}_p = vec3(0.55735) * dot(vec3(0.55735), ${i.color}.rgb);\nvec3 ${o.out}_u = ${i.color}.rgb - ${o.out}_p;\nvec3 ${o.out}_v = cross(vec3(0.55735), ${o.out}_u);\nvec4 ${o.out} = vec4(${o.out}_p + ${o.out}_u * cos(${i.shift} * 6.2832) + ${o.out}_v * sin(${i.shift} * 6.2832), ${i.color}.a);`,
+  },
+
+  // ─── Noise ───────────────────────────────────────────────────────────────────
+  SimpleNoise: {
+    category: 'Noise', label: 'Simple Noise',
+    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'Noise', type: 'float' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) => `float ${o.out} = feather_hash(${i.uv});`,
+  },
+  Ripple: {
+    category: 'Noise', label: 'Ripple',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'time', label: 'Time', type: 'float' },
+      { id: 'freq', label: 'Freq', type: 'float' },
+      { id: 'amp', label: 'Amp', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out} = ${i.uv} + vec2(sin(${i.uv}.y * ${i.freq} + ${i.time}) * ${i.amp}, 0.0);`,
+  },
+
+  // ─── Output ──────────────────────────────────────────────────────────────────
+  FragmentOutput: {
+    category: 'Output', label: 'Fragment Output',
+    inputs: [{ id: 'color', label: 'Color', type: 'vec4' }],
+    outputs: [],
+    emitGlsl: () => '',
+  },
+
+  // ─── Vector (destructure / construct) ───────────────────────────────────────
+  Combine2: {
+    category: 'Vector', label: 'Combine2',
+    inputs: [{ id: 'x', label: 'X', type: 'float' }, { id: 'y', label: 'Y', type: 'float' }],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = vec2(${i.x}, ${i.y});`,
+  },
+  Combine3: {
+    category: 'Vector', label: 'Combine3',
+    inputs: [
+      { id: 'x', label: 'X', type: 'float' },
+      { id: 'y', label: 'Y', type: 'float' },
+      { id: 'z', label: 'Z', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (i, o) => `vec3 ${o.out} = vec3(${i.x}, ${i.y}, ${i.z});`,
+  },
+  SplitVec2: {
+    category: 'Vector', label: 'Split Vec2',
+    inputs: [{ id: 'vec', label: 'XY', type: 'vec2' }],
+    outputs: [
+      { id: 'x', label: 'X', type: 'float' },
+      { id: 'y', label: 'Y', type: 'float' },
+    ],
+    emitGlsl: (i, o) => `float ${o.x} = ${i.vec}.x;\nfloat ${o.y} = ${i.vec}.y;`,
+  },
+  SplitVec3: {
+    category: 'Vector', label: 'Split Vec3',
+    inputs: [{ id: 'vec', label: 'XYZ', type: 'vec3' }],
+    outputs: [
+      { id: 'x', label: 'X', type: 'float' },
+      { id: 'y', label: 'Y', type: 'float' },
+      { id: 'z', label: 'Z', type: 'float' },
+    ],
+    emitGlsl: (i, o) => `float ${o.x} = ${i.vec}.x;\nfloat ${o.y} = ${i.vec}.y;\nfloat ${o.z} = ${i.vec}.z;`,
+  },
+
+  // ─── Vertex ──────────────────────────────────────────────────────────────────
+  MatVecMul: {
+    category: 'Vertex', label: 'Mat × Vec',
+    inputs: [
+      { id: 'mat', label: 'Mat', type: 'mat4' },
+      { id: 'vec', label: 'Vec', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'Out', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = ${i.mat} * ${i.vec};`,
+  },
+  VertexPosition: {
+    category: 'Vertex', label: 'Vertex Position',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'Pos', type: 'vec4' }],
+    emitGlsl: (_, o) => `vec4 ${o.out} = vertex_position;`,
+  },
+  TransformMatrix: {
+    category: 'Vertex', label: 'Transform Matrix',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'Mat', type: 'mat4' }],
+    emitGlsl: (_, o) => `mat4 ${o.out} = transform_projection;`,
+  },
+  VertexOutput: {
+    category: 'Vertex', label: 'Vertex Output',
+    inputs: [{ id: 'pos', label: 'Pos', type: 'vec4' }],
+    outputs: [],
+    emitGlsl: () => '',
+  },
+};
+
+export const CATEGORY_COLORS: Record<string, string> = {
+  Input: 'border-l-blue-500',
+  Math: 'border-l-orange-500',
+  Vector: 'border-l-purple-500',
+  Color: 'border-l-pink-500',
+  Noise: 'border-l-green-500',
+  Output: 'border-l-red-500',
+  Vertex: 'border-l-yellow-500',
+};
+
+export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
+  { category: 'Input', nodes: ['TextureColor', 'TextureCoords', 'ScreenCoords', 'VertexColor', 'Time', 'Resolution', 'FloatConstant', 'Vec2Constant', 'Vec3Constant', 'Vec4Constant'] },
+  { category: 'Math', nodes: ['Add', 'Subtract', 'Multiply', 'Divide', 'Power', 'Clamp', 'Lerp', 'Step', 'Smoothstep', 'Sin', 'Cos', 'Abs', 'Fract', 'Floor'] },
+  { category: 'Vector', nodes: ['Combine2', 'Combine3', 'Combine', 'Split', 'SplitVec2', 'SplitVec3', 'Normalize', 'Length', 'Dot'] },
+  { category: 'Color', nodes: ['Desaturate', 'OneMinus', 'HueShift'] },
+  { category: 'Noise', nodes: ['SimpleNoise', 'Ripple'] },
+  { category: 'Output', nodes: ['FragmentOutput'] },
+  { category: 'Vertex', nodes: ['VertexPosition', 'TransformMatrix', 'MatVecMul', 'VertexOutput'] },
+];
diff --git a/src/pages/shader-graph/nodes/index.tsx b/src/pages/shader-graph/nodes/index.tsx
new file mode 100644
index 00000000..3733acac
--- /dev/null
+++ b/src/pages/shader-graph/nodes/index.tsx
@@ -0,0 +1,81 @@
+import { Fragment } from 'react';
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
+import { cn } from '@/utils/styles';
+import type { ShaderNodeData, NodeType } from '@/types/shader-graph';
+import { NODE_DEFS, CATEGORY_COLORS, PORT_TYPE_COLORS } from '../nodeDefs';
+
+const ROW_H = 20;
+
+export function ShaderNode({ data, selected }: NodeProps<Node<ShaderNodeData>>) {
+  const def = NODE_DEFS[data.nodeType as NodeType];
+  if (!def) return null;
+  const colorClass = CATEGORY_COLORS[def.category] ?? 'border-l-gray-500';
+  const rows = Math.max(def.inputs.length, def.outputs.length, 1);
+
+  return (
+    <div
+      className={cn(
+        'min-w-28 rounded border border-l-2 bg-card px-3 py-2 shadow-sm',
+        colorClass,
+        selected && 'ring-2 ring-primary',
+      )}
+    >
+      <div className="mb-1 text-[9px] font-medium uppercase tracking-wider text-muted-foreground">
+        {def.category}
+      </div>
+      <div className="text-xs font-semibold">{data.label}</div>
+
+      {/* Handles must be direct children of this .relative div so they position relative to it */}
+      <div className="relative mt-2" style={{ minHeight: rows * ROW_H }}>
+        {def.inputs.map((port, i) => (
+          <Fragment key={port.id}>
+            <Handle
+              type="target"
+              position={Position.Left}
+              id={port.id}
+              style={{
+                top: i * ROW_H + ROW_H / 2,
+                left: -12,
+                backgroundColor: PORT_TYPE_COLORS[port.type],
+                borderColor: PORT_TYPE_COLORS[port.type],
+              }}
+              className="size-2.5! border-2!"
+            />
+            <div
+              style={{ position: 'absolute', top: i * ROW_H, left: 0, height: ROW_H }}
+              className="flex items-center"
+            >
+              <span className="text-[9px] text-muted-foreground">{port.label}</span>
+            </div>
+          </Fragment>
+        ))}
+        {def.outputs.map((port, i) => (
+          <Fragment key={port.id}>
+            <Handle
+              type="source"
+              position={Position.Right}
+              id={port.id}
+              style={{
+                top: i * ROW_H + ROW_H / 2,
+                right: -12,
+                backgroundColor: PORT_TYPE_COLORS[port.type],
+                borderColor: PORT_TYPE_COLORS[port.type],
+              }}
+              className="size-2.5! border-2!"
+            />
+            <div
+              style={{ position: 'absolute', top: i * ROW_H, right: 0, height: ROW_H }}
+              className="flex items-center justify-end"
+            >
+              <span className="text-[9px] text-muted-foreground">{port.label}</span>
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const nodeTypes = {
+  shaderNode: ShaderNode,
+} as const;
diff --git a/src/router.tsx b/src/router.tsx
index f24a7e61..9f230383 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -25,6 +25,7 @@ import TimeTravel from './pages/time-travel';
 import Compare from './pages/compare';
 import Assets from './pages/assets';
 import ParticleSystemPlayground from './pages/particle-system-playground';
+import ShaderGraph from './pages/shader-graph';
 import { SettingsModal } from './pages/settings';
 import { useConfigStore } from './store/config';
 import { AboutModal } from './pages/about';
@@ -159,6 +160,17 @@ function RequireSession({ children }: { children: React.ReactNode }) {
 }
 
 export const Router = () => {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== 'Backspace') return;
+      const el = e.target as HTMLElement;
+      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable) return;
+      e.preventDefault();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
   return (
     <BrowserRouter>
       <SidebarProvider
@@ -246,6 +258,7 @@ export const Router = () => {
                   </RequireSession>
                 }
               />
+              <Route path="/shader-graph" element={<ShaderGraph />} />
 
               <Route path="/plugins">
                 <Route
diff --git a/src/store/shader-graph.ts b/src/store/shader-graph.ts
new file mode 100644
index 00000000..40acb90c
--- /dev/null
+++ b/src/store/shader-graph.ts
@@ -0,0 +1,85 @@
+import type { Node, Edge } from '@xyflow/react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { ShaderNodeData, PlaygroundTarget, GeneratedGlsl } from '@/types/shader-graph';
+
+type ValidationStatus = 'idle' | 'validating' | 'ok' | 'error';
+
+type ShaderGraphStore = {
+  nodes: Node<ShaderNodeData>[];
+  edges: Edge[];
+  selectedNodeId: string | null;
+  selectedEdgeId: string | null;
+  shaderName: string;
+  playgroundTarget: PlaygroundTarget | null;
+  lastGeneratedGlsl: GeneratedGlsl | null;
+  validationStatus: ValidationStatus;
+  validationErrors: { pixelError?: string; vertexError?: string };
+
+  setNodes: (nodes: Node<ShaderNodeData>[]) => void;
+  setEdges: (edges: Edge[]) => void;
+  addNode: (node: Node<ShaderNodeData>) => void;
+  removeNode: (id: string) => void;
+  removeEdge: (id: string) => void;
+  updateNodeData: (id: string, patch: Partial<ShaderNodeData>) => void;
+  selectNode: (id: string | null) => void;
+  selectEdge: (id: string | null) => void;
+  setShaderName: (name: string) => void;
+  setPlaygroundTarget: (target: PlaygroundTarget | null) => void;
+  setLastGlsl: (glsl: GeneratedGlsl | null) => void;
+  setValidationStatus: (status: ValidationStatus) => void;
+  setValidationErrors: (errors: ShaderGraphStore['validationErrors']) => void;
+};
+
+export const useShaderGraphStore = create<ShaderGraphStore>()(
+  persist(
+    (set) => ({
+      nodes: [],
+      edges: [],
+      selectedNodeId: null,
+      selectedEdgeId: null,
+      shaderName: 'my-shader',
+      playgroundTarget: null,
+      lastGeneratedGlsl: null,
+      validationStatus: 'idle',
+      validationErrors: {},
+
+      setNodes: (nodes) => set({ nodes }),
+      setEdges: (edges) => set({ edges }),
+      addNode: (node) => set((s) => ({ nodes: [...s.nodes, node] })),
+      removeNode: (id) =>
+        set((s) => ({
+          nodes: s.nodes.filter((n) => n.id !== id),
+          edges: s.edges.filter((e) => e.source !== id && e.target !== id),
+          selectedNodeId: s.selectedNodeId === id ? null : s.selectedNodeId,
+        })),
+      removeEdge: (id) =>
+        set((s) => ({
+          edges: s.edges.filter((e) => e.id !== id),
+          selectedEdgeId: s.selectedEdgeId === id ? null : s.selectedEdgeId,
+        })),
+      updateNodeData: (id, patch) =>
+        set((s) => ({
+          nodes: s.nodes.map((n) =>
+            n.id === id ? { ...n, data: { ...n.data, ...patch } } : n,
+          ),
+        })),
+      selectNode: (selectedNodeId) => set({ selectedNodeId, selectedEdgeId: null }),
+      selectEdge: (selectedEdgeId) => set({ selectedEdgeId, selectedNodeId: null }),
+      setShaderName: (shaderName) => set({ shaderName }),
+      setPlaygroundTarget: (playgroundTarget) => set({ playgroundTarget }),
+      setLastGlsl: (lastGeneratedGlsl) => set({ lastGeneratedGlsl }),
+      setValidationStatus: (validationStatus) => set({ validationStatus }),
+      setValidationErrors: (validationErrors) => set({ validationErrors }),
+    }),
+    {
+      name: 'feather-shader-graph',
+      partialize: (s) => ({
+        nodes: s.nodes,
+        edges: s.edges,
+        shaderName: s.shaderName,
+        playgroundTarget: s.playgroundTarget,
+      }),
+    },
+  ),
+);
diff --git a/src/types/shader-graph.ts b/src/types/shader-graph.ts
new file mode 100644
index 00000000..db32e720
--- /dev/null
+++ b/src/types/shader-graph.ts
@@ -0,0 +1,59 @@
+import type { Node, Edge } from '@xyflow/react';
+
+export type GlslType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'mat4';
+
+export type PortDef = { id: string; label: string; type: GlslType };
+
+export const NODE_TYPES = [
+  'TextureColor', 'TextureCoords', 'ScreenCoords', 'VertexColor',
+  'Time', 'Resolution', 'FloatConstant', 'Vec2Constant', 'Vec4Constant',
+  'Add', 'Subtract', 'Multiply', 'Divide', 'Power',
+  'Clamp', 'Lerp', 'Step', 'Smoothstep',
+  'Sin', 'Cos', 'Abs', 'Fract', 'Floor',
+  'Split', 'Combine', 'Normalize', 'Length', 'Dot',
+  'Desaturate', 'OneMinus', 'HueShift',
+  'SimpleNoise', 'Ripple',
+  'FragmentOutput',
+  'VertexPosition', 'TransformMatrix', 'VertexOutput',
+  'SplitVec2', 'MatVecMul',
+  'Vec3Constant', 'SplitVec3', 'Combine2', 'Combine3',
+] as const;
+
+export type NodeType = (typeof NODE_TYPES)[number];
+
+export type NodeCategory = 'Input' | 'Math' | 'Vector' | 'Color' | 'Noise' | 'Output' | 'Vertex';
+
+export type ShaderNodeData = {
+  label: string;
+  nodeType: NodeType;
+  values?: Record<string, number | number[]>;
+  [key: string]: unknown;
+};
+
+export type NodeDef = {
+  category: NodeCategory;
+  label: string;
+  inputs: PortDef[];
+  outputs: PortDef[];
+  emitGlsl: (
+    inVars: Record<string, string>,
+    outVars: Record<string, string>,
+    data: ShaderNodeData,
+  ) => string;
+  externs?: string[];
+  helperKey?: string;
+};
+
+export type ShaderNodeInstance = Node<ShaderNodeData>;
+export type ShaderEdge = Edge;
+
+export type PlaygroundTarget = {
+  composite: string;
+  systemIndex: number;
+};
+
+export type GeneratedGlsl = {
+  pixel: string;
+  vertex: string | null;
+  hash: string;
+};

From 3aa7482de4b3fe048d1f77725dfa7f9fc4d244bb Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 23:01:56 -0400
Subject: [PATCH 08/14] feather: improve shader graph ui

---
 src-lua/plugins/shader-graph/README.md  | 156 +++++++++-
 src/pages/shader-graph/ShaderCanvas.tsx |  47 ++-
 src/pages/shader-graph/codegen.ts       |   2 +-
 src/pages/shader-graph/index.tsx        | 289 ++++++++++++++++--
 src/pages/shader-graph/nodeDefs.ts      | 382 ++++++++++++++++++++----
 src/pages/shader-graph/presets.ts       | 231 ++++++++++++++
 src/store/shader-graph.ts               | 136 +++++++--
 src/types/shader-graph.ts               |  71 +++--
 8 files changed, 1188 insertions(+), 126 deletions(-)
 create mode 100644 src/pages/shader-graph/presets.ts

diff --git a/src-lua/plugins/shader-graph/README.md b/src-lua/plugins/shader-graph/README.md
index a5616a2d..f2f67fd4 100644
--- a/src-lua/plugins/shader-graph/README.md
+++ b/src-lua/plugins/shader-graph/README.md
@@ -1,7 +1,160 @@
-# shader-graph
+# Shader Graph
 
 Feather plugin that validates GLSL shaders authored in the Shader Graph visual editor.
 
+The desktop editor owns the graph UI and GLSL code generation. This runtime plugin only compiles the generated LÖVE shader source inside the connected game process so validation matches the user's graphics driver and LÖVE version.
+
+## Workflow
+
+1. Open **Shader Graph** in Feather.
+2. Drag nodes from the palette onto the canvas.
+3. Connect compatible ports by type.
+4. Connect the final `vec4` color into **Fragment Output**.
+5. Use **Validate** to compile in the running LÖVE game.
+6. Use **Apply** to send the generated shader to the selected Particle System Playground emitter.
+7. Export/import `.feathershgh` files when you want to save or share editable graph projects.
+
+## Node Types
+
+### Input
+
+Use input nodes as the raw data source for a shader.
+
+| Node | Output | Use |
+|---|---|---|
+| Texture Color | `vec4` | Current texture sample: `Texel(tex, texture_coords)` |
+| Texture Coords | `vec2` | UV coordinates, usually the starting point for distortion effects |
+| Screen Coords | `vec2` | Pixel/screen position, useful for screen-space patterns |
+| Vertex Color | `vec4` | LÖVE color/tint passed into the shader |
+| Time | `float` | Animated effects; emits `extern number u_time` |
+| Resolution | `vec2` | Uses `love_ScreenSize.xy` |
+| Float / Vec2 / Vec3 / Vec4 | typed constants | Editable values for colors, thresholds, speed, etc. |
+
+### Math
+
+Math nodes shape scalar values. They are most useful for masks, thresholds, animation curves, and mixing amounts.
+
+- `Add`, `Subtract`, `Multiply`, `Divide`: combine scalar values.
+- `Power`: sharpen or soften masks.
+- `Clamp`: keep values inside a range.
+- `Lerp`: interpolate between two scalar values.
+- `Step`, `Smoothstep`: build hard or soft thresholds.
+- `Sin`, `Cos`: oscillation for wave and pulse effects.
+- `Abs`, `Fract`, `Floor`: repeating patterns, bands, pixel stepping.
+
+### Vector
+
+Vector nodes convert between packed colors/vectors and scalar channels.
+
+- `Split`: split a `vec4` into RGBA floats.
+- `Combine`: combine RGBA floats into a `vec4`.
+- `Combine2`, `Combine3`: build `vec2` or `vec3`.
+- `SplitVec2`, `SplitVec3`: unpack vector channels.
+- `Normalize`, `Length`, `Dot`: vector utility operations.
+
+### Color
+
+Color nodes transform an existing `vec4`.
+
+- `Desaturate`: mix a color toward grayscale.
+- `One Minus`: invert a scalar mask.
+- `Hue Shift`: rotate color hue.
+
+### Noise
+
+Noise nodes create procedural variation.
+
+- `Simple Noise`: deterministic hash noise from UV.
+- `Ripple`: UV distortion using sine waves.
+
+### Effect
+
+Effect nodes are higher-level building blocks for common 2D game shaders.
+
+| Node | Use |
+|---|---|
+| Sample Texture | Samples the texture at a supplied UV, useful after UV distortion |
+| Centered UV | Converts UV into `uv - 0.5` and distance from center |
+| Fresnel / Rim 2D | Radial edge mask for glow/rim effects on sprites and particles |
+| Alpha Outline | Samples neighboring alpha to create sprite outlines |
+| Wave Distort | Animated UV wave for water, heat, magic, flags |
+| Dissolve | Noise threshold dissolve with a colored edge |
+| Hit Flash | Mixes texture color toward a flash color |
+| Vignette | Darkens or fades toward UV edges |
+| Pixelate | Snaps UVs to a lower-resolution grid |
+| Chromatic Aberration | Splits red/blue samples away from center |
+
+### Output
+
+`Fragment Output` is the required final node for pixel shaders. If no color is connected, codegen falls back to `Texel(tex, texture_coords)`.
+
+### Vertex
+
+Vertex nodes are optional. Use them only when you need to change vertex positions.
+
+- `Vertex Position`: original vertex position.
+- `Transform Matrix`: LÖVE transform/projection matrix.
+- `Mat x Vec`: matrix/vector multiplication.
+- `Vertex Output`: final vertex position.
+
+## Preset Flows
+
+The Shader Graph page includes complete preset graphs:
+
+- **Texture Pass**: baseline texture output.
+- **Outline**: alpha outline around a sprite.
+- **Wave**: animated UV distortion.
+- **Dissolve**: noise dissolve with edge color.
+- **Hit Flash**: damage/selection flash.
+- **Rim Glow**: 2D fresnel-style edge glow.
+- **Pixelate**: retro low-resolution sampling.
+- **Chromatic Aberration**: RGB channel split.
+
+Load a preset, validate it, then inspect how the nodes are connected. Presets are intended as editable starting points, not black boxes.
+
+## Practical Tips
+
+- Start most shaders with `Texture Coords` and `Texture Color`.
+- Distort UV first, then use `Sample Texture` to read the texture at the modified UV.
+- Use `Vec4Constant` for editable colors like outline, flash, and dissolve edge color.
+- Use `FloatConstant` for user-tunable controls such as thickness, amount, speed, cutoff, and softness.
+- Prefer `Smoothstep` over `Step` for effects that should have soft edges.
+- Keep masks as `float` values until the final color mix.
+- For particle shaders, preserve alpha unless you intentionally want to change particle fade behavior.
+- Validate often. Some shader mistakes only appear on the active LÖVE runtime or graphics driver.
+
+## Common Recipes
+
+### Texture Pass
+
+`Texture Color -> Fragment Output`
+
+Use this as the baseline when debugging.
+
+### UV Distortion
+
+`Texture Coords -> Wave Distort -> Sample Texture -> Fragment Output`
+
+Add `Time`, `FloatConstant` amplitude, frequency, and speed inputs to animate it.
+
+### Outline
+
+`Texture Color + Texture Coords + Float thickness + Vec4 outline color -> Alpha Outline -> Fragment Output`
+
+Good for sprites, interactable objects, and particle silhouettes.
+
+### Dissolve
+
+`Texture Color + Texture Coords + cutoff + softness + edge color -> Dissolve -> Fragment Output`
+
+Animate the cutoff value externally or edit it in the graph while prototyping.
+
+### Rim Glow
+
+`Texture Coords -> Fresnel / Rim 2D -> Hit Flash amount`
+
+Feed texture color and a glow color into `Hit Flash`.
+
 ## Actions
 
 ### `compile-shader`
@@ -32,3 +185,4 @@ Attempts to compile the provided GLSL source using `love.graphics.newShader`. Re
 - Validation runs on the game process — a live LÖVE session must be connected.
 - The plugin uses `pcall` so a bad shader never crashes the game.
 - No draw calls are made; the shader object is discarded immediately after compilation.
+- When vertex source is provided, validation compiles the combined pixel + vertex source because Feather applies shader graph output as a single LÖVE shader source.
diff --git a/src/pages/shader-graph/ShaderCanvas.tsx b/src/pages/shader-graph/ShaderCanvas.tsx
index 713567a2..843680ae 100644
--- a/src/pages/shader-graph/ShaderCanvas.tsx
+++ b/src/pages/shader-graph/ShaderCanvas.tsx
@@ -15,10 +15,12 @@ import {
   type ReactFlowInstance,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import { Button } from '@/components/ui/button';
 import type { ShaderNodeData, NodeType } from '@/types/shader-graph';
 import { useShaderGraphStore } from '@/store/shader-graph';
 import { NODE_DEFS } from './nodeDefs';
 import { nodeTypes } from './nodes';
+import { Redo2Icon, Undo2Icon } from 'lucide-react';
 
 let idCounter = Date.now();
 function nextId() {
@@ -37,6 +39,10 @@ export function ShaderCanvas() {
   const selectEdge = useShaderGraphStore((s) => s.selectEdge);
   const selectedNodeId = useShaderGraphStore((s) => s.selectedNodeId);
   const selectedEdgeId = useShaderGraphStore((s) => s.selectedEdgeId);
+  const undo = useShaderGraphStore((s) => s.undo);
+  const redo = useShaderGraphStore((s) => s.redo);
+  const canUndo = useShaderGraphStore((s) => s.undoStack.length > 0);
+  const canRedo = useShaderGraphStore((s) => s.redoStack.length > 0);
 
   // Captured via onInit — avoids calling useReactFlow() at the same level as <ReactFlow>
   const rfRef = useRef<ReactFlowInstance<Node<ShaderNodeData>> | null>(null);
@@ -126,15 +132,30 @@ export function ShaderCanvas() {
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Delete' && e.key !== 'Backspace') return;
       const tag = (e.target as HTMLElement).tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement).isContentEditable) return;
+
+      const modifier = e.metaKey || e.ctrlKey;
+      const key = e.key.toLowerCase();
+      if (modifier && key === 'z') {
+        e.preventDefault();
+        if (e.shiftKey) redo();
+        else undo();
+        return;
+      }
+      if (modifier && key === 'y') {
+        e.preventDefault();
+        redo();
+        return;
+      }
+
+      if (e.key !== 'Delete' && e.key !== 'Backspace') return;
       if (selectedNodeId) removeNode(selectedNodeId);
       else if (selectedEdgeId) removeEdge(selectedEdgeId);
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [selectedNodeId, selectedEdgeId, removeNode, removeEdge]);
+  }, [selectedNodeId, selectedEdgeId, removeNode, removeEdge, redo, undo]);
 
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
@@ -161,6 +182,28 @@ export function ShaderCanvas() {
         deleteKeyCode={null}
         className="bg-background"
       >
+        <div className="absolute left-3 top-3 z-10 flex gap-1 rounded-md border bg-card/95 p-1 shadow-sm">
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-7"
+            disabled={!canUndo}
+            title="Undo (Cmd/Ctrl+Z)"
+            onClick={undo}
+          >
+            <Undo2Icon className="size-4" />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-7"
+            disabled={!canRedo}
+            title="Redo (Cmd/Ctrl+Shift+Z or Ctrl+Y)"
+            onClick={redo}
+          >
+            <Redo2Icon className="size-4" />
+          </Button>
+        </div>
         <Background gap={20} size={1} className="!text-muted-foreground/20" />
         <Controls className="[&>button]:bg-card [&>button]:border-border [&>button]:text-foreground" />
         <MiniMap className="!bg-card !border !border-border" nodeColor="hsl(var(--muted))" />
diff --git a/src/pages/shader-graph/codegen.ts b/src/pages/shader-graph/codegen.ts
index 297aced7..3465fa0f 100644
--- a/src/pages/shader-graph/codegen.ts
+++ b/src/pages/shader-graph/codegen.ts
@@ -2,7 +2,7 @@ import type { ShaderNodeInstance, ShaderEdge, GeneratedGlsl, ShaderNodeData } fr
 import { NODE_DEFS } from './nodeDefs';
 import { glslFloat } from './glslUtils';
 
-const PASSTHROUGH_PIXEL = [
+export const PASSTHROUGH_PIXEL = [
   'vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {',
   '  return Texel(tex, texture_coords) * color;',
   '}',
diff --git a/src/pages/shader-graph/index.tsx b/src/pages/shader-graph/index.tsx
index da7b6484..6bf7cf20 100644
--- a/src/pages/shader-graph/index.tsx
+++ b/src/pages/shader-graph/index.tsx
@@ -1,49 +1,288 @@
 import { ReactFlowProvider } from '@xyflow/react';
+import { useRef } from 'react';
+import { toast } from 'sonner';
+import { DownloadIcon, FolderOpenIcon, Trash2Icon, WorkflowIcon } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { usePluginControl } from '@/hooks/use-plugin-control';
+import { useSessionStore } from '@/store/session';
+import { open as openDialog, save } from '@tauri-apps/plugin-dialog';
+import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
+import { Button } from '@/components/ui/button';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useShaderGraphStore } from '@/store/shader-graph';
+import type { GeneratedGlsl, PlaygroundTarget, ShaderEdge, ShaderNodeInstance } from '@/types/shader-graph';
+import { isWeb } from '@/utils/platform';
 import { NodePalette } from './NodePalette';
 import { ShaderCanvas } from './ShaderCanvas';
 import { NodeInspector } from './NodeInspector';
 import { CodePreview } from './CodePreview';
+import { SHADER_GRAPH_PRESETS } from './presets';
+
+const FILE_VERSION = 1;
+const FILE_EXTENSION = 'feathershgh';
+
+type FeatherShaderGraphFile = {
+  type: 'feather.shader-graph';
+  version: number;
+  exportedAt: string;
+  shaderName: string;
+  playgroundTarget: PlaygroundTarget | null;
+  nodes: ShaderNodeInstance[];
+  edges: ShaderEdge[];
+  lastGeneratedGlsl?: GeneratedGlsl | null;
+};
+
+function defaultFilename(shaderName: string) {
+  const base =
+    shaderName
+      .trim()
+      .replace(/[^a-zA-Z0-9._-]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'shader-graph';
+  return `${base}.${FILE_EXTENSION}`;
+}
+
+function parseShaderGraphFile(raw: string): FeatherShaderGraphFile {
+  const parsed = JSON.parse(raw) as Partial<FeatherShaderGraphFile>;
+  if (parsed.type !== 'feather.shader-graph' || parsed.version !== FILE_VERSION) {
+    throw new Error('Unsupported shader graph file');
+  }
+  if (!Array.isArray(parsed.nodes) || !Array.isArray(parsed.edges)) {
+    throw new Error('Shader graph file is missing nodes or edges');
+  }
+  return {
+    type: 'feather.shader-graph',
+    version: FILE_VERSION,
+    exportedAt: typeof parsed.exportedAt === 'string' ? parsed.exportedAt : new Date().toISOString(),
+    shaderName: typeof parsed.shaderName === 'string' ? parsed.shaderName : 'my-shader',
+    playgroundTarget: parsed.playgroundTarget ?? null,
+    nodes: parsed.nodes,
+    edges: parsed.edges,
+    lastGeneratedGlsl: parsed.lastGeneratedGlsl ?? null,
+  };
+}
 
 export default function ShaderGraph() {
-  return (
-    <ReactFlowProvider>
-      <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1 max-h-[92vh]">
-        <ResizablePanel defaultSize="16%" minSize="12%" maxSize="25%" className="flex flex-col border-r">
-          <div className="border-b px-3 py-2 shrink-0">
-            <span className="text-sm font-semibold">Nodes</span>
-          </div>
-          <NodePalette />
-        </ResizablePanel>
+  const sessionId = useSessionStore((state) => state.sessionId);
+  const shaderGraphPlugin = usePluginControl('shader-graph');
+  const nodes = useShaderGraphStore((state) => state.nodes);
+  const edges = useShaderGraphStore((state) => state.edges);
+  const shaderName = useShaderGraphStore((state) => state.shaderName);
+  const playgroundTarget = useShaderGraphStore((state) => state.playgroundTarget);
+  const lastGeneratedGlsl = useShaderGraphStore((state) => state.lastGeneratedGlsl);
+  const loadGraph = useShaderGraphStore((state) => state.loadGraph);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const importRaw = (raw: string) => {
+    const parsed = parseShaderGraphFile(raw);
+    loadGraph({
+      nodes: parsed.nodes,
+      edges: parsed.edges,
+      shaderName: parsed.shaderName,
+      playgroundTarget: parsed.playgroundTarget,
+    });
+    toast.success('Shader graph imported');
+  };
+
+  const exportGraph = async () => {
+    const payload: FeatherShaderGraphFile = {
+      type: 'feather.shader-graph',
+      version: FILE_VERSION,
+      exportedAt: new Date().toISOString(),
+      shaderName,
+      playgroundTarget,
+      nodes,
+      edges,
+      lastGeneratedGlsl,
+    };
+    const json = JSON.stringify(payload, null, 2);
+    const filename = defaultFilename(shaderName);
+
+    if (isWeb()) {
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+      return;
+    }
+
+    const path = await save({
+      defaultPath: filename,
+      filters: [{ name: 'Feather Shader Graph', extensions: [FILE_EXTENSION] }],
+    });
+    if (!path) return;
+    await writeTextFile(path, json);
+    toast.success('Shader graph exported');
+  };
+
+  const importGraph = async () => {
+    if (isWeb()) {
+      fileInputRef.current?.click();
+      return;
+    }
 
-        <ResizableHandle withHandle />
+    const path = await openDialog({
+      filters: [{ name: 'Feather Shader Graph', extensions: [FILE_EXTENSION] }],
+      multiple: false,
+    });
+    if (!path || typeof path !== 'string') return;
+    importRaw(await readTextFile(path));
+  };
 
-        <ResizablePanel defaultSize="57%" minSize="30%" className="min-w-0 overflow-hidden">
-          <ShaderCanvas />
-        </ResizablePanel>
+  const clearGraph = () => {
+    if (nodes.length > 0 || edges.length > 0) {
+      const confirmed = window.confirm('Clear the current shader graph? This removes all nodes and connections.');
+      if (!confirmed) return;
+    }
+    loadGraph({
+      nodes: [],
+      edges: [],
+      shaderName,
+      playgroundTarget,
+    });
+    toast.success('Shader graph cleared');
+  };
 
-        <ResizableHandle withHandle />
+  const loadPreset = (presetId: string) => {
+    const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    loadGraph({
+      nodes: preset.nodes,
+      edges: preset.edges,
+      shaderName: preset.shaderName,
+      playgroundTarget,
+    });
+    toast.success(`Loaded ${preset.name}`);
+  };
 
-        <ResizablePanel defaultSize="27%" minSize="18%" maxSize="40%" className="flex flex-col border-l">
-          <ResizablePanelGroup orientation="vertical">
-            <ResizablePanel defaultSize="35%" minSize="20%" className="flex flex-col overflow-hidden">
+  return (
+    <ReactFlowProvider>
+      <div className="flex min-h-0 flex-1 flex-col">
+        <header className="flex min-h-12 shrink-0 items-center justify-between gap-3 border-b px-3 py-2">
+          <div>
+            <h1 className="text-sm font-semibold">Shader Graph</h1>
+            <p className="text-xs text-muted-foreground">{shaderName}</p>
+          </div>
+          <div className="flex flex-wrap items-center justify-end gap-3">
+            <div className="flex items-center gap-2">
+              <Switch
+                id="shader-graph-enabled"
+                size="sm"
+                checked={shaderGraphPlugin.enabled}
+                disabled={shaderGraphPlugin.enabled ? !sessionId : !shaderGraphPlugin.available || !sessionId}
+                onCheckedChange={(enabled) => shaderGraphPlugin.setEnabled(enabled)}
+              />
+              <Label htmlFor="shader-graph-enabled" className="text-xs text-muted-foreground">
+                Enabled
+              </Label>
+            </div>
+            <div className="flex flex-wrap justify-end gap-2">
+              <Select onValueChange={loadPreset}>
+                <SelectTrigger className="h-8 w-48 text-xs">
+                  <SelectValue placeholder="Load preset flow" />
+                </SelectTrigger>
+                <SelectContent>
+                  {SHADER_GRAPH_PRESETS.map((preset) => (
+                    <SelectItem key={preset.id} value={preset.id} title={preset.description}>
+                      {preset.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={importGraph}>
+                <FolderOpenIcon className="size-4" />
+                Import
+              </Button>
+              <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={clearGraph}>
+                <Trash2Icon className="size-4" />
+                Clear
+              </Button>
+              <Button size="sm" className="h-8 gap-2 text-xs" onClick={exportGraph}>
+                <DownloadIcon className="size-4" />
+                Export
+              </Button>
+            </div>
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={`.${FILE_EXTENSION},application/json`}
+            className="hidden"
+            onChange={(event) => {
+              const file = event.target.files?.[0];
+              event.target.value = '';
+              if (!file) return;
+              file
+                .text()
+                .then(importRaw)
+                .catch((error: unknown) => {
+                  toast.error(error instanceof Error ? error.message : 'Failed to import shader graph');
+                });
+            }}
+          />
+        </header>
+
+        {!shaderGraphPlugin.enabled ? (
+          <div className="flex min-h-0 flex-1 items-center justify-center">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <div className="flex size-10 items-center justify-center rounded-md border bg-muted/40">
+                <WorkflowIcon className="size-5 text-muted-foreground" />
+              </div>
+              <div className="grid gap-1">
+                <p className="text-sm font-semibold">Shader Graph is disabled</p>
+                <p className="text-xs text-muted-foreground">
+                  {!sessionId
+                    ? 'Connect a session to enable this plugin.'
+                    : !shaderGraphPlugin.available
+                      ? 'Plugin not found in this session.'
+                      : 'Toggle the switch above to enable it.'}
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1">
+            <ResizablePanel defaultSize="16%" minSize="12%" maxSize="25%" className="flex flex-col border-r">
               <div className="border-b px-3 py-2 shrink-0">
-                <span className="text-sm font-semibold">Inspector</span>
+                <span className="text-sm font-semibold">Nodes</span>
               </div>
-              <ScrollArea className="flex-1 min-h-0">
-                <NodeInspector />
-              </ScrollArea>
+              <NodePalette />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
-            <ResizablePanel defaultSize="65%" minSize="30%" className="flex flex-col overflow-hidden">
-              <CodePreview />
+            <ResizablePanel defaultSize="57%" minSize="30%" className="min-w-0 overflow-hidden">
+              <ShaderCanvas />
+            </ResizablePanel>
+
+            <ResizableHandle withHandle />
+
+            <ResizablePanel defaultSize="27%" minSize="18%" maxSize="40%" className="flex flex-col border-l">
+              <ResizablePanelGroup orientation="vertical">
+                <ResizablePanel defaultSize="35%" minSize="20%" className="flex flex-col overflow-hidden">
+                  <div className="border-b px-3 py-2 shrink-0">
+                    <span className="text-sm font-semibold">Inspector</span>
+                  </div>
+                  <ScrollArea className="flex-1 min-h-0">
+                    <NodeInspector />
+                  </ScrollArea>
+                </ResizablePanel>
+
+                <ResizableHandle withHandle />
+
+                <ResizablePanel defaultSize="65%" minSize="30%" className="flex flex-col overflow-hidden">
+                  <CodePreview />
+                </ResizablePanel>
+              </ResizablePanelGroup>
             </ResizablePanel>
           </ResizablePanelGroup>
-        </ResizablePanel>
-      </ResizablePanelGroup>
+        )}
+      </div>
     </ReactFlowProvider>
   );
 }
diff --git a/src/pages/shader-graph/nodeDefs.ts b/src/pages/shader-graph/nodeDefs.ts
index 3784fbee..70e590eb 100644
--- a/src/pages/shader-graph/nodeDefs.ts
+++ b/src/pages/shader-graph/nodeDefs.ts
@@ -9,11 +9,7 @@ export const PORT_TYPE_COLORS: Record<GlslType, string> = {
   mat4: '#fb923c',
 };
 
-type Emit = (
-  inVars: Record<string, string>,
-  outVars: Record<string, string>,
-  data: ShaderNodeData,
-) => string;
+type Emit = (inVars: Record<string, string>, outVars: Record<string, string>, data: ShaderNodeData) => string;
 
 function unary(fn: string): Emit {
   return (i, o) => `float ${o.out} = ${fn}(${i.in0});`;
@@ -26,50 +22,58 @@ function binary(op: string): Emit {
 export const NODE_DEFS: Record<NodeType, NodeDef> = {
   // ─── Input ──────────────────────────────────────────────────────────────────
   TextureColor: {
-    category: 'Input', label: 'Texture Color',
+    category: 'Input',
+    label: 'Texture Color',
     inputs: [],
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (_, o) => `vec4 ${o.out} = Texel(tex, texture_coords);`,
   },
   TextureCoords: {
-    category: 'Input', label: 'Texture Coords',
+    category: 'Input',
+    label: 'Texture Coords',
     inputs: [],
     outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
     emitGlsl: (_, o) => `vec2 ${o.out} = texture_coords;`,
   },
   ScreenCoords: {
-    category: 'Input', label: 'Screen Coords',
+    category: 'Input',
+    label: 'Screen Coords',
     inputs: [],
     outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
     emitGlsl: (_, o) => `vec2 ${o.out} = screen_coords;`,
   },
   VertexColor: {
-    category: 'Input', label: 'Vertex Color',
+    category: 'Input',
+    label: 'Vertex Color',
     inputs: [],
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (_, o) => `vec4 ${o.out} = color;`,
   },
   Time: {
-    category: 'Input', label: 'Time',
+    category: 'Input',
+    label: 'Time',
     inputs: [],
     outputs: [{ id: 'out', label: 'T', type: 'float' }],
     externs: ['extern number u_time;'],
     emitGlsl: (_, o) => `float ${o.out} = u_time;`,
   },
   Resolution: {
-    category: 'Input', label: 'Resolution',
+    category: 'Input',
+    label: 'Resolution',
     inputs: [],
     outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
     emitGlsl: (_, o) => `vec2 ${o.out} = love_ScreenSize.xy;`,
   },
   FloatConstant: {
-    category: 'Input', label: 'Float',
+    category: 'Input',
+    label: 'Float',
     inputs: [],
     outputs: [{ id: 'out', label: 'Value', type: 'float' }],
     emitGlsl: (_, o, d) => `float ${o.out} = ${glslFloat(d.values?.val)};`,
   },
   Vec2Constant: {
-    category: 'Input', label: 'Vec2',
+    category: 'Input',
+    label: 'Vec2',
     inputs: [],
     outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
     emitGlsl: (_, o, d) => {
@@ -78,7 +82,8 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     },
   },
   Vec3Constant: {
-    category: 'Input', label: 'Vec3',
+    category: 'Input',
+    label: 'Vec3',
     inputs: [],
     outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
     emitGlsl: (_, o, d) => {
@@ -87,7 +92,8 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     },
   },
   Vec4Constant: {
-    category: 'Input', label: 'Vec4',
+    category: 'Input',
+    label: 'Vec4',
     inputs: [],
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (_, o, d) => {
@@ -98,37 +104,58 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
 
   // ─── Math ────────────────────────────────────────────────────────────────────
   Add: {
-    category: 'Math', label: 'Add',
-    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    category: 'Math',
+    label: 'Add',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: binary('+'),
   },
   Subtract: {
-    category: 'Math', label: 'Subtract',
-    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    category: 'Math',
+    label: 'Subtract',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: binary('-'),
   },
   Multiply: {
-    category: 'Math', label: 'Multiply',
-    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    category: 'Math',
+    label: 'Multiply',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: binary('*'),
   },
   Divide: {
-    category: 'Math', label: 'Divide',
-    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    category: 'Math',
+    label: 'Divide',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: binary('/'),
   },
   Power: {
-    category: 'Math', label: 'Power',
-    inputs: [{ id: 'base', label: 'Base', type: 'float' }, { id: 'exp', label: 'Exp', type: 'float' }],
+    category: 'Math',
+    label: 'Power',
+    inputs: [
+      { id: 'base', label: 'Base', type: 'float' },
+      { id: 'exp', label: 'Exp', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = pow(${i.base}, ${i.exp});`,
   },
   Clamp: {
-    category: 'Math', label: 'Clamp',
+    category: 'Math',
+    label: 'Clamp',
     inputs: [
       { id: 'val', label: 'Val', type: 'float' },
       { id: 'min', label: 'Min', type: 'float' },
@@ -138,7 +165,8 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) => `float ${o.out} = clamp(${i.val}, ${i.min}, ${i.max});`,
   },
   Lerp: {
-    category: 'Math', label: 'Lerp',
+    category: 'Math',
+    label: 'Lerp',
     inputs: [
       { id: 'a', label: 'A', type: 'float' },
       { id: 'b', label: 'B', type: 'float' },
@@ -148,13 +176,18 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) => `float ${o.out} = mix(${i.a}, ${i.b}, ${i.t});`,
   },
   Step: {
-    category: 'Math', label: 'Step',
-    inputs: [{ id: 'edge', label: 'Edge', type: 'float' }, { id: 'x', label: 'X', type: 'float' }],
+    category: 'Math',
+    label: 'Step',
+    inputs: [
+      { id: 'edge', label: 'Edge', type: 'float' },
+      { id: 'x', label: 'X', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = step(${i.edge}, ${i.x});`,
   },
   Smoothstep: {
-    category: 'Math', label: 'Smoothstep',
+    category: 'Math',
+    label: 'Smoothstep',
     inputs: [
       { id: 'edge0', label: 'Edge0', type: 'float' },
       { id: 'edge1', label: 'Edge1', type: 'float' },
@@ -163,15 +196,46 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = smoothstep(${i.edge0}, ${i.edge1}, ${i.x});`,
   },
-  Sin: { category: 'Math', label: 'Sin', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('sin') },
-  Cos: { category: 'Math', label: 'Cos', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('cos') },
-  Abs: { category: 'Math', label: 'Abs', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('abs') },
-  Fract: { category: 'Math', label: 'Fract', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('fract') },
-  Floor: { category: 'Math', label: 'Floor', inputs: [{ id: 'in0', label: 'X', type: 'float' }], outputs: [{ id: 'out', label: 'Out', type: 'float' }], emitGlsl: unary('floor') },
+  Sin: {
+    category: 'Math',
+    label: 'Sin',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('sin'),
+  },
+  Cos: {
+    category: 'Math',
+    label: 'Cos',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('cos'),
+  },
+  Abs: {
+    category: 'Math',
+    label: 'Abs',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('abs'),
+  },
+  Fract: {
+    category: 'Math',
+    label: 'Fract',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('fract'),
+  },
+  Floor: {
+    category: 'Math',
+    label: 'Floor',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('floor'),
+  },
 
   // ─── Vector ──────────────────────────────────────────────────────────────────
-  Split: {
-    category: 'Vector', label: 'Split',
+  Split4: {
+    category: 'Vector',
+    label: 'Split Vec4',
     inputs: [{ id: 'vec', label: 'RGBA', type: 'vec4' }],
     outputs: [
       { id: 'r', label: 'R', type: 'float' },
@@ -182,8 +246,9 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) =>
       `float ${o.r} = ${i.vec}.r;\nfloat ${o.g} = ${i.vec}.g;\nfloat ${o.b} = ${i.vec}.b;\nfloat ${o.a} = ${i.vec}.a;`,
   },
-  Combine: {
-    category: 'Vector', label: 'Combine',
+  Combine4: {
+    category: 'Vector',
+    label: 'Combine4',
     inputs: [
       { id: 'r', label: 'R', type: 'float' },
       { id: 'g', label: 'G', type: 'float' },
@@ -194,27 +259,34 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) => `vec4 ${o.out} = vec4(${i.r}, ${i.g}, ${i.b}, ${i.a});`,
   },
   Normalize: {
-    category: 'Vector', label: 'Normalize',
+    category: 'Vector',
+    label: 'Normalize',
     inputs: [{ id: 'vec', label: 'Vec', type: 'vec4' }],
     outputs: [{ id: 'out', label: 'Vec', type: 'vec4' }],
     emitGlsl: (i, o) => `vec4 ${o.out} = vec4(normalize(${i.vec}.rgb), ${i.vec}.a);`,
   },
   Length: {
-    category: 'Vector', label: 'Length',
+    category: 'Vector',
+    label: 'Length',
     inputs: [{ id: 'vec', label: 'Vec', type: 'vec4' }],
     outputs: [{ id: 'out', label: 'Len', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = length(${i.vec}.rgb);`,
   },
   Dot: {
-    category: 'Vector', label: 'Dot',
-    inputs: [{ id: 'a', label: 'A', type: 'vec4' }, { id: 'b', label: 'B', type: 'vec4' }],
+    category: 'Vector',
+    label: 'Dot',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = dot(${i.a}.rgb, ${i.b}.rgb);`,
   },
 
   // ─── Color ───────────────────────────────────────────────────────────────────
   Desaturate: {
-    category: 'Color', label: 'Desaturate',
+    category: 'Color',
+    label: 'Desaturate',
     inputs: [
       { id: 'color', label: 'Color', type: 'vec4' },
       { id: 'amount', label: 'Amount', type: 'float' },
@@ -224,13 +296,15 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
       `float ${o.out}_lum = dot(${i.color}.rgb, vec3(0.299, 0.587, 0.114));\nvec4 ${o.out} = vec4(mix(${i.color}.rgb, vec3(${o.out}_lum), ${i.amount}), ${i.color}.a);`,
   },
   OneMinus: {
-    category: 'Color', label: 'One Minus',
+    category: 'Color',
+    label: 'One Minus',
     inputs: [{ id: 'val', label: 'Val', type: 'float' }],
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = 1.0 - ${i.val};`,
   },
   HueShift: {
-    category: 'Color', label: 'Hue Shift',
+    category: 'Color',
+    label: 'Hue Shift',
     inputs: [
       { id: 'color', label: 'Color', type: 'vec4' },
       { id: 'shift', label: 'Shift', type: 'float' },
@@ -242,14 +316,16 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
 
   // ─── Noise ───────────────────────────────────────────────────────────────────
   SimpleNoise: {
-    category: 'Noise', label: 'Simple Noise',
+    category: 'Noise',
+    label: 'Simple Noise',
     inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
     outputs: [{ id: 'out', label: 'Noise', type: 'float' }],
     helperKey: 'noise',
     emitGlsl: (i, o) => `float ${o.out} = feather_hash(${i.uv});`,
   },
   Ripple: {
-    category: 'Noise', label: 'Ripple',
+    category: 'Noise',
+    label: 'Ripple',
     inputs: [
       { id: 'uv', label: 'UV', type: 'vec2' },
       { id: 'time', label: 'Time', type: 'float' },
@@ -257,13 +333,133 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
       { id: 'amp', label: 'Amp', type: 'float' },
     ],
     outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = ${i.uv} + vec2(sin(${i.uv}.y * ${i.freq} + ${i.time}) * ${i.amp}, 0.0);`,
+  },
+
+  // ─── Effects ────────────────────────────────────────────────────────────────
+  SampleTexture: {
+    category: 'Effect',
+    label: 'Sample Texture',
+    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = Texel(tex, ${i.uv});`,
+  },
+  CenteredUV: {
+    category: 'Effect',
+    label: 'Centered UV',
+    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    outputs: [
+      { id: 'out', label: 'UV - .5', type: 'vec2' },
+      { id: 'dist', label: 'Dist', type: 'float' },
+    ],
+    emitGlsl: (i, o) => `vec2 ${o.out} = ${i.uv} - vec2(0.5);\nfloat ${o.dist} = length(${o.out});`,
+  },
+  Fresnel2D: {
+    category: 'Effect',
+    label: 'Fresnel / Rim 2D',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'power', label: 'Power', type: 'float' },
+      { id: 'intensity', label: 'Intensity', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_dist = length(${i.uv} - vec2(0.5)) * 2.0;\nfloat ${o.out} = clamp(pow(clamp(${o.out}_dist, 0.0, 1.0), ${i.power}) * ${i.intensity}, 0.0, 1.0);`,
+  },
+  Outline2D: {
+    category: 'Effect',
+    label: 'Alpha Outline',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'thickness', label: 'Thick', type: 'float' },
+      { id: 'outlineColor', label: 'Outline', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_px = ${i.thickness} / love_ScreenSize.xy;\nfloat ${o.out}_a = max(max(Texel(tex, ${i.uv} + vec2(${o.out}_px.x, 0.0)).a, Texel(tex, ${i.uv} - vec2(${o.out}_px.x, 0.0)).a), max(Texel(tex, ${i.uv} + vec2(0.0, ${o.out}_px.y)).a, Texel(tex, ${i.uv} - vec2(0.0, ${o.out}_px.y)).a));\nvec4 ${o.out} = mix(vec4(${i.outlineColor}.rgb, ${o.out}_a * ${i.outlineColor}.a), ${i.color}, ${i.color}.a);`,
+  },
+  WaveDistort: {
+    category: 'Effect',
+    label: 'Wave Distort',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'time', label: 'Time', type: 'float' },
+      { id: 'amp', label: 'Amp', type: 'float' },
+      { id: 'freq', label: 'Freq', type: 'float' },
+      { id: 'speed', label: 'Speed', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out} = ${i.uv} + vec2(sin((${i.uv}.y + ${i.time} * ${i.speed}) * ${i.freq}) * ${i.amp}, cos((${i.uv}.x + ${i.time} * ${i.speed}) * ${i.freq}) * ${i.amp} * 0.35);`,
+  },
+  Dissolve2D: {
+    category: 'Effect',
+    label: 'Dissolve',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'threshold', label: 'Cut', type: 'float' },
+      { id: 'softness', label: 'Soft', type: 'float' },
+      { id: 'edgeColor', label: 'Edge', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) =>
+      `float ${o.out}_noise = feather_hash(${i.uv} * 96.0);\nfloat ${o.out}_alpha = smoothstep(${i.threshold}, ${i.threshold} + max(${i.softness}, 0.0001), ${o.out}_noise);\nfloat ${o.out}_edge = smoothstep(${i.threshold}, ${i.threshold} + 0.035, ${o.out}_noise) - smoothstep(${i.threshold} + 0.035, ${i.threshold} + 0.09, ${o.out}_noise);\nvec4 ${o.out} = vec4(mix(${i.color}.rgb, ${i.edgeColor}.rgb, clamp(${o.out}_edge, 0.0, 1.0)), ${i.color}.a * ${o.out}_alpha);`,
+  },
+  HitFlash: {
+    category: 'Effect',
+    label: 'Hit Flash',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'flashColor', label: 'Flash', type: 'vec4' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec4 ${o.out} = vec4(mix(${i.color}.rgb, ${i.flashColor}.rgb, clamp(${i.amount}, 0.0, 1.0)), ${i.color}.a);`,
+  },
+  Vignette: {
+    category: 'Effect',
+    label: 'Vignette',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'strength', label: 'Power', type: 'float' },
+      { id: 'softness', label: 'Soft', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_d = length(${i.uv} - vec2(0.5));\nfloat ${o.out}_v = 1.0 - smoothstep(max(0.0, ${i.softness}), 0.707, ${o.out}_d) * ${i.strength};\nvec4 ${o.out} = vec4(${i.color}.rgb * clamp(${o.out}_v, 0.0, 1.0), ${i.color}.a);`,
+  },
+  Pixelate: {
+    category: 'Effect',
+    label: 'Pixelate',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
     emitGlsl: (i, o) =>
-      `vec2 ${o.out} = ${i.uv} + vec2(sin(${i.uv}.y * ${i.freq} + ${i.time}) * ${i.amp}, 0.0);`,
+      `vec2 ${o.out}_cells = max(vec2(1.0), love_ScreenSize.xy / max(${i.amount}, 1.0));\nvec2 ${o.out} = floor(${i.uv} * ${o.out}_cells) / ${o.out}_cells;`,
+  },
+  ChromaticAberration: {
+    category: 'Effect',
+    label: 'Chromatic Aberration',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_dir = normalize(${i.uv} - vec2(0.5));\nvec2 ${o.out}_off = ${o.out}_dir * ${i.amount};\nvec4 ${o.out}_base = Texel(tex, ${i.uv});\nvec4 ${o.out} = vec4(Texel(tex, ${i.uv} + ${o.out}_off).r, ${o.out}_base.g, Texel(tex, ${i.uv} - ${o.out}_off).b, ${o.out}_base.a);`,
   },
 
   // ─── Output ──────────────────────────────────────────────────────────────────
   FragmentOutput: {
-    category: 'Output', label: 'Fragment Output',
+    category: 'Output',
+    label: 'Fragment Output',
     inputs: [{ id: 'color', label: 'Color', type: 'vec4' }],
     outputs: [],
     emitGlsl: () => '',
@@ -271,13 +467,18 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
 
   // ─── Vector (destructure / construct) ───────────────────────────────────────
   Combine2: {
-    category: 'Vector', label: 'Combine2',
-    inputs: [{ id: 'x', label: 'X', type: 'float' }, { id: 'y', label: 'Y', type: 'float' }],
+    category: 'Vector',
+    label: 'Combine2',
+    inputs: [
+      { id: 'x', label: 'X', type: 'float' },
+      { id: 'y', label: 'Y', type: 'float' },
+    ],
     outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
     emitGlsl: (i, o) => `vec2 ${o.out} = vec2(${i.x}, ${i.y});`,
   },
   Combine3: {
-    category: 'Vector', label: 'Combine3',
+    category: 'Vector',
+    label: 'Combine3',
     inputs: [
       { id: 'x', label: 'X', type: 'float' },
       { id: 'y', label: 'Y', type: 'float' },
@@ -287,7 +488,8 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) => `vec3 ${o.out} = vec3(${i.x}, ${i.y}, ${i.z});`,
   },
   SplitVec2: {
-    category: 'Vector', label: 'Split Vec2',
+    category: 'Vector',
+    label: 'Split Vec2',
     inputs: [{ id: 'vec', label: 'XY', type: 'vec2' }],
     outputs: [
       { id: 'x', label: 'X', type: 'float' },
@@ -296,7 +498,8 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) => `float ${o.x} = ${i.vec}.x;\nfloat ${o.y} = ${i.vec}.y;`,
   },
   SplitVec3: {
-    category: 'Vector', label: 'Split Vec3',
+    category: 'Vector',
+    label: 'Split Vec3',
     inputs: [{ id: 'vec', label: 'XYZ', type: 'vec3' }],
     outputs: [
       { id: 'x', label: 'X', type: 'float' },
@@ -308,7 +511,8 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
 
   // ─── Vertex ──────────────────────────────────────────────────────────────────
   MatVecMul: {
-    category: 'Vertex', label: 'Mat × Vec',
+    category: 'Vertex',
+    label: 'Mat × Vec',
     inputs: [
       { id: 'mat', label: 'Mat', type: 'mat4' },
       { id: 'vec', label: 'Vec', type: 'vec4' },
@@ -317,19 +521,22 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) => `vec4 ${o.out} = ${i.mat} * ${i.vec};`,
   },
   VertexPosition: {
-    category: 'Vertex', label: 'Vertex Position',
+    category: 'Vertex',
+    label: 'Vertex Position',
     inputs: [],
     outputs: [{ id: 'out', label: 'Pos', type: 'vec4' }],
     emitGlsl: (_, o) => `vec4 ${o.out} = vertex_position;`,
   },
   TransformMatrix: {
-    category: 'Vertex', label: 'Transform Matrix',
+    category: 'Vertex',
+    label: 'Transform Matrix',
     inputs: [],
     outputs: [{ id: 'out', label: 'Mat', type: 'mat4' }],
     emitGlsl: (_, o) => `mat4 ${o.out} = transform_projection;`,
   },
   VertexOutput: {
-    category: 'Vertex', label: 'Vertex Output',
+    category: 'Vertex',
+    label: 'Vertex Output',
     inputs: [{ id: 'pos', label: 'Pos', type: 'vec4' }],
     outputs: [],
     emitGlsl: () => '',
@@ -342,16 +549,67 @@ export const CATEGORY_COLORS: Record<string, string> = {
   Vector: 'border-l-purple-500',
   Color: 'border-l-pink-500',
   Noise: 'border-l-green-500',
+  Effect: 'border-l-cyan-500',
   Output: 'border-l-red-500',
   Vertex: 'border-l-yellow-500',
 };
 
 export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
-  { category: 'Input', nodes: ['TextureColor', 'TextureCoords', 'ScreenCoords', 'VertexColor', 'Time', 'Resolution', 'FloatConstant', 'Vec2Constant', 'Vec3Constant', 'Vec4Constant'] },
-  { category: 'Math', nodes: ['Add', 'Subtract', 'Multiply', 'Divide', 'Power', 'Clamp', 'Lerp', 'Step', 'Smoothstep', 'Sin', 'Cos', 'Abs', 'Fract', 'Floor'] },
-  { category: 'Vector', nodes: ['Combine2', 'Combine3', 'Combine', 'Split', 'SplitVec2', 'SplitVec3', 'Normalize', 'Length', 'Dot'] },
+  {
+    category: 'Input',
+    nodes: [
+      'TextureColor',
+      'TextureCoords',
+      'ScreenCoords',
+      'VertexColor',
+      'Time',
+      'Resolution',
+      'FloatConstant',
+      'Vec2Constant',
+      'Vec3Constant',
+      'Vec4Constant',
+    ],
+  },
+  {
+    category: 'Math',
+    nodes: [
+      'Add',
+      'Subtract',
+      'Multiply',
+      'Divide',
+      'Power',
+      'Clamp',
+      'Lerp',
+      'Step',
+      'Smoothstep',
+      'Sin',
+      'Cos',
+      'Abs',
+      'Fract',
+      'Floor',
+    ],
+  },
+  {
+    category: 'Vector',
+    nodes: ['Combine2', 'Combine3', 'Combine4', 'Split4', 'SplitVec2', 'SplitVec3', 'Normalize', 'Length', 'Dot'],
+  },
   { category: 'Color', nodes: ['Desaturate', 'OneMinus', 'HueShift'] },
   { category: 'Noise', nodes: ['SimpleNoise', 'Ripple'] },
+  {
+    category: 'Effect',
+    nodes: [
+      'SampleTexture',
+      'CenteredUV',
+      'Fresnel2D',
+      'Outline2D',
+      'WaveDistort',
+      'Dissolve2D',
+      'HitFlash',
+      'Vignette',
+      'Pixelate',
+      'ChromaticAberration',
+    ],
+  },
   { category: 'Output', nodes: ['FragmentOutput'] },
   { category: 'Vertex', nodes: ['VertexPosition', 'TransformMatrix', 'MatVecMul', 'VertexOutput'] },
 ];
diff --git a/src/pages/shader-graph/presets.ts b/src/pages/shader-graph/presets.ts
new file mode 100644
index 00000000..a984c645
--- /dev/null
+++ b/src/pages/shader-graph/presets.ts
@@ -0,0 +1,231 @@
+import type { Edge } from '@xyflow/react';
+import type { NodeType, ShaderNodeData, ShaderNodeInstance } from '@/types/shader-graph';
+import { NODE_DEFS } from './nodeDefs';
+
+type PresetNode = {
+  id: string;
+  type: NodeType;
+  x: number;
+  y: number;
+  values?: Record<string, number | number[]>;
+};
+
+type PresetEdge = {
+  from: string;
+  out: string;
+  to: string;
+  in: string;
+};
+
+export type ShaderGraphPreset = {
+  id: string;
+  name: string;
+  description: string;
+  shaderName: string;
+  nodes: ShaderNodeInstance[];
+  edges: Edge[];
+};
+
+function node({ id, type, x, y, values }: PresetNode): ShaderNodeInstance {
+  return {
+    id,
+    type: 'shaderNode',
+    position: { x, y },
+    data: {
+      label: NODE_DEFS[type].label,
+      nodeType: type,
+      ...(values ? { values } : {}),
+    } satisfies ShaderNodeData,
+  };
+}
+
+function edge({ from, out, to, in: input }: PresetEdge): Edge {
+  return {
+    id: `${from}:${out}->${to}:${input}`,
+    source: from,
+    sourceHandle: out,
+    target: to,
+    targetHandle: input,
+  };
+}
+
+function preset(
+  id: string,
+  name: string,
+  description: string,
+  shaderName: string,
+  nodes: PresetNode[],
+  edges: PresetEdge[],
+): ShaderGraphPreset {
+  return {
+    id,
+    name,
+    description,
+    shaderName,
+    nodes: nodes.map(node),
+    edges: edges.map(edge),
+  };
+}
+
+export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
+  preset(
+    'texture-pass',
+    'Texture Pass',
+    'Default LÖVE texture color multiplied by vertex color.',
+    'texture-pass',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'out', type: 'FragmentOutput', x: 300, y: 0 },
+    ],
+    [{ from: 'tex', out: 'out', to: 'out', in: 'color' }],
+  ),
+  preset(
+    'outline',
+    'Outline',
+    'Alpha-based sprite outline with editable color and thickness.',
+    'outline',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130 },
+      { id: 'thickness', type: 'FloatConstant', x: 0, y: 260, values: { val: 3 } },
+      { id: 'outline-color', type: 'Vec4Constant', x: 0, y: 390, values: { val: [1, 1, 1, 1] } },
+      { id: 'outline', type: 'Outline2D', x: 310, y: 120 },
+      { id: 'out', type: 'FragmentOutput', x: 650, y: 160 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'outline', in: 'color' },
+      { from: 'uv', out: 'out', to: 'outline', in: 'uv' },
+      { from: 'thickness', out: 'out', to: 'outline', in: 'thickness' },
+      { from: 'outline-color', out: 'out', to: 'outline', in: 'outlineColor' },
+      { from: 'outline', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'wave',
+    'Wave',
+    'Sine-wave texture distortion useful for water, heat, magic, and flags.',
+    'wave',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'time', type: 'Time', x: 0, y: 110 },
+      { id: 'amp', type: 'FloatConstant', x: 0, y: 220, values: { val: 0.025 } },
+      { id: 'freq', type: 'FloatConstant', x: 0, y: 330, values: { val: 28 } },
+      { id: 'speed', type: 'FloatConstant', x: 0, y: 440, values: { val: 1.6 } },
+      { id: 'wave', type: 'WaveDistort', x: 300, y: 150 },
+      { id: 'sample', type: 'SampleTexture', x: 610, y: 180 },
+      { id: 'out', type: 'FragmentOutput', x: 900, y: 180 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'wave', in: 'uv' },
+      { from: 'time', out: 'out', to: 'wave', in: 'time' },
+      { from: 'amp', out: 'out', to: 'wave', in: 'amp' },
+      { from: 'freq', out: 'out', to: 'wave', in: 'freq' },
+      { from: 'speed', out: 'out', to: 'wave', in: 'speed' },
+      { from: 'wave', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'dissolve',
+    'Dissolve',
+    'Noise threshold dissolve with a colored burning edge.',
+    'dissolve',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 120 },
+      { id: 'cut', type: 'FloatConstant', x: 0, y: 240, values: { val: 0.42 } },
+      { id: 'soft', type: 'FloatConstant', x: 0, y: 360, values: { val: 0.08 } },
+      { id: 'edge-color', type: 'Vec4Constant', x: 0, y: 480, values: { val: [1, 0.45, 0.05, 1] } },
+      { id: 'dissolve', type: 'Dissolve2D', x: 320, y: 170 },
+      { id: 'out', type: 'FragmentOutput', x: 660, y: 200 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'dissolve', in: 'color' },
+      { from: 'uv', out: 'out', to: 'dissolve', in: 'uv' },
+      { from: 'cut', out: 'out', to: 'dissolve', in: 'threshold' },
+      { from: 'soft', out: 'out', to: 'dissolve', in: 'softness' },
+      { from: 'edge-color', out: 'out', to: 'dissolve', in: 'edgeColor' },
+      { from: 'dissolve', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'hit-flash',
+    'Hit Flash',
+    'Mixes a sprite toward a bright flash color.',
+    'hit-flash',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'flash-color', type: 'Vec4Constant', x: 0, y: 140, values: { val: [1, 1, 1, 1] } },
+      { id: 'amount', type: 'FloatConstant', x: 0, y: 280, values: { val: 0.65 } },
+      { id: 'flash', type: 'HitFlash', x: 320, y: 95 },
+      { id: 'out', type: 'FragmentOutput', x: 650, y: 115 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'flash-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'amount', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'rim-glow',
+    'Rim Glow',
+    'Fresnel-like 2D edge glow for particles and soft sprites.',
+    'rim-glow',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'power', type: 'FloatConstant', x: 0, y: 120, values: { val: 2.8 } },
+      { id: 'intensity', type: 'FloatConstant', x: 0, y: 240, values: { val: 1.2 } },
+      { id: 'rim', type: 'Fresnel2D', x: 300, y: 70 },
+      { id: 'tex', type: 'TextureColor', x: 300, y: 270 },
+      { id: 'glow-color', type: 'Vec4Constant', x: 300, y: 400, values: { val: [0.25, 0.8, 1, 1] } },
+      { id: 'mix', type: 'HitFlash', x: 620, y: 185 },
+      { id: 'out', type: 'FragmentOutput', x: 940, y: 205 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'rim', in: 'uv' },
+      { from: 'power', out: 'out', to: 'rim', in: 'power' },
+      { from: 'intensity', out: 'out', to: 'rim', in: 'intensity' },
+      { from: 'tex', out: 'out', to: 'mix', in: 'color' },
+      { from: 'glow-color', out: 'out', to: 'mix', in: 'flashColor' },
+      { from: 'rim', out: 'out', to: 'mix', in: 'amount' },
+      { from: 'mix', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'pixelate',
+    'Pixelate',
+    'Crunchy low-resolution sampling for retro sprites or transitions.',
+    'pixelate',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'amount', type: 'FloatConstant', x: 0, y: 140, values: { val: 10 } },
+      { id: 'pixelate', type: 'Pixelate', x: 300, y: 50 },
+      { id: 'sample', type: 'SampleTexture', x: 590, y: 70 },
+      { id: 'out', type: 'FragmentOutput', x: 870, y: 70 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'pixelate', in: 'uv' },
+      { from: 'amount', out: 'out', to: 'pixelate', in: 'amount' },
+      { from: 'pixelate', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'chromatic-aberration',
+    'Chromatic Aberration',
+    'Splits red and blue channels away from the center.',
+    'chromatic-aberration',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'amount', type: 'FloatConstant', x: 0, y: 140, values: { val: 0.006 } },
+      { id: 'chromatic', type: 'ChromaticAberration', x: 300, y: 55 },
+      { id: 'out', type: 'FragmentOutput', x: 660, y: 75 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'chromatic', in: 'uv' },
+      { from: 'amount', out: 'out', to: 'chromatic', in: 'amount' },
+      { from: 'chromatic', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+];
diff --git a/src/store/shader-graph.ts b/src/store/shader-graph.ts
index 40acb90c..7e7bc8e9 100644
--- a/src/store/shader-graph.ts
+++ b/src/store/shader-graph.ts
@@ -5,9 +5,16 @@ import type { ShaderNodeData, PlaygroundTarget, GeneratedGlsl } from '@/types/sh
 
 type ValidationStatus = 'idle' | 'validating' | 'ok' | 'error';
 
+type GraphSnapshot = {
+  nodes: Node<ShaderNodeData>[];
+  edges: Edge[];
+};
+
 type ShaderGraphStore = {
   nodes: Node<ShaderNodeData>[];
   edges: Edge[];
+  undoStack: GraphSnapshot[];
+  redoStack: GraphSnapshot[];
   selectedNodeId: string | null;
   selectedEdgeId: string | null;
   shaderName: string;
@@ -29,13 +36,54 @@ type ShaderGraphStore = {
   setLastGlsl: (glsl: GeneratedGlsl | null) => void;
   setValidationStatus: (status: ValidationStatus) => void;
   setValidationErrors: (errors: ShaderGraphStore['validationErrors']) => void;
+  loadGraph: (graph: { nodes: Node<ShaderNodeData>[]; edges: Edge[]; shaderName?: string; playgroundTarget?: PlaygroundTarget | null }) => void;
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
 };
 
+const HISTORY_LIMIT = 100;
+
+function snapshot(state: Pick<ShaderGraphStore, 'nodes' | 'edges'>): GraphSnapshot {
+  return { nodes: state.nodes, edges: state.edges };
+}
+
+function sameGraph(a: GraphSnapshot, b: GraphSnapshot): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+function withHistory(
+  state: ShaderGraphStore,
+  patch: Partial<Pick<ShaderGraphStore, 'nodes' | 'edges' | 'selectedNodeId' | 'selectedEdgeId'>>,
+) {
+  const before = snapshot(state);
+  const after = {
+    nodes: patch.nodes ?? state.nodes,
+    edges: patch.edges ?? state.edges,
+  };
+
+  if (sameGraph(before, after)) {
+    return patch;
+  }
+
+  return {
+    ...patch,
+    undoStack: [...state.undoStack, before].slice(-HISTORY_LIMIT),
+    redoStack: [],
+    lastGeneratedGlsl: null,
+    validationStatus: 'idle' as const,
+    validationErrors: {},
+  };
+}
+
 export const useShaderGraphStore = create<ShaderGraphStore>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       nodes: [],
       edges: [],
+      undoStack: [],
+      redoStack: [],
       selectedNodeId: null,
       selectedEdgeId: null,
       shaderName: 'my-shader',
@@ -44,26 +92,30 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
       validationStatus: 'idle',
       validationErrors: {},
 
-      setNodes: (nodes) => set({ nodes }),
-      setEdges: (edges) => set({ edges }),
-      addNode: (node) => set((s) => ({ nodes: [...s.nodes, node] })),
+      setNodes: (nodes) => set((s) => withHistory(s, { nodes })),
+      setEdges: (edges) => set((s) => withHistory(s, { edges })),
+      addNode: (node) => set((s) => withHistory(s, { nodes: [...s.nodes, node] })),
       removeNode: (id) =>
-        set((s) => ({
-          nodes: s.nodes.filter((n) => n.id !== id),
-          edges: s.edges.filter((e) => e.source !== id && e.target !== id),
-          selectedNodeId: s.selectedNodeId === id ? null : s.selectedNodeId,
-        })),
+        set((s) =>
+          withHistory(s, {
+            nodes: s.nodes.filter((n) => n.id !== id),
+            edges: s.edges.filter((e) => e.source !== id && e.target !== id),
+            selectedNodeId: s.selectedNodeId === id ? null : s.selectedNodeId,
+          }),
+        ),
       removeEdge: (id) =>
-        set((s) => ({
-          edges: s.edges.filter((e) => e.id !== id),
-          selectedEdgeId: s.selectedEdgeId === id ? null : s.selectedEdgeId,
-        })),
+        set((s) =>
+          withHistory(s, {
+            edges: s.edges.filter((e) => e.id !== id),
+            selectedEdgeId: s.selectedEdgeId === id ? null : s.selectedEdgeId,
+          }),
+        ),
       updateNodeData: (id, patch) =>
-        set((s) => ({
-          nodes: s.nodes.map((n) =>
-            n.id === id ? { ...n, data: { ...n.data, ...patch } } : n,
-          ),
-        })),
+        set((s) =>
+          withHistory(s, {
+            nodes: s.nodes.map((n) => (n.id === id ? { ...n, data: { ...n.data, ...patch } } : n)),
+          }),
+        ),
       selectNode: (selectedNodeId) => set({ selectedNodeId, selectedEdgeId: null }),
       selectEdge: (selectedEdgeId) => set({ selectedEdgeId, selectedNodeId: null }),
       setShaderName: (shaderName) => set({ shaderName }),
@@ -71,6 +123,54 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
       setLastGlsl: (lastGeneratedGlsl) => set({ lastGeneratedGlsl }),
       setValidationStatus: (validationStatus) => set({ validationStatus }),
       setValidationErrors: (validationErrors) => set({ validationErrors }),
+      loadGraph: (graph) =>
+        set({
+          nodes: graph.nodes,
+          edges: graph.edges,
+          shaderName: graph.shaderName ?? get().shaderName,
+          playgroundTarget: graph.playgroundTarget ?? null,
+          selectedNodeId: null,
+          selectedEdgeId: null,
+          undoStack: [],
+          redoStack: [],
+          lastGeneratedGlsl: null,
+          validationStatus: 'idle',
+          validationErrors: {},
+        }),
+      undo: () =>
+        set((s) => {
+          const previous = s.undoStack.at(-1);
+          if (!previous) return s;
+          return {
+            nodes: previous.nodes,
+            edges: previous.edges,
+            undoStack: s.undoStack.slice(0, -1),
+            redoStack: [...s.redoStack, snapshot(s)].slice(-HISTORY_LIMIT),
+            selectedNodeId: null,
+            selectedEdgeId: null,
+            lastGeneratedGlsl: null,
+            validationStatus: 'idle',
+            validationErrors: {},
+          };
+        }),
+      redo: () =>
+        set((s) => {
+          const next = s.redoStack.at(-1);
+          if (!next) return s;
+          return {
+            nodes: next.nodes,
+            edges: next.edges,
+            undoStack: [...s.undoStack, snapshot(s)].slice(-HISTORY_LIMIT),
+            redoStack: s.redoStack.slice(0, -1),
+            selectedNodeId: null,
+            selectedEdgeId: null,
+            lastGeneratedGlsl: null,
+            validationStatus: 'idle',
+            validationErrors: {},
+          };
+        }),
+      canUndo: () => get().undoStack.length > 0,
+      canRedo: () => get().redoStack.length > 0,
     }),
     {
       name: 'feather-shader-graph',
diff --git a/src/types/shader-graph.ts b/src/types/shader-graph.ts
index db32e720..8bae2950 100644
--- a/src/types/shader-graph.ts
+++ b/src/types/shader-graph.ts
@@ -5,23 +5,64 @@ export type GlslType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'mat4';
 export type PortDef = { id: string; label: string; type: GlslType };
 
 export const NODE_TYPES = [
-  'TextureColor', 'TextureCoords', 'ScreenCoords', 'VertexColor',
-  'Time', 'Resolution', 'FloatConstant', 'Vec2Constant', 'Vec4Constant',
-  'Add', 'Subtract', 'Multiply', 'Divide', 'Power',
-  'Clamp', 'Lerp', 'Step', 'Smoothstep',
-  'Sin', 'Cos', 'Abs', 'Fract', 'Floor',
-  'Split', 'Combine', 'Normalize', 'Length', 'Dot',
-  'Desaturate', 'OneMinus', 'HueShift',
-  'SimpleNoise', 'Ripple',
+  'TextureColor',
+  'TextureCoords',
+  'ScreenCoords',
+  'VertexColor',
+  'Time',
+  'Resolution',
+  'FloatConstant',
+  'Vec2Constant',
+  'Vec4Constant',
+  'Add',
+  'Subtract',
+  'Multiply',
+  'Divide',
+  'Power',
+  'Clamp',
+  'Lerp',
+  'Step',
+  'Smoothstep',
+  'Sin',
+  'Cos',
+  'Abs',
+  'Fract',
+  'Floor',
+  'Split4',
+  'Combine4',
+  'Normalize',
+  'Length',
+  'Dot',
+  'Desaturate',
+  'OneMinus',
+  'HueShift',
+  'SimpleNoise',
+  'Ripple',
+  'SampleTexture',
+  'CenteredUV',
+  'Fresnel2D',
+  'Outline2D',
+  'WaveDistort',
+  'Dissolve2D',
+  'HitFlash',
+  'Vignette',
+  'Pixelate',
+  'ChromaticAberration',
   'FragmentOutput',
-  'VertexPosition', 'TransformMatrix', 'VertexOutput',
-  'SplitVec2', 'MatVecMul',
-  'Vec3Constant', 'SplitVec3', 'Combine2', 'Combine3',
+  'VertexPosition',
+  'TransformMatrix',
+  'VertexOutput',
+  'SplitVec2',
+  'MatVecMul',
+  'Vec3Constant',
+  'SplitVec3',
+  'Combine2',
+  'Combine3',
 ] as const;
 
 export type NodeType = (typeof NODE_TYPES)[number];
 
-export type NodeCategory = 'Input' | 'Math' | 'Vector' | 'Color' | 'Noise' | 'Output' | 'Vertex';
+export type NodeCategory = 'Input' | 'Math' | 'Vector' | 'Color' | 'Noise' | 'Effect' | 'Output' | 'Vertex';
 
 export type ShaderNodeData = {
   label: string;
@@ -35,11 +76,7 @@ export type NodeDef = {
   label: string;
   inputs: PortDef[];
   outputs: PortDef[];
-  emitGlsl: (
-    inVars: Record<string, string>,
-    outVars: Record<string, string>,
-    data: ShaderNodeData,
-  ) => string;
+  emitGlsl: (inVars: Record<string, string>, outVars: Record<string, string>, data: ShaderNodeData) => string;
   externs?: string[];
   helperKey?: string;
 };

From 7ad0117165ac7c34988ce7b456ee3902b478b591 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 23:45:25 -0400
Subject: [PATCH 09/14] feather: add example and improve shader graph ui

---
 src-lua/plugins/shader-graph/README.md   | 107 +++++++-
 src/pages/shader-graph/NodeInspector.tsx |  18 +-
 src/pages/shader-graph/NodePalette.tsx   |  31 ++-
 src/pages/shader-graph/index.tsx         |  35 ++-
 src/pages/shader-graph/nodeDefs.ts       | 321 ++++++++++++++++++++++-
 src/pages/shader-graph/presets.ts        | 241 ++++++++++++++++-
 src/store/shader-graph.ts                |   6 +
 src/types/shader-graph.ts                |  30 ++-
 8 files changed, 753 insertions(+), 36 deletions(-)

diff --git a/src-lua/plugins/shader-graph/README.md b/src-lua/plugins/shader-graph/README.md
index f2f67fd4..9f09c0d4 100644
--- a/src-lua/plugins/shader-graph/README.md
+++ b/src-lua/plugins/shader-graph/README.md
@@ -4,15 +4,22 @@ Feather plugin that validates GLSL shaders authored in the Shader Graph visual e
 
 The desktop editor owns the graph UI and GLSL code generation. This runtime plugin only compiles the generated LÖVE shader source inside the connected game process so validation matches the user's graphics driver and LÖVE version.
 
+The node library is inspired by common visual shader graph systems, including Unity Shader Graph's category model: Artistic, Channel, Input, Math, Procedural, Utility, and UV. Feather's implementation is intentionally smaller and LÖVE-focused.
+
+Several higher-level nodes and presets are also inspired by common VFX Shader Graph recipes, including texture strength, opacity, dissolve masks, and vertex displacement. The water displacement nodes are inspired by Alex Griffith's LÖVE shader write-up, adapted to use procedural noise so Feather graphs stay self-contained. Unity-specific camera depth effects are not copied directly because LÖVE 2D shaders do not expose Unity's scene depth buffer in the same way.
+
 ## Workflow
 
 1. Open **Shader Graph** in Feather.
-2. Drag nodes from the palette onto the canvas.
-3. Connect compatible ports by type.
-4. Connect the final `vec4` color into **Fragment Output**.
-5. Use **Validate** to compile in the running LÖVE game.
-6. Use **Apply** to send the generated shader to the selected Particle System Playground emitter.
-7. Export/import `.feathershgh` files when you want to save or share editable graph projects.
+2. On first open, Feather loads the **Water Shimmer** example so there is a complete graph ready to validate, edit, and apply.
+3. Drag nodes from the palette onto the canvas.
+4. Connect compatible ports by type.
+5. Connect the final `vec4` color into **Fragment Output**.
+6. Use **Validate** to compile in the running LÖVE game.
+7. Use **Apply** to send the generated shader to the selected Particle System Playground emitter.
+8. Export/import `.feathershgh` files when you want to save or share editable graph projects.
+
+Select a node and edit **Node Name** in the inspector when a graph needs more descriptive labels. Renaming a node changes the canvas label only; the original node type stays visible in the inspector and code generation is unchanged.
 
 ## Node Types
 
@@ -41,16 +48,21 @@ Math nodes shape scalar values. They are most useful for masks, thresholds, anim
 - `Step`, `Smoothstep`: build hard or soft thresholds.
 - `Sin`, `Cos`: oscillation for wave and pulse effects.
 - `Abs`, `Fract`, `Floor`: repeating patterns, bands, pixel stepping.
+- `Min`, `Max`, `Modulo`, `Negate`, `Saturate`: scalar shaping and bounds.
+- `Remap`: convert one scalar range into another, useful for mask tuning.
 
 ### Vector
 
 Vector nodes convert between packed colors/vectors and scalar channels.
 
-- `Split`: split a `vec4` into RGBA floats.
-- `Combine`: combine RGBA floats into a `vec4`.
+- `Split Vec4`: split a `vec4` into RGBA floats.
+- `Combine4`: combine RGBA floats into a `vec4`.
+- `Split RGB` / `Combine RGB`: unpack and repack `vec3` values.
 - `Combine2`, `Combine3`: build `vec2` or `vec3`.
 - `SplitVec2`, `SplitVec3`: unpack vector channels.
-- `Normalize`, `Length`, `Dot`: vector utility operations.
+- `Swizzle Vec2`: get `xy` and `yx` variants.
+- `Normalize`, `Length`, `Dot`: `vec4` RGB utility operations.
+- `Distance Vec2`, `Length Vec2`, `Normalize Vec2`, `Dot Vec2`: UV/vector math for 2D masks.
 
 ### Color
 
@@ -59,6 +71,10 @@ Color nodes transform an existing `vec4`.
 - `Desaturate`: mix a color toward grayscale.
 - `One Minus`: invert a scalar mask.
 - `Hue Shift`: rotate color hue.
+- `Invert Color`: invert RGB by an editable amount.
+- `Contrast`: adjust contrast around 0.5.
+- `Posterize`: reduce colors to a fixed number of bands.
+- `Multiply Color`: multiply two `vec4` values.
 
 ### Noise
 
@@ -66,6 +82,17 @@ Noise nodes create procedural variation.
 
 - `Simple Noise`: deterministic hash noise from UV.
 - `Ripple`: UV distortion using sine waves.
+- `Voronoi Cells`: cellular mask for sparks, shields, energy, and organic breakup.
+- `Checkerboard`: alternating square mask.
+
+### UV
+
+UV nodes transform texture coordinates before sampling.
+
+- `Tiling And Offset`: scale and offset UVs.
+- `Rotate UV`: rotate UVs around the center.
+- `Twirl UV`: swirl UVs toward the center.
+- `Polar Coordinates`: convert UVs into radius/angle space.
 
 ### Effect
 
@@ -74,10 +101,14 @@ Effect nodes are higher-level building blocks for common 2D game shaders.
 | Node | Use |
 |---|---|
 | Sample Texture | Samples the texture at a supplied UV, useful after UV distortion |
+| Texture Strength | Sharpens texture alpha and boosts color intensity, useful for cracks, glows, and impact marks |
+| Opacity | Multiplies texture alpha by a scalar fade value |
 | Centered UV | Converts UV into `uv - 0.5` and distance from center |
 | Fresnel / Rim 2D | Radial edge mask for glow/rim effects on sprites and particles |
 | Alpha Outline | Samples neighboring alpha to create sprite outlines |
 | Wave Distort | Animated UV wave for water, heat, magic, flags |
+| Water Displace | Procedural animated noise displacement for water, heat shimmer, and magic surfaces |
+| Masked Water | Water displacement constrained by texture alpha, useful when only opaque regions should move |
 | Dissolve | Noise threshold dissolve with a colored edge |
 | Hit Flash | Mixes texture color toward a flash color |
 | Vignette | Darkens or fades toward UV edges |
@@ -93,6 +124,7 @@ Effect nodes are higher-level building blocks for common 2D game shaders.
 Vertex nodes are optional. Use them only when you need to change vertex positions.
 
 - `Vertex Position`: original vertex position.
+- `Vertex Wave 2D`: offsets vertex XY positions with a time-driven sine/cosine wave.
 - `Transform Matrix`: LÖVE transform/projection matrix.
 - `Mat x Vec`: matrix/vector multiplication.
 - `Vertex Output`: final vertex position.
@@ -109,6 +141,17 @@ The Shader Graph page includes complete preset graphs:
 - **Rim Glow**: 2D fresnel-style edge glow.
 - **Pixelate**: retro low-resolution sampling.
 - **Chromatic Aberration**: RGB channel split.
+- **Posterize**: toon/retro color bands.
+- **Twirl Portal**: centered UV swirl.
+- **Rotating Texture**: time-driven UV rotation.
+- **Checker Flash**: checker mask mixed into a flash color.
+- **Voronoi Energy**: cellular energy/shield mask.
+- **Tiled Offset**: tiled UV sampling.
+- **Texture Strength**: alpha/intensity shaping for marks, cracks, and glows.
+- **Opacity Fade**: straightforward alpha fade control.
+- **Vertex Wave**: vertex-stage wobble with a normal texture pass.
+- **Water Shimmer**: self-contained procedural UV displacement.
+- **Masked Water Shimmer**: alpha-constrained displacement that keeps transparent edges stable.
 
 Load a preset, validate it, then inspect how the nodes are connected. Presets are intended as editable starting points, not black boxes.
 
@@ -137,6 +180,24 @@ Use this as the baseline when debugging.
 
 Add `Time`, `FloatConstant` amplitude, frequency, and speed inputs to animate it.
 
+### Water Shimmer
+
+`Texture Coords + Time + speed + amplitude + scale -> Water Displace -> Sample Texture -> Fragment Output`
+
+This is the self-contained version of the classic LÖVE water displacement pattern: scroll noise, convert it into an XY offset, then sample the texture at the displaced UV. Use low amplitude values such as `0.01` to `0.04`; texture-space displacement gets strong quickly.
+
+### Masked Water
+
+`Texture Color + Texture Coords + Time + speed + amplitude + scale + mask threshold -> Masked Water -> Fragment Output`
+
+The masked version only uses the displaced sample when both the current pixel alpha and displaced source alpha are above the threshold. It is useful for water tiles, shoreline sprites, and particle textures where transparent edges should not smear.
+
+### UV Transform
+
+`Texture Coords -> Rotate UV/Twirl UV/Tiling And Offset -> Sample Texture -> Fragment Output`
+
+Use this for portals, rotating particles, scrolling texture strips, and tiled materials.
+
 ### Outline
 
 `Texture Color + Texture Coords + Float thickness + Vec4 outline color -> Alpha Outline -> Fragment Output`
@@ -149,12 +210,40 @@ Good for sprites, interactable objects, and particle silhouettes.
 
 Animate the cutoff value externally or edit it in the graph while prototyping.
 
+### Texture Strength
+
+`Texture Color + Power + Strength -> Texture Strength -> Fragment Output`
+
+Use `Power` to make alpha thinner or wider and `Strength` to brighten the visible color. This is useful for impact decals, ground cracks, soft glows, and particle textures where you want to tune intensity without editing the source image.
+
+### Opacity
+
+`Texture Color + Opacity -> Opacity -> Fragment Output`
+
+Keep this near the end of a graph when you want a simple overall fade.
+
+### Vertex Wave
+
+`Vertex Position + Time + amplitude + frequency -> Vertex Wave 2D -> Vertex Output`
+
+Pair it with a normal fragment path such as `Texture Color -> Fragment Output`. It works best on sprites or meshes with enough vertices to show deformation; a single quad will wobble at its corners.
+
 ### Rim Glow
 
 `Texture Coords -> Fresnel / Rim 2D -> Hit Flash amount`
 
 Feed texture color and a glow color into `Hit Flash`.
 
+### Procedural Mask Mix
+
+`Texture Coords -> Checkerboard/Voronoi Cells -> Hit Flash amount`
+
+Feed texture color and a highlight color into `Hit Flash`. This is a quick way to prototype shield, scan, grid, glitch, or energy effects.
+
+### About Depth Fade
+
+Depth fade is a useful Unity particle technique for softening intersections against scene geometry. Feather does not include a depth fade node yet because LÖVE's standard 2D shader path does not provide the same camera depth texture. For now, approximate soft edges with texture alpha, `Opacity`, `Vignette`, dissolve masks, or custom game-provided shader uniforms.
+
 ## Actions
 
 ### `compile-shader`
diff --git a/src/pages/shader-graph/NodeInspector.tsx b/src/pages/shader-graph/NodeInspector.tsx
index 617aab78..eb2862d7 100644
--- a/src/pages/shader-graph/NodeInspector.tsx
+++ b/src/pages/shader-graph/NodeInspector.tsx
@@ -40,7 +40,8 @@ export function NodeInspector() {
               <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-0.5">
                 {def.category}
               </div>
-              <div className="font-semibold">{def.label}</div>
+              <div className="font-semibold">{selected.data.label || def.label}</div>
+              <div className="text-[10px] text-muted-foreground">{def.label}</div>
             </div>
             <button
               onClick={() => removeNode(selected.id)}
@@ -51,6 +52,21 @@ export function NodeInspector() {
             </button>
           </div>
 
+          <div className="grid gap-1">
+            <Label className="text-[10px] text-muted-foreground">Node Name</Label>
+            <Input
+              className="h-7 text-xs"
+              value={selected.data.label ?? def.label}
+              placeholder={def.label}
+              onChange={(e) => updateNodeData(selected.id, { label: e.target.value })}
+              onBlur={(e) => {
+                if (e.target.value.trim().length === 0) {
+                  updateNodeData(selected.id, { label: def.label });
+                }
+              }}
+            />
+          </div>
+
           {selected.data.nodeType === 'FloatConstant' && (
             <div className="grid gap-1">
               <Label className="text-[10px] text-muted-foreground">Value</Label>
diff --git a/src/pages/shader-graph/NodePalette.tsx b/src/pages/shader-graph/NodePalette.tsx
index 353d9a0e..ce6669c8 100644
--- a/src/pages/shader-graph/NodePalette.tsx
+++ b/src/pages/shader-graph/NodePalette.tsx
@@ -1,5 +1,6 @@
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { useParticleSystemPlayground } from '@/hooks/use-particle-system-playground';
 import { useShaderGraphStore } from '@/store/shader-graph';
@@ -74,24 +75,28 @@ export function NodePalette() {
             </span>
             <div className="grid gap-1">
               <Label className="text-[10px] text-muted-foreground">Composite</Label>
-              <select
-                className="h-7 w-full rounded border bg-card px-2 text-xs"
-                value={playgroundTarget?.composite ?? ''}
-                onChange={(e) =>
+              <Select
+                value={playgroundTarget?.composite ?? 'none'}
+                onValueChange={(value) =>
                   setPlaygroundTarget(
-                    e.target.value
-                      ? { composite: e.target.value, systemIndex: playgroundTarget?.systemIndex ?? 1 }
+                    value !== 'none'
+                      ? { composite: value, systemIndex: playgroundTarget?.systemIndex ?? 1 }
                       : null,
                   )
                 }
               >
-                <option value="">— none —</option>
-                {composites.map((c) => (
-                  <option key={c} value={c}>
-                    {c}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger className="h-7 w-full text-xs">
+                  <SelectValue placeholder="Select composite" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">None</SelectItem>
+                  {composites.map((composite) => (
+                    <SelectItem key={composite} value={composite}>
+                      {composite}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
             {playgroundTarget?.composite && (
               <div className="grid gap-1">
diff --git a/src/pages/shader-graph/index.tsx b/src/pages/shader-graph/index.tsx
index 6bf7cf20..c336a1b6 100644
--- a/src/pages/shader-graph/index.tsx
+++ b/src/pages/shader-graph/index.tsx
@@ -1,5 +1,5 @@
 import { ReactFlowProvider } from '@xyflow/react';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import { DownloadIcon, FolderOpenIcon, Trash2Icon, WorkflowIcon } from 'lucide-react';
 import { Label } from '@/components/ui/label';
@@ -23,6 +23,7 @@ import { SHADER_GRAPH_PRESETS } from './presets';
 
 const FILE_VERSION = 1;
 const FILE_EXTENSION = 'feathershgh';
+const FIRST_OPEN_PRESET_ID = 'water-shimmer';
 
 type FeatherShaderGraphFile = {
   type: 'feather.shader-graph';
@@ -72,9 +73,33 @@ export default function ShaderGraph() {
   const shaderName = useShaderGraphStore((state) => state.shaderName);
   const playgroundTarget = useShaderGraphStore((state) => state.playgroundTarget);
   const lastGeneratedGlsl = useShaderGraphStore((state) => state.lastGeneratedGlsl);
+  const hasInitializedExample = useShaderGraphStore((state) => state.hasInitializedExample);
   const loadGraph = useShaderGraphStore((state) => state.loadGraph);
+  const setHasInitializedExample = useShaderGraphStore((state) => state.setHasInitializedExample);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    if (hasInitializedExample) return;
+
+    if (nodes.length > 0 || edges.length > 0) {
+      setHasInitializedExample(true);
+      return;
+    }
+
+    const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === FIRST_OPEN_PRESET_ID);
+    if (!preset) {
+      setHasInitializedExample(true);
+      return;
+    }
+
+    loadGraph({
+      nodes: preset.nodes,
+      edges: preset.edges,
+      shaderName: preset.shaderName,
+      playgroundTarget,
+    });
+  }, [edges.length, hasInitializedExample, loadGraph, nodes.length, playgroundTarget, setHasInitializedExample]);
+
   const importRaw = (raw: string) => {
     const parsed = parseShaderGraphFile(raw);
     loadGraph({
@@ -162,7 +187,7 @@ export default function ShaderGraph() {
 
   return (
     <ReactFlowProvider>
-      <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex h-0 min-h-0 flex-1 flex-col overflow-hidden">
         <header className="flex min-h-12 shrink-0 items-center justify-between gap-3 border-b px-3 py-2">
           <div>
             <h1 className="text-sm font-semibold">Shader Graph</h1>
@@ -228,7 +253,7 @@ export default function ShaderGraph() {
         </header>
 
         {!shaderGraphPlugin.enabled ? (
-          <div className="flex min-h-0 flex-1 items-center justify-center">
+          <div className="flex h-0 min-h-0 flex-1 items-center justify-center overflow-hidden">
             <div className="flex flex-col items-center gap-3 text-center">
               <div className="flex size-10 items-center justify-center rounded-md border bg-muted/40">
                 <WorkflowIcon className="size-5 text-muted-foreground" />
@@ -246,7 +271,7 @@ export default function ShaderGraph() {
             </div>
           </div>
         ) : (
-          <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1">
+          <ResizablePanelGroup orientation="horizontal" className="h-0 min-h-0 flex-1 overflow-hidden">
             <ResizablePanel defaultSize="16%" minSize="12%" maxSize="25%" className="flex flex-col border-r">
               <div className="border-b px-3 py-2 shrink-0">
                 <span className="text-sm font-semibold">Nodes</span>
@@ -263,7 +288,7 @@ export default function ShaderGraph() {
             <ResizableHandle withHandle />
 
             <ResizablePanel defaultSize="27%" minSize="18%" maxSize="40%" className="flex flex-col border-l">
-              <ResizablePanelGroup orientation="vertical">
+              <ResizablePanelGroup orientation="vertical" className="h-full min-h-0">
                 <ResizablePanel defaultSize="35%" minSize="20%" className="flex flex-col overflow-hidden">
                   <div className="border-b px-3 py-2 shrink-0">
                     <span className="text-sm font-semibold">Inspector</span>
diff --git a/src/pages/shader-graph/nodeDefs.ts b/src/pages/shader-graph/nodeDefs.ts
index 70e590eb..b50ac18b 100644
--- a/src/pages/shader-graph/nodeDefs.ts
+++ b/src/pages/shader-graph/nodeDefs.ts
@@ -231,6 +231,55 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: unary('floor'),
   },
+  Min: {
+    category: 'Math',
+    label: 'Min',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = min(${i.a}, ${i.b});`,
+  },
+  Max: {
+    category: 'Math',
+    label: 'Max',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = max(${i.a}, ${i.b});`,
+  },
+  Modulo: {
+    category: 'Math',
+    label: 'Modulo',
+    inputs: [{ id: 'a', label: 'A', type: 'float' }, { id: 'b', label: 'B', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = mod(${i.a}, max(abs(${i.b}), 0.0001));`,
+  },
+  Negate: {
+    category: 'Math',
+    label: 'Negate',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = -${i.in0};`,
+  },
+  Saturate: {
+    category: 'Math',
+    label: 'Saturate',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = clamp(${i.in0}, 0.0, 1.0);`,
+  },
+  Remap: {
+    category: 'Math',
+    label: 'Remap',
+    inputs: [
+      { id: 'value', label: 'Value', type: 'float' },
+      { id: 'inMin', label: 'In Min', type: 'float' },
+      { id: 'inMax', label: 'In Max', type: 'float' },
+      { id: 'outMin', label: 'Out Min', type: 'float' },
+      { id: 'outMax', label: 'Out Max', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_t = (${i.value} - ${i.inMin}) / max(${i.inMax} - ${i.inMin}, 0.0001);\nfloat ${o.out} = mix(${i.outMin}, ${i.outMax}, ${o.out}_t);`,
+  },
 
   // ─── Vector ──────────────────────────────────────────────────────────────────
   Split4: {
@@ -282,6 +331,66 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'Out', type: 'float' }],
     emitGlsl: (i, o) => `float ${o.out} = dot(${i.a}.rgb, ${i.b}.rgb);`,
   },
+  SplitRGB: {
+    category: 'Vector',
+    label: 'Split RGB',
+    inputs: [{ id: 'vec', label: 'RGB', type: 'vec3' }],
+    outputs: [
+      { id: 'r', label: 'R', type: 'float' },
+      { id: 'g', label: 'G', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
+    emitGlsl: (i, o) => `float ${o.r} = ${i.vec}.r;\nfloat ${o.g} = ${i.vec}.g;\nfloat ${o.b} = ${i.vec}.b;`,
+  },
+  CombineRGB: {
+    category: 'Vector',
+    label: 'Combine RGB',
+    inputs: [
+      { id: 'r', label: 'R', type: 'float' },
+      { id: 'g', label: 'G', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGB', type: 'vec3' }],
+    emitGlsl: (i, o) => `vec3 ${o.out} = vec3(${i.r}, ${i.g}, ${i.b});`,
+  },
+  SwizzleVec2: {
+    category: 'Vector',
+    label: 'Swizzle Vec2',
+    inputs: [{ id: 'vec', label: 'XY', type: 'vec2' }],
+    outputs: [
+      { id: 'xy', label: 'XY', type: 'vec2' },
+      { id: 'yx', label: 'YX', type: 'vec2' },
+    ],
+    emitGlsl: (i, o) => `vec2 ${o.xy} = ${i.vec}.xy;\nvec2 ${o.yx} = ${i.vec}.yx;`,
+  },
+  DistanceVec2: {
+    category: 'Vector',
+    label: 'Distance Vec2',
+    inputs: [{ id: 'a', label: 'A', type: 'vec2' }, { id: 'b', label: 'B', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'Dist', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = distance(${i.a}, ${i.b});`,
+  },
+  LengthVec2: {
+    category: 'Vector',
+    label: 'Length Vec2',
+    inputs: [{ id: 'vec', label: 'XY', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'Len', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = length(${i.vec});`,
+  },
+  NormalizeVec2: {
+    category: 'Vector',
+    label: 'Normalize Vec2',
+    inputs: [{ id: 'vec', label: 'XY', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = normalize(${i.vec});`,
+  },
+  DotVec2: {
+    category: 'Vector',
+    label: 'Dot Vec2',
+    inputs: [{ id: 'a', label: 'A', type: 'vec2' }, { id: 'b', label: 'B', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'Dot', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = dot(${i.a}, ${i.b});`,
+  },
 
   // ─── Color ───────────────────────────────────────────────────────────────────
   Desaturate: {
@@ -313,6 +422,46 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) =>
       `vec3 ${o.out}_p = vec3(0.55735) * dot(vec3(0.55735), ${i.color}.rgb);\nvec3 ${o.out}_u = ${i.color}.rgb - ${o.out}_p;\nvec3 ${o.out}_v = cross(vec3(0.55735), ${o.out}_u);\nvec4 ${o.out} = vec4(${o.out}_p + ${o.out}_u * cos(${i.shift} * 6.2832) + ${o.out}_v * sin(${i.shift} * 6.2832), ${i.color}.a);`,
   },
+  InvertColor: {
+    category: 'Color',
+    label: 'Invert Color',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec4 ${o.out} = vec4(mix(${i.color}.rgb, 1.0 - ${i.color}.rgb, clamp(${i.amount}, 0.0, 1.0)), ${i.color}.a);`,
+  },
+  Contrast: {
+    category: 'Color',
+    label: 'Contrast',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec4 ${o.out} = vec4((${i.color}.rgb - vec3(0.5)) * ${i.amount} + vec3(0.5), ${i.color}.a);`,
+  },
+  PosterizeColor: {
+    category: 'Color',
+    label: 'Posterize',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'steps', label: 'Steps', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_steps = max(1.0, ${i.steps});\nvec4 ${o.out} = vec4(floor(${i.color}.rgb * ${o.out}_steps) / ${o.out}_steps, ${i.color}.a);`,
+  },
+  MultiplyColor: {
+    category: 'Color',
+    label: 'Multiply Color',
+    inputs: [{ id: 'a', label: 'A', type: 'vec4' }, { id: 'b', label: 'B', type: 'vec4' }],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = ${i.a} * ${i.b};`,
+  },
 
   // ─── Noise ───────────────────────────────────────────────────────────────────
   SimpleNoise: {
@@ -335,6 +484,72 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
     emitGlsl: (i, o) => `vec2 ${o.out} = ${i.uv} + vec2(sin(${i.uv}.y * ${i.freq} + ${i.time}) * ${i.amp}, 0.0);`,
   },
+  VoronoiCells: {
+    category: 'Noise',
+    label: 'Voronoi Cells',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Cells', type: 'float' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} * max(${i.scale}, 0.0001);\nvec2 ${o.out}_cell = floor(${o.out}_p);\nvec2 ${o.out}_local = fract(${o.out}_p);\nfloat ${o.out} = 1.0;\nfor (int ${o.out}_y = -1; ${o.out}_y <= 1; ${o.out}_y++) { for (int ${o.out}_x = -1; ${o.out}_x <= 1; ${o.out}_x++) { vec2 ${o.out}_neighbor = vec2(float(${o.out}_x), float(${o.out}_y)); vec2 ${o.out}_point = ${o.out}_neighbor + vec2(feather_hash(${o.out}_cell + ${o.out}_neighbor), feather_hash(${o.out}_cell + ${o.out}_neighbor + vec2(5.2, 1.3))); ${o.out} = min(${o.out}, length(${o.out}_point - ${o.out}_local)); } }`,
+  },
+  Checkerboard: {
+    category: 'Noise',
+    label: 'Checkerboard',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_cell = floor(${i.uv} * max(${i.scale}, 1.0));\nfloat ${o.out} = mod(${o.out}_cell.x + ${o.out}_cell.y, 2.0);`,
+  },
+
+  // ─── UV ─────────────────────────────────────────────────────────────────────
+  TilingOffset: {
+    category: 'UV',
+    label: 'Tiling And Offset',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'tiling', label: 'Tiling', type: 'vec2' },
+      { id: 'offset', label: 'Offset', type: 'vec2' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = ${i.uv} * ${i.tiling} + ${i.offset};`,
+  },
+  RotateUV: {
+    category: 'UV',
+    label: 'Rotate UV',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'angle', label: 'Angle', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} - vec2(0.5);\nfloat ${o.out}_s = sin(${i.angle});\nfloat ${o.out}_c = cos(${i.angle});\nvec2 ${o.out} = vec2(${o.out}_p.x * ${o.out}_c - ${o.out}_p.y * ${o.out}_s, ${o.out}_p.x * ${o.out}_s + ${o.out}_p.y * ${o.out}_c) + vec2(0.5);`,
+  },
+  TwirlUV: {
+    category: 'UV',
+    label: 'Twirl UV',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'strength', label: 'Strength', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} - vec2(0.5);\nfloat ${o.out}_d = length(${o.out}_p);\nfloat ${o.out}_a = atan(${o.out}_p.y, ${o.out}_p.x) + ${i.strength} * (1.0 - clamp(${o.out}_d * 2.0, 0.0, 1.0));\nvec2 ${o.out} = vec2(cos(${o.out}_a), sin(${o.out}_a)) * ${o.out}_d + vec2(0.5);`,
+  },
+  PolarCoordinates: {
+    category: 'UV',
+    label: 'Polar Coordinates',
+    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'Polar', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} - vec2(0.5);\nvec2 ${o.out} = vec2(length(${o.out}_p) * 2.0, atan(${o.out}_p.y, ${o.out}_p.x) / 6.2831853 + 0.5);`,
+  },
 
   // ─── Effects ────────────────────────────────────────────────────────────────
   SampleTexture: {
@@ -344,6 +559,28 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (i, o) => `vec4 ${o.out} = Texel(tex, ${i.uv});`,
   },
+  TextureStrength: {
+    category: 'Effect',
+    label: 'Texture Strength',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'power', label: 'Power', type: 'float' },
+      { id: 'strength', label: 'Strength', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_mask = pow(clamp(${i.color}.a, 0.0, 1.0), max(${i.power}, 0.0001));\nvec4 ${o.out} = vec4(${i.color}.rgb * ${i.strength}, clamp(${i.color}.a * ${o.out}_mask, 0.0, 1.0));`,
+  },
+  Opacity2D: {
+    category: 'Effect',
+    label: 'Opacity',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'opacity', label: 'Opacity', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(${i.color}.rgb, ${i.color}.a * clamp(${i.opacity}, 0.0, 1.0));`,
+  },
   CenteredUV: {
     category: 'Effect',
     label: 'Centered UV',
@@ -393,6 +630,38 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) =>
       `vec2 ${o.out} = ${i.uv} + vec2(sin((${i.uv}.y + ${i.time} * ${i.speed}) * ${i.freq}) * ${i.amp}, cos((${i.uv}.x + ${i.time} * ${i.speed}) * ${i.freq}) * ${i.amp} * 0.35);`,
   },
+  WaterDisplace: {
+    category: 'Effect',
+    label: 'Water Displace',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'time', label: 'Time', type: 'float' },
+      { id: 'speed', label: 'Speed', type: 'float' },
+      { id: 'amp', label: 'Amp', type: 'float' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} * max(${i.scale}, 0.0001) + vec2(${i.time} * ${i.speed}, ${i.time} * ${i.speed} * 0.73);\nvec2 ${o.out}_cell = floor(${o.out}_p);\nvec2 ${o.out}_f = smoothstep(vec2(0.0), vec2(1.0), fract(${o.out}_p));\nfloat ${o.out}_a = mix(mix(feather_hash(${o.out}_cell), feather_hash(${o.out}_cell + vec2(1.0, 0.0)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(0.0, 1.0)), feather_hash(${o.out}_cell + vec2(1.0, 1.0)), ${o.out}_f.x), ${o.out}_f.y);\nfloat ${o.out}_b = mix(mix(feather_hash(${o.out}_cell + vec2(9.2, 3.4)), feather_hash(${o.out}_cell + vec2(10.2, 3.4)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(9.2, 4.4)), feather_hash(${o.out}_cell + vec2(10.2, 4.4)), ${o.out}_f.x), ${o.out}_f.y);\nvec2 ${o.out} = ${i.uv} + (vec2(${o.out}_a, ${o.out}_b) * 2.0 - 1.0) * ${i.amp};`,
+  },
+  MaskedWaterDisplace: {
+    category: 'Effect',
+    label: 'Masked Water',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'time', label: 'Time', type: 'float' },
+      { id: 'speed', label: 'Speed', type: 'float' },
+      { id: 'amp', label: 'Amp', type: 'float' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+      { id: 'maskThreshold', label: 'Mask', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} * max(${i.scale}, 0.0001) + vec2(${i.time} * ${i.speed}, ${i.time} * ${i.speed} * 0.73);\nvec2 ${o.out}_cell = floor(${o.out}_p);\nvec2 ${o.out}_f = smoothstep(vec2(0.0), vec2(1.0), fract(${o.out}_p));\nfloat ${o.out}_a = mix(mix(feather_hash(${o.out}_cell), feather_hash(${o.out}_cell + vec2(1.0, 0.0)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(0.0, 1.0)), feather_hash(${o.out}_cell + vec2(1.0, 1.0)), ${o.out}_f.x), ${o.out}_f.y);\nfloat ${o.out}_b = mix(mix(feather_hash(${o.out}_cell + vec2(9.2, 3.4)), feather_hash(${o.out}_cell + vec2(10.2, 3.4)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(9.2, 4.4)), feather_hash(${o.out}_cell + vec2(10.2, 4.4)), ${o.out}_f.x), ${o.out}_f.y);\nvec2 ${o.out}_uv = ${i.uv} + (vec2(${o.out}_a, ${o.out}_b) * 2.0 - 1.0) * ${i.amp};\nvec4 ${o.out}_source = Texel(tex, ${o.out}_uv);\nfloat ${o.out}_mask = step(${i.maskThreshold}, min(${i.color}.a, ${o.out}_source.a));\nvec4 ${o.out} = mix(${i.color}, ${o.out}_source, ${o.out}_mask);`,
+  },
   Dissolve2D: {
     category: 'Effect',
     label: 'Dissolve',
@@ -527,6 +796,19 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'Pos', type: 'vec4' }],
     emitGlsl: (_, o) => `vec4 ${o.out} = vertex_position;`,
   },
+  VertexWave2D: {
+    category: 'Vertex',
+    label: 'Vertex Wave 2D',
+    inputs: [
+      { id: 'pos', label: 'Pos', type: 'vec4' },
+      { id: 'time', label: 'Time', type: 'float' },
+      { id: 'amp', label: 'Amp', type: 'float' },
+      { id: 'freq', label: 'Freq', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Pos', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec4 ${o.out} = ${i.pos};\n${o.out}.xy += vec2(sin((${i.pos}.y + ${i.time} * 60.0) * ${i.freq}), cos((${i.pos}.x + ${i.time} * 60.0) * ${i.freq})) * ${i.amp};`,
+  },
   TransformMatrix: {
     category: 'Vertex',
     label: 'Transform Matrix',
@@ -549,6 +831,7 @@ export const CATEGORY_COLORS: Record<string, string> = {
   Vector: 'border-l-purple-500',
   Color: 'border-l-pink-500',
   Noise: 'border-l-green-500',
+  UV: 'border-l-indigo-500',
   Effect: 'border-l-cyan-500',
   Output: 'border-l-red-500',
   Vertex: 'border-l-yellow-500',
@@ -587,22 +870,50 @@ export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
       'Abs',
       'Fract',
       'Floor',
+      'Min',
+      'Max',
+      'Modulo',
+      'Negate',
+      'Saturate',
+      'Remap',
     ],
   },
   {
     category: 'Vector',
-    nodes: ['Combine2', 'Combine3', 'Combine4', 'Split4', 'SplitVec2', 'SplitVec3', 'Normalize', 'Length', 'Dot'],
-  },
-  { category: 'Color', nodes: ['Desaturate', 'OneMinus', 'HueShift'] },
-  { category: 'Noise', nodes: ['SimpleNoise', 'Ripple'] },
+    nodes: [
+      'Combine2',
+      'Combine3',
+      'Combine4',
+      'CombineRGB',
+      'Split4',
+      'SplitRGB',
+      'SplitVec2',
+      'SplitVec3',
+      'SwizzleVec2',
+      'Normalize',
+      'Length',
+      'Dot',
+      'DistanceVec2',
+      'LengthVec2',
+      'NormalizeVec2',
+      'DotVec2',
+    ],
+  },
+  { category: 'Color', nodes: ['Desaturate', 'OneMinus', 'HueShift', 'InvertColor', 'Contrast', 'PosterizeColor', 'MultiplyColor'] },
+  { category: 'Noise', nodes: ['SimpleNoise', 'Ripple', 'VoronoiCells', 'Checkerboard'] },
+  { category: 'UV', nodes: ['TilingOffset', 'RotateUV', 'TwirlUV', 'PolarCoordinates'] },
   {
     category: 'Effect',
     nodes: [
       'SampleTexture',
+      'TextureStrength',
+      'Opacity2D',
       'CenteredUV',
       'Fresnel2D',
       'Outline2D',
       'WaveDistort',
+      'WaterDisplace',
+      'MaskedWaterDisplace',
       'Dissolve2D',
       'HitFlash',
       'Vignette',
@@ -611,5 +922,5 @@ export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
     ],
   },
   { category: 'Output', nodes: ['FragmentOutput'] },
-  { category: 'Vertex', nodes: ['VertexPosition', 'TransformMatrix', 'MatVecMul', 'VertexOutput'] },
+  { category: 'Vertex', nodes: ['VertexPosition', 'VertexWave2D', 'TransformMatrix', 'MatVecMul', 'VertexOutput'] },
 ];
diff --git a/src/pages/shader-graph/presets.ts b/src/pages/shader-graph/presets.ts
index a984c645..09bd3668 100644
--- a/src/pages/shader-graph/presets.ts
+++ b/src/pages/shader-graph/presets.ts
@@ -7,6 +7,7 @@ type PresetNode = {
   type: NodeType;
   x: number;
   y: number;
+  label?: string;
   values?: Record<string, number | number[]>;
 };
 
@@ -26,13 +27,13 @@ export type ShaderGraphPreset = {
   edges: Edge[];
 };
 
-function node({ id, type, x, y, values }: PresetNode): ShaderNodeInstance {
+function node({ id, type, x, y, label, values }: PresetNode): ShaderNodeInstance {
   return {
     id,
     type: 'shaderNode',
     position: { x, y },
     data: {
-      label: NODE_DEFS[type].label,
+      label: label ?? NODE_DEFS[type].label,
       nodeType: type,
       ...(values ? { values } : {}),
     } satisfies ShaderNodeData,
@@ -228,4 +229,240 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'chromatic', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'posterize',
+    'Posterize',
+    'Quantizes color into a small number of bands for toon and retro looks.',
+    'posterize',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'steps', type: 'FloatConstant', x: 0, y: 140, values: { val: 4 } },
+      { id: 'posterize', type: 'PosterizeColor', x: 310, y: 55 },
+      { id: 'out', type: 'FragmentOutput', x: 650, y: 75 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'posterize', in: 'color' },
+      { from: 'steps', out: 'out', to: 'posterize', in: 'steps' },
+      { from: 'posterize', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'twirl-portal',
+    'Twirl Portal',
+    'Twists UVs around the center, good for portals and magical particles.',
+    'twirl-portal',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'strength', type: 'FloatConstant', x: 0, y: 140, values: { val: 3.5 } },
+      { id: 'twirl', type: 'TwirlUV', x: 310, y: 55 },
+      { id: 'sample', type: 'SampleTexture', x: 610, y: 70 },
+      { id: 'out', type: 'FragmentOutput', x: 890, y: 70 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'twirl', in: 'uv' },
+      { from: 'strength', out: 'out', to: 'twirl', in: 'strength' },
+      { from: 'twirl', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'rotating-texture',
+    'Rotating Texture',
+    'Rotates UVs over time around the center.',
+    'rotating-texture',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'time', type: 'Time', x: 0, y: 140 },
+      { id: 'rotate', type: 'RotateUV', x: 310, y: 55 },
+      { id: 'sample', type: 'SampleTexture', x: 610, y: 70 },
+      { id: 'out', type: 'FragmentOutput', x: 890, y: 70 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'rotate', in: 'uv' },
+      { from: 'time', out: 'out', to: 'rotate', in: 'angle' },
+      { from: 'rotate', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'checker-flash',
+    'Checker Flash',
+    'Uses a checkerboard mask to flash alternating regions of a sprite.',
+    'checker-flash',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130 },
+      { id: 'scale', type: 'FloatConstant', x: 0, y: 260, values: { val: 10 } },
+      { id: 'flash-color', type: 'Vec4Constant', x: 0, y: 390, values: { val: [0.2, 0.9, 1, 1] } },
+      { id: 'checker', type: 'Checkerboard', x: 310, y: 145 },
+      { id: 'flash', type: 'HitFlash', x: 610, y: 120 },
+      { id: 'out', type: 'FragmentOutput', x: 930, y: 140 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'checker', in: 'uv' },
+      { from: 'scale', out: 'out', to: 'checker', in: 'scale' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'flash-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'checker', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'voronoi-energy',
+    'Voronoi Energy',
+    'Cellular noise mask mixed into the texture for sparks, shields, and magic.',
+    'voronoi-energy',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130 },
+      { id: 'scale', type: 'FloatConstant', x: 0, y: 260, values: { val: 16 } },
+      { id: 'energy-color', type: 'Vec4Constant', x: 0, y: 390, values: { val: [0.1, 0.75, 1, 1] } },
+      { id: 'cells', type: 'VoronoiCells', x: 310, y: 145 },
+      { id: 'invert', type: 'OneMinus', x: 590, y: 160 },
+      { id: 'flash', type: 'HitFlash', x: 820, y: 120 },
+      { id: 'out', type: 'FragmentOutput', x: 1140, y: 140 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'cells', in: 'uv' },
+      { from: 'scale', out: 'out', to: 'cells', in: 'scale' },
+      { from: 'cells', out: 'out', to: 'invert', in: 'val' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'energy-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'invert', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'tiled-scroll',
+    'Tiled Offset',
+    'Tiles and offsets UVs before sampling the texture.',
+    'tiled-offset',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'tiling', type: 'Vec2Constant', x: 0, y: 140, values: { val: [2, 2] } },
+      { id: 'offset', type: 'Vec2Constant', x: 0, y: 280, values: { val: [0.1, 0] } },
+      { id: 'tiling-offset', type: 'TilingOffset', x: 310, y: 90 },
+      { id: 'sample', type: 'SampleTexture', x: 620, y: 105 },
+      { id: 'out', type: 'FragmentOutput', x: 900, y: 105 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'tiling-offset', in: 'uv' },
+      { from: 'tiling', out: 'out', to: 'tiling-offset', in: 'tiling' },
+      { from: 'offset', out: 'out', to: 'tiling-offset', in: 'offset' },
+      { from: 'tiling-offset', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'texture-strength',
+    'Texture Strength',
+    'Sharpens texture alpha and boosts color intensity for cracks, glows, and impact marks.',
+    'texture-strength',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'power', type: 'FloatConstant', x: 0, y: 140, values: { val: 1.8 } },
+      { id: 'strength', type: 'FloatConstant', x: 0, y: 280, values: { val: 1.45 } },
+      { id: 'texture-strength', type: 'TextureStrength', x: 320, y: 75 },
+      { id: 'out', type: 'FragmentOutput', x: 670, y: 95 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'texture-strength', in: 'color' },
+      { from: 'power', out: 'out', to: 'texture-strength', in: 'power' },
+      { from: 'strength', out: 'out', to: 'texture-strength', in: 'strength' },
+      { from: 'texture-strength', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'opacity-fade',
+    'Opacity Fade',
+    'Simple texture alpha control for fade-in and fade-out effects.',
+    'opacity-fade',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'opacity', type: 'FloatConstant', x: 0, y: 140, values: { val: 0.45 } },
+      { id: 'opacity-node', type: 'Opacity2D', x: 320, y: 55 },
+      { id: 'out', type: 'FragmentOutput', x: 650, y: 75 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'opacity-node', in: 'color' },
+      { from: 'opacity', out: 'out', to: 'opacity-node', in: 'opacity' },
+      { from: 'opacity-node', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'vertex-wave',
+    'Vertex Wave',
+    'Offsets sprite vertices over time while preserving the normal texture color.',
+    'vertex-wave',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'frag-out', type: 'FragmentOutput', x: 320, y: 0 },
+      { id: 'pos', type: 'VertexPosition', x: 0, y: 180 },
+      { id: 'time', type: 'Time', x: 0, y: 300 },
+      { id: 'amp', type: 'FloatConstant', x: 0, y: 420, values: { val: 5 } },
+      { id: 'freq', type: 'FloatConstant', x: 0, y: 540, values: { val: 0.035 } },
+      { id: 'wave', type: 'VertexWave2D', x: 330, y: 300 },
+      { id: 'vert-out', type: 'VertexOutput', x: 680, y: 330 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'frag-out', in: 'color' },
+      { from: 'pos', out: 'out', to: 'wave', in: 'pos' },
+      { from: 'time', out: 'out', to: 'wave', in: 'time' },
+      { from: 'amp', out: 'out', to: 'wave', in: 'amp' },
+      { from: 'freq', out: 'out', to: 'wave', in: 'freq' },
+      { from: 'wave', out: 'out', to: 'vert-out', in: 'pos' },
+    ],
+  ),
+  preset(
+    'water-shimmer',
+    'Water Shimmer',
+    'Procedural noise displacement inspired by classic LÖVE water shaders.',
+    'water-shimmer',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0, label: 'Source UVs' },
+      { id: 'time', type: 'Time', x: 0, y: 120, label: 'Animated Time' },
+      { id: 'speed', type: 'FloatConstant', x: 0, y: 240, label: 'Water Scroll Speed', values: { val: 0.18 } },
+      { id: 'amp', type: 'FloatConstant', x: 0, y: 360, label: 'Ripple Strength', values: { val: 0.025 } },
+      { id: 'scale', type: 'FloatConstant', x: 0, y: 480, label: 'Noise Scale', values: { val: 10 } },
+      { id: 'water', type: 'WaterDisplace', x: 330, y: 170, label: 'Animated Water Offset' },
+      { id: 'sample', type: 'SampleTexture', x: 650, y: 190, label: 'Sample Shifted Texture' },
+      { id: 'out', type: 'FragmentOutput', x: 930, y: 190, label: 'Final Water Shader' },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'water', in: 'uv' },
+      { from: 'time', out: 'out', to: 'water', in: 'time' },
+      { from: 'speed', out: 'out', to: 'water', in: 'speed' },
+      { from: 'amp', out: 'out', to: 'water', in: 'amp' },
+      { from: 'scale', out: 'out', to: 'water', in: 'scale' },
+      { from: 'water', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'masked-water-shimmer',
+    'Masked Water Shimmer',
+    'Displaces only opaque texture regions, keeping transparent/shoreline edges stable.',
+    'masked-water-shimmer',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0, label: 'Original Texture' },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 120, label: 'Source UVs' },
+      { id: 'time', type: 'Time', x: 0, y: 240, label: 'Animated Time' },
+      { id: 'speed', type: 'FloatConstant', x: 0, y: 360, label: 'Water Scroll Speed', values: { val: 0.18 } },
+      { id: 'amp', type: 'FloatConstant', x: 0, y: 480, label: 'Ripple Strength', values: { val: 0.02 } },
+      { id: 'scale', type: 'FloatConstant', x: 0, y: 600, label: 'Noise Scale', values: { val: 12 } },
+      { id: 'mask', type: 'FloatConstant', x: 0, y: 720, label: 'Alpha Mask Threshold', values: { val: 0.5 } },
+      { id: 'water', type: 'MaskedWaterDisplace', x: 350, y: 270, label: 'Masked Water Offset' },
+      { id: 'out', type: 'FragmentOutput', x: 730, y: 315, label: 'Final Masked Water' },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'water', in: 'color' },
+      { from: 'uv', out: 'out', to: 'water', in: 'uv' },
+      { from: 'time', out: 'out', to: 'water', in: 'time' },
+      { from: 'speed', out: 'out', to: 'water', in: 'speed' },
+      { from: 'amp', out: 'out', to: 'water', in: 'amp' },
+      { from: 'scale', out: 'out', to: 'water', in: 'scale' },
+      { from: 'mask', out: 'out', to: 'water', in: 'maskThreshold' },
+      { from: 'water', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
 ];
diff --git a/src/store/shader-graph.ts b/src/store/shader-graph.ts
index 7e7bc8e9..5bc2e390 100644
--- a/src/store/shader-graph.ts
+++ b/src/store/shader-graph.ts
@@ -22,6 +22,7 @@ type ShaderGraphStore = {
   lastGeneratedGlsl: GeneratedGlsl | null;
   validationStatus: ValidationStatus;
   validationErrors: { pixelError?: string; vertexError?: string };
+  hasInitializedExample: boolean;
 
   setNodes: (nodes: Node<ShaderNodeData>[]) => void;
   setEdges: (edges: Edge[]) => void;
@@ -36,6 +37,7 @@ type ShaderGraphStore = {
   setLastGlsl: (glsl: GeneratedGlsl | null) => void;
   setValidationStatus: (status: ValidationStatus) => void;
   setValidationErrors: (errors: ShaderGraphStore['validationErrors']) => void;
+  setHasInitializedExample: (hasInitializedExample: boolean) => void;
   loadGraph: (graph: { nodes: Node<ShaderNodeData>[]; edges: Edge[]; shaderName?: string; playgroundTarget?: PlaygroundTarget | null }) => void;
   undo: () => void;
   redo: () => void;
@@ -91,6 +93,7 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
       lastGeneratedGlsl: null,
       validationStatus: 'idle',
       validationErrors: {},
+      hasInitializedExample: false,
 
       setNodes: (nodes) => set((s) => withHistory(s, { nodes })),
       setEdges: (edges) => set((s) => withHistory(s, { edges })),
@@ -123,6 +126,7 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
       setLastGlsl: (lastGeneratedGlsl) => set({ lastGeneratedGlsl }),
       setValidationStatus: (validationStatus) => set({ validationStatus }),
       setValidationErrors: (validationErrors) => set({ validationErrors }),
+      setHasInitializedExample: (hasInitializedExample) => set({ hasInitializedExample }),
       loadGraph: (graph) =>
         set({
           nodes: graph.nodes,
@@ -136,6 +140,7 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
           lastGeneratedGlsl: null,
           validationStatus: 'idle',
           validationErrors: {},
+          hasInitializedExample: true,
         }),
       undo: () =>
         set((s) => {
@@ -179,6 +184,7 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
         edges: s.edges,
         shaderName: s.shaderName,
         playgroundTarget: s.playgroundTarget,
+        hasInitializedExample: s.hasInitializedExample,
       }),
     },
   ),
diff --git a/src/types/shader-graph.ts b/src/types/shader-graph.ts
index 8bae2950..237236be 100644
--- a/src/types/shader-graph.ts
+++ b/src/types/shader-graph.ts
@@ -28,21 +28,48 @@ export const NODE_TYPES = [
   'Abs',
   'Fract',
   'Floor',
+  'Min',
+  'Max',
+  'Modulo',
+  'Negate',
+  'Saturate',
+  'Remap',
   'Split4',
   'Combine4',
+  'SplitRGB',
+  'CombineRGB',
+  'SwizzleVec2',
   'Normalize',
   'Length',
   'Dot',
+  'DistanceVec2',
+  'LengthVec2',
+  'NormalizeVec2',
+  'DotVec2',
   'Desaturate',
   'OneMinus',
   'HueShift',
+  'InvertColor',
+  'Contrast',
+  'PosterizeColor',
+  'MultiplyColor',
   'SimpleNoise',
   'Ripple',
+  'VoronoiCells',
+  'Checkerboard',
+  'TilingOffset',
+  'RotateUV',
+  'TwirlUV',
+  'PolarCoordinates',
   'SampleTexture',
+  'TextureStrength',
+  'Opacity2D',
   'CenteredUV',
   'Fresnel2D',
   'Outline2D',
   'WaveDistort',
+  'WaterDisplace',
+  'MaskedWaterDisplace',
   'Dissolve2D',
   'HitFlash',
   'Vignette',
@@ -50,6 +77,7 @@ export const NODE_TYPES = [
   'ChromaticAberration',
   'FragmentOutput',
   'VertexPosition',
+  'VertexWave2D',
   'TransformMatrix',
   'VertexOutput',
   'SplitVec2',
@@ -62,7 +90,7 @@ export const NODE_TYPES = [
 
 export type NodeType = (typeof NODE_TYPES)[number];
 
-export type NodeCategory = 'Input' | 'Math' | 'Vector' | 'Color' | 'Noise' | 'Effect' | 'Output' | 'Vertex';
+export type NodeCategory = 'Input' | 'Math' | 'Vector' | 'Color' | 'Noise' | 'UV' | 'Effect' | 'Output' | 'Vertex';
 
 export type ShaderNodeData = {
   label: string;

From 6d68539ffcc54f6b044cdd8980a67ffb1bafa25e Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Mon, 18 May 2026 23:57:15 -0400
Subject: [PATCH 10/14] cli: fix run command on cli only projects

---
 cli/src/lib/config.ts          | 49 ++++++++++++++++++++++++++++++++
 cli/src/lib/shim.ts            | 23 +++++++++++++++
 cli/test/commands/run.test.mjs | 51 ++++++++++++++++++++++++++++++++++
 3 files changed, 123 insertions(+)

diff --git a/cli/src/lib/config.ts b/cli/src/lib/config.ts
index ca8e8a18..2c36af5f 100644
--- a/cli/src/lib/config.ts
+++ b/cli/src/lib/config.ts
@@ -11,9 +11,58 @@ export interface FeatherConfig {
   [key: string]: unknown;
 }
 
+function stripLuaComments(src: string): string {
+  let out = "";
+  let i = 0;
+  let quote: '"' | "'" | null = null;
+
+  while (i < src.length) {
+    const ch = src[i];
+    const next = src[i + 1];
+
+    if (quote) {
+      out += ch;
+      if (ch === "\\" && next) {
+        out += next;
+        i += 2;
+        continue;
+      }
+      if (ch === quote) quote = null;
+      i += 1;
+      continue;
+    }
+
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      out += ch;
+      i += 1;
+      continue;
+    }
+
+    if (ch === "-" && next === "-") {
+      if (src[i + 2] === "[" && src[i + 3] === "[") {
+        const end = src.indexOf("]]", i + 4);
+        if (end === -1) break;
+        i = end + 2;
+        continue;
+      }
+
+      while (i < src.length && src[i] !== "\n") i += 1;
+      continue;
+    }
+
+    out += ch;
+    i += 1;
+  }
+
+  return out;
+}
+
 // Minimal Lua table parser for simple `return { key = value, ... }` configs.
 // Handles strings, numbers, booleans, and flat string arrays.
 function parseLuaTable(src: string): Record<string, unknown> {
+  src = stripLuaComments(src);
+
   // Strip the outer `return { ... }` wrapper
   const match = src.match(/return\s*\{([\s\S]*)\}/);
   if (!match) return {};
diff --git a/cli/src/lib/shim.ts b/cli/src/lib/shim.ts
index ece98565..1e7dfd8a 100644
--- a/cli/src/lib/shim.ts
+++ b/cli/src/lib/shim.ts
@@ -108,6 +108,29 @@ if gamePath then
   end
   chunk()
 end
+
+-- CLI mode should not require game code to call DEBUGGER:update(dt).
+-- Wrap after loading the game so we preserve the user's love.update callback.
+-- If the game already calls DEBUGGER:update(dt), avoid a second update in the same frame.
+if DEBUGGER and type(DEBUGGER.update) == "function" and not DEBUGGER.__cliAutoUpdateInstalled then
+  DEBUGGER.__cliAutoUpdateInstalled = true
+  local featherUpdate = DEBUGGER.update
+  DEBUGGER.update = function(self, dt)
+    self.__cliAutoUpdatedThisFrame = true
+    return featherUpdate(self, dt)
+  end
+
+  local gameUpdate = love.update
+  love.update = function(dt)
+    DEBUGGER.__cliAutoUpdatedThisFrame = false
+    if gameUpdate then
+      gameUpdate(dt)
+    end
+    if not DEBUGGER.__cliAutoUpdatedThisFrame then
+      featherUpdate(DEBUGGER, dt)
+    end
+  end
+end
 `;
 }
 
diff --git a/cli/test/commands/run.test.mjs b/cli/test/commands/run.test.mjs
index e42347a9..30e7e668 100644
--- a/cli/test/commands/run.test.mjs
+++ b/cli/test/commands/run.test.mjs
@@ -141,6 +141,57 @@ test('run: shim preloads config before requiring feather.auto', () => {
   assert.ok(record.shimMain.includes('require("feather.auto")'));
 });
 
+test('run: shim auto-drives DEBUGGER update after loading the game', () => {
+  const dir = makeTmp();
+  const gameDir = join(dir, 'game');
+  writeGame(gameDir);
+  const { fakePath, recordPath } = writeFakeLove(dir);
+
+  const result = run(['run', '--love', fakePath, gameDir]);
+
+  assert.equal(result.exitCode, 0, outputOf(result));
+  const record = JSON.parse(readFileSync(recordPath, 'utf8'));
+  assert.ok(record.shimMain.includes('not DEBUGGER.__cliAutoUpdateInstalled'));
+  assert.ok(record.shimMain.includes('local gameUpdate = love.update'));
+  assert.ok(record.shimMain.includes('gameUpdate(dt)'));
+  assert.ok(record.shimMain.includes('featherUpdate(DEBUGGER, dt)'));
+});
+
+test('run: config parser ignores commented example options', () => {
+  const dir = makeTmp();
+  const gameDir = join(dir, 'game');
+  writeGame(gameDir);
+  const configPath = join(gameDir, 'feather.config.lua');
+  writeFileSync(configPath, `
+return {
+  sessionName = "Real Config",
+  include = { "console" },
+  __DANGEROUS_INSECURE_CONNECTION__ = true,
+  apiKey = "real-key",
+
+  -- appId = "feather-app-commented-placeholder",
+  -- include = { "hot-reload" },
+  -- exclude = { "hump.signal" },
+  -- mode = "disk",
+  -- debugger = {
+  --   enabled = true,
+  -- },
+}
+`);
+  const { fakePath, recordPath } = writeFakeLove(dir);
+
+  const result = run(['run', '--love', fakePath, gameDir, '--config', configPath]);
+
+  assert.equal(result.exitCode, 0, outputOf(result));
+  const record = JSON.parse(readFileSync(recordPath, 'utf8'));
+  assert.equal(record.env.FEATHER_SESSION_NAME, 'Real Config');
+  assert.ok(record.shimMain.includes('sessionName = "Real Config"'));
+  assert.ok(record.shimMain.includes('include = { "console" }'));
+  assert.equal(record.shimMain.includes('feather-app-commented-placeholder'), false);
+  assert.equal(record.shimMain.includes('include = { "hot-reload" }'), false);
+  assert.equal(record.shimMain.includes('mode = "disk"'), false);
+});
+
 test('run --no-debugger: launches game directly without Feather shim', () => {
   const dir = makeTmp();
   const gameDir = join(dir, 'game');

From 3e89c92649fc7bc7154a4726e71676abc7114c7a Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Tue, 19 May 2026 00:16:29 -0400
Subject: [PATCH 11/14] cli: improve feather init experience

---
 cli/src/commands/doctor/index.ts   |   5 +-
 cli/src/commands/init.ts           |  14 +++-
 cli/src/index.ts                   |   2 +
 cli/src/ui/init/config.ts          |  34 ++++++++++
 cli/test/commands/doctor.test.mjs  |   7 +-
 cli/test/commands/init.test.mjs    | 103 +++++++++++++++++++++++++++++
 cli/test/commands/package.test.mjs |  18 ++++-
 7 files changed, 176 insertions(+), 7 deletions(-)

diff --git a/cli/src/commands/doctor/index.ts b/cli/src/commands/doctor/index.ts
index 4066145a..85c084fd 100644
--- a/cli/src/commands/doctor/index.ts
+++ b/cli/src/commands/doctor/index.ts
@@ -461,12 +461,13 @@ export async function doctorCommand(gamePath?: string, opts: DoctorOptions = {})
 
     const appId = typeof config?.appId === 'string' ? config.appId.trim() : '';
     appIdMissing = mode !== 'disk' && !appId;
+    const appIdSeverity = appIdMissing ? (insecureConnection ? productionSeverity(true) : 'fail') : 'pass';
     add(
       checks,
       'Safety',
       'Desktop App ID',
-      appIdMissing ? 'fail' : 'pass',
-      appIdMissing ? 'missing' : mode === 'disk' ? 'not needed for disk mode' : 'configured',
+      appIdSeverity,
+      appIdMissing && insecureConnection ? 'missing; insecure development override enabled' : appIdMissing ? 'missing' : mode === 'disk' ? 'not needed for disk mode' : 'configured',
       appIdMissing ? 'Set appId in feather.config.lua before shipping socket/network builds.' : undefined,
     );
 
diff --git a/cli/src/commands/init.ts b/cli/src/commands/init.ts
index 0332813b..1a694a5e 100644
--- a/cli/src/commands/init.ts
+++ b/cli/src/commands/init.ts
@@ -12,6 +12,7 @@ import {
 } from '../lib/install.js';
 import { configTemplate, luaKey, luaValue } from '../lib/config.js';
 import { chooseInitMode, type InitMode, type InitSetup } from '../ui/init/index.js';
+import { mergeCapabilities } from '../ui/init/config.js';
 import { pluginCatalog } from '../generated/plugin-catalog.js';
 import { resolveLocalLuaRoot } from '../lib/paths.js';
 import { fail } from '../lib/command.js';
@@ -27,10 +28,19 @@ export interface InitOptions {
   installDir?: string;
   yes?: boolean;
   mode?: InitMode;
+  allowInsecureConnection?: boolean;
 }
 
 const knownPlugins = pluginCatalog.map((plugin) => plugin.id);
 
+function addPluginCapabilities(config: Record<string, unknown>, pluginIds: Iterable<string>): void {
+  const current = config.capabilities as string[] | 'all' | undefined;
+  const merged = mergeCapabilities(current, pluginIds);
+  if (merged && merged !== 'all') {
+    config.capabilities = merged;
+  }
+}
+
 const toLocalName = (id: string) =>
   id
     .split(/[-.]/)
@@ -98,7 +108,7 @@ export async function initCommand(dir: string, opts: InitOptions): Promise<void>
           branch: opts.branch ?? 'main',
           installDir: opts.installDir ?? 'feather',
           installPlugins: opts.noPlugins ? false : true,
-          config: {},
+          config: opts.allowInsecureConnection ? { __DANGEROUS_INSECURE_CONNECTION__: true } : {},
           exclude: [],
         };
   const mode = setup.mode;
@@ -206,6 +216,7 @@ export async function initCommand(dir: string, opts: InitOptions): Promise<void>
   }
 
   if (mode === 'auto') {
+    addPluginCapabilities(setup.config, installedPluginIds);
     const patched = patchMainLua(mainPath, installDir);
     if (patched) {
       printLine(`${icon.success} Patched main.lua with feather.auto require`);
@@ -219,6 +230,7 @@ export async function initCommand(dir: string, opts: InitOptions): Promise<void>
         : pluginsDisabled
           ? []
           : (opts.plugins ?? knownPlugins).filter((id) => !setup.exclude.includes(id));
+    addPluginCapabilities(setup.config, pluginIds);
     const created = writeManualDebugger(target, setup.config, pluginIds, installDir);
     const patched = patchMainLuaForManual(mainPath);
 
diff --git a/cli/src/index.ts b/cli/src/index.ts
index c3af89a4..05b11d48 100644
--- a/cli/src/index.ts
+++ b/cli/src/index.ts
@@ -104,6 +104,7 @@ program
   .option('--plugins <ids>', 'Comma-separated list of plugins to install')
   .option('--mode <mode>', 'Setup mode: cli, auto, or manual', parseInitMode)
   .option('-y, --yes', 'Skip confirmation prompts')
+  .option('--allow-insecure-connection', 'Set __DANGEROUS_INSECURE_CONNECTION__ in feather.config.lua (required with --yes if appId is not configured)')
   .action((dir: string | undefined, opts) => runCliAction(() => initCommand(dir ?? '.', {
       branch: opts.branch as string,
       remote: opts.remote as boolean | undefined,
@@ -116,6 +117,7 @@ program
           : undefined,
       mode: opts.mode as InitMode | undefined,
       yes: opts.yes as boolean,
+      allowInsecureConnection: opts.allowInsecureConnection as boolean | undefined,
     })));
 
 program
diff --git a/cli/src/ui/init/config.ts b/cli/src/ui/init/config.ts
index 6df1cadd..ba779b88 100644
--- a/cli/src/ui/init/config.ts
+++ b/cli/src/ui/init/config.ts
@@ -5,6 +5,7 @@ import {
   type InitMode,
   type InitSetup,
 } from "./model.js";
+import { pluginCatalog } from "../../generated/plugin-catalog.js";
 
 export type InitSetupState = {
   mode: InitMode;
@@ -37,6 +38,31 @@ export type InitSetupState = {
   appIdInput: string;
 };
 
+const pluginCapabilities = new Map(pluginCatalog.map((plugin) => [plugin.id, plugin.capabilities]));
+
+export function capabilitiesForPlugins(pluginIds: Iterable<string>): string[] {
+  const capabilities = new Set<string>();
+
+  for (const id of pluginIds) {
+    for (const capability of pluginCapabilities.get(id) ?? []) {
+      capabilities.add(capability);
+    }
+  }
+
+  return [...capabilities].sort();
+}
+
+export function mergeCapabilities(base: string[] | "all" | undefined, pluginIds: Iterable<string>): string[] | "all" | undefined {
+  const pluginCaps = capabilitiesForPlugins(pluginIds);
+  if (pluginCaps.length === 0) return base;
+
+  if (!base || base === "all") {
+    return pluginCaps;
+  }
+
+  return [...new Set([...base, ...pluginCaps])].sort();
+}
+
 export function buildInitSetup(input: InitSetupState): InitSetup {
   const config: Record<string, unknown> = {};
   if (input.sessionName.trim()) config.sessionName = input.sessionName.trim();
@@ -68,6 +94,14 @@ export function buildInitSetup(input: InitSetupState): InitSetup {
     if (input.deviceId.trim()) config.deviceId = input.deviceId.trim();
   }
 
+  const mergedCapabilities = mergeCapabilities(
+    config.capabilities as string[] | "all" | undefined,
+    input.pluginPromptsEnabled ? input.include : [],
+  );
+  if (mergedCapabilities && mergedCapabilities !== "all") {
+    config.capabilities = mergedCapabilities;
+  }
+
   if (input.needsApiKey) {
     config.apiKey = input.apiKey;
     config.pluginOptions = {
diff --git a/cli/test/commands/doctor.test.mjs b/cli/test/commands/doctor.test.mjs
index 2b1f75bc..a981b326 100644
--- a/cli/test/commands/doctor.test.mjs
+++ b/cli/test/commands/doctor.test.mjs
@@ -151,7 +151,7 @@ test('doctor --production fails unsafe remote-control and production settings',
   }
 });
 
-test('doctor --json makes missing Desktop App ID fail outside production', () => {
+test('doctor --json warns for missing Desktop App ID when insecure dev override is enabled', () => {
   const dir = makeTmp();
   writeGame(dir);
   writeFileSync(
@@ -166,10 +166,11 @@ test('doctor --json makes missing Desktop App ID fail outside production', () =>
   );
 
   const { result, parsed } = parseDoctorJsonResult(dir);
-  assert.equal(result.exitCode, 1, outputOf(result));
+  assert.equal(result.exitCode, 0, outputOf(result));
   assert.equal(parsed.production, false);
   const labels = new Map(parsed.checks.map((check) => [check.label, check]));
-  assert.equal(labels.get('Desktop App ID')?.severity, 'fail');
+  assert.equal(labels.get('Desktop App ID')?.severity, 'warn');
+  assert.equal(labels.get('Desktop App ID')?.detail, 'missing; insecure development override enabled');
   assert.equal(labels.get('__DANGEROUS_INSECURE_CONNECTION__')?.severity, 'warn');
   assert.equal(labels.get('Console API key')?.severity, 'warn');
   assert.equal(labels.get('Network host exposure')?.severity, 'warn');
diff --git a/cli/test/commands/init.test.mjs b/cli/test/commands/init.test.mjs
index 10b57d53..ddb5d255 100644
--- a/cli/test/commands/init.test.mjs
+++ b/cli/test/commands/init.test.mjs
@@ -7,6 +7,7 @@ import {
   makeTmp,
   mkdirSync,
   outputOf,
+  parseDoctorJsonResult,
   readFileSync,
   rmSync,
   run,
@@ -60,6 +61,7 @@ test('init/remove e2e: auto mode installs runtime, doctor passes, and remove cle
       'feather',
       '--no-plugins',
       '--yes',
+      '--allow-insecure-connection',
     ]);
 
     assert.equal(existsSync(join(project, 'feather', 'init.lua')), true);
@@ -99,6 +101,7 @@ test('init e2e: defaults to cli mode and creates config without embedding runtim
       'feather',
       '--no-plugins',
       '--yes',
+      '--allow-insecure-connection',
     ]);
 
     assert.equal(existsSync(join(project, 'feather.config.lua')), true);
@@ -115,3 +118,103 @@ test('init e2e: defaults to cli mode and creates config without embedding runtim
     }
   }
 });
+
+test('init --yes without --allow-insecure-connection: config omits __DANGEROUS_INSECURE_CONNECTION__ and doctor fails on missing appId', () => {
+  const workspace = makeTmp();
+  const project = join(workspace, 'secure-game');
+
+  try {
+    writeE2eGame(project);
+
+    runOk([
+      'init',
+      project,
+      '--local-src',
+      LOCAL_SRC,
+      '--install-dir',
+      'feather',
+      '--no-plugins',
+      '--yes',
+    ]);
+
+    const config = readFileSync(join(project, 'feather.config.lua'), 'utf8');
+    const activeConfig = config.split('\n').filter((l) => !l.trimStart().startsWith('--')).join('\n');
+    assert.ok(!/__DANGEROUS_INSECURE_CONNECTION__\s*=\s*true/.test(activeConfig), 'config must not enable __DANGEROUS_INSECURE_CONNECTION__');
+
+    const { parsed: report } = parseDoctorJsonResult(project);
+    const insecureCheck = report.checks.find((c) => c.label === '__DANGEROUS_INSECURE_CONNECTION__');
+    const appIdCheck = report.checks.find((c) => c.label === 'Desktop App ID');
+    assert.equal(insecureCheck?.detail, 'disabled');
+    assert.equal(appIdCheck?.severity, 'fail');
+    assert.ok(report.failures >= 1);
+  } finally {
+    if (process.env.FEATHER_KEEP_E2E_TMP !== '1') {
+      rmSync(workspace, { recursive: true, force: true });
+    }
+  }
+});
+
+test('init --yes --allow-insecure-connection: config sets __DANGEROUS_INSECURE_CONNECTION__ and doctor downgrades missing appId to warn', () => {
+  const workspace = makeTmp();
+  const project = join(workspace, 'insecure-game');
+
+  try {
+    writeE2eGame(project);
+
+    runOk([
+      'init',
+      project,
+      '--local-src',
+      LOCAL_SRC,
+      '--install-dir',
+      'feather',
+      '--no-plugins',
+      '--yes',
+      '--allow-insecure-connection',
+    ]);
+
+    const config = readFileSync(join(project, 'feather.config.lua'), 'utf8');
+    assert.match(config, /__DANGEROUS_INSECURE_CONNECTION__\s*=\s*true/);
+
+    const report = doctorJson(project);
+    const insecureCheck = report.checks.find((c) => c.label === '__DANGEROUS_INSECURE_CONNECTION__');
+    const appIdCheck = report.checks.find((c) => c.label === 'Desktop App ID');
+    assert.equal(insecureCheck?.detail, 'enabled');
+    assert.equal(appIdCheck?.severity, 'warn');
+    assert.equal(report.failures, 0);
+  } finally {
+    if (process.env.FEATHER_KEEP_E2E_TMP !== '1') {
+      rmSync(workspace, { recursive: true, force: true });
+    }
+  }
+});
+
+test('init e2e: installed plugins add their capabilities to generated config', () => {
+  const workspace = makeTmp();
+  const project = join(workspace, 'plugin-capability-game');
+
+  try {
+    writeE2eGame(project);
+
+    runOk([
+      'init',
+      project,
+      '--mode',
+      'auto',
+      '--local-src',
+      LOCAL_SRC,
+      '--install-dir',
+      'feather',
+      '--plugins',
+      'collision-debug,console,input-replay',
+      '--yes',
+    ]);
+
+    const config = readFileSync(join(project, 'feather.config.lua'), 'utf8');
+    assert.match(config, /capabilities\s*=\s*\{\s*"draw",\s*"filesystem",\s*"input"\s*\}/);
+  } finally {
+    if (process.env.FEATHER_KEEP_E2E_TMP !== '1') {
+      rmSync(workspace, { recursive: true, force: true });
+    }
+  }
+});
diff --git a/cli/test/commands/package.test.mjs b/cli/test/commands/package.test.mjs
index 70e38cc1..ce77ff5b 100644
--- a/cli/test/commands/package.test.mjs
+++ b/cli/test/commands/package.test.mjs
@@ -1191,13 +1191,29 @@ test('init mode: config builder preserves cli and advanced setup values', async
   assert.deepEqual(setup.config.include, ['console']);
   assert.equal(setup.config.port, 5000);
   assert.equal(setup.config.mode, 'disk');
-  assert.deepEqual(setup.config.capabilities, ['logs', 'assets']);
+  assert.deepEqual(setup.config.capabilities, ['assets', 'filesystem', 'logs']);
   assert.equal(setup.config.captureScreenshot, true);
   assert.equal(setup.config.apiKey, 'StrongSecret123!');
   assert.deepEqual(setup.config.pluginOptions, { console: { evalEnabled: true } });
   assert.equal(setup.config.__DANGEROUS_INSECURE_CONNECTION__, true);
 });
 
+test('init mode: selected plugins add required capabilities automatically', async () => {
+  const { buildInitSetup } = await import('../../dist/ui/init/config.js');
+  const setup = buildInitSetup(
+    initSetupState({
+      include: new Set(['collision-debug', 'console', 'input-replay']),
+      exclude: new Set(),
+      advanced: false,
+      needsApiKey: true,
+      apiKey: 'StrongSecret123!',
+    }),
+  );
+
+  assert.deepEqual(setup.config.include, ['collision-debug', 'console', 'input-replay']);
+  assert.deepEqual(setup.config.capabilities, ['draw', 'filesystem', 'input']);
+});
+
 test('custom add: repo install writes selected files and lockfile metadata', async () => {
   const dir = makeTmp();
   const { installCustomRepoPackage } = await import('../../dist/lib/package/custom-add.js');

From 5fec1024580e990e1d08c57c7d2582023f67706d Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Tue, 19 May 2026 00:42:07 -0400
Subject: [PATCH 12/14] feather: add missing documentation pages

---
 cli/src/lib/build/config.ts             |   2 +-
 docs/particle-system-playground.md      |   1 +
 docs/plugins/ingame-overlay.md          |   1 +
 docs/plugins/runtime-snapshot.md        |   1 +
 docs/shader-graph.md                    |   1 +
 mkdocs.yml                              |  14 +-
 src/components/app-sidebar/nav-main.tsx |  32 ++--
 src/pages/session/index.tsx             | 192 ++++++++++++++++++++++++
 src/router.tsx                          |   9 ++
 src/store/config.ts                     |   1 +
 10 files changed, 235 insertions(+), 19 deletions(-)
 create mode 120000 docs/particle-system-playground.md
 create mode 120000 docs/plugins/ingame-overlay.md
 create mode 120000 docs/plugins/runtime-snapshot.md
 create mode 120000 docs/shader-graph.md
 create mode 100644 src/pages/session/index.tsx

diff --git a/cli/src/lib/build/config.ts b/cli/src/lib/build/config.ts
index c3a0a4ee..1677d31b 100644
--- a/cli/src/lib/build/config.ts
+++ b/cli/src/lib/build/config.ts
@@ -163,7 +163,7 @@ export function readBuildConfig(projectDir: string, configPath?: string): Feathe
     }
     return parsed as FeatherBuildConfig;
   } catch (err) {
-    throw new Error(`Invalid feather.build.json: ${(err as Error).message}`);
+    throw new Error(`Invalid feather.build.json: ${(err as Error).message}`, { cause: err });
   }
 }
 
diff --git a/docs/particle-system-playground.md b/docs/particle-system-playground.md
new file mode 120000
index 00000000..592b9438
--- /dev/null
+++ b/docs/particle-system-playground.md
@@ -0,0 +1 @@
+../src-lua/plugins/particle-system-playground/README.md
\ No newline at end of file
diff --git a/docs/plugins/ingame-overlay.md b/docs/plugins/ingame-overlay.md
new file mode 120000
index 00000000..ff6ffa14
--- /dev/null
+++ b/docs/plugins/ingame-overlay.md
@@ -0,0 +1 @@
+../src-lua/plugins/ingame-overlay/README.md
\ No newline at end of file
diff --git a/docs/plugins/runtime-snapshot.md b/docs/plugins/runtime-snapshot.md
new file mode 120000
index 00000000..dfe9cd83
--- /dev/null
+++ b/docs/plugins/runtime-snapshot.md
@@ -0,0 +1 @@
+../src-lua/plugins/runtime-snapshot/README.md
\ No newline at end of file
diff --git a/docs/shader-graph.md b/docs/shader-graph.md
new file mode 120000
index 00000000..0947eb5e
--- /dev/null
+++ b/docs/shader-graph.md
@@ -0,0 +1 @@
+../src-lua/plugins/shader-graph/README.md
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 9dd5cdb0..1ac52f5e 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -29,16 +29,18 @@ theme:
 nav:
   - Home: index.md
   - Installation: installation.md
-  - Configuration: configuration.md
+  - CLI:
+      - Overview: cli.md
+      - Package Management: packages.md
   - Usage: usage.md
+  - Configuration: configuration.md
   - Debugger: debugger.md
   - Hot Reload: hot-reload.md
+  - Console: console.md
   - Assets: assets.md
-  - CLI:
-      - Overview: cli.md
-      - Package Management: packages.md
+  - Particle System Playground: particle-system-playground.md
+  - Shader Graph: shader-graph.md
   - Time Travel: time-travel.md
-  - Console: console.md
   - Recommendations: recommendations.md
   - Plugins:
       - Overview: plugins.md
@@ -52,6 +54,7 @@ nav:
       - Entity Inspector: plugins/entity-inspector.md
       - Filesystem: plugins/filesystem.md
       - HUMP Signal: plugins/hump-signal.md
+      - In-game overlay: plugins/ingame-overlay.md
       - Input Replay: plugins/input-replay.md
       - Lua State Machine: plugins/lua-state-machine.md
       - Memory Snapshot: plugins/memory-snapshot.md
@@ -59,6 +62,7 @@ nav:
       - Particle Editor: plugins/particle-editor.md
       - Physics Debug: plugins/physics-debug.md
       - Profiler: plugins/profiler.md
+      - Runtime Snapshot: plugins/runtime-snapshot.md
       - Screenshots: plugins/screenshots.md
       - Timer Inspector: plugins/timer-inspector.md
 
diff --git a/src/components/app-sidebar/nav-main.tsx b/src/components/app-sidebar/nav-main.tsx
index 9b754d3c..ca492422 100644
--- a/src/components/app-sidebar/nav-main.tsx
+++ b/src/components/app-sidebar/nav-main.tsx
@@ -8,7 +8,9 @@ import {
 import { cn } from '@/utils/styles';
 import { NavLink, useLocation } from 'react-router';
 import {
+  BlendIcon,
   BugIcon,
+  CableIcon,
   ClockIcon,
   GaugeIcon,
   GitCompareArrowsIcon,
@@ -17,7 +19,6 @@ import {
   SparklesIcon,
   TelescopeIcon,
   TerminalIcon,
-  WorkflowIcon,
 } from 'lucide-react';
 import { useDebuggerStore } from '@/store/debugger';
 import { useSessionStore } from '@/store/session';
@@ -43,20 +44,25 @@ export function NavMain() {
       url: '/observability',
       icon: TelescopeIcon,
     },
+    {
+      title: 'Debugger',
+      url: '/debugger',
+      icon: BugIcon,
+    },
     {
       title: 'Console',
       url: '/console',
       icon: TerminalIcon,
     },
     {
-      title: 'Debugger',
-      url: '/debugger',
-      icon: BugIcon,
+      title: 'Particles Playground',
+      url: '/particle-system-playground',
+      icon: SparklesIcon,
     },
     {
-      title: 'Time Travel',
-      url: '/time-travel',
-      icon: ClockIcon,
+      title: 'Shader Graph',
+      url: '/shader-graph',
+      icon: BlendIcon,
     },
     {
       title: 'Assets',
@@ -64,9 +70,9 @@ export function NavMain() {
       icon: ImagesIcon,
     },
     {
-      title: 'Particles Playground',
-      url: '/particle-system-playground',
-      icon: SparklesIcon,
+      title: 'Time Travel',
+      url: '/time-travel',
+      icon: ClockIcon,
     },
     {
       title: 'Compare',
@@ -74,9 +80,9 @@ export function NavMain() {
       icon: GitCompareArrowsIcon,
     },
     {
-      title: 'Shader Graph',
-      url: '/shader-graph',
-      icon: WorkflowIcon,
+      title: 'Session',
+      url: '/session',
+      icon: CableIcon,
     },
   ];
   const location = useLocation();
diff --git a/src/pages/session/index.tsx b/src/pages/session/index.tsx
new file mode 100644
index 00000000..5a46b4ac
--- /dev/null
+++ b/src/pages/session/index.tsx
@@ -0,0 +1,192 @@
+import { useQuery } from '@tanstack/react-query';
+import { readTextFile } from '@tauri-apps/plugin-fs';
+import { useConfigStore } from '@/store/config';
+import { useSessionStore } from '@/store/session';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/utils/styles';
+import { isWeb } from '@/utils/platform';
+import { BoxIcon, MonitorIcon, PuzzleIcon, ServerIcon, ShieldOffIcon } from 'lucide-react';
+
+type LockfileEntry = {
+  version: string;
+  trust: 'verified' | 'known' | 'experimental';
+  installedAt: string;
+};
+
+type Lockfile = {
+  lockfileVersion: number;
+  packages: Record<string, LockfileEntry>;
+};
+
+function joinPath(base: string, file: string): string {
+  const sep = base.includes('\\') ? '\\' : '/';
+  return `${base.replace(/[\\/]+$/, '')}${sep}${file}`;
+}
+
+function usePackageLockfile(rootPath: string | undefined, enabled: boolean) {
+  return useQuery<Lockfile | null>({
+    queryKey: ['session-lockfile', rootPath],
+    queryFn: async () => {
+      if (!rootPath) return null;
+      const raw = await readTextFile(joinPath(rootPath, 'feather.lock.json'));
+      return JSON.parse(raw) as Lockfile;
+    },
+    enabled: enabled && !isWeb() && !!rootPath,
+    retry: false,
+    staleTime: 30_000,
+  });
+}
+
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-start justify-between gap-4 border-b py-1.5 last:border-0">
+      <span className="shrink-0 text-xs text-muted-foreground">{label}</span>
+      <span className="break-all text-right font-mono text-xs">{value ?? '—'}</span>
+    </div>
+  );
+}
+
+function Section({
+  title,
+  icon: Icon,
+  children,
+}: {
+  title: string;
+  icon: React.ElementType;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border bg-card p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <Icon className="size-4 text-muted-foreground" />
+        <h2 className="text-sm font-semibold">{title}</h2>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default function SessionPage() {
+  const config = useConfigStore((state) => state.config);
+  const sessionId = useSessionStore((state) => state.sessionId);
+  const sessions = useSessionStore((state) => state.sessions);
+  const session = sessionId ? sessions[sessionId] : null;
+
+  const isFileSession = session?.kind === 'log-file' || session?.kind === 'time-travel-file';
+  const {
+    data: lockfile,
+    isLoading: lockfileLoading,
+    isError: lockfileError,
+  } = usePackageLockfile(config?.root_path, !isFileSession);
+
+  if (!config || !session) return null;
+
+  const pluginEntries = Object.entries(config.plugins ?? {});
+  const packageEntries = lockfile ? Object.entries(lockfile.packages) : [];
+
+  return (
+    <ScrollArea className="min-h-0 flex-1">
+      <div className="flex flex-col gap-4 px-4 py-4 md:py-6">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Section title="Session" icon={MonitorIcon}>
+            <InfoRow label="Name" value={config.sessionName || session.name} />
+            <InfoRow label="Device ID" value={session.deviceId} />
+            <InfoRow label="Session ID" value={sessionId} />
+            {session.insecure && (
+              <div className="mt-2 flex items-center gap-2 rounded-md border border-orange-300 bg-orange-50 px-2 py-1.5 dark:border-orange-800 dark:bg-orange-950">
+                <ShieldOffIcon className="size-3.5 text-orange-500" />
+                <span className="text-xs text-orange-700 dark:text-orange-400">
+                  Insecure connection — set appId in feather.config.lua
+                </span>
+              </div>
+            )}
+          </Section>
+
+          <Section title="Environment" icon={ServerIcon}>
+            <InfoRow label="OS" value={config.sysInfo?.os} />
+            <InfoRow label="Architecture" value={config.sysInfo?.arch} />
+            <InfoRow label="CPU cores" value={config.sysInfo?.cpuCount} />
+            <InfoRow label="LÖVE version" value={config.sysInfo?.loveVersion} />
+            <InfoRow label="Feather runtime" value={config.version ? `v${config.version}` : undefined} />
+            <InfoRow label="API version" value={config.API || undefined} />
+          </Section>
+        </div>
+
+        <Section title={`Plugins (${pluginEntries.length})`} icon={PuzzleIcon}>
+          {pluginEntries.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No plugins reported by this session.</p>
+          ) : (
+            <div className="grid gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
+              {pluginEntries.map(([id, plugin]) => {
+                const status = plugin.incompatible ? 'incompatible' : plugin.disabled ? 'disabled' : 'enabled';
+                return (
+                  <div
+                    key={id}
+                    className="flex items-center justify-between rounded-md border bg-muted/30 px-2.5 py-1.5"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate font-mono text-xs">{plugin.tabName || id}</p>
+                      {plugin.version && <p className="text-[10px] text-muted-foreground">v{plugin.version}</p>}
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={cn('ml-2 h-5 shrink-0 text-[10px]', {
+                        'border-green-500/40 text-green-600 dark:text-green-400': status === 'enabled',
+                        'border-muted-foreground/30 text-muted-foreground': status === 'disabled',
+                        'border-destructive/30 text-destructive': status === 'incompatible',
+                      })}
+                    >
+                      {status}
+                    </Badge>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </Section>
+
+        <Section title={lockfile ? `Packages (${packageEntries.length})` : 'Packages'} icon={BoxIcon}>
+          {isWeb() || isFileSession ? (
+            <p className="text-xs text-muted-foreground">Not available for this session type.</p>
+          ) : lockfileLoading ? (
+            <div className="grid gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <Skeleton key={i} className="h-9 rounded-md" />
+              ))}
+            </div>
+          ) : lockfileError || !lockfile ? (
+            <p className="text-xs text-muted-foreground">
+              No feather.lock.json found {'-->'} Run{' '}
+              <span className="font-mono font-semibold">feather package install &lt;name&gt;</span> to add packages.
+            </p>
+          ) : packageEntries.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No packages installed.</p>
+          ) : (
+            <div className="grid gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
+              {packageEntries.map(([id, pkg]) => (
+                <div key={id} className="flex items-center justify-between rounded-md border bg-muted/30 px-2.5 py-1.5">
+                  <div className="min-w-0">
+                    <p className="truncate font-mono text-xs">{id}</p>
+                    <p className="text-[10px] text-muted-foreground">{pkg.version}</p>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className={cn('ml-2 h-5 shrink-0 text-[10px]', {
+                      'border-green-500/40 text-green-600 dark:text-green-400': pkg.trust === 'verified',
+                      'border-yellow-500/40 text-yellow-600 dark:text-yellow-400': pkg.trust === 'known',
+                      'border-muted-foreground/30 text-muted-foreground': pkg.trust === 'experimental',
+                    })}
+                  >
+                    {pkg.trust}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          )}
+        </Section>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/src/router.tsx b/src/router.tsx
index 9f230383..baf52dcc 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -26,6 +26,7 @@ import Compare from './pages/compare';
 import Assets from './pages/assets';
 import ParticleSystemPlayground from './pages/particle-system-playground';
 import ShaderGraph from './pages/shader-graph';
+import SessionPage from './pages/session';
 import { SettingsModal } from './pages/settings';
 import { useConfigStore } from './store/config';
 import { AboutModal } from './pages/about';
@@ -259,6 +260,14 @@ export const Router = () => {
                 }
               />
               <Route path="/shader-graph" element={<ShaderGraph />} />
+              <Route
+                path="/session"
+                element={
+                  <RequireSession>
+                    <SessionPage />
+                  </RequireSession>
+                }
+              />
 
               <Route path="/plugins">
                 <Route
diff --git a/src/store/config.ts b/src/store/config.ts
index 9297d5a1..0c392dad 100644
--- a/src/store/config.ts
+++ b/src/store/config.ts
@@ -4,6 +4,7 @@ export interface SysInfo {
   arch: string;
   os: string;
   cpuCount: number;
+  loveVersion?: string;
 }
 
 export interface Config {

From fb3ff4411401b40d0306094b40f020a4580e7ba3 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Tue, 19 May 2026 00:53:29 -0400
Subject: [PATCH 13/14] feather: v1.2.0

---
 CHANGELOG.md              | 64 +++++++++++++++++++++++++++++++++++++++
 cli/package.json          |  2 +-
 package-lock.json         |  6 ++--
 package.json              |  2 +-
 src-lua/feather/init.lua  |  2 +-
 src-tauri/Cargo.lock      |  2 +-
 src-tauri/Cargo.toml      |  2 +-
 src-tauri/tauri.conf.json |  2 +-
 8 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbcc1982..ae953a5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,68 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v1.2.0] - 2026-05-19 - The one with the shader and particles playground
+
+### Added
+
+- **Shader Graph** — node-based visual GLSL editor for authoring Love2D pixel and vertex shaders without writing code.
+  - 40+ built-in nodes across 9 categories: Input, Math, Vector, Color, UV, Noise, Effect, Vertex, and Output.
+  - Input nodes: Texture Color, Texture Coords, Screen Coords, Vertex Color, Time, Resolution, Float, Vec2, Vec3, Vec4 constants.
+  - Math nodes: Add, Subtract, Multiply, Divide, Power, Sqrt, Abs, Clamp, Lerp, Step, Smoothstep, Fract, Floor, Ceil, Mod, Min, Max, Sign, Sin, Cos, Atan2.
+  - Vector nodes: Combine2, Combine3, SplitVec2, SplitVec3, Dot, Cross, Normalize, Length, MatVecMul, TransformMatrix.
+  - Color nodes: Desaturate, OneMinus, HueShift, InvertColor, Contrast, PosterizeColor, MultiplyColor.
+  - UV nodes: TilingOffset, RotateUV, TwirlUV, PolarCoordinates.
+  - Noise nodes: SimpleNoise, Ripple, VoronoiCells, Checkerboard.
+  - Vertex nodes: VertexPosition, VertexWave2D with a dedicated VertexOutput node for vertex shader authoring.
+  - Type-safe port connections — incompatible types are rejected; handle colors reflect the GLSL type.
+  - GLSL code generation with pixel and vertex shader output, extern declarations, and shared noise helpers.
+  - Live GLSL preview panel with syntax highlighting, copy to clipboard, line numbers, and light/dark theme support.
+  - Validate against the running game via the `shader-graph` Lua plugin (`compile-shader` action).
+  - Apply generated shader directly to a Particle System Playground composite target.
+  - Undo/redo history (up to 100 snapshots), Delete/Backspace to remove selected nodes or edges.
+  - Import/export graph as `.feathershgh` JSON files.
+  - Bundled preset graphs (chromatic aberration, pixelation, grayscale, vignette, wave distortion, and more).
+  - Enable/disable toggle integrated with the plugin control system; empty state when the plugin is not active.
+  - New `shader-graph` Lua plugin for in-game GLSL compilation and validation.
+
+- **Particle System Playground** — live editor for Love2D composite particle systems with real-time in-game preview.
+  - Side-by-side emitter list and full properties panel covering all 30+ Love2D `ParticleSystem` parameters.
+  - Visual property editors: color gradient with alpha curve lane, size curve with draggable Catmull-Rom spline, direction/spread gizmo, rotation/spin gizmo, circular force gizmo, linear acceleration plane, damping range editor, and texture offset gizmo.
+  - Range pair fields for all min/max properties (speed, spin, rotation, acceleration, damping) with a connecting bar visual.
+  - 30 built-in motion presets: Explosion, Whirlpool, Tornado, Wind Drift, Smoke Rise, Gravity Fall, Orbit, Shockwave, Fountain, Fire Sparks, Ember Float, Rain, Snow Drift, Magic Swirl, Portal Inhale, Portal Burst, Spiral Up, Spiral Down, Jet Thruster, Muzzle Flash, Blood Spray, Debris Arc, Dust Puff, Steam Vent, Bubbles, Water Splash, Leaf Gust, Sparks Shower, Energy Beam, Implosion — each with an intensify variant.
+  - Texture importer with base64 transport and live preview inside the editor.
+  - Shader editor panel with preset shader library and live apply to game.
+  - Composite and system selector for multi-emitter setups.
+  - Export panel for saving the full composite configuration.
+  - New `particle-system-playground` Lua plugin with `draw` and `filesystem` capabilities.
+
+- **Session page** — dedicated `/session` route showing an overview of the active game session.
+  - Session card: name, device ID, session ID, insecure connection warning.
+  - Environment card: OS, architecture, CPU cores, LÖVE version (when reported by the runtime), Feather runtime version, and API version.
+  - Plugins section: all plugins reported by the session with name, version, and enabled/disabled/incompatible badge.
+  - Packages section: reads `feather.lock.json` from the project root via Tauri file API; shows package name, version, and trust level badge (`verified` / `known` / `experimental`). Gracefully unavailable for file sessions, web mode, and remote machines.
+
+- **`feather init` capability inference** — when installing plugins in `auto` or `manual` mode, the generated `feather.config.lua` automatically includes the `capabilities` required by the selected plugins (e.g. installing `console` adds `filesystem`).
+  - New `--allow-insecure-connection` flag for non-interactive `--yes` flows: `__DANGEROUS_INSECURE_CONNECTION__` is no longer written by default; users must opt in explicitly.
+
+- **Lua config parser** — `feather run` now correctly strips Lua comments before parsing `feather.config.lua`, so commented-out example options no longer interfere with loaded values.
+
+- **`feather run` shim** — CLI-only projects now get an auto-shim that drives `DEBUGGER:update(dt)` without requiring changes to `main.lua`.
+
+### Changed
+
+- `feather doctor` downgrades missing `Desktop App ID` from `fail` to `warn` when `__DANGEROUS_INSECURE_CONNECTION__` is present, reflecting that it is an intentional development override rather than a misconfiguration.
+
+### Fixed
+
+- `feather run` no longer errors on CLI-only projects that have no embedded Feather runtime directory.
+
+### Tests
+
+- `init`: added tests for `--yes` without `--allow-insecure-connection` (config stays clean, doctor fails on appId), `--yes --allow-insecure-connection` (flag written, doctor downgrades to warn), plugin capability propagation into generated config, and interactive mode capability inference.
+- `doctor`: added test verifying the missing appId warning when the insecure dev override is enabled.
+- `run`: added tests for the CLI-only shim update hook and comment-stripping in the Lua config parser.
+
 ## [v1.1.1] - 2026-05-17 - The one with better defaults
 
 ### Changes
@@ -430,6 +492,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - LuaRocks package.
 - GitHub Actions CI.
 
+[v1.2.0]: https://github.com/Kyonru/feather/compare/v1.1.1...v1.2.0
+[v1.1.1]: https://github.com/Kyonru/feather/compare/v1.1.0...v1.1.1
 [v1.1.0]: https://github.com/Kyonru/feather/compare/v1.0.1...v1.1.0
 [v1.0.1]: https://github.com/Kyonru/feather/compare/v1.0.0...v1.0.1
 [v1.0.0]: https://github.com/Kyonru/feather/compare/v0.10.0...v1.0.0
diff --git a/cli/package.json b/cli/package.json
index 0d48415e..49b0a51a 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kyonru/feather",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "CLI for Feather — run and debug Love2D games without touching your game code",
   "license": "EPL-2.0",
   "keywords": [
diff --git a/package-lock.json b/package-lock.json
index 6a85ebc9..f3708124 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "feather",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "feather",
-      "version": "1.1.1",
+      "version": "1.2.0",
       "workspaces": [
         "cli"
       ],
@@ -83,7 +83,7 @@
     },
     "cli": {
       "name": "@kyonru/feather",
-      "version": "1.1.1",
+      "version": "1.2.0",
       "license": "EPL-2.0",
       "dependencies": {
         "chalk": "5.3.0",
diff --git a/package.json b/package.json
index d1fcf502..2bc682b4 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "feather",
   "description": "Feather is a LÖVE game development toolkit with a desktop inspector, zero-config CLI, plugin system, build/upload helpers, and package management.",
   "private": true,
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "workspaces": [
     "cli"
diff --git a/src-lua/feather/init.lua b/src-lua/feather/init.lua
index 9ac891d9..d057e26d 100644
--- a/src-lua/feather/init.lua
+++ b/src-lua/feather/init.lua
@@ -20,7 +20,7 @@ local FeatherUI = require(FEATHER_PATH .. ".ui")
 local get_current_dir = require(FEATHER_PATH .. ".utils").get_current_dir
 local format = require(FEATHER_PATH .. ".utils").format
 
-local FEATHER_VERSION_NAME = "1.1.1"
+local FEATHER_VERSION_NAME = "1.2.0"
 local FEATHER_API = 5
 
 local FEATHER_VERSION = {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 6ea89c86..8d970c88 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1008,7 +1008,7 @@ dependencies = [
 
 [[package]]
 name = "feather"
-version = "1.1.1"
+version = "1.2.0"
 dependencies = [
  "axum",
  "futures-util",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index f5325873..203e0d8e 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "feather"
-version = "1.1.1"
+version = "1.2.0"
 description = "Feather is a Love2D devtool to debug and inspect your game in real-time. It provides a web-based interface to view and manipulate game state, visualize physics, and more."
 authors = ["kyonru"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index c0afe576..8496f747 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Feather",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "identifier": "com.kyonru.love.feather",
   "build": {
     "beforeDevCommand": "npm run dev",

From 7bc5c9fca26347e1a08b0a6fba33827634173542 Mon Sep 17 00:00:00 2001
From: Roberto Amarante <robertamarantec@gmail.com>
Date: Tue, 19 May 2026 08:24:24 -0400
Subject: [PATCH 14/14] feather: lock versions

---
 package-lock.json | 14 +++++++-------
 package.json      | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3708124..134770e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,14 +34,14 @@
         "@tanstack/react-query": "5.100.10",
         "@tanstack/react-query-persist-client": "5.100.10",
         "@tanstack/react-table": "8.21.3",
-        "@tauri-apps/api": "^2.11.0",
-        "@tauri-apps/plugin-dialog": "^2.7.1",
-        "@tauri-apps/plugin-fs": "^2.5.1",
-        "@tauri-apps/plugin-opener": "^2.5.4",
-        "@xyflow/react": "^12.10.2",
+        "@tauri-apps/api": "2.11.0",
+        "@tauri-apps/plugin-dialog": "2.7.1",
+        "@tauri-apps/plugin-fs": "2.5.1",
+        "@tauri-apps/plugin-opener": "2.5.4",
+        "@xyflow/react": "12.10.2",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
-        "fflate": "^0.8.3",
+        "fflate": "0.8.3",
         "gif.js": "0.2.0",
         "gif.js.optimized": "1.0.1",
         "lucide-react": "1.16.0",
@@ -66,7 +66,7 @@
         "@eslint/js": "10.0.1",
         "@playwright/test": "1.60.0",
         "@tanstack/eslint-plugin-query": "5.100.10",
-        "@tauri-apps/cli": "^2.11.2",
+        "@tauri-apps/cli": "2.11.2",
         "@types/node": "25.8.0",
         "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",
diff --git a/package.json b/package.json
index 2bc682b4..bb5e0258 100644
--- a/package.json
+++ b/package.json
@@ -63,14 +63,14 @@
     "@tanstack/react-query": "5.100.10",
     "@tanstack/react-query-persist-client": "5.100.10",
     "@tanstack/react-table": "8.21.3",
-    "@tauri-apps/api": "^2.11.0",
-    "@tauri-apps/plugin-dialog": "^2.7.1",
-    "@tauri-apps/plugin-fs": "^2.5.1",
-    "@tauri-apps/plugin-opener": "^2.5.4",
-    "@xyflow/react": "^12.10.2",
+    "@tauri-apps/api": "2.11.0",
+    "@tauri-apps/plugin-dialog": "2.7.1",
+    "@tauri-apps/plugin-fs": "2.5.1",
+    "@tauri-apps/plugin-opener": "2.5.4",
+    "@xyflow/react": "12.10.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "fflate": "^0.8.3",
+    "fflate": "0.8.3",
     "gif.js": "0.2.0",
     "gif.js.optimized": "1.0.1",
     "lucide-react": "1.16.0",
@@ -95,7 +95,7 @@
     "@eslint/js": "10.0.1",
     "@playwright/test": "1.60.0",
     "@tanstack/eslint-plugin-query": "5.100.10",
-    "@tauri-apps/cli": "^2.11.2",
+    "@tauri-apps/cli": "2.11.2",
     "@types/node": "25.8.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",