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

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

1
src/constants/Categories.ts
View File

@@ -69,6 +69,7 @@ export const CATEGORIES = [
'Squares',
'Iridescence',
'Threads',
'Grid Motion'
],
}
];

1
src/constants/Components.ts
View File

@@ -55,6 +55,7 @@ const backgrounds = {
'threads': () => import("../demo/Backgrounds/ThreadsDemo.vue"),
'aurora': () => import("../demo/Backgrounds/AuroraDemo.vue"),
'beams': () => import("../demo/Backgrounds/BeamsDemo.vue"),
'grid-motion': () => import("../demo/Backgrounds/GridMotionDemo.vue"),
};
export const componentMap = {

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,
};