mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const points = useState(() => Array.from({ length: 25 }).fill(0).map(() => [Math.random(), Math.random()]))
|
|
|
|
const poly = computed(() => points.value.map(([x, y]) => `${x * 100}% ${y * 100}%`).join(', '))
|
|
|
|
function jumpVal(val: number) {
|
|
return Math.random() > 0.5 ? val + (Math.random() - 0.5) / 2 : Math.random()
|
|
}
|
|
|
|
let timeout: NodeJS.Timeout
|
|
function jumpPoints() {
|
|
for (let i = 0; i < points.value.length; i++)
|
|
points.value[i] = [jumpVal(points.value[i][0]), jumpVal(points.value[i][1])]
|
|
|
|
timeout = setTimeout(jumpPoints, Math.random() * 1000)
|
|
}
|
|
|
|
onMounted(() => jumpPoints())
|
|
onUnmounted(() => clearTimeout(timeout))
|
|
</script>
|
|
|
|
<template>
|
|
<ClientOnly>
|
|
<div
|
|
aria-hidden="true"
|
|
class="bg sm:mx-8 absolute inset-0 z-20 transform-gpu blur-3xl overflow-hidden"
|
|
>
|
|
<div
|
|
class="aspect-[2] h-2/3 w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/10 lg:opacity-30 xs:opacity-50"
|
|
:style="{ 'clip-path': `polygon(${poly})` }"
|
|
/>
|
|
</div>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bg > div {
|
|
clip-path: circle(75%);
|
|
transition: clip-path 3s;
|
|
}
|
|
|
|
.light .bg > div {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|