diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkAnimBg.vue | 16 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkUserSetupDialog.vue | 4 |
2 files changed, 16 insertions, 4 deletions
diff --git a/packages/frontend/src/components/MkAnimBg.vue b/packages/frontend/src/components/MkAnimBg.vue index 010bfb6fee..575ea7c5e3 100644 --- a/packages/frontend/src/components/MkAnimBg.vue +++ b/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); diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue index 066556a05b..5c04faadca 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.vue +++ b/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> |