mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-22 01:54:38 -06:00
Merge branch 'main' into feat/electric-border
This commit is contained in:
David
GitHub
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
|
||||
<Plasma
|
||||
:color="color"
|
||||
:speed="speed"
|
||||
:direction="direction"
|
||||
:scale="scale"
|
||||
:opacity="opacity"
|
||||
:mouseInteractive="mouseInteractive"
|
||||
/>
|
||||
<BackgroundContent pill-text="New Background" headline="Minimal plasma waves that soothe the eyes" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Color" v-model="color" />
|
||||
<PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
|
||||
<PreviewSlider :min="0.1" :max="3.0" :step="0.1" v-model="speed" title="Speed" />
|
||||
<PreviewSlider :min="0.5" :max="3.0" :step="0.1" v-model="scale" title="Scale" />
|
||||
<PreviewSlider :min="0.1" :max="1.0" :step="0.1" v-model="opacity" title="Opacity" />
|
||||
<PreviewSwitch title="Mouse Interactive" v-model="mouseInteractive" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="plasma" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="plasma.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { plasma } from '@/constants/code/Backgrounds/plasmaCode';
|
||||
import { ref } from 'vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import BackgroundContent from '../../components/common/BackgroundContent.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewColor from '../../components/common/PreviewColor.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import Plasma from '../../content/Backgrounds/Plasma/Plasma.vue';
|
||||
|
||||
const directionOptions = [
|
||||
{ value: 'forward', label: 'Forward' },
|
||||
{ value: 'reverse', label: 'Reverse' },
|
||||
{ value: 'pingpong', label: 'Ping Pong' }
|
||||
];
|
||||
|
||||
const color = ref('#9EF2BE');
|
||||
const speed = ref(1.0);
|
||||
const direction = ref<'forward' | 'reverse' | 'pingpong'>('forward');
|
||||
const scale = ref(1.0);
|
||||
const opacity = ref(1.0);
|
||||
const mouseInteractive = ref(false);
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'color',
|
||||
type: 'string',
|
||||
default: 'undefined',
|
||||
description: 'Optional hex color to tint the plasma effect. If not provided, uses original colors.'
|
||||
},
|
||||
{
|
||||
name: 'speed',
|
||||
type: 'number',
|
||||
default: '1.0',
|
||||
description: 'Animation speed multiplier. Higher values = faster animation.'
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: "'forward' | 'reverse' | 'pingpong'",
|
||||
default: "'forward'",
|
||||
description: "Animation direction. 'pingpong' oscillates back and forth."
|
||||
},
|
||||
{
|
||||
name: 'scale',
|
||||
type: 'number',
|
||||
default: '1.0',
|
||||
description: 'Zoom level of the plasma pattern. Higher values zoom in.'
|
||||
},
|
||||
{
|
||||
name: 'opacity',
|
||||
type: 'number',
|
||||
default: '1.0',
|
||||
description: 'Overall opacity of the effect (0-1).'
|
||||
},
|
||||
{
|
||||
name: 'mouseInteractive',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Whether the plasma responds to mouse movement.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative p-0 h-[600px] overflow-hidden demo-container">
|
||||
<Prism
|
||||
:animation-type="animationType"
|
||||
:time-scale="timeScale"
|
||||
:scale="scale"
|
||||
:noise="noise"
|
||||
:glow="glow"
|
||||
:height="height"
|
||||
:base-width="baseWidth"
|
||||
:hue-shift="hueShift"
|
||||
:color-frequency="colorFrequency"
|
||||
/>
|
||||
|
||||
<BackgroundContent pill-text="New Background" headline="A spectrum of colors that spark creativity" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSelect title="Animation Type" v-model="animationType" :options="animationOptions" />
|
||||
<PreviewSlider title="Time Scale" :min="0.1" :max="2" :step="0.1" v-model="timeScale" />
|
||||
<PreviewSlider title="Scale" :min="1" :max="5" :step="0.1" v-model="scale" />
|
||||
<PreviewSlider title="Height" :min="1" :max="5" :step="0.1" v-model="height" />
|
||||
<PreviewSlider title="Base Width" :min="1" :max="10" :step="0.1" v-model="baseWidth" />
|
||||
<PreviewSlider title="Noise" :min="0" :max="1" :step="0.05" v-model="noise" />
|
||||
<PreviewSlider title="Glow" :min="0" :max="3" :step="0.1" v-model="glow" />
|
||||
<PreviewSlider title="Hue Shift" :min="-3.1416" :max="3.1416" :step="0.1" v-model="hueShift" />
|
||||
<PreviewSlider title="Color Frequency" :min="0.25" :max="4" :step="0.05" v-model="colorFrequency" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="prism" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="prism.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { prism } from '@/constants/code/Backgrounds/prismCode';
|
||||
import { ref } from 'vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import BackgroundContent from '../../components/common/BackgroundContent.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import Prism from '../../content/Backgrounds/Prism/Prism.vue';
|
||||
|
||||
const animationOptions = [
|
||||
{ value: 'rotate', label: 'Rotate' },
|
||||
{ value: 'hover', label: 'Hover' },
|
||||
{ value: '3drotate', label: '3D Rotate' }
|
||||
];
|
||||
|
||||
const animationType = ref<'rotate' | 'hover' | '3drotate'>('rotate');
|
||||
const timeScale = ref(0.5);
|
||||
const scale = ref(3.6);
|
||||
const noise = ref(0);
|
||||
const glow = ref(1);
|
||||
const height = ref(3.5);
|
||||
const baseWidth = ref(5.5);
|
||||
const hueShift = ref(0);
|
||||
const colorFrequency = ref(1);
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'height',
|
||||
type: 'number',
|
||||
default: '3.5',
|
||||
description: 'Apex height of the prism (world units).'
|
||||
},
|
||||
{
|
||||
name: 'baseWidth',
|
||||
type: 'number',
|
||||
default: '5.5',
|
||||
description: 'Total base width across X/Z (world units).'
|
||||
},
|
||||
{
|
||||
name: 'animationType',
|
||||
type: '"rotate" | "hover" | "3drotate"',
|
||||
default: '"rotate"',
|
||||
description: 'Animation mode: shader wobble, pointer hover tilt, or full 3D rotation.'
|
||||
},
|
||||
{
|
||||
name: 'glow',
|
||||
type: 'number',
|
||||
default: '1',
|
||||
description: 'Glow/bleed intensity multiplier.'
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
type: '{ x?: number; y?: number }',
|
||||
default: '{ x: 0, y: 0 }',
|
||||
description: 'Pixel offset within the canvas (x→right, y→down).'
|
||||
},
|
||||
{
|
||||
name: 'noise',
|
||||
type: 'number',
|
||||
default: '0.5',
|
||||
description: 'Film-grain noise amount added to final color (0 disables).'
|
||||
},
|
||||
{
|
||||
name: 'transparent',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: 'Whether the canvas has an alpha channel (transparent background).'
|
||||
},
|
||||
{
|
||||
name: 'scale',
|
||||
type: 'number',
|
||||
default: '3.6',
|
||||
description: 'Overall screen-space scale of the prism (bigger = larger).'
|
||||
},
|
||||
{
|
||||
name: 'hueShift',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: 'Hue rotation (radians) applied to final color.'
|
||||
},
|
||||
{
|
||||
name: 'colorFrequency',
|
||||
type: 'number',
|
||||
default: '1',
|
||||
description: 'Frequency of internal sine bands controlling color variation.'
|
||||
},
|
||||
{
|
||||
name: 'hoverStrength',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Sensitivity of hover tilt (pitch/yaw amplitude).'
|
||||
},
|
||||
{
|
||||
name: 'inertia',
|
||||
type: 'number',
|
||||
default: '0.05',
|
||||
description: 'Easing factor for hover (0..1, higher = snappier).'
|
||||
},
|
||||
{
|
||||
name: 'bloom',
|
||||
type: 'number',
|
||||
default: '1',
|
||||
description: 'Extra bloom factor layered on top of glow.'
|
||||
},
|
||||
{
|
||||
name: 'suspendWhenOffscreen',
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
description: 'Pause rendering when the element is not in the viewport.'
|
||||
},
|
||||
{
|
||||
name: 'timeScale',
|
||||
type: 'number',
|
||||
default: '0.5',
|
||||
description: 'Global time multiplier for animations (0=frozen, 1=normal).'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user