diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.ts b/packages/frontend/src/utility/image-effector/fxs/checker.ts
index b799bd0d13..c426308951 100644
--- a/packages/frontend/src/utility/image-effector/fxs/checker.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/checker.ts
@@ -58,6 +58,7 @@ export const FX_checker = defineImageEffectorFx({
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		scale: {
 			type: 'number' as const,
@@ -76,6 +77,7 @@ export const FX_checker = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 	},
 	main: ({ gl, u, params }) => {
diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts
index 5393d73df0..ae0d92b8ae 100644
--- a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts
@@ -37,6 +37,7 @@ export const FX_colorClamp = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		min: {
 			type: 'number' as const,
@@ -44,6 +45,7 @@ export const FX_colorClamp = defineImageEffectorFx({
 			min: -1.0,
 			max: 0.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 	},
 	main: ({ gl, u, params }) => {
diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts
index c66d75a83f..b9387900fb 100644
--- a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts
@@ -41,6 +41,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		rMin: {
 			type: 'number' as const,
@@ -48,6 +49,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			min: -1.0,
 			max: 0.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		gMax: {
 			type: 'number' as const,
@@ -55,6 +57,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		gMin: {
 			type: 'number' as const,
@@ -62,6 +65,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			min: -1.0,
 			max: 0.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		bMax: {
 			type: 'number' as const,
@@ -69,6 +73,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		bMin: {
 			type: 'number' as const,
@@ -76,6 +81,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			min: -1.0,
 			max: 0.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 	},
 	main: ({ gl, u, params }) => {
diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.ts b/packages/frontend/src/utility/image-effector/fxs/distort.ts
index 67ebc77733..4b1aefc159 100644
--- a/packages/frontend/src/utility/image-effector/fxs/distort.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/distort.ts
@@ -50,6 +50,7 @@ export const FX_distort = defineImageEffectorFx({
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		frequency: {
 			type: 'number' as const,
@@ -64,6 +65,7 @@ export const FX_distort = defineImageEffectorFx({
 			min: 0,
 			max: 1,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 	},
 	main: ({ gl, u, params }) => {
diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts
index 198dd9bad0..14f6f91148 100644
--- a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts
@@ -90,6 +90,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		scale: {
 			type: 'number' as const,
@@ -111,6 +112,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		minorDivisions: {
 			type: 'number' as const,
@@ -132,6 +134,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		color: {
 			type: 'color' as const,
diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.ts b/packages/frontend/src/utility/image-effector/fxs/stripe.ts
index 37766e185d..f6c1d2278d 100644
--- a/packages/frontend/src/utility/image-effector/fxs/stripe.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/stripe.ts
@@ -60,6 +60,7 @@ export const FX_stripe = defineImageEffectorFx({
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		frequency: {
 			type: 'number' as const,
@@ -74,6 +75,7 @@ export const FX_stripe = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		color: {
 			type: 'color' as const,
@@ -85,6 +87,7 @@ export const FX_stripe = defineImageEffectorFx({
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 	},
 	main: ({ gl, u, params }) => {