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

Added <GridMotion /> background

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2025-07-12 12:06:15 +05:30
parent 85110de2ad
commit 45d0dbaf3c
5 changed files with 278 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='jsx-item-1'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
'Item 4',
"<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
'Item 7',
"<div key='jsx-item-2'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
'Item 10',
"<div key='jsx-item-3'>Custom JSX 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='jsx-item-2'>Custom JSX Content</div>",
'Item 13',
"<div key='jsx-item-4'>Custom JSX 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,
};