🎨

packages/frontend/src/components/MkAnimBg.vue

@@ -8,6 +8,14 @@ import isChromatic from 'chromatic/isChromatic';
 
 const canvasEl = shallowRef<HTMLCanvasElement>();
 
+const props = withDefaults(defineProps<{
+	scale?: number;
+	focus?: number;
+}>(), {
+	scale: 1.0,
+	focus: 1.0,
+});
+
 function loadShader(gl, type, source) {
 	const shader = gl.createShader(type);
 
@@ -65,11 +73,13 @@ onMounted(() => {
 	const shaderProgram = initShaderProgram(gl, `
 		attribute vec2 vertex;
 
+		uniform vec2 u_scale;
+
 		varying vec2 v_pos;
 
 		void main() {
 			gl_Position = vec4(vertex, 0.0, 1.0);
-			v_pos = vertex;
+			v_pos = vertex / u_scale;
 		}
 	`, `
 		precision mediump float;
@@ -191,12 +201,14 @@ onMounted(() => {
 	const u_warp = gl.getUniformLocation(shaderProgram, 'u_warp');
 	const u_focus = gl.getUniformLocation(shaderProgram, 'u_focus');
 	const u_itensity = gl.getUniformLocation(shaderProgram, 'u_itensity');
+	const u_scale = gl.getUniformLocation(shaderProgram, 'u_scale');
 	gl.uniform2fv(u_resolution, [canvas.width, canvas.height]);
 	gl.uniform1f(u_spread, 1.0);
 	gl.uniform1f(u_speed, 1.0);
 	gl.uniform1f(u_warp, 1.0);
-	gl.uniform1f(u_focus, 1.0);
+	gl.uniform1f(u_focus, props.focus);
 	gl.uniform1f(u_itensity, 0.5);
+	gl.uniform2fv(u_scale, [props.scale, props.scale]);
 
 	const vertex = gl.getAttribLocation(shaderProgram, 'vertex');
 	gl.enableVertexAttribArray(vertex);