atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Noise improvements

Browse Source
This commit is contained in:
David Haz
2025-07-14 01:13:38 +03:00
parent bb644cdbb1
commit c0f01c6971
2 changed files with 113 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/demo/Animations/NoiseDemo.vue
View File

@@ -1,83 +1,75 @@
<template>
<div>
<TabbedLayout>
<template #preview>
<div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden;">
<div class="text-[#2ea043] text-[6rem] font-extrabold text-center opacity-50">
Ooh, edgy!
</div>
<Noise :pattern-size="patternSize" :pattern-scale-x="patternScaleX" :pattern-scale-y="patternScaleY"
:pattern-alpha="patternAlpha" />
</div>
<div>
<TabbedLayout>
<template #preview>
<div class="demo-container h-[400px] overflow-hidden">
<div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
<Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
</div>
<Customize>
<PreviewSlider title="pattern Size" value-unit="px" v-model="patternSize" :min="50" :max="500"
:step="10" />
<PreviewSlider title="Scale X" v-model="patternScaleX" :min="0.1" :max="5" :step="0.1" />
<PreviewSlider title="Scale Y" v-model="patternScaleY" :min="0.1" :max="5" :step="0.1" />
<PreviewSlider title="pattern Alpha" v-model="patternAlpha" :min="0" :max="25" :step="5" />
</Customize>
<Customize>
<PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
<PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
</Customize>
<PropTable :data="propData" />
</template>
<PropTable :data="propData" />
</template>
<template #code>
<CodeExample :code-object="noise" />
</template>
<template #code>
<CodeExample :code-object="noise" />
</template>
<template #cli>
<CliInstallation :command="noise.cli" />
</template>
</TabbedLayout>
</div>
<template #cli>
<CliInstallation :command="noise.cli" />
</template>
</TabbedLayout>
</div>
</template>
<script setup lang="ts">
import { ref } 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 Noise from '../../content/Animations/Noise/Noise.vue'
import { noise } from '@/constants/code/Animations/noiseCode'
import { ref, watch } 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 PreviewSelect from '../../components/common/PreviewSelect.vue';
import Noise from '../../content/Animations/Noise/Noise.vue';
import { noise } from '@/constants/code/Animations/noiseCode';
const patternSize = ref(250)
const patternScaleX = ref(2)
const patternScaleY = ref(2)
const patternAlpha = ref(10)
const patternAlpha = ref(15);
const mixBlendMode = ref('normal');
const blendModeOptions = [
{ label: 'Normal', value: 'normal' },
{ label: 'Overlay', value: 'overlay' }
];
watch(mixBlendMode, newValue => {
if (newValue === 'overlay') {
patternAlpha.value = 50;
}
});
const propData = [
{
name: 'patternSize',
type: 'number',
default: '-',
description: 'Defines the size of the grain pattern.'
},
{
name: 'patternScaleX',
type: 'number',
default: '-',
description: 'Scaling factor for the X-axis of the grain pattern.'
},
{
name: 'patternScaleY',
type: 'number',
default: '-',
description: 'Scaling factor for the Y-axis of the grain pattern.'
},
{
name: 'patternRefreshInterval',
type: 'number',
default: '2',
description: 'Number of frames before the grain pattern refreshes.'
},
{
name: 'patternAlpha',
type: 'number',
default: '10',
description: 'Opacity of the grain pattern (0-255).'
}
]
{
name: 'patternRefreshInterval',
type: 'number',
default: '2',
description: 'Number of frames before the grain pattern refreshes.'
},
{
name: 'patternAlpha',
type: 'number',
default: '10',
description: 'Opacity of the grain pattern (0-255).'
},
{
name: 'mixBlendMode',
type: 'string',
default: 'normal',
description: 'CSS mix-blend-mode value for how the noise blends with content behind it.'
}
];
</script>