Looking for some guidance from experienced developers out there! I'm currently exploring how to incorporate Mazeletter as a background feature for each page in an app project I've been working on.
This is all new territory for me, so any assistance would be greatly appreciated. I have a foundational test component set up that functions as the background, with elements layered over it successfully.
However, I'd like to take this concept a step further by adding more dynamism. I want the text to be dynamic (passed in via props) and for the background to adapt based on the amount of content present on the page – essentially making the entire design more responsive.
Below is the code snippet of the current test component I'm tinkering with:
<template>
<div id="mz-background">
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
<p class="mz-text">ThisIsATestThisIsATestThisIsATestThisIsATest</p>
...
</div>
</template>
<script>
export default {
name: "UnderworldPattern",
};
</script>
<style scoped>
#mz-background {
z-index: 0;
position: fixed;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.mz-text {
...
}
</style>
If anyone can offer insights on enhancing the dynamics of this implementation, your expertise would be incredibly valuable to me.
Thank you for taking the time to read through and potentially assist!