mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
Component Boom
This commit is contained in:
David Haz
90
src/demo/Backgrounds/AuroraDemo.vue
Normal file
90
src/demo/Backgrounds/AuroraDemo.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="aurora-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Aurora :color-stops="colorStops" :amplitude="amplitude" :blend="blend" :speed="speed"
|
||||
:intensity="intensity" class="w-full h-96" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Color Stops
|
||||
</h3>
|
||||
<div class="flex gap-4">
|
||||
<PreviewColor v-for="(color, index) in colorStops" :key="index" :title="`Color ${index + 1}`"
|
||||
:model-value="color" @update:model-value="(value) => updateColorStop(index, value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PreviewSlider title="Amplitude" :model-value="amplitude" @update:model-value="amplitude = $event" :min="0"
|
||||
:max="2" :step="0.1" />
|
||||
|
||||
<PreviewSlider title="Blend" :model-value="blend" @update:model-value="blend = $event" :min="0" :max="1"
|
||||
:step="0.1" />
|
||||
|
||||
<PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="3"
|
||||
:step="0.1" />
|
||||
|
||||
<PreviewSlider title="Intensity" :model-value="intensity" @update:model-value="intensity = $event" :min="0"
|
||||
:max="2" :step="0.1" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="aurora" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="aurora.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 Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue'
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import { aurora } from '@/constants/code/Backgrounds/auroraCode'
|
||||
|
||||
const colorStops = ref(['#171D22', '#7cff67', '#171D22'])
|
||||
const amplitude = ref(1.0)
|
||||
const blend = ref(0.5)
|
||||
const speed = ref(1.0)
|
||||
const intensity = ref(1.0)
|
||||
|
||||
|
||||
const updateColorStop = (index: number, color: string) => {
|
||||
colorStops.value[index] = color
|
||||
}
|
||||
|
||||
const propData = [
|
||||
{ name: 'colorStops', type: 'string[]', default: "['#171D22', '#7cff67', '#171D22']", description: 'Array of color stops for the aurora gradient.' },
|
||||
{ name: 'amplitude', type: 'number', default: '1.0', description: 'Controls the height variation of the aurora effect.' },
|
||||
{ name: 'blend', type: 'number', default: '0.5', description: 'Controls the blending/smoothness of the aurora effect.' },
|
||||
{ name: 'speed', type: 'number', default: '1.0', description: 'Controls the animation speed of the aurora effect.' },
|
||||
{ name: 'intensity', type: 'number', default: '1.0', description: 'Controls the overall intensity/opacity of the aurora effect.' },
|
||||
{ name: 'time', type: 'number', default: 'undefined', description: 'Optional time override for the animation.' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
|
||||
{ name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -3,8 +3,6 @@
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden;">
|
||||
<RefreshButton @refresh="forceRerender" />
|
||||
|
||||
<DotGrid :key="rerenderKey" :dot-size="dotSize" :gap="gap" :base-color="baseColor" :active-color="activeColor"
|
||||
:proximity="proximity" :speed-trigger="speedTrigger" :shock-radius="shockRadius"
|
||||
:shock-strength="shockStrength" :max-speed="maxSpeed" :resistance="resistance"
|
||||
@@ -13,14 +11,8 @@
|
||||
|
||||
<Customize>
|
||||
<div class="color-controls">
|
||||
<div class="color-input">
|
||||
<label>Base Color</label>
|
||||
<input type="color" v-model="baseColor" @change="forceRerender" />
|
||||
</div>
|
||||
<div class="color-input">
|
||||
<label>Active Color</label>
|
||||
<input type="color" v-model="activeColor" @change="forceRerender" />
|
||||
</div>
|
||||
<PreviewColor title="Base Color" v-model="baseColor" @update:model-value="forceRerender" />
|
||||
<PreviewColor title="Active Color" v-model="activeColor" @update:model-value="forceRerender" />
|
||||
</div>
|
||||
|
||||
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1"
|
||||
@@ -68,13 +60,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import RefreshButton from '../../components/common/RefreshButton.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import Dependencies from '../../components/code/Dependencies.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 PreviewColor from '../../components/common/PreviewColor.vue'
|
||||
import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue'
|
||||
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
@@ -120,34 +112,4 @@ const propData = [
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.color-input label {
|
||||
font-size: 0.875rem;
|
||||
color: #a1a1aa;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.color-input input[type="color"] {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-input input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-input input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
91
src/demo/Backgrounds/IridescenceDemo.vue
Normal file
91
src/demo/Backgrounds/IridescenceDemo.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<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" @update:modelValue="forceRerender" />
|
||||
|
||||
<PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude"
|
||||
@update:modelValue="forceRerender" />
|
||||
|
||||
<PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
|
||||
</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, forceRerender } = 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>
|
||||
128
src/demo/Backgrounds/LetterGlitchDemo.vue
Normal file
128
src/demo/Backgrounds/LetterGlitchDemo.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="letter-glitch-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<LetterGlitch
|
||||
:key="rerenderKey"
|
||||
:glitch-colors="colors"
|
||||
:glitch-speed="speed"
|
||||
:center-vignette="showCenterVignette"
|
||||
:outer-vignette="showOuterVignette"
|
||||
:smooth="smooth"
|
||||
class="w-full h-96"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<button
|
||||
@click="randomizeColors"
|
||||
class="px-3 py-2 text-xs bg-[#111] hover:bg-[#222] text-white rounded-lg border border-[#333] transition-colors"
|
||||
>
|
||||
Randomize Colors
|
||||
</button>
|
||||
|
||||
<PreviewSlider
|
||||
title="Glitch Speed"
|
||||
:model-value="speed"
|
||||
@update:model-value="speed = $event"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="5"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Smooth Animation"
|
||||
:model-value="smooth"
|
||||
@update:model-value="updateSmooth"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Show Center Vignette"
|
||||
:model-value="showCenterVignette"
|
||||
@update:model-value="updateCenterVignette"
|
||||
/>
|
||||
|
||||
<PreviewSwitch
|
||||
title="Show Outer Vignette"
|
||||
:model-value="showOuterVignette"
|
||||
@update:model-value="updateOuterVignette"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="letterGlitch" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="letterGlitch.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 Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
|
||||
import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
|
||||
const smooth = ref(true)
|
||||
const speed = ref(10)
|
||||
const colors = ref(['#2b4539', '#61dca3', '#61b3dc'])
|
||||
const showCenterVignette = ref(true)
|
||||
const showOuterVignette = ref(false)
|
||||
|
||||
const { rerenderKey, forceRerender } = useForceRerender()
|
||||
|
||||
const randomHex = () => {
|
||||
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
|
||||
}
|
||||
|
||||
const randomizeColors = () => {
|
||||
colors.value = [randomHex(), randomHex(), randomHex()]
|
||||
forceRerender()
|
||||
}
|
||||
|
||||
const updateSmooth = (value: boolean) => {
|
||||
smooth.value = value
|
||||
forceRerender()
|
||||
}
|
||||
|
||||
const updateCenterVignette = (value: boolean) => {
|
||||
showCenterVignette.value = value
|
||||
forceRerender()
|
||||
}
|
||||
|
||||
const updateOuterVignette = (value: boolean) => {
|
||||
showOuterVignette.value = value
|
||||
forceRerender()
|
||||
}
|
||||
|
||||
const propData = [
|
||||
{ name: 'glitchColors', type: 'string[]', default: "['#2b4539', '#61dca3', '#61b3dc']", description: 'Controls the colors of the letters rendered in the canvas.' },
|
||||
{ name: 'glitchSpeed', type: 'number', default: '50', description: 'Controls the speed at which letters scramble in the animation.' },
|
||||
{ name: 'centerVignette', type: 'boolean', default: 'false', description: 'When true, renders a radial gradient in the center of the container' },
|
||||
{ name: 'outerVignette', type: 'boolean', default: 'true', description: 'When true, renders an inner radial gradient around the edges of the container.' },
|
||||
{ name: 'smooth', type: 'boolean', default: 'true', description: 'When true, smoothens the animation of the letters for a more subtle feel.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
74
src/demo/Backgrounds/LightningDemo.vue
Normal file
74
src/demo/Backgrounds/LightningDemo.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="lightning-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Lightning :hue="hue" :x-offset="xOffset" :speed="speed" :intensity="intensity"
|
||||
:size="size" class="w-full h-96" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Hue" :model-value="hue" @update:model-value="hue = $event" :min="0" :max="360"
|
||||
:step="1" />
|
||||
|
||||
<PreviewSlider title="X Offset" :model-value="xOffset" @update:model-value="xOffset = $event" :min="-2"
|
||||
:max="2" :step="0.1" />
|
||||
|
||||
<PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0.5" :max="2"
|
||||
:step="0.1" />
|
||||
|
||||
<PreviewSlider title="Intensity" :model-value="intensity" @update:model-value="intensity = $event" :min="0.1"
|
||||
:max="2" :step="0.1" />
|
||||
|
||||
<PreviewSlider title="Size" :model-value="size" @update:model-value="size = $event" :min="0.1" :max="3"
|
||||
:step="0.1" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="lightning" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="lightning.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 Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import { lightning } from '@/constants/code/Backgrounds/lightningCode'
|
||||
|
||||
const hue = ref(160)
|
||||
const xOffset = ref(0)
|
||||
const speed = ref(1)
|
||||
const intensity = ref(1)
|
||||
const size = ref(1)
|
||||
|
||||
const propData = [
|
||||
{ name: 'hue', type: 'number', default: '230', description: 'Hue of the lightning in degrees (0 to 360).' },
|
||||
{ name: 'xOffset', type: 'number', default: '0', description: 'Horizontal offset of the lightning in normalized units.' },
|
||||
{ name: 'speed', type: 'number', default: '1', description: 'Animation speed multiplier for the lightning.' },
|
||||
{ name: 'intensity', type: 'number', default: '1', description: 'Brightness multiplier for the lightning.' },
|
||||
{ name: 'size', type: 'number', default: '1', description: 'Scale factor for the bolt size.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
105
src/demo/Backgrounds/ParticlesDemo.vue
Normal file
105
src/demo/Backgrounds/ParticlesDemo.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="particles-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Particles :key="rerenderKey" :particle-colors="[color]" :particle-count="particleCount"
|
||||
:particle-spread="particleSpread" :speed="speed" :particle-base-size="baseSize"
|
||||
:move-particles-on-hover="moveParticlesOnHover" :alpha-particles="alphaParticles"
|
||||
:disable-rotation="disableRotation" class="w-full h-96" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<div class="flex gap-4 items-center">
|
||||
<PreviewColor title="Color" :model-value="color" @update:model-value="updateColor" />
|
||||
</div>
|
||||
|
||||
<PreviewSlider title="Count" :model-value="particleCount" @update:model-value="particleCount = $event"
|
||||
:min="100" :max="1000" :step="100" />
|
||||
|
||||
<PreviewSlider title="Spread" :model-value="particleSpread" @update:model-value="particleSpread = $event"
|
||||
:min="10" :max="100" :step="10" />
|
||||
|
||||
<PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="2"
|
||||
:step="0.1" />
|
||||
|
||||
<PreviewSlider title="Base Size" :model-value="baseSize" @update:model-value="baseSize = $event" :min="100"
|
||||
:max="1000" :step="100" />
|
||||
|
||||
<PreviewSwitch title="Mouse Interaction" :model-value="moveParticlesOnHover"
|
||||
@update:model-value="moveParticlesOnHover = $event" />
|
||||
|
||||
<PreviewSwitch title="Particle Transparency" :model-value="alphaParticles"
|
||||
@update:model-value="alphaParticles = $event" />
|
||||
|
||||
<PreviewSwitch title="Disable Rotation" :model-value="disableRotation"
|
||||
@update:model-value="disableRotation = $event" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="particles" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="particles.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 Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import Particles from '@/content/Backgrounds/Particles/Particles.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue'
|
||||
import { particles } from '@/constants/code/Backgrounds/particlesCode'
|
||||
import { useForceRerender } from '@/composables/useForceRerender'
|
||||
|
||||
const color = ref('#ffffff')
|
||||
const particleCount = ref(200)
|
||||
const particleSpread = ref(10)
|
||||
const speed = ref(0.1)
|
||||
const baseSize = ref(100)
|
||||
const moveParticlesOnHover = ref(true)
|
||||
const alphaParticles = ref(false)
|
||||
const disableRotation = ref(false)
|
||||
|
||||
const { rerenderKey, forceRerender } = useForceRerender()
|
||||
|
||||
const updateColor = (value: string) => {
|
||||
color.value = value
|
||||
forceRerender()
|
||||
}
|
||||
|
||||
const propData = [
|
||||
{ name: 'particleCount', type: 'number', default: '200', description: 'The number of particles to generate.' },
|
||||
{ name: 'particleSpread', type: 'number', default: '10', description: 'Controls how far particles are spread from the center.' },
|
||||
{ name: 'speed', type: 'number', default: '0.1', description: 'Speed factor controlling the animation pace.' },
|
||||
{ name: 'particleColors', type: 'string[]', default: "['#ffffff']", description: 'An array of hex color strings used to color the particles.' },
|
||||
{ name: 'moveParticlesOnHover', type: 'boolean', default: 'false', description: 'Determines if particles should move in response to mouse hover.' },
|
||||
{ name: 'particleHoverFactor', type: 'number', default: '1', description: 'Multiplier for the particle movement when hovering.' },
|
||||
{ name: 'alphaParticles', type: 'boolean', default: 'false', description: 'If true, particles are rendered with varying transparency; otherwise, as solid circles.' },
|
||||
{ name: 'particleBaseSize', type: 'number', default: '100', description: 'The base size of the particles.' },
|
||||
{ name: 'sizeRandomness', type: 'number', default: '1', description: 'Controls the variation in particle sizes (0 means all particles have the same size).' },
|
||||
{ name: 'cameraDistance', type: 'number', default: '20', description: 'Distance from the camera to the particle system.' },
|
||||
{ name: 'disableRotation', type: 'boolean', default: 'false', description: 'If true, stops the particle system from rotating.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
76
src/demo/Backgrounds/SilkDemo.vue
Normal file
76
src/demo/Backgrounds/SilkDemo.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="silk-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Silk :speed="speed" :scale="scale" :color="color" :noise-intensity="noiseIntensity" :rotation="rotation"
|
||||
class="w-full h-96" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="10"
|
||||
:step="0.1" />
|
||||
|
||||
<PreviewSlider title="Scale" :model-value="scale" @update:model-value="scale = $event" :min="0.1" :max="3"
|
||||
:step="0.1" />
|
||||
|
||||
<PreviewSlider title="Noise Intensity" :model-value="noiseIntensity"
|
||||
@update:model-value="noiseIntensity = $event" :min="0" :max="3" :step="0.1" />
|
||||
|
||||
<PreviewSlider title="Rotation" :model-value="rotation" @update:model-value="rotation = $event" :min="0"
|
||||
:max="6.28" :step="0.1" />
|
||||
|
||||
<PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="silk" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="silk.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 Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import Silk from '@/content/Backgrounds/Silk/Silk.vue'
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import { silk } from '@/constants/code/Backgrounds/silkCode'
|
||||
|
||||
const speed = ref(5)
|
||||
const scale = ref(1)
|
||||
const color = ref('#7B7481')
|
||||
const noiseIntensity = ref(1.5)
|
||||
const rotation = ref(0)
|
||||
|
||||
const propData = [
|
||||
{ name: 'speed', type: 'number', default: '5', description: 'Animation speed multiplier' },
|
||||
{ name: 'scale', type: 'number', default: '1', description: 'Scale factor for the pattern' },
|
||||
{ name: 'color', type: 'string', default: "'#7B7481'", description: 'Base color of the silk pattern' },
|
||||
{ name: 'noiseIntensity', type: 'number', default: '1.5', description: 'Intensity of the noise effect' },
|
||||
{ name: 'rotation', type: 'number', default: '0', description: 'Rotation angle in radians' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
|
||||
{ name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
116
src/demo/Backgrounds/SquaresDemo.vue
Normal file
116
src/demo/Backgrounds/SquaresDemo.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative min-h-[200px] demo-container overflow-hidden p-0">
|
||||
<div class="w-full h-[500px] overflow-hidden">
|
||||
<Squares :squareSize="size" :speed="speed" :direction="direction" :borderColor="borderColor"
|
||||
:hoverFillColor="hoverColor" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<div class="flex items-center mb-6">
|
||||
<span class="text-sm mr-2">Direction</span>
|
||||
<div class="flex">
|
||||
<button v-for="dir in directions" :key="dir.value" @click="direction = dir.value" :class="[
|
||||
'px-3 py-2 text-xs h-8 text-white border-r border-[#333] cursor-pointer last:border-r-0',
|
||||
direction === dir.value
|
||||
? 'bg-[#222] hover:bg-[#222]'
|
||||
: 'bg-[#111] hover:bg-[#111]'
|
||||
]" class="first:rounded-l last:rounded-r">
|
||||
{{ dir.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PreviewSlider :min="10" :max="100" :step="1" v-model="size" title="Square Size" />
|
||||
|
||||
<PreviewSlider :min="0.1" :max="2" :step="0.01" v-model="speed" title="Animation Speed" />
|
||||
|
||||
<div class="flex gap-4">
|
||||
<PreviewColor v-model="borderColor" title="Border Color" />
|
||||
|
||||
<PreviewColor v-model="hoverColor" title="Hover Color" />
|
||||
</div>
|
||||
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :codeObject="squares" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation v-bind="squares" />
|
||||
</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 PreviewColor from '../../components/common/PreviewColor.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import Squares from '../../content/Backgrounds/Squares/Squares.vue'
|
||||
import { squares } from '../../constants/code/Backgrounds/squaresCode'
|
||||
|
||||
const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal')
|
||||
const borderColor = ref('#333')
|
||||
const hoverColor = ref('#27FF64')
|
||||
const size = ref(40)
|
||||
const speed = ref(0.5)
|
||||
|
||||
const directions = [
|
||||
{ value: 'diagonal', label: 'Diagonal' },
|
||||
{ value: 'up', label: 'Up' },
|
||||
{ value: 'right', label: 'Right' },
|
||||
{ value: 'down', label: 'Down' },
|
||||
{ value: 'left', label: 'Left' }
|
||||
] as const
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: "direction",
|
||||
type: "string",
|
||||
default: "'right'",
|
||||
description: "Direction of square animation. Options: 'diagonal', 'up', 'right', 'down', 'left'."
|
||||
},
|
||||
{
|
||||
name: "speed",
|
||||
type: "number",
|
||||
default: "1",
|
||||
description: "Animation speed multiplier."
|
||||
},
|
||||
{
|
||||
name: "borderColor",
|
||||
type: "string",
|
||||
default: "'#999'",
|
||||
description: "Color of the square borders."
|
||||
},
|
||||
{
|
||||
name: "squareSize",
|
||||
type: "number",
|
||||
default: "40",
|
||||
description: "Size of individual squares in pixels."
|
||||
},
|
||||
{
|
||||
name: "hoverFillColor",
|
||||
type: "string",
|
||||
default: "'#222'",
|
||||
description: "Fill color when hovering over squares."
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
81
src/demo/Backgrounds/ThreadsDemo.vue
Normal file
81
src/demo/Backgrounds/ThreadsDemo.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative demo-container h-[500px] overflow-hidden p-0">
|
||||
<Threads :amplitude="amplitude" :distance="distance" :enableMouseInteraction="enableMouseInteraction"
|
||||
:color="[1, 1, 1]" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider :min="0" :max="5" :step="0.1" v-model="amplitude" title="Amplitude" />
|
||||
|
||||
<PreviewSlider :min="0" :max="2" :step="0.1" v-model="distance" title="Distance" />
|
||||
|
||||
<PreviewSwitch v-model="enableMouseInteraction" title="Enable Mouse Interaction" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependencyList="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :codeObject="threads" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="threads.cli" />
|
||||
</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 Threads from '../../content/Backgrounds/Threads/Threads.vue'
|
||||
import { threads } from '../../constants/code/Backgrounds/threadsCode'
|
||||
|
||||
const amplitude = ref(1)
|
||||
const distance = ref(0)
|
||||
const enableMouseInteraction = ref(true)
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: "color",
|
||||
type: "[number, number, number]",
|
||||
default: "[1, 1, 1]",
|
||||
description: "Customizes the color of the lines (RGB)."
|
||||
},
|
||||
{
|
||||
name: "amplitude",
|
||||
type: "number",
|
||||
default: "1",
|
||||
description: "Adjusts the intensity of the wave effect on the lines."
|
||||
},
|
||||
{
|
||||
name: "distance",
|
||||
type: "number",
|
||||
default: "0",
|
||||
description: "Controls the spacing between the lines. A value of 0 means no offset."
|
||||
},
|
||||
{
|
||||
name: "enableMouseInteraction",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "Enables smooth mouse hover effects that modulate the line's movement and amplitude."
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
71
src/demo/Backgrounds/WavesDemo.vue
Normal file
71
src/demo/Backgrounds/WavesDemo.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="waves-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-96" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Wave Speed X" :model-value="waveSpeedX" @update:model-value="waveSpeedX = $event"
|
||||
:min="0" :max="0.1" :step="0.01" />
|
||||
|
||||
<div class="flex gap-4 items-center">
|
||||
<PreviewColor title="Waves Color" :model-value="color" @update:model-value="color = $event" />
|
||||
</div>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="waves" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="waves.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 Dependencies from '../../components/code/Dependencies.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import Waves from '@/content/Backgrounds/Waves/Waves.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue'
|
||||
import { waves } from '@/constants/code/Backgrounds/wavesCode'
|
||||
|
||||
const color = ref('#ffffff')
|
||||
const waveSpeedX = ref(0.0125)
|
||||
|
||||
const propData = [
|
||||
{ name: 'lineColor', type: 'string', default: 'black', description: 'Defines the color of the wave lines drawn on the canvas.' },
|
||||
{ name: 'backgroundColor', type: 'string', default: 'transparent', description: 'Sets the background color of the waves container.' },
|
||||
{ name: 'waveSpeedX', type: 'number', default: '0.0125', description: 'Horizontal speed factor for the wave animation.' },
|
||||
{ name: 'waveSpeedY', type: 'number', default: '0.005', description: 'Vertical speed factor for the wave animation.' },
|
||||
{ name: 'waveAmpX', type: 'number', default: '32', description: 'Horizontal amplitude of each wave.' },
|
||||
{ name: 'waveAmpY', type: 'number', default: '16', description: 'Vertical amplitude of each wave.' },
|
||||
{ name: 'xGap', type: 'number', default: '10', description: 'Horizontal gap between individual wave lines.' },
|
||||
{ name: 'yGap', type: 'number', default: '32', description: 'Vertical gap between points on each wave line.' },
|
||||
{ name: 'friction', type: 'number', default: '0.925', description: 'Controls how quickly the cursor effect slows down.' },
|
||||
{ name: 'tension', type: 'number', default: '0.005', description: 'Determines the "springiness" of the cursor effect on points.' },
|
||||
{ name: 'maxCursorMove', type: 'number', default: '100', description: 'Limits how far each point can shift due to cursor movement.' },
|
||||
{ name: 'style', type: 'object', default: '{}', description: 'Inline styles applied to the container element.' },
|
||||
{ name: 'className', type: 'string', default: '""', description: 'Custom class name(s) applied to the container element.' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user