mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
100 lines
3.2 KiB
Vue
100 lines
3.2 KiB
Vue
<template>
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="demo-container relative h-[500px] overflow-hidden">
|
|
<MetallicPaint
|
|
v-if="imageData"
|
|
:key="rerenderKey"
|
|
:image-data="imageData"
|
|
:params="{
|
|
edge,
|
|
patternBlur,
|
|
patternScale,
|
|
refraction,
|
|
speed,
|
|
liquid
|
|
}"
|
|
/>
|
|
</div>
|
|
|
|
<Customize>
|
|
<PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" />
|
|
|
|
<PreviewSlider title="Pattern Scale" v-model="patternScale" :min="1" :max="5" :step="0.1" />
|
|
|
|
<PreviewSlider title="Pattern Blur" v-model="patternBlur" :min="0" :max="0.1" :step="0.001" />
|
|
|
|
<PreviewSlider title="Refraction" v-model="refraction" :min="0" :max="0.1" :step="0.01" />
|
|
|
|
<PreviewSlider title="Liquid" v-model="liquid" :min="0" :max="1" :step="0.01" />
|
|
|
|
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="1" :step="0.01" />
|
|
</Customize>
|
|
|
|
<PropTable :data="propData" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :code-object="metallicPaint" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation :command="metallicPaint.cli" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
|
import PropTable from '../../components/common/PropTable.vue';
|
|
import CliInstallation from '../../components/code/CliInstallation.vue';
|
|
import CodeExample from '../../components/code/CodeExample.vue';
|
|
import Customize from '../../components/common/Customize.vue';
|
|
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
|
import MetallicPaint from '../../content/Animations/MetallicPaint/MetallicPaint.vue';
|
|
import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode';
|
|
import { parseImage } from '../../content/Animations/MetallicPaint/parseImage';
|
|
import { useForceRerender } from '@/composables/useForceRerender';
|
|
import logo from '@/assets/logos/vue-bits-logo-small-dark.svg';
|
|
|
|
const imageData = ref<ImageData | null>(null);
|
|
const edge = ref(0);
|
|
const patternScale = ref(2);
|
|
const refraction = ref(0.015);
|
|
const patternBlur = ref(0.005);
|
|
const liquid = ref(0.07);
|
|
const speed = ref(0.3);
|
|
|
|
const { rerenderKey } = useForceRerender();
|
|
|
|
const propData = [
|
|
{
|
|
name: 'imageData',
|
|
type: 'ImageData',
|
|
default: 'none (required)',
|
|
description:
|
|
'The processed image data generated from the parseImage utility. This image data is used by the shader to create the liquid paper effect.'
|
|
},
|
|
{
|
|
name: 'params',
|
|
type: 'ShaderParams',
|
|
default: '',
|
|
description:
|
|
'An object to configure the shader effect. Properties include: patternScale, refraction, edge, patternBlur, liquid, speed'
|
|
}
|
|
];
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await fetch(logo);
|
|
const blob = await response.blob();
|
|
const file = new File([blob], 'default.png', { type: blob.type });
|
|
const { imageData: processedImageData } = await parseImage(file);
|
|
imageData.value = processedImageData;
|
|
} catch (err) {
|
|
console.error('Error loading default image:', err);
|
|
}
|
|
});
|
|
</script>
|