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

Refactor GridMotion component and demo for improved item handling and styling

Browse Source
This commit is contained in:
David Haz
2025-07-12 14:07:57 +03:00
parent 230f44f6e0
commit 0359d8043c
3 changed files with 36 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/constants/code/Backgrounds/gridMotionCode.ts
View File

@@ -6,40 +6,16 @@ export const gridMotion: CodeObject = {
installation: `npm i gsap`,
usage: `<template>
<GridMotion
:items="items"
:items="images"
/>
</template>
<script setup lang="ts">
import GridMotion from "./GridMotion.vue";
const items = [
"Item 1",
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 2",
`<div key='item-1'>Custom Content</div>`,
"Item 4",
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 5",
`<div key='item-1'>Custom Content</div>`,
"Item 7",
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 8",
`<div key='item-1'>Custom Content</div>`,
"Item 10",
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 11",
`<div key='item-1'>Custom Content</div>`,
"Item 13",
`<div key='item-1'>Custom Content</div>`,
"https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Item 14",
// Add more items as needed
];
const imageUrl = 'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
const numberOfImages = 30;
const images = Array.from({ length: numberOfImages }, () => imageUrl);
</script>`,
code,
};