mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="relative demo-container h-[500px] p-0 overflow-hidden">
|
|
<Iridescence :key="key" :speed="speed" :color="colors" :mouseReact="mouseInteraction" :amplitude="amplitude" />
|
|
</div>
|
|
|
|
<Customize>
|
|
<PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[0]" title="Red" />
|
|
|
|
<PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[1]" title="Green" />
|
|
|
|
<PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[2]" title="Blue" />
|
|
|
|
<PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
|
|
|
|
<PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude" />
|
|
|
|
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" />
|
|
</Customize>
|
|
|
|
<PropTable :data="propData" />
|
|
|
|
<Dependencies :dependencyList="['ogl']" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :codeObject="iridescence" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation v-bind="iridescence" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
|
import Customize from '../../components/common/Customize.vue';
|
|
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
|
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
|
import PropTable from '../../components/common/PropTable.vue';
|
|
import Dependencies from '../../components/code/Dependencies.vue';
|
|
import CodeExample from '../../components/code/CodeExample.vue';
|
|
import CliInstallation from '../../components/code/CliInstallation.vue';
|
|
import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
|
|
import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
|
|
import { useForceRerender } from '../../composables/useForceRerender';
|
|
|
|
const colors = ref<[number, number, number]>([1, 1, 1]);
|
|
const speed = ref(1);
|
|
const amplitude = ref(0.1);
|
|
const mouseInteraction = ref(true);
|
|
|
|
const { rerenderKey: key } = useForceRerender();
|
|
|
|
const propData = [
|
|
{
|
|
name: 'color',
|
|
type: 'Array<number>',
|
|
default: '[1, 1, 1]',
|
|
description: 'Base color as an array of RGB values (each between 0 and 1).'
|
|
},
|
|
{
|
|
name: 'speed',
|
|
type: 'number',
|
|
default: '1.0',
|
|
description: 'Speed multiplier for the animation.'
|
|
},
|
|
{
|
|
name: 'amplitude',
|
|
type: 'number',
|
|
default: '0.1',
|
|
description: 'Amplitude for the mouse-driven effect.'
|
|
},
|
|
{
|
|
name: 'mouseReact',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
description: 'Enable or disable mouse interaction with the shader.'
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-container {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
</style>
|