2023-11-09 22:14:37 +00:00
|
|
|
<script setup lang="ts">
|
2024-08-06 17:22:11 +00:00
|
|
|
import { Neko } from 'neko-ts'
|
|
|
|
|
|
|
|
const neko: Ref<Neko | undefined> = ref()
|
|
|
|
|
2023-11-09 22:14:37 +00:00
|
|
|
const canvas: Ref<undefined | HTMLCanvasElement> = ref()
|
|
|
|
const intervalId: Ref<undefined | NodeJS.Timeout> = ref()
|
|
|
|
|
2024-08-06 17:22:11 +00:00
|
|
|
const backgroundOffset: Ref<{ x: number, y: number }> = ref({ x: 0, y: 0 })
|
2023-11-10 05:35:01 +00:00
|
|
|
function dumbShit(e: MouseEvent) {
|
|
|
|
const { clientX, clientY } = e
|
|
|
|
const { innerWidth, innerHeight } = window
|
|
|
|
|
|
|
|
backgroundOffset.value = {
|
|
|
|
x: -(clientX - innerWidth / 2) / innerWidth,
|
|
|
|
y: -(clientY - innerHeight / 2) / innerHeight,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-13 19:11:34 +00:00
|
|
|
const handleResizeDebounced = useDebounce(handleResize, 500)
|
|
|
|
|
2023-11-09 22:14:37 +00:00
|
|
|
onMounted(() => {
|
2024-08-06 17:22:11 +00:00
|
|
|
neko.value = new Neko()
|
|
|
|
|
2023-11-09 22:14:37 +00:00
|
|
|
if (!canvas.value)
|
|
|
|
return
|
|
|
|
initCanvas(canvas.value)
|
|
|
|
|
2023-11-10 05:35:01 +00:00
|
|
|
intervalId.value = setInterval(renderFrame, 16)
|
2023-11-13 19:11:34 +00:00
|
|
|
addEventListener('resize', handleResizeDebounced)
|
2023-11-10 05:35:01 +00:00
|
|
|
addEventListener('mousemove', dumbShit)
|
2023-11-09 22:14:37 +00:00
|
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
if (intervalId.value)
|
|
|
|
clearInterval(intervalId.value)
|
2023-11-13 19:11:34 +00:00
|
|
|
removeEventListener('resize', handleResizeDebounced)
|
2023-11-10 05:35:01 +00:00
|
|
|
removeEventListener('mousemove', dumbShit)
|
2023-11-09 22:14:37 +00:00
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2023-11-10 05:35:01 +00:00
|
|
|
<canvas id="background" ref="canvas" :style="{ '--offset-x': `${backgroundOffset.x}rem`, '--offset-y': `${backgroundOffset.y}rem` }" />
|
2023-11-09 22:14:37 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
#background {
|
2023-11-10 05:35:01 +00:00
|
|
|
position: fixed;
|
|
|
|
top: -.5rem; left: -.5rem;
|
|
|
|
width: calc(100vw + 1rem);
|
|
|
|
height: calc(100vh + 1rem);
|
2023-11-09 22:14:37 +00:00
|
|
|
z-index: -1;
|
|
|
|
filter: blur(.5rem);
|
2023-11-10 05:35:01 +00:00
|
|
|
|
|
|
|
translate: var(--offset-x) var(--offset-y);
|
|
|
|
transition: translate 1s cubic-bezier(0.22, 1, 0.36, 1);
|
2023-11-09 22:14:37 +00:00
|
|
|
}
|
|
|
|
</style>
|