Added new shaders

2026-05-05 22:36:52 +10:00
parent 119e49aec1
commit ce5905373a
32 changed files with 882 additions and 78 deletions
--- a/apps/LoopThroughWithOpenGLCompositing/ControlServer.cpp
+++ b/apps/LoopThroughWithOpenGLCompositing/ControlServer.cpp
@@ -16,6 +16,8 @@

 namespace
 {
+constexpr DWORD kStateBroadcastIntervalMs = 250;
+
 bool InitializeWinsock(std::string& error)
 {
 	WSADATA wsaData = {};
@@ -165,9 +167,18 @@ void ControlServer::BroadcastState()

 void ControlServer::ServerLoop()
 {
+	DWORD lastStateBroadcastMs = GetTickCount();
 	while (mRunning)
 	{
 		TryAcceptClient();
+
+		const DWORD nowMs = GetTickCount();
+		if (nowMs - lastStateBroadcastMs >= kStateBroadcastIntervalMs)
+		{
+			BroadcastState();
+			lastStateBroadcastMs = nowMs;
+		}
+
 		Sleep(25);
 	}
 }
--- a/apps/LoopThroughWithOpenGLCompositing/RuntimeHost.cpp
+++ b/apps/LoopThroughWithOpenGLCompositing/RuntimeHost.cpp
@@ -1657,6 +1657,7 @@ JsonValue RuntimeHost::SerializeLayerStackLocked() const
 			parameter.set("id", JsonValue(definition.id));
 			parameter.set("label", JsonValue(definition.label));
 			parameter.set("type", JsonValue(ShaderParameterTypeToString(definition.type)));
+			parameter.set("defaultValue", SerializeParameterValue(definition, DefaultValueForDefinition(definition)));

 			if (!definition.minNumbers.empty())
 			{
--- a/shaders/balatro-swirl/shader.json
+++ b/shaders/balatro-swirl/shader.json
@@ -0,0 +1,114 @@
+{
+  "id": "balatro-swirl",
+  "name": "Balatro Swirl",
+  "description": "Animated painterly swirl background. Original by localthunk (https://www.playbalatro.com), adapted from https://www.shadertoy.com/view/XXtBRr.",
+  "category": "Generative",
+  "entryPoint": "shadeVideo",
+  "parameters": [
+    {
+      "id": "spinRotation",
+      "label": "Spin Rotation",
+      "type": "float",
+      "default": -2.0,
+      "min": -8.0,
+      "max": 8.0,
+      "step": 0.05
+    },
+    {
+      "id": "spinSpeed",
+      "label": "Spin Speed",
+      "type": "float",
+      "default": 7.0,
+      "min": 0.0,
+      "max": 20.0,
+      "step": 0.1
+    },
+    {
+      "id": "spinAmount",
+      "label": "Spin Amount",
+      "type": "float",
+      "default": 0.25,
+      "min": 0.0,
+      "max": 1.0,
+      "step": 0.01
+    },
+    {
+      "id": "spinEase",
+      "label": "Spin Ease",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.0,
+      "max": 3.0,
+      "step": 0.01
+    },
+    {
+      "id": "pixelFilter",
+      "label": "Pixel Filter",
+      "type": "float",
+      "default": 745.0,
+      "min": 120.0,
+      "max": 1600.0,
+      "step": 1.0
+    },
+    {
+      "id": "contrast",
+      "label": "Contrast",
+      "type": "float",
+      "default": 3.5,
+      "min": 0.5,
+      "max": 8.0,
+      "step": 0.05
+    },
+    {
+      "id": "lighting",
+      "label": "Lighting",
+      "type": "float",
+      "default": 0.4,
+      "min": 0.0,
+      "max": 1.5,
+      "step": 0.01
+    },
+    {
+      "id": "offset",
+      "label": "Offset",
+      "type": "vec2",
+      "default": [0.0, 0.0],
+      "min": [-1.0, -1.0],
+      "max": [1.0, 1.0],
+      "step": [0.001, 0.001]
+    },
+    {
+      "id": "colour1",
+      "label": "Colour 1",
+      "type": "color",
+      "default": [0.871, 0.267, 0.231, 1.0]
+    },
+    {
+      "id": "colour2",
+      "label": "Colour 2",
+      "type": "color",
+      "default": [0.0, 0.42, 0.706, 1.0]
+    },
+    {
+      "id": "colour3",
+      "label": "Colour 3",
+      "type": "color",
+      "default": [0.086, 0.137, 0.145, 1.0]
+    },
+    {
+      "id": "isRotate",
+      "label": "Rotate Field",
+      "type": "bool",
+      "default": false
+    },
+    {
+      "id": "sourceMix",
+      "label": "Source Mix",
+      "type": "float",
+      "default": 0.0,
+      "min": 0.0,
+      "max": 1.0,
+      "step": 0.01
+    }
+  ]
+}
--- a/shaders/balatro-swirl/shader.slang
+++ b/shaders/balatro-swirl/shader.slang
@@ -0,0 +1,49 @@
+float4 balatroSwirl(float2 screenSize, float2 screenCoords, float time)
+{
+	const float pi = 3.14159265359;
+	float safePixelFilter = max(pixelFilter, 1.0);
+	float safeScreenLength = max(length(screenSize), 1.0);
+	float pixelSize = safeScreenLength / safePixelFilter;
+	float2 uv = (floor(screenCoords * (1.0 / pixelSize)) * pixelSize - 0.5 * screenSize) / safeScreenLength - offset;
+	float uvLength = length(uv);
+
+	float speed = spinRotation * spinEase * 0.2;
+	if (isRotate)
+		speed = time * speed;
+	speed += 302.2;
+
+	float newPixelAngle = atan2(uv.y, uv.x) + speed - spinEase * 20.0 * (spinAmount * uvLength + (1.0 - spinAmount));
+	float2 mid = (screenSize / safeScreenLength) * 0.5;
+	uv = float2(uvLength * cos(newPixelAngle) + mid.x, uvLength * sin(newPixelAngle) + mid.y) - mid;
+
+	uv *= 30.0;
+	speed = time * spinSpeed;
+	float2 uv2 = float2(uv.x + uv.y, uv.x + uv.y);
+
+	for (int i = 0; i < 5; ++i)
+	{
+		uv2 += float2(sin(max(uv.x, uv.y)), sin(max(uv.x, uv.y))) + uv;
+		uv += 0.5 * float2(cos(5.1123314 + 0.353 * uv2.y + speed * 0.131121), sin(uv2.x - 0.113 * speed));
+		float warp = cos(uv.x + uv.y) - sin(uv.x * 0.711 - uv.y);
+		uv -= float2(warp, warp);
+	}
+
+	float contrastMod = 0.25 * contrast + 0.5 * spinAmount + 1.2;
+	float paintRes = min(2.0, max(0.0, length(uv) * 0.035 * contrastMod));
+	float c1p = max(0.0, 1.0 - contrastMod * abs(1.0 - paintRes));
+	float c2p = max(0.0, 1.0 - contrastMod * abs(paintRes));
+	float c3p = 1.0 - min(1.0, c1p + c2p);
+	float light = (lighting - 0.2) * max(c1p * 5.0 - 4.0, 0.0) + lighting * max(c2p * 5.0 - 4.0, 0.0);
+
+	float safeContrast = max(contrast, 0.001);
+	float4 base = (0.3 / safeContrast) * colour1;
+	float4 paint = colour1 * c1p + colour2 * c2p + float4(c3p * colour3.rgb, c3p * colour1.a);
+	return base + (1.0 - 0.3 / safeContrast) * paint + float4(light, light, light, light);
+}
+
+float4 shadeVideo(ShaderContext context)
+{
+	float2 screenSize = max(context.outputResolution, float2(1.0, 1.0));
+	float4 swirl = balatroSwirl(screenSize, context.uv * screenSize, context.time);
+	return saturate(lerp(swirl, context.sourceColor, sourceMix));
+}
--- a/shaders/black-and-white/shader.json
+++ b/shaders/black-and-white/shader.json
@@ -2,7 +2,7 @@
  "id": "black-and-white",
  "name": "Black and White",
  "description": "A minimal monochrome shader that converts the decoded video input to grayscale.",
-  "category": "Built-in",
+  "category": "Color",
  "entryPoint": "shadeVideo",
  "parameters": []
 }
--- a/shaders/composition-guides/shader.json
+++ b/shaders/composition-guides/shader.json
@@ -2,7 +2,7 @@
  "id": "composition-guides",
  "name": "Composition Guides",
  "description": "Overlays rule-of-thirds guides and a center crosshair for camera alignment and framing.",
-  "category": "Utility",
+  "category": "Scopes & Guides",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/dvd-bounce/shader.json
+++ b/shaders/dvd-bounce/shader.json
@@ -2,7 +2,7 @@
  "id": "dvd-bounce",
  "name": "DVD Bounce",
  "description": "A transparent bouncing DVD logo sprite that changes color on each screen hit.",
-  "category": "Built-in",
+  "category": "Generative",
  "entryPoint": "shadeVideo",
  "textures": [
    {
--- a/shaders/ether/shader.json
+++ b/shaders/ether/shader.json
@@ -0,0 +1,84 @@
+{
+  "id": "ether",
+  "name": "Ether",
+  "description": "Raymarched ether field. Original by nimitz 2014 (twitter: @stormoid), adapted from https://www.shadertoy.com/view/MsjSW3.",
+  "category": "Generative",
+  "entryPoint": "shadeVideo",
+  "parameters": [
+    {
+      "id": "speed",
+      "label": "Speed",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.0,
+      "max": 4.0,
+      "step": 0.01
+    },
+    {
+      "id": "depth",
+      "label": "Depth",
+      "type": "float",
+      "default": 2.5,
+      "min": 0.2,
+      "max": 8.0,
+      "step": 0.01
+    },
+    {
+      "id": "density",
+      "label": "Density",
+      "type": "float",
+      "default": 0.7,
+      "min": 0.0,
+      "max": 2.0,
+      "step": 0.01
+    },
+    {
+      "id": "brightness",
+      "label": "Brightness",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.0,
+      "max": 3.0,
+      "step": 0.01
+    },
+    {
+      "id": "contrast",
+      "label": "Contrast",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.25,
+      "max": 3.0,
+      "step": 0.01
+    },
+    {
+      "id": "offset",
+      "label": "Offset",
+      "type": "vec2",
+      "default": [0.9, 0.5],
+      "min": [0.0, 0.0],
+      "max": [2.0, 2.0],
+      "step": [0.001, 0.001]
+    },
+    {
+      "id": "baseColor",
+      "label": "Base Color",
+      "type": "color",
+      "default": [0.1, 0.3, 0.4, 1.0]
+    },
+    {
+      "id": "energyColor",
+      "label": "Energy Color",
+      "type": "color",
+      "default": [1.0, 0.5, 0.6, 1.0]
+    },
+    {
+      "id": "sourceMix",
+      "label": "Source Mix",
+      "type": "float",
+      "default": 0.0,
+      "min": 0.0,
+      "max": 1.0,
+      "step": 0.01
+    }
+  ]
+}
--- a/shaders/ether/shader.slang
+++ b/shaders/ether/shader.slang
@@ -0,0 +1,40 @@
+float2x2 rotation2(float angle)
+{
+	float c = cos(angle);
+	float s = sin(angle);
+	return float2x2(c, -s, s, c);
+}
+
+float etherMap(float3 p, float time)
+{
+	p.xz = mul(rotation2(time * 0.4), p.xz);
+	p.xy = mul(rotation2(time * 0.3), p.xy);
+
+	float3 q = p * 2.0 + time;
+	float wave = sin(q.x + sin(q.z + sin(q.y))) * 0.5;
+	return length(p + float3(sin(time * 0.7), sin(time * 0.7), sin(time * 0.7))) * log(length(p) + 1.0) + wave - 1.0;
+}
+
+float4 shadeVideo(ShaderContext context)
+{
+	float2 resolution = max(context.outputResolution, float2(1.0, 1.0));
+	float2 fragCoord = context.uv * resolution;
+	float2 p = fragCoord / resolution.y - offset;
+	float time = context.time * speed;
+
+	float3 color = float3(0.0, 0.0, 0.0);
+	float d = depth;
+
+	for (int i = 0; i <= 5; ++i)
+	{
+		float3 rayPosition = float3(0.0, 0.0, 5.0) + normalize(float3(p, -1.0)) * d;
+		float rz = etherMap(rayPosition, time);
+		float f = clamp((rz - etherMap(rayPosition + float3(0.1, 0.1, 0.1), time)) * 0.5, -0.1, 1.0);
+		float3 light = baseColor.rgb + energyColor.rgb * 5.0 * f;
+		color = color * light + smoothstep(2.5, 0.0, rz) * density * light;
+		d += min(rz, 1.0);
+	}
+
+	color = pow(max(color * brightness, float3(0.0, 0.0, 0.0)), float3(1.0 / max(contrast, 0.001)));
+	return saturate(lerp(float4(color, 1.0), context.sourceColor, sourceMix));
+}
--- a/shaders/false-color/shader.json
+++ b/shaders/false-color/shader.json
@@ -2,7 +2,7 @@
  "id": "false-color",
  "name": "False Color",
  "description": "Maps luminance ranges to exposure-assist colors for camera and shader debugging.",
-  "category": "Utility",
+  "category": "Color",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/gaussian-blur/shader.json
+++ b/shaders/gaussian-blur/shader.json
@@ -2,7 +2,7 @@
  "id": "gaussian-blur",
  "name": "Gaussian Blur",
  "description": "Applies a simple Gaussian-style blur to the decoded video input.",
-  "category": "Built-in",
+  "category": "Transform",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/greenscreen-key/shader.json
+++ b/shaders/greenscreen-key/shader.json
@@ -2,7 +2,7 @@
  "id": "greenscreen-key",
  "name": "Greenscreen Key",
  "description": "Keys out a green screen background and outputs transparent alpha for compositing.",
-  "category": "Built-in",
+  "category": "Keying",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/lift-gamma-gain/shader.json
+++ b/shaders/lift-gamma-gain/shader.json
@@ -0,0 +1,42 @@
+{
+  "id": "lift-gamma-gain",
+  "name": "Lift Gamma Gain",
+  "description": "Basic color grading controls for shadows, midtones, highlights, and overall RGB offset.",
+  "category": "Color",
+  "entryPoint": "shadeVideo",
+  "parameters": [
+    {
+      "id": "lift",
+      "label": "Lift",
+      "type": "color",
+      "default": [0.5, 0.5, 0.5, 1.0]
+    },
+    {
+      "id": "gamma",
+      "label": "Gamma",
+      "type": "color",
+      "default": [0.5, 0.5, 0.5, 1.0]
+    },
+    {
+      "id": "gain",
+      "label": "Gain",
+      "type": "color",
+      "default": [0.5, 0.5, 0.5, 1.0]
+    },
+    {
+      "id": "offset",
+      "label": "Offset",
+      "type": "color",
+      "default": [0.5, 0.5, 0.5, 1.0]
+    },
+    {
+      "id": "strength",
+      "label": "Strength",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.0,
+      "max": 1.0,
+      "step": 0.01
+    }
+  ]
+}
--- a/shaders/lift-gamma-gain/shader.slang
+++ b/shaders/lift-gamma-gain/shader.slang
@@ -0,0 +1,20 @@
+float3 applyLiftGammaGainOffset(float3 color)
+{
+	float3 liftAdjust = (lift.rgb - 0.5) * 0.5;
+	float3 offsetAdjust = (offset.rgb - 0.5) * 0.5;
+	float3 gammaAdjust = exp2((gamma.rgb - 0.5) * 2.0);
+	float3 gainAdjust = exp2((gain.rgb - 0.5) * 2.0);
+
+	float3 lifted = color + liftAdjust;
+	float3 gained = lifted * gainAdjust;
+	float3 corrected = pow(saturate(gained), 1.0 / max(gammaAdjust, float3(0.001)));
+	return corrected + offsetAdjust;
+}
+
+float4 shadeVideo(ShaderContext context)
+{
+	float4 source = context.sourceColor;
+	float3 graded = applyLiftGammaGainOffset(source.rgb);
+	source.rgb = lerp(source.rgb, graded, strength);
+	return saturate(source);
+}
--- a/shaders/pixelate/shader.json
+++ b/shaders/pixelate/shader.json
@@ -2,7 +2,7 @@
  "id": "pixelate",
  "name": "Pixelate",
  "description": "Reduces the effective X and Y pixel count independently to create a low-resolution blocky image.",
-  "category": "Utility",
+  "category": "Transform",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/safe-area-guides/shader.json
+++ b/shaders/safe-area-guides/shader.json
@@ -2,7 +2,7 @@
  "id": "safe-area-guides",
  "name": "Safe Area Guides",
  "description": "Overlays broadcast action/title safe guides plus optional center marks and aspect matte.",
-  "category": "Utility",
+  "category": "Scopes & Guides",
  "entryPoint": "shadeVideo",
  "parameters": [
    { "id": "showActionSafe", "label": "Action Safe", "type": "bool", "default": true },
--- a/shaders/singularity/shader.json
+++ b/shaders/singularity/shader.json
@@ -0,0 +1,90 @@
+{
+  "id": "singularity",
+  "name": "Singularity",
+  "description": "Whirling blackhole and accretion disk. Original by XorDev, adapted from https://www.shadertoy.com/view/3csSWB.",
+  "category": "Generative",
+  "entryPoint": "shadeVideo",
+  "parameters": [
+    {
+      "id": "speed",
+      "label": "Speed",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.0,
+      "max": 4.0,
+      "step": 0.01
+    },
+    {
+      "id": "scale",
+      "label": "Scale",
+      "type": "float",
+      "default": 0.7,
+      "min": 0.25,
+      "max": 1.5,
+      "step": 0.01
+    },
+    {
+      "id": "strength",
+      "label": "Gravity",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.1,
+      "max": 3.0,
+      "step": 0.01
+    },
+    {
+      "id": "ringRadius",
+      "label": "Ring Radius",
+      "type": "float",
+      "default": 0.7,
+      "min": 0.2,
+      "max": 1.4,
+      "step": 0.01
+    },
+    {
+      "id": "tightness",
+      "label": "Tightness",
+      "type": "float",
+      "default": 1.35,
+      "min": 0.5,
+      "max": 3.0,
+      "step": 0.01
+    },
+    {
+      "id": "brightness",
+      "label": "Brightness",
+      "type": "float",
+      "default": 1.0,
+      "min": 0.1,
+      "max": 4.0,
+      "step": 0.01
+    },
+    {
+      "id": "colorShift",
+      "label": "Color Shift",
+      "type": "float",
+      "default": 1.0,
+      "min": -2.0,
+      "max": 2.0,
+      "step": 0.01
+    },
+    {
+      "id": "center",
+      "label": "Center",
+      "type": "vec2",
+      "default": [0.0, 0.0],
+      "min": [-1.0, -1.0],
+      "max": [1.0, 1.0],
+      "step": [0.001, 0.001]
+    },
+    {
+      "id": "sourceMix",
+      "label": "Source Mix",
+      "type": "float",
+      "default": 0.0,
+      "min": 0.0,
+      "max": 1.0,
+      "step": 0.01
+    }
+  ]
+}
--- a/shaders/singularity/shader.slang
+++ b/shaders/singularity/shader.slang
@@ -0,0 +1,48 @@
+float2 singularitySpiral(float2 c, float time, float iterator)
+{
+	float radiusSq = max(dot(c, c), 0.0001);
+	float angle = 0.5 * log(radiusSq) + time * iterator;
+	return float2(
+		c.x * cos(angle + 0.0) + c.y * cos(angle + 11.0),
+		c.x * cos(angle + 33.0) + c.y * cos(angle + 0.0)) / max(iterator, 0.001);
+}
+
+float4 shadeVideo(ShaderContext context)
+{
+	float2 resolution = max(context.outputResolution, float2(1.0, 1.0));
+	float2 fragCoord = context.uv * resolution;
+	float safeScale = max(scale, 0.001);
+	float safeRingRadius = max(ringRadius, 0.001);
+	float safeTightness = max(tightness, 0.001);
+	float time = context.time * speed;
+
+	float2 p = (fragCoord + fragCoord - resolution) / resolution.y / safeScale;
+	p -= center;
+
+	float iterator = 0.2;
+	float2 diagonal = float2(-1.0, 1.0);
+	float2 blackholeCenter = p - iterator * diagonal;
+	float gravity = iterator * strength / max(dot(blackholeCenter, blackholeCenter), 0.0001);
+	float2 skew = diagonal / (0.1 + gravity);
+
+	float2 c = float2(p.x + p.y, p.x * skew.x + p.y * skew.y);
+	float2 v = singularitySpiral(c, time, iterator);
+	float2 waves = float2(0.0001, 0.0001);
+
+	for (; iterator < 9.0; iterator += 1.0)
+	{
+		waves += 1.0 + sin(v);
+		v += 0.7 * sin(v.yx * iterator + time) / iterator + 0.5;
+	}
+
+	float diskRadius = length(sin(v / 0.3) * 0.4 + c * float2(2.0, 4.0));
+	float disk = 2.0 + diskRadius * diskRadius * (0.25 * safeTightness) - diskRadius;
+	float centerDarkness = 0.5 + 1.0 / max(dot(c, c), 0.0001);
+	float rim = 0.025 + abs(length(p) - safeRingRadius) * safeTightness;
+	float4 redBlueGradient = exp(c.x * float4(0.6, -0.4, -1.0, 0.0) * colorShift);
+	float4 waveColor = waves.xyyx;
+
+	float4 color = 1.0 - exp(-redBlueGradient / max(waveColor, float4(0.0001, 0.0001, 0.0001, 0.0001)) / disk / centerDarkness / rim * brightness);
+	color.a = 1.0;
+	return saturate(lerp(color, context.sourceColor, sourceMix));
+}
--- a/shaders/studio-color/shader.json
+++ b/shaders/studio-color/shader.json
@@ -2,7 +2,7 @@
  "id": "studio-color",
  "name": "Studio Color",
  "description": "A built-in sample shader package that demonstrates the runtime parameter contract.",
-  "category": "Built-in",
+  "category": "Color",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/temporal-ghost-trail/shader.json
+++ b/shaders/temporal-ghost-trail/shader.json
@@ -2,7 +2,7 @@
  "id": "temporal-ghost-trail",
  "name": "Temporal Ghost Trail",
  "description": "Blends older pre-layer input frames into the current layer input for a soft temporal trail.",
-  "category": "Built-in",
+  "category": "Temporal",
  "entryPoint": "shadeVideo",
  "temporal": {
    "enabled": true,
--- a/shaders/temporal-low-fps/shader.json
+++ b/shaders/temporal-low-fps/shader.json
@@ -2,7 +2,7 @@
  "id": "temporal-low-fps",
  "name": "Temporal Low FPS",
  "description": "Holds older source frames to create a deliberate choppy playback look.",
-  "category": "Built-in",
+  "category": "Temporal",
  "entryPoint": "shadeVideo",
  "temporal": {
    "enabled": true,
--- a/shaders/vhs/shader.json
+++ b/shaders/vhs/shader.json
@@ -1,8 +1,8 @@
 {
  "id": "vhs",
  "name": "VHS",
-  "description": "VHS with wiggle, smear, and YIQ-style color separation inspired by the Godot shader reference.",
-  "category": "Built-in",
+  "description": "VHS with wiggle, smear, and YIQ-style color separation inspired by nostalgic analog references.",
+  "category": "Glitch",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
@@ -95,6 +95,24 @@
      "max": 0.2,
      "step": 0.005
    },
+    {
+      "id": "staticAmount",
+      "label": "Analog Static",
+      "type": "float",
+      "default": 0.045,
+      "min": 0.0,
+      "max": 0.25,
+      "step": 0.005
+    },
+    {
+      "id": "staticLines",
+      "label": "Static Lines",
+      "type": "float",
+      "default": 0.65,
+      "min": 0.0,
+      "max": 1.5,
+      "step": 0.01
+    },
    {
      "id": "noiseSize",
      "label": "Noise Size",
--- a/shaders/vhs/shader.slang
+++ b/shaders/vhs/shader.slang
@@ -44,6 +44,13 @@ float noiseHash(float2 p)
 	return frac(sin(dot(p, float2(127.1, 311.7))) * 43758.5453123);
 }

+// Gold Noise (c)2015 dcerisano@standard3d.com, adapted for Slang.
+float goldNoise(float2 xy, float seed)
+{
+	const float phi = 1.61803398874989484820459;
+	return frac(tan(distance(xy * phi, xy) * seed) * xy.x);
+}
+
 float grainScalar(float2 uv)
 {
 	return frac(sin(dot(uv, float2(12.9898, 78.233))) * 43758.5453);
@@ -63,6 +70,56 @@ float3 animatedChromaGrain(float2 uv, float time, float2 outputResolution, float
 	return float3(r, g, b) * 2.0 - 1.0;
 }

+float valueNoise2(float2 p)
+{
+	float2 cell = floor(p);
+	float2 f = frac(p);
+	float2 u = f * f * (3.0 - 2.0 * f);
+
+	float a = noiseHash(cell);
+	float b = noiseHash(cell + float2(1.0, 0.0));
+	float c = noiseHash(cell + float2(0.0, 1.0));
+	float d = noiseHash(cell + float2(1.0, 1.0));
+
+	return lerp(lerp(a, b, u.x), lerp(c, d, u.x), u.y);
+}
+
+float tapeLineNoise(float2 uv, float time, float2 outputResolution)
+{
+	float y = floor(uv.y * outputResolution.y);
+	float slowLine = valueNoise2(float2(y * 0.021, floor(time * 10.0)));
+	float fastLine = noiseHash(float2(y * 1.73, floor(time * 59.94)));
+	float line = (slowLine * 0.7 + fastLine * 0.3) * 2.0 - 1.0;
+
+	float band = sin(uv.y * outputResolution.y * 0.42 + time * 36.0);
+	return line * (0.65 + 0.35 * band);
+}
+
+float3 analogStatic(float2 uv, float time, float2 outputResolution)
+{
+	float2 safeResolution = max(outputResolution, float2(1.0, 1.0));
+	float2 pixel = floor(uv * safeResolution / max(noiseSize, 0.25));
+	float frame = floor(time * 59.94);
+	float seed = frac(time);
+
+	float2 goldPixel = pixel + float2(0.37, 0.61) + frame;
+	float snowA = goldNoise(goldPixel, seed + 0.1);
+	float snowB = goldNoise(goldPixel * float2(0.37, 2.11) + float2(19.0, 41.0), seed + 0.2);
+	float snowC = goldNoise(goldPixel * float2(1.73, 0.81) + float2(53.0, 7.0), seed + 0.3);
+	float snow = (snowA * 0.72 + snowB * 0.28) * 2.0 - 1.0;
+
+	float lineNoise = tapeLineNoise(uv, time, safeResolution);
+	float dropoutSeed = goldNoise(float2(floor(uv.y * safeResolution.y * 0.25) + 1.0, frame + 2.0), seed + 0.4);
+	float dropout = smoothstep(0.965, 1.0, dropoutSeed);
+	float fleck = smoothstep(0.988, 1.0, snowA) - smoothstep(0.0, 0.012, snowC);
+
+	float scan = sin(uv.y * safeResolution.y * 3.14159265);
+	float scanMask = 0.55 + 0.45 * scan * scan;
+	float lumaNoise = snow * 0.55 + lineNoise * staticLines * 0.45 + fleck * 0.7 + dropout * lineNoise * 1.2;
+
+	return float3(lumaNoise * scanMask, lumaNoise * 0.42, lumaNoise * 0.72);
+}
+
 float3 softBloom(float2 uv, float2 outputResolution, float radius)
 {
 	float2 pixel = 1.0 / max(outputResolution, float2(1.0, 1.0));
@@ -164,6 +221,11 @@ float4 shadeVideo(ShaderContext context)
 	color.rg = lerp(color.rg, float2(color.r, color.g) + speckle.xy * noiseAmount * 0.2 * chunkiness, 0.35);
 	color.b = lerp(color.b, color.b + speckle.z * noiseAmount * 0.28 * chunkiness, 0.5);

+	float3 staticNoise = analogStatic(context.uv, context.time, context.outputResolution);
+	float staticMask = lerp(0.45, 1.15, 1.0 - saturate(luma));
+	color += staticNoise * staticAmount * staticMask;
+	color = lerp(color, color + float3(staticNoise.r * 0.22, staticNoise.g * 0.08, -staticNoise.b * 0.08), saturate(staticAmount * 2.0));
+
 	float3 grayscale = float3(luma, luma, luma);
 	color = lerp(color, grayscale, fadeAmount * 0.18);
 	color = color * (1.0 - fadeAmount * 0.08) + float3(0.055, 0.055, 0.065) * fadeAmount;
--- a/shaders/video-cube/shader.json
+++ b/shaders/video-cube/shader.json
@@ -2,7 +2,7 @@
  "id": "video-cube",
  "name": "Video Cube",
  "description": "Maps the live video onto the faces of a rotating cube in screen space.",
-  "category": "Built-in",
+  "category": "Transform",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/video-transform/shader.json
+++ b/shaders/video-transform/shader.json
@@ -2,7 +2,7 @@
  "id": "video-transform",
  "name": "Video Transform",
  "description": "Zooms, pans, and rotates the video by remapping output pixels back into source UV space.",
-  "category": "Utility",
+  "category": "Transform",
  "entryPoint": "shadeVideo",
  "parameters": [
    {
--- a/shaders/waveform-overlay/shader.json
+++ b/shaders/waveform-overlay/shader.json
@@ -2,7 +2,7 @@
  "id": "waveform-overlay",
  "name": "Waveform Overlay",
  "description": "Draws a lightweight luma waveform overlay along the bottom of the video.",
-  "category": "Utility",
+  "category": "Scopes & Guides",
  "entryPoint": "shadeVideo",
  "textures": [
    {
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,6 +8,8 @@
      "name": "video-shader-control-ui",
      "version": "0.1.0",
      "dependencies": {
+        "@uiw/color-convert": "^2.10.1",
+        "@uiw/react-color-wheel": "^2.10.1",
        "lucide-react": "^0.511.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
@@ -251,6 +253,16 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.28.6",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1188,6 +1200,50 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@uiw/color-convert": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@uiw/color-convert/-/color-convert-2.10.1.tgz",
+      "integrity": "sha512-/Z3YfBiX+SErRM59yQH88Id+Xy/k10nnkfTuqhX6RB2yYUcG57DoFqb6FudhiQ5fwzKvKf1k4xq9lfT1UTFUKQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.19.0"
+      }
+    },
+    "node_modules/@uiw/react-color-wheel": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@uiw/react-color-wheel/-/react-color-wheel-2.10.1.tgz",
+      "integrity": "sha512-LnO7CAsfSDfOSUFUeedNycVtx+ODpkGgcgxAT4QindU2BplTcl3mxQJxC1SIszq9zFdGK+1nXhG8N8ZmgvmVYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@uiw/color-convert": "2.10.1",
+        "@uiw/react-drag-event-interactive": "2.10.1"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.19.0",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@uiw/react-drag-event-interactive": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-2.10.1.tgz",
+      "integrity": "sha512-eArtX/XdSrg5aQs8CV0vne9vChybw2GkNZCP9H68zjBBzucuYgjURqKBJ/+3jid06YpRZ5zz/YTnAlySqOt0Ag==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.19.0",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,6 +9,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@uiw/color-convert": "^2.10.1",
+    "@uiw/react-color-wheel": "^2.10.1",
    "lucide-react": "^0.511.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
--- a/ui/src/components/LayerCard.jsx
+++ b/ui/src/components/LayerCard.jsx
@@ -2,7 +2,6 @@ import { GripVertical, Trash2 } from "lucide-react";

 import { postJson } from "../api/controlApi";
 import { ParameterField } from "./ParameterField";
-import { ShaderPicker } from "./ShaderPicker";

 export function LayerCard({
  layer,
@@ -19,6 +18,8 @@ export function LayerCard({
  onRemove,
  onLayerParameterChange,
 }) {
+  const selectedShader = shaders.find((shader) => shader.id === layer.shaderId);
+
  return (
    <div
      className={`layer-card${expanded ? " layer-card--expanded" : ""}${isDragging ? " layer-card--dragging" : ""}${isDropTarget ? " layer-card--drop-target" : ""}`}
@@ -90,20 +91,6 @@ export function LayerCard({

      {expanded ? (
        <div className="layer-card__body">
-          <div className="layer-card__field">
-            <ShaderPicker
-              id={`shader-${layer.id}`}
-              shaders={shaders}
-              value={layer.shaderId}
-              onChange={(shaderId) =>
-                postJson("/api/layers/set-shader", {
-                  layerId: layer.id,
-                  shaderId,
-                })
-              }
-            />
-          </div>
-
          {layer.temporal?.enabled ? (
            <div className="layer-card__field">
              <label>Temporal</label>
@@ -118,6 +105,13 @@ export function LayerCard({
            </div>
          )}

+          {selectedShader?.description ? (
+            <div className="shader-description">
+              <div className="shader-description__meta">{selectedShader.category || "Shader"}</div>
+              <p>{selectedShader.description}</p>
+            </div>
+          ) : null}
+
          <div className="layer-card__subheader">
            <h3>Parameters</h3>
            <button
--- a/ui/src/components/ParameterField.jsx
+++ b/ui/src/components/ParameterField.jsx
@@ -1,9 +1,15 @@
-import { Copy } from "lucide-react";
+import Wheel from "@uiw/react-color-wheel";
+import { hsvaToRgba, rgbaToHsva } from "@uiw/color-convert";
+import { Copy, RotateCcw } from "lucide-react";

 import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
 import { ParameterValueDisplay } from "./ParameterValueDisplay";

-function ParameterHeader({ layer, parameter }) {
+function valuesMatch(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
  const layerKey = layer.shaderId || layer.shaderName || layer.id;
  const oscRoute = `/VideoShaderToys/${layerKey}/${parameter.id}`;

@@ -26,6 +32,16 @@ function ParameterHeader({ layer, parameter }) {
        <span>{oscRoute}</span>
        <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
      </button>
+      <button
+        type="button"
+        className="parameter__reset"
+        title={`Reset ${parameter.label}`}
+        aria-label={`Reset ${parameter.label}`}
+        disabled={resetDisabled}
+        onClick={onReset}
+      >
+        <RotateCcw size={13} strokeWidth={1.9} aria-hidden="true" />
+      </button>
    </div>
  );
 }
@@ -48,13 +64,26 @@ function colorValueToHex(value) {
  return `#${colorComponentToHex(values[0])}${colorComponentToHex(values[1])}${colorComponentToHex(values[2])}`;
 }

-function hexToColorValue(hex, alpha) {
-  const sanitized = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex.slice(1) : "000000";
+function colorValueToHsva(value) {
+  const values = [...(value ?? [])];
+  while (values.length < 4) {
+    values.push(values.length === 3 ? 1 : 0);
+  }
+  return rgbaToHsva({
+    r: Math.round(clamp01(values[0]) * 255),
+    g: Math.round(clamp01(values[1]) * 255),
+    b: Math.round(clamp01(values[2]) * 255),
+    a: clamp01(values[3]),
+  });
+}
+
+function hsvaToColorValue(hsva, alpha) {
+  const rgba = hsvaToRgba({ ...hsva, a: clamp01(alpha ?? hsva.a ?? 1) });
  return [
-    parseInt(sanitized.slice(0, 2), 16) / 255,
-    parseInt(sanitized.slice(2, 4), 16) / 255,
-    parseInt(sanitized.slice(4, 6), 16) / 255,
-    clamp01(alpha ?? 1),
+    clamp01(rgba.r / 255),
+    clamp01(rgba.g / 255),
+    clamp01(rgba.b / 255),
+    clamp01(alpha ?? rgba.a ?? 1),
  ];
 }

@@ -69,7 +98,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    sendValue,
  } = useThrottledParameterValue(parameter, onParameterChange);

-  const header = <ParameterHeader layer={layer} parameter={parameter} />;
+  const defaultValue = parameter.defaultValue;
+  const resetDisabled = defaultValue === undefined || valuesMatch(draftValue, defaultValue);
+  const resetParameter = () => {
+    if (defaultValue !== undefined) {
+      sendValue(defaultValue);
+    }
+  };
+  const header = (
+    <ParameterHeader
+      layer={layer}
+      parameter={parameter}
+      resetDisabled={resetDisabled}
+      onReset={resetParameter}
+    />
+  );

  if (parameter.type === "float") {
    return (
@@ -151,14 +194,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <div className="parameter__color-row">
-          <input
-            type="color"
-            value={colorValueToHex(values)}
-            onFocus={beginInteraction}
-            onChange={(event) => sendValue(hexToColorValue(event.target.value, values[3]))}
+        <div className="parameter__wheel-row">
+          <div
+            className="parameter__wheel"
+            onPointerDown={beginInteraction}
+            onPointerUp={endInteraction}
+            onPointerCancel={endInteraction}
            onBlur={endInteraction}
+          >
+            <Wheel
+              color={colorValueToHsva(values)}
+              width={132}
+              height={132}
+              onChange={(color) => scheduleSendValue(hsvaToColorValue(color.hsva, values[3]))}
            />
+          </div>
          <label className="parameter__alpha">
            <span>Alpha</span>
            <input
@@ -176,6 +226,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
              onBlur={endInteraction}
            />
          </label>
+          <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
        </div>
        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
      </section>
--- a/ui/src/components/ShaderPicker.jsx
+++ b/ui/src/components/ShaderPicker.jsx
@@ -12,6 +12,26 @@ function matchesShader(shader, query) {
    .some((value) => value.toLowerCase().includes(normalizedQuery));
 }

+function shaderSummary(shader) {
+  if (!shader) {
+    return "Search available shaders";
+  }
+
+  return shader.description || "No description";
+}
+
+function ShaderOptionContent({ shader }) {
+  return (
+    <>
+      <span className="shader-picker__option-head">
+        <span className="shader-picker__name">{shader.name}</span>
+        {shader.category ? <span className="shader-picker__category">{shader.category}</span> : null}
+      </span>
+      <span className="shader-picker__meta">{shaderSummary(shader)}</span>
+    </>
+  );
+}
+
 export function ShaderPicker({ id, label = "Shader", shaders, value, onChange }) {
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
@@ -38,12 +58,13 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
        onClick={() => setOpen((current) => !current)}
      >
        <span>
+          <span className="shader-picker__option-head">
            <span className="shader-picker__name">{selectedShader?.name ?? "Choose shader"}</span>
-          <span className="shader-picker__meta">
-            {selectedShader
-              ? `${selectedShader.category ? `${selectedShader.category} / ` : ""}${selectedShader.id}`
-              : "Search available shaders"}
+            {selectedShader?.category ? (
+              <span className="shader-picker__category">{selectedShader.category}</span>
+            ) : null}
          </span>
+          <span className="shader-picker__meta">{shaderSummary(selectedShader)}</span>
        </span>
        <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" />
      </button>
@@ -76,11 +97,7 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
                    setQuery("");
                  }}
                >
-                  <span className="shader-picker__name">{shader.name}</span>
-                  <span className="shader-picker__meta">
-                    {shader.category ? `${shader.category} / ` : ""}
-                    {shader.id}
-                  </span>
+                  <ShaderOptionContent shader={shader} />
                </button>
              ))
            ) : (
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -591,7 +591,8 @@ pre {
 }

 .layer-card__drag-handle:hover:not(:disabled),
-.parameter__osc:hover:not(:disabled) {
+.parameter__osc:hover:not(:disabled),
+.parameter__reset:hover:not(:disabled) {
  background: transparent;
  color: var(--app-text);
 }
@@ -604,6 +605,28 @@ pre {
  gap: 0.75rem;
 }

+.shader-description {
+  padding: 0.75rem;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius);
+  background: rgba(255, 255, 255, 0.025);
+  user-select: text;
+}
+
+.shader-description__meta {
+  margin-bottom: 0.25rem;
+  color: var(--app-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.shader-description p {
+  margin: 0;
+  color: var(--app-text);
+  overflow-wrap: anywhere;
+}
+
 .shader-picker__topline {
  display: flex;
  align-items: baseline;
@@ -617,7 +640,8 @@ pre {
 .shader-picker__empty,
 .parameter__value,
 .parameter__alpha,
-.parameter__osc {
+.parameter__osc,
+.parameter__reset {
  color: var(--app-muted);
  font-size: 0.78rem;
 }
@@ -634,7 +658,8 @@ pre {
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
-  min-height: 54px;
+  min-height: 50px;
+  padding: 0.55rem 0.7rem;
  text-align: left;
  background: #182232;
  border-color: var(--app-border);
@@ -642,7 +667,7 @@ pre {

 .shader-picker__trigger > span {
  display: grid;
-  gap: 0.125rem;
+  gap: 0.2rem;
  min-width: 0;
 }

@@ -654,8 +679,8 @@ pre {

 .shader-picker__popover {
  display: grid;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: 0.45rem;
+  padding: 0.45rem;
  border: 1px solid var(--app-border);
  background: #121821;
 }
@@ -674,27 +699,28 @@ pre {

 .shader-picker__search input {
  padding-left: 2.125rem;
+  min-height: 34px;
 }

 .shader-picker__list {
  display: grid;
-  gap: 0.375rem;
-  max-height: 220px;
+  gap: 0.45rem;
+  max-height: 250px;
  overflow-y: auto;
-  padding: 0.375rem;
+  padding: 0.5rem;
  border: 1px solid var(--app-border);
  background: #10151d;
 }

 .shader-picker__option {
  display: grid;
-  gap: 0.125rem;
-  min-height: 58px;
-  padding: 0.5rem 0.625rem;
+  gap: 0.25rem;
+  min-height: 4.25rem;
+  padding: 0.65rem 0.75rem;
  text-align: left;
  background: #182232;
  border-color: var(--app-border);
-  align-content: center;
+  align-content: start;
  line-height: 1.25;
 }

@@ -707,14 +733,58 @@ pre {
 .shader-picker__name,
 .shader-picker__meta {
  min-width: 0;
-  overflow: hidden;
  overflow-wrap: anywhere;
 }

+.shader-picker__option-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .shader-picker__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
  font-weight: 700;
 }

+.shader-picker__category {
+  flex: 0 0 auto;
+  max-width: 8rem;
+  overflow: hidden;
+  margin-top: 0.05rem;
+  padding: 0.14rem 0.42rem;
+  border: 1px solid rgba(26, 156, 219, 0.35);
+  border-radius: var(--app-radius-sm);
+  background: rgba(26, 156, 219, 0.12);
+  color: #b9def1;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.shader-picker__meta {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.3;
+  min-height: 2.05em;
+}
+
+.shader-picker__trigger .shader-picker__meta {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  min-height: 0;
+}
+
 .shader-picker__empty {
  padding: 0.625rem;
 }
@@ -732,12 +802,13 @@ pre {

 .parameter__header {
  display: grid;
-  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
+  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
 }

-.parameter__osc {
+.parameter__osc,
+.parameter__reset {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
@@ -751,6 +822,13 @@ pre {
  font-weight: 500;
 }

+.parameter__reset {
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  color: var(--app-muted);
+}
+
 .parameter__osc span {
  min-width: 0;
  overflow: hidden;
@@ -758,7 +836,8 @@ pre {
  white-space: nowrap;
 }

-.parameter__osc svg {
+.parameter__osc svg,
+.parameter__reset svg {
  flex: 0 0 auto;
 }

@@ -777,11 +856,29 @@ pre {
  min-width: 7.5rem;
 }

-.parameter__color-row {
+.parameter__wheel-row {
  display: grid;
-  grid-template-columns: minmax(5.75rem, 0.42fr) minmax(7.5rem, 0.58fr);
+  grid-template-columns: auto minmax(5.25rem, 1fr);
  gap: 0.5rem;
-  align-items: end;
+  align-items: start;
+}
+
+.parameter__wheel {
+  width: 132px;
+  height: 132px;
+}
+
+.parameter__wheel [class*="react-colorful"],
+.parameter__wheel > div {
+  max-width: 100%;
+}
+
+.parameter__swatch {
+  grid-column: 2;
+  width: 100%;
+  min-height: 28px;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius-sm);
 }

 .parameter__alpha {
@@ -866,10 +963,18 @@ pre {
  .kv-rows,
  .parameter-grid,
  .parameter__header,
-  .parameter__color-row {
+  .parameter__wheel-row {
    grid-template-columns: 1fr;
  }

+  .parameter__reset {
+    width: 100%;
+  }
+
+  .parameter__swatch {
+    grid-column: auto;
+  }
+
  .kv-row {
    grid-template-columns: minmax(6.25rem, 0.6fr) minmax(0, 1fr);
  }