16 lines
574 B
Vue
16 lines
574 B
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{ as?: string }>(), { as: "section" });
|
|
function highlight(e: PointerEvent) {
|
|
if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
const element = e.currentTarget as HTMLElement;
|
|
const r = element.getBoundingClientRect();
|
|
element.style.setProperty("--glass-x", `${e.clientX - r.left}px`);
|
|
element.style.setProperty("--glass-y", `${e.clientY - r.top}px`);
|
|
}
|
|
</script>
|
|
<template>
|
|
<component :is="props.as" class="glass" @pointermove="highlight"
|
|
><slot
|
|
/></component>
|
|
</template>
|