atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add prettier config, format codebase

Browse Source
This commit is contained in:
David Haz
2025-07-12 11:59:33 +03:00
parent ac8b2c04d8
commit f4d97ee94e
211 changed files with 10586 additions and 8810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/content/Backgrounds/GridMotion/GridMotion.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { gsap } from "gsap";
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { gsap } from 'gsap';
interface GridMotionProps {
items?: string[];
@@ -9,7 +9,7 @@ interface GridMotionProps {
const props = withDefaults(defineProps<GridMotionProps>(), {
items: () => [],
gradientColor: "black",
gradientColor: 'black'
});
const gridRef = ref<HTMLElement | null>(null);
@@ -18,16 +18,14 @@ const mouseX = ref(window.innerWidth / 2);
const totalItems = 28;
const defaultItems = Array.from({ length: totalItems }, (_, i) => `Item ${i + 1}`);
const combinedItems = computed(() =>
props.items.length > 0 ? props.items.slice(0, totalItems) : defaultItems,
);
const combinedItems = computed(() => (props.items.length > 0 ? props.items.slice(0, totalItems) : defaultItems));
function isImage(item: string) {
return typeof item === "string" && item.startsWith("http");
return typeof item === 'string' && item.startsWith('http');
}
function isTag(item: string) {
return typeof item === "string" && item.startsWith("<") && item.endsWith(">");
return typeof item === 'string' && item.startsWith('<') && item.endsWith('>');
}
onMounted(() => {
@@ -44,23 +42,22 @@ onMounted(() => {
rowRefs.value.forEach((row, index) => {
const direction = index % 2 === 0 ? 1 : -1;
const moveAmount =
((mouseX.value / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction;
const moveAmount = ((mouseX.value / window.innerWidth) * maxMoveAmount - maxMoveAmount / 2) * direction;
gsap.to(row, {
x: moveAmount,
duration: baseDuration + inertiaFactors[index % inertiaFactors.length],
ease: "power3.out",
overwrite: "auto",
ease: 'power3.out',
overwrite: 'auto'
});
});
};
const removeAnimation = gsap.ticker.add(updateMotion);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener('mousemove', handleMouseMove);
onBeforeUnmount(() => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener('mousemove', handleMouseMove);
removeAnimation();
});
});
@@ -68,24 +65,42 @@ onMounted(() => {
<template>
<div ref="gridRef" class="w-full h-full overflow-hidden">
<section class="relative flex justify-center items-center w-full h-screen overflow-hidden" :style="{
background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
}">
<section
class="relative flex justify-center items-center w-full h-screen overflow-hidden"
:style="{
background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`
}"
>
<div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
<div
class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center">
<div v-for="rowIndex in 4" :key="rowIndex" class="gap-4 grid grid-cols-7"
:style="{ willChange: 'transform, filter' }" ref="rowRefs">
class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center"
>
<div
v-for="rowIndex in 4"
:key="rowIndex"
class="gap-4 grid grid-cols-7"
:style="{ willChange: 'transform, filter' }"
ref="rowRefs"
>
<div v-for="itemIndex in 7" :key="itemIndex" class="relative">
<div
class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white">
<div v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
class="top-0 left-0 absolute bg-cover bg-center w-full h-full" :style="{
backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`,
}"></div>
<div v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" class="z-[2] p-4 text-center"
v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"></div>
class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
>
<div
v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
:style="{
backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`
}"
></div>
<div
v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
class="z-[2] p-4 text-center"
v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
></div>
<div v-else class="z-[1] p-4 text-center">
{{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
</div>