🎨

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);

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -27,7 +27,7 @@
 		>
 			<template v-if="page === 0">
 				<div :class="$style.centerPage">
-					<MkAnimBg style="position: absolute; top: 0;"/>
+					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
 					<MkSpacer :margin-min="20" :margin-max="28">
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
@@ -83,7 +83,7 @@
 			</template>
 			<template v-else-if="page === 5">
 				<div :class="$style.centerPage">
-					<MkAnimBg style="position: absolute; top: 0;"/>
+					<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
 					<MkSpacer :margin-min="20" :margin-max="28">
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>