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

1
src/constants/Categories.ts
View File

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

1
src/constants/Components.ts
View File

@@ -58,6 +58,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='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,
};