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

Merge pull request #10 from Utkarsh-Singhal-26/feat/grid-motion

Browse Source 
Added <GridMotion  /> background
This commit is contained in:
David
2025-07-12 11:40:02 +03:00
committed by GitHub
parent 7d64e4b756 4f3eba93ed
commit 874af541f3
5 changed files with 248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/constants/code/Backgrounds/gridMotionCode.ts Normal file
View File

@@ -0,0 +1,45 @@
import code from "@content/Backgrounds/GridMotion/GridMotion.vue?raw";
import type { CodeObject } from "../../../types/code";
export const gridMotion: CodeObject = {
cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridMotion`,
installation: `npm i gsap`,
usage: `<template>
<GridMotion
:items="items"
/>
</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
];
</script>`,
code,
};