mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<template>
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
|
|
<GridDistortion
|
|
:key="key"
|
|
imageSrc="https://picsum.photos/1920/1080"
|
|
:grid="grid"
|
|
:mouse="mouse"
|
|
:strength="0.15"
|
|
:relaxation="0.9"
|
|
className="grid-distortion"
|
|
/>
|
|
<BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
|
|
</div>
|
|
|
|
<Customize>
|
|
<PreviewSlider title="Grid Size" :min="6" :max="200" :step="1" v-model="grid" />
|
|
|
|
<PreviewSlider title="Mouse Size" :min="0.1" :max="0.5" :step="0.01" v-model="mouse" />
|
|
</Customize>
|
|
|
|
<PropTable :data="propData" />
|
|
<Dependencies :dependency-list="['three']" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :code-object="gridDistortion" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation :command="gridDistortion.cli" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useForceRerender } from '@/composables/useForceRerender';
|
|
import { ref, watch, useTemplateRef } from 'vue';
|
|
import CliInstallation from '../../components/code/CliInstallation.vue';
|
|
import CodeExample from '../../components/code/CodeExample.vue';
|
|
import Dependencies from '../../components/code/Dependencies.vue';
|
|
import Customize from '../../components/common/Customize.vue';
|
|
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
|
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();
|
|
|
|
const grid = ref(10);
|
|
const mouse = ref(0.25);
|
|
|
|
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
|
|
|
|
watch(
|
|
() => [grid, mouse],
|
|
() => {
|
|
forceRerender();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const propData = [
|
|
{
|
|
name: 'imgageSrc',
|
|
type: 'string',
|
|
default: '',
|
|
description: 'The image you want to render inside the container.'
|
|
},
|
|
{
|
|
name: 'grid',
|
|
type: 'number',
|
|
default: '15',
|
|
description: 'The number of cells present in the distortion grid'
|
|
},
|
|
{
|
|
name: 'mouse',
|
|
type: 'number',
|
|
default: '0.1',
|
|
description: 'The size of the distortion effect that follows the cursor.'
|
|
},
|
|
{
|
|
name: 'relaxation',
|
|
type: 'number',
|
|
default: '0.9',
|
|
description: 'The speed at which grid cells return to their initial state.'
|
|
},
|
|
{
|
|
name: 'strength',
|
|
type: 'number',
|
|
default: '0.15',
|
|
description: 'The overall strength of the distortion effect.'
|
|
},
|
|
{
|
|
name: 'className',
|
|
type: 'string',
|
|
default: '',
|
|
description: 'Any custom class(es) you want to apply to the container.'
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-container {
|
|
padding: 0;
|
|
}
|
|
</style>
|