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

[ ADDED ] : Demo Background Content

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2025-07-18 12:27:18 +05:30
parent 47ef949cd2
commit ef2aa74f2c
16 changed files with 467 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/demo/Backgrounds/GridDistortionDemo.vue
View File

@@ -4,16 +4,14 @@
<div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
<GridDistortion
:key="key"
imageSrc="https://picsum.photos/1920/1080?grayscale"
imageSrc="https://picsum.photos/1920/1080"
:grid="grid"
:mouse="mouse"
:strength="0.15"
:relaxation="0.9"
className="grid-distortion"
/>
<p class="absolute font-black text-8xl text-center pointer-events-none select-none mix-blend-difference">
Distortion.
</p>
<BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
</div>
<Customize>
@@ -48,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode';
import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
const { rerenderKey: key, forceRerender } = useForceRerender();