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

Merge pull request #34 from Utkarsh-Singhal-26/feat/demo-content

Browse Source 
[ ADDED ] : Demo Background Content
This commit is contained in:
David
2025-07-18 15:13:35 +03:00
committed by GitHub
parent 818190e097 9ac56752bb
commit 0ad5594b60
19 changed files with 495 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/common/BackgroundContent.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="select-none">
<div
class="right-6 bottom-0 z-10 absolute opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out select-none"
>
<PreviewSwitch title="Demo Content" v-model="showContent" />
</div>
<template v-if="showContent">
<div class="top-[2em] left-0 z-0 absolute w-full h-[60px] pointer-events-none">
<div
class="flex justify-between items-center bg-[rgba(255,255,255,0.05)] backdrop-filter backdrop-blur-[10px] mx-auto my-0 px-6 py-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-[90%] md:w-[60%] h-full"
:style="{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
}"
>
<img :src="logo" alt="Vue Bits Logo" class="rounded-[50px] h-[24px]" />
<div class="md:hidden flex items-center text-white">
<i class="pi pi-bars"></i>
</div>
<div class="hidden md:flex items-center gap-6 font-semibold">
<p class="flex items-center text-[14px] text-white">Home</p>
<p class="flex items-center text-[14px] text-white">Docs</p>
</div>
</div>
</div>
<div
class="top-0 left-0 z-1 absolute flex flex-col justify-center items-center w-full h-full pointer-events-none"
>
<div
class="flex justify-center items-center bg-[rgba(255,244,255,0.05)] backdrop-filter backdrop-blur-[10px] px-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-auto h-[34px] font-medium text-[12px] text-white md:text-[14px]"
:style="{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
}"
>
<span class="flex justify-center items-center" v-html="props.pillIcon"></span>
<p class="ml-1">{{ props.pillText }}</p>
</div>
<p
class="mt-4 max-w-[18ch] font-bold text-[clamp(2rem,4vw,2.6rem)] text-white text-center leading-[1.2] tracking-[-2px]"
:style="{
textShadow: '0 0 16px rgba(0, 0, 0, 0.5)'
}"
>
{{ props.headline }}
</p>
<div class="flex items-center gap-4 mt-8">
<button
class="bg-white hover:bg-gray-100 px-6 md:px-10 py-2 md:py-3 border-none rounded-[50px] font-medium text-[12px] text-black md:text-[14px] transition-all hover:translate-y-[-1px] duration-200 ease-in-out cursor-pointer"
>
{{ props.mainCtaText }}
</button>
<button
class="bg-white/5 hover:bg-white/10 shadow-md backdrop-blur-md px-6 md:px-10 py-2 md:py-3 border border-white/20 rounded-full font-medium text-[12px] text-white/50 md:text-[14px] transition-all hover:-translate-y-0.5 duration-200 cursor-pointer"
:style="{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
}"
>
{{ props.secondCtaText }}
</button>
</div>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import logo from '../../assets/logos/vue-bits-logo.svg';
import PreviewSwitch from './PreviewSwitch.vue';
interface BackgroundContentProps {
pillText?: string;
pillIcon?: string;
headline?: string;
mainCtaText?: string;
secondCtaText?: string;
}
const props = withDefaults(defineProps<BackgroundContentProps>(), {
pillText: 'New Component',
pillIcon: '<i class="pi pi-sliders-h" style="font-size: 10px;"></i>',
headline: 'Explore the depths of creativity',
mainCtaText: 'Get Started',
secondCtaText: 'Learn More'
});
const showContent = ref(true);
</script>

91
src/demo/Backgrounds/AuroraDemo.vue
View File

@@ -1,65 +1,65 @@
<template> <template>
<div class="aurora-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <Aurora
<Aurora :color-stops="colorStops"
:color-stops="colorStops" :amplitude="amplitude"
:amplitude="amplitude" :blend="blend"
:blend="blend" :speed="speed"
:speed="speed" :intensity="intensity"
:intensity="intensity" class="w-full"
class="w-full" />
<BackgroundContent pillText="New Background" headline="Bring the Arctic to you, with one line of code" />
</div>
<Customize>
<div class="flex gap-2">
<PreviewColor
v-for="(_, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
v-model="colorStops[index]"
/> />
</div> </div>
<Customize> <PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
<div class="flex gap-2">
<PreviewColor
v-for="(_, index) in colorStops"
:key="index"
:title="`Color ${index + 1}`"
v-model="colorStops[index]"
/>
</div>
<PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" /> <PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
<PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" /> <PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" /> <PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
</Customize>
<PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" /> <PropTable :data="propData" />
</Customize>
<PropTable :data="propData" /> <Dependencies :dependency-list="['ogl']" />
</template>
<Dependencies :dependency-list="['ogl']" /> <template #code>
</template> <CodeExample :code-object="aurora" />
</template>
<template #code> <template #cli>
<CodeExample :code-object="aurora" /> <CliInstallation :command="aurora.cli" />
</template> </template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="aurora.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <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 PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue'; import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { aurora } from '@/constants/code/Backgrounds/auroraCode'; import { aurora } from '@/constants/code/Backgrounds/auroraCode';
import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
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 PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const colorStops = ref(['#171D22', '#7cff67', '#171D22']); const colorStops = ref(['#171D22', '#7cff67', '#171D22']);
const amplitude = ref(1.0); const amplitude = ref(1.0);
@@ -101,7 +101,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

7
src/demo/Backgrounds/BalatroDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="demo-container"> <div class="h-[600px] overflow-hidden demo-container">
<Balatro <Balatro
:is-rotate="rotate" :is-rotate="rotate"
:mouse-interaction="mouseInteractionEnabled" :mouse-interaction="mouseInteractionEnabled"
@@ -9,7 +9,7 @@
:color1="colorStops[0]" :color1="colorStops[0]"
:color2="colorStops[1]" :color2="colorStops[1]"
:color3="colorStops[2]" :color3="colorStops[2]"
class="h-full w-full" class="w-full h-full"
/> />
</div> </div>
@@ -147,9 +147,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
z-index: 1;
height: 500px;
} }
</style> </style>

6
src/demo/Backgrounds/BallpitDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container"> <div class="relative p-0 h-[600px] overflow-hidden demo-container">
<RefreshButton @click="forceRerender" /> <RefreshButton @click="forceRerender" />
<p class="z-0 absolute font-black text-[#222] text-[140px]">Balls.</p> <p class="z-0 absolute font-black text-[#222] text-[140px]">Balls.</p>
<Ballpit <Ballpit
@@ -14,6 +14,7 @@
:followCursor="followCursor" :followCursor="followCursor"
:colors="colors" :colors="colors"
/> />
<BackgroundContent pillText="New Background" headline="Balls! What's not to like about them?" />
</div> </div>
<Customize> <Customize>
@@ -48,6 +49,7 @@ import { ref, watch } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue'; import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue'; import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue'; import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue'; import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue'; import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'; import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
@@ -60,7 +62,7 @@ import Ballpit from '../../content/Backgrounds/Ballpit/Ballpit.vue';
const { rerenderKey: key, forceRerender } = useForceRerender(); const { rerenderKey: key, forceRerender } = useForceRerender();
const count = ref(100); const count = ref(100);
const gravity = ref(0.5); const gravity = ref(0.01);
const friction = ref(0.9975); const friction = ref(0.9975);
const wallBounce = ref(0.95); const wallBounce = ref(0.95);
const followCursor = ref(false); const followCursor = ref(false);

84
src/demo/Backgrounds/BeamsDemo.vue
View File

@@ -1,66 +1,66 @@
<template> <template>
<div class="beams-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <Beams
<Beams :beam-width="beamWidth"
:beam-width="beamWidth" :beam-height="beamHeight"
:beam-height="beamHeight" :beam-number="beamNumber"
:beam-number="beamNumber" :light-color="lightColor"
:light-color="lightColor" :speed="speed"
:speed="speed" :noise-intensity="noiseIntensity"
:noise-intensity="noiseIntensity" :scale="scale"
:scale="scale" :rotation="rotation"
:rotation="rotation" />
/> <BackgroundContent pillText="New Background" headline="Radiant beams for creative user interfaces" />
</div> </div>
<Customize> <Customize>
<PreviewColor title="Color" v-model="lightColor" /> <PreviewColor title="Color" v-model="lightColor" />
<PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" /> <PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" /> <PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
<PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" /> <PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" /> <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" /> <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
<PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" /> <PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" /> <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['three']" /> <Dependencies :dependency-list="['three']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="beams" /> <CodeExample :code-object="beams" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="beams.cli" /> <CliInstallation :command="beams.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <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 CliInstallation from '@/components/code/CliInstallation.vue';
import CodeExample from '@/components/code/CodeExample.vue'; import CodeExample from '@/components/code/CodeExample.vue';
import Dependencies from '@/components/code/Dependencies.vue';
import Customize from '@/components/common/Customize.vue'; import Customize from '@/components/common/Customize.vue';
import Beams from '@/content/Backgrounds/Beams/Beams.vue';
import PreviewColor from '@/components/common/PreviewColor.vue'; import PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue'; import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PropTable from '@/components/common/PropTable.vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import { beams } from '@/constants/code/Backgrounds/beamsCode'; import { beams } from '@/constants/code/Backgrounds/beamsCode';
import Beams from '@/content/Backgrounds/Beams/Beams.vue';
import { ref } from 'vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
const beamWidth = ref(3); const beamWidth = ref(3);
const beamHeight = ref(30); const beamHeight = ref(30);
@@ -125,8 +125,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
height: 500px;
} }
</style> </style>

112
src/demo/Backgrounds/DotGridDemo.vue
View File

@@ -1,80 +1,80 @@
<template> <template>
<div class="dot-grid-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container" style="height: 500px; overflow: hidden"> <DotGrid
<DotGrid :key="rerenderKey"
:key="rerenderKey" :dot-size="dotSize"
:dot-size="dotSize" :gap="gap"
:gap="gap" :base-color="baseColor"
:base-color="baseColor" :active-color="activeColor"
:active-color="activeColor" :proximity="proximity"
:proximity="proximity" :speed-trigger="speedTrigger"
:speed-trigger="speedTrigger" :shock-radius="shockRadius"
:shock-radius="shockRadius" :shock-strength="shockStrength"
:shock-strength="shockStrength" :max-speed="maxSpeed"
:max-speed="maxSpeed" :resistance="resistance"
:resistance="resistance" :return-duration="returnDuration"
:return-duration="returnDuration" class-name="dot-grid-demo-canvas"
class-name="dot-grid-demo-canvas" />
/> <BackgroundContent pillText="New Background" headline="Organized chaos with every cursor movement!" />
</div>
<Customize>
<div class="flex gap-4 mb-4">
<PreviewColor title="Base Color" v-model="baseColor" />
<PreviewColor title="Active Color" v-model="activeColor" />
</div> </div>
<Customize> <PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
<div class="color-controls">
<PreviewColor title="Base Color" v-model="baseColor" />
<PreviewColor title="Active Color" v-model="activeColor" /> <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
</div>
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" /> <PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" /> <PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
<PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" /> <PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
<PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" /> <PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
<PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" /> <PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
<PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" /> <PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
<PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" /> <PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
</Customize>
<PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" /> <PropTable :data="propData" />
<PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" /> <Dependencies :dependency-list="['gsap']" />
</Customize> </template>
<PropTable :data="propData" /> <template #code>
<CodeExample :code-object="dotGrid" />
</template>
<Dependencies :dependency-list="['gsap']" /> <template #cli>
</template> <CliInstallation :command="dotGrid.cli" />
</template>
<template #code> </TabbedLayout>
<CodeExample :code-object="dotGrid" />
</template>
<template #cli>
<CliInstallation :command="dotGrid.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useForceRerender } from '@/composables/useForceRerender';
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
import { ref } from 'vue'; 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 CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.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 Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewColor from '../../components/common/PreviewColor.vue'; import PreviewColor from '../../components/common/PreviewColor.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue'; import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue';
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
import { useForceRerender } from '@/composables/useForceRerender';
const dotSize = ref(5); const dotSize = ref(5);
const gap = ref(15); const gap = ref(15);
@@ -131,10 +131,4 @@ const propData = [
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.color-controls {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
</style> </style>

7
src/demo/Backgrounds/GridDistortionDemo.vue
View File

@@ -4,16 +4,14 @@
<div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef"> <div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
<GridDistortion <GridDistortion
:key="key" :key="key"
imageSrc="https://picsum.photos/1920/1080?grayscale" imageSrc="https://picsum.photos/1920/1080"
:grid="grid" :grid="grid"
:mouse="mouse" :mouse="mouse"
:strength="0.15" :strength="0.15"
:relaxation="0.9" :relaxation="0.9"
className="grid-distortion" className="grid-distortion"
/> />
<p class="absolute font-black text-8xl text-center pointer-events-none select-none mix-blend-difference"> <BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
Distortion.
</p>
</div> </div>
<Customize> <Customize>
@@ -48,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue'; import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode'; import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode';
import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue'; import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
const { rerenderKey: key, forceRerender } = useForceRerender(); const { rerenderKey: key, forceRerender } = useForceRerender();

3
src/demo/Backgrounds/GridMotionDemo.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="demo-container h-[600px]"> <div class="h-[600px] overflow-hidden demo-container">
<GridMotion :items="images" /> <GridMotion :items="images" />
</div> </div>
@@ -53,6 +53,5 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
<style scoped> <style scoped>
.demo-container { .demo-container {
padding: 0; padding: 0;
overflow: hidden;
} }
</style> </style>

70
src/demo/Backgrounds/HyperspeedDemo.vue
View File

@@ -1,44 +1,43 @@
<template> <template>
<div class="hyperspeed-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden cursor-pointer demo-container">
<div class="demo-container"> <Hyperspeed :effect-options="currentPreset" />
<div class="instruction-text">Click & Hold</div> <BackgroundContent pillText="New Background" headline="Cick & hold to see the real magic of hyperspeed!" />
<Hyperspeed :effect-options="currentPreset" /> </div>
</div>
<Customize> <Customize>
<PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" /> <PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['three', 'postprocessing']" /> <Dependencies :dependency-list="['three', 'postprocessing']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="hyperspeed" /> <CodeExample :code-object="hyperspeed" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="hyperspeed.cli" /> <CliInstallation :command="hyperspeed.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue'; import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
import TabbedLayout from '../../components/common/TabbedLayout.vue'; import { computed, ref } from 'vue';
import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import CliInstallation from '../../components/code/CliInstallation.vue'; import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.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 Customize from '../../components/common/Customize.vue';
import PreviewSelect from '../../components/common/PreviewSelect.vue'; import PreviewSelect from '../../components/common/PreviewSelect.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import Hyperspeed from '../../content/Backgrounds/Hyperspeed/Hyperspeed.vue'; import Hyperspeed from '../../content/Backgrounds/Hyperspeed/Hyperspeed.vue';
import { hyperspeedPresets } from '../../content/Backgrounds/Hyperspeed/HyperspeedPresets'; import { hyperspeedPresets } from '../../content/Backgrounds/Hyperspeed/HyperspeedPresets';
import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
const activePreset = ref<string>('one'); const activePreset = ref<string>('one');
@@ -67,26 +66,7 @@ const options = [
</script> </script>
<style scoped> <style scoped>
.hyperspeed-demo {
width: 100%;
}
.demo-container { .demo-container {
height: 600px;
overflow: hidden;
cursor: pointer;
padding: 0; padding: 0;
} }
.instruction-text {
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
font-weight: 900;
font-size: 4rem;
color: #222;
z-index: 10;
pointer-events: none;
}
</style> </style>

19
src/demo/Backgrounds/IridescenceDemo.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative demo-container h-[500px] p-0 overflow-hidden"> <div class="relative p-0 h-[600px] overflow-hidden demo-container">
<Iridescence :key="key" :speed="speed" :color="colors" :mouseReact="mouseInteraction" :amplitude="amplitude" /> <Iridescence :key="key" :speed="speed" :color="colors" :mouseReact="mouseInteraction" :amplitude="amplitude" />
<BackgroundContent pillText="New Background" headline="Radiant iridescence with customizable colors" />
</div> </div>
<Customize> <Customize>
@@ -36,19 +37,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.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 Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue'; import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'; import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PropTable from '../../components/common/PropTable.vue'; import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue'; import TabbedLayout from '../../components/common/TabbedLayout.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'; import { useForceRerender } from '../../composables/useForceRerender';
import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
const colors = ref<[number, number, number]>([1, 1, 1]); const colors = ref<[number, number, number]>([0.5, 0.6, 0.8]);
const speed = ref(1); const speed = ref(1);
const amplitude = ref(0.1); const amplitude = ref(0.1);
const mouseInteraction = ref(true); const mouseInteraction = ref(true);
@@ -85,7 +87,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

93
src/demo/Backgrounds/LetterGlitchDemo.vue
View File

@@ -1,65 +1,65 @@
<template> <template>
<div class="letter-glitch-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <LetterGlitch
<LetterGlitch :key="rerenderKey"
:key="rerenderKey" :glitch-colors="colors"
:glitch-colors="colors" :glitch-speed="speed"
:glitch-speed="speed" :center-vignette="showCenterVignette"
:center-vignette="showCenterVignette" :outer-vignette="showOuterVignette"
:outer-vignette="showOuterVignette" :smooth="smooth"
:smooth="smooth" class="w-full h-full"
class="w-full h-full" />
/> <BackgroundContent pillText="New Background" headline="Am I finally a real hacker now, mom?" />
</div> </div>
<Customize> <Customize>
<button <button
@click="randomizeColors" @click="randomizeColors"
class="px-3 py-2 text-xs bg-[#111] hover:bg-[#222] text-white rounded-lg border border-[#333] transition-colors" class="bg-[#111] hover:bg-[#222] px-3 py-2 border border-[#333] rounded-lg text-white text-xs transition-colors"
> >
Randomize Colors Randomize Colors
</button> </button>
<PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" /> <PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
<PreviewSwitch title="Smooth Animation" v-model="smooth" /> <PreviewSwitch title="Smooth Animation" v-model="smooth" />
<PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" /> <PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
<PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" /> <PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="[]" /> <Dependencies :dependency-list="[]" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="letterGlitch" /> <CodeExample :code-object="letterGlitch" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="letterGlitch.cli" /> <CliInstallation :command="letterGlitch.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <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 PreviewSlider from '@/components/common/PreviewSlider.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue'; import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
import { useForceRerender } from '@/composables/useForceRerender'; import { useForceRerender } from '@/composables/useForceRerender';
import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
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 PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const smooth = ref(true); const smooth = ref(true);
const speed = ref(10); const speed = ref(10);
@@ -119,7 +119,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

79
src/demo/Backgrounds/LightningDemo.vue
View File

@@ -1,57 +1,57 @@
<template> <template>
<div class="lightning-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <Lightning
<Lightning :hue="hue"
:hue="hue" :x-offset="xOffset"
:x-offset="xOffset" :speed="speed"
:speed="speed" :intensity="intensity"
:intensity="intensity" :size="size"
:size="size" class="w-full h-full"
class="w-full h-full" />
/> <BackgroundContent pillText="New Background" headline="The power of nature's fury, with React Bits!" />
</div> </div>
<Customize> <Customize>
<PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" /> <PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
<PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" /> <PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" /> <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
<PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" /> <PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
<PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" /> <PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="[]" /> <Dependencies :dependency-list="[]" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="lightning" /> <CodeExample :code-object="lightning" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="lightning.cli" /> <CliInstallation :command="lightning.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <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 PreviewSlider from '@/components/common/PreviewSlider.vue';
import { lightning } from '@/constants/code/Backgrounds/lightningCode'; import { lightning } from '@/constants/code/Backgrounds/lightningCode';
import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
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 PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const hue = ref(160); const hue = ref(160);
const xOffset = ref(0); const xOffset = ref(0);
@@ -75,7 +75,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

4
src/demo/Backgrounds/LiquidChromeDemo.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container"> <div class="relative p-0 h-[600px] overflow-hidden demo-container">
<LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" /> <LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" />
<BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
</div> </div>
<Customize> <Customize>
@@ -39,6 +40,7 @@ import { ref, watch } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue'; import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue'; import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue'; import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue'; import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue'; import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'; import PreviewSwitch from '../../components/common/PreviewSwitch.vue';

7
src/demo/Backgrounds/OrbDemo.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative p-0 h-[500px] overflow-hidden demo-container"> <div class="relative p-0 h-[600px] overflow-hidden demo-container">
<Orb <Orb
:hue="debouncedHue" :hue="debouncedHue"
:hoverIntensity="debouncedHoverIntensity" :hoverIntensity="debouncedHoverIntensity"
:rotateOnHover="rotateOnHover" :rotateOnHover="rotateOnHover"
:forceHoverState="forceHoverState" :forceHoverState="forceHoverState"
/> />
<p class="z-0 absolute mb-0 font-black text-[clamp(2rem,2vw,6rem)] mix-blend-difference">Hover.</p> <BackgroundContent pill-text="New Background" headline="This orb is hiding something, try hovering!" />
</div> </div>
<Customize> <Customize>
@@ -40,6 +40,7 @@ import { ref, watch } from 'vue';
import CliInstallation from '../../components/code/CliInstallation.vue'; import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue'; import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue'; import Dependencies from '../../components/code/Dependencies.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue'; import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue'; import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'; import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
@@ -49,7 +50,7 @@ import { orb } from '../../constants/code/Backgrounds/orbCode';
import Orb from '../../content/Backgrounds/Orb/Orb.vue'; import Orb from '../../content/Backgrounds/Orb/Orb.vue';
const hue = ref(100); const hue = ref(100);
const hoverIntensity = ref(0.5); const hoverIntensity = ref(2);
const rotateOnHover = ref(true); const rotateOnHover = ref(true);
const forceHoverState = ref(false); const forceHoverState = ref(false);

81
src/demo/Backgrounds/ParticlesDemo.vue
View File

@@ -1,56 +1,55 @@
<template> <template>
<div class="particles-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <Particles
<Particles :key="rerenderKey"
:key="rerenderKey" :particle-colors="[color]"
:particle-colors="[color]" :particle-count="particleCount"
:particle-count="particleCount" :particle-spread="particleSpread"
:particle-spread="particleSpread" :speed="speed"
:speed="speed" :particle-base-size="baseSize"
:particle-base-size="baseSize" :move-particles-on-hover="moveParticlesOnHover"
:move-particles-on-hover="moveParticlesOnHover" :alpha-particles="alphaParticles"
:alpha-particles="alphaParticles" :disable-rotation="disableRotation"
:disable-rotation="disableRotation" class="w-full h-full"
class="w-full h-full" />
/> <BackgroundContent pillText="New Background" headline="Particles that mimick the dance of the cosmos" />
</div>
<Customize>
<div class="flex items-center gap-4">
<PreviewColor title="Color" v-model="color" />
</div> </div>
<Customize> <PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
<div class="flex gap-4 items-center">
<PreviewColor title="Color" v-model="color" />
</div>
<PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" /> <PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
<PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" /> <PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" /> <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
<PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" /> <PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
<PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" /> <PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
<PreviewSwitch title="Particle Transparency" v-model="alphaParticles" /> <PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
</Customize>
<PreviewSwitch title="Disable Rotation" v-model="disableRotation" /> <PropTable :data="propData" />
</Customize>
<PropTable :data="propData" /> <Dependencies :dependency-list="['ogl']" />
</template>
<Dependencies :dependency-list="['ogl']" /> <template #code>
</template> <CodeExample :code-object="particles" />
</template>
<template #code> <template #cli>
<CodeExample :code-object="particles" /> <CliInstallation :command="particles.cli" />
</template> </template>
</TabbedLayout>
<template #cli>
<CliInstallation :command="particles.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -62,6 +61,7 @@ import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue'; import CodeExample from '../../components/code/CodeExample.vue';
import Customize from '../../components/common/Customize.vue'; import Customize from '../../components/common/Customize.vue';
import Particles from '@/content/Backgrounds/Particles/Particles.vue'; import Particles from '@/content/Backgrounds/Particles/Particles.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue'; import PreviewSlider from '@/components/common/PreviewSlider.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue'; import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import PreviewColor from '@/components/common/PreviewColor.vue'; import PreviewColor from '@/components/common/PreviewColor.vue';
@@ -136,7 +136,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

79
src/demo/Backgrounds/SilkDemo.vue
View File

@@ -1,58 +1,58 @@
<template> <template>
<div class="silk-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="relative h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <Silk
<Silk :speed="speed"
:speed="speed" :scale="scale"
:scale="scale" :color="color"
:color="color" :noise-intensity="noiseIntensity"
:noise-intensity="noiseIntensity" :rotation="rotation"
:rotation="rotation" class="w-full h-full"
class="w-full h-full" />
/> <BackgroundContent pillText="New Background" headline="Silk touch is a good enhancement, Steve!" />
</div> </div>
<Customize> <Customize>
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" /> <PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
<PreviewSlider title="Scale" v-model="scale" :min="0.1" :max="3" :step="0.1" /> <PreviewSlider title="Scale" v-model="scale" :min="0.1" :max="3" :step="0.1" />
<PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="3" :step="0.1" /> <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="3" :step="0.1" />
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="6.28" :step="0.1" /> <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="6.28" :step="0.1" />
<PreviewColor title="Color" v-model="color" /> <PreviewColor title="Color" v-model="color" />
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
<Dependencies :dependency-list="['ogl']" /> <Dependencies :dependency-list="['ogl']" />
</template> </template>
<template #code> <template #code>
<CodeExample :code-object="silk" /> <CodeExample :code-object="silk" />
</template> </template>
<template #cli> <template #cli>
<CliInstallation :command="silk.cli" /> <CliInstallation :command="silk.cli" />
</template> </template>
</TabbedLayout> </TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <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 PreviewColor from '@/components/common/PreviewColor.vue';
import PreviewSlider from '@/components/common/PreviewSlider.vue'; import PreviewSlider from '@/components/common/PreviewSlider.vue';
import { silk } from '@/constants/code/Backgrounds/silkCode'; import { silk } from '@/constants/code/Backgrounds/silkCode';
import Silk from '@/content/Backgrounds/Silk/Silk.vue';
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 PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
const speed = ref(5); const speed = ref(5);
const scale = ref(1); const scale = ref(1);
@@ -73,7 +73,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

23
src/demo/Backgrounds/SquaresDemo.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative min-h-[200px] demo-container overflow-hidden p-0"> <div class="relative p-0 min-h-[200px] overflow-hidden demo-container">
<div class="w-full h-[500px] overflow-hidden"> <div class="w-full h-[600px] overflow-hidden">
<Squares <Squares
:squareSize="size" :squareSize="size"
:speed="speed" :speed="speed"
@@ -10,12 +10,13 @@
:borderColor="borderColor" :borderColor="borderColor"
:hoverFillColor="hoverColor" :hoverFillColor="hoverColor"
/> />
<BackgroundContent pillText="New Background" headline="Customizable squares moving around smoothly" />
</div> </div>
</div> </div>
<Customize> <Customize>
<div class="flex items-center mb-6"> <div class="flex items-center mb-6">
<span class="text-sm mr-2">Direction</span> <span class="mr-2 text-sm">Direction</span>
<div class="flex"> <div class="flex">
<button <button
@@ -59,15 +60,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; 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 CliInstallation from '../../components/code/CliInstallation.vue';
import Squares from '../../content/Backgrounds/Squares/Squares.vue'; import CodeExample from '../../components/code/CodeExample.vue';
import BackgroundContent from '../../components/common/BackgroundContent.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewColor from '../../components/common/PreviewColor.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PropTable from '../../components/common/PropTable.vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import { squares } from '../../constants/code/Backgrounds/squaresCode'; import { squares } from '../../constants/code/Backgrounds/squaresCode';
import Squares from '../../content/Backgrounds/Squares/Squares.vue';
const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal'); const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal');
const borderColor = ref('#333'); const borderColor = ref('#333');
@@ -119,7 +121,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

15
src/demo/Backgrounds/ThreadsDemo.vue
View File

@@ -1,13 +1,14 @@
<template> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative demo-container h-[500px] overflow-hidden p-0"> <div class="relative p-0 h-[600px] overflow-hidden demo-container">
<Threads <Threads
:amplitude="amplitude" :amplitude="amplitude"
:distance="distance" :distance="distance"
:enableMouseInteraction="enableMouseInteraction" :enableMouseInteraction="enableMouseInteraction"
:color="[1, 1, 1]" :color="[1, 1, 1]"
/> />
<BackgroundContent pillText="New Background" headline="Not to be confused with the Threads app by Meta!" />
</div> </div>
<Customize> <Customize>
@@ -35,16 +36,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.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 Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue'; import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'; import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
import PropTable from '../../components/common/PropTable.vue'; import PropTable from '../../components/common/PropTable.vue';
import Dependencies from '../../components/code/Dependencies.vue'; import TabbedLayout from '../../components/common/TabbedLayout.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'; import { threads } from '../../constants/code/Backgrounds/threadsCode';
import Threads from '../../content/Backgrounds/Threads/Threads.vue';
const amplitude = ref(1); const amplitude = ref(1);
const distance = ref(0); const distance = ref(0);
@@ -80,7 +82,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>

47
src/demo/Backgrounds/WavesDemo.vue
View File

@@ -1,33 +1,31 @@
<template> <template>
<div class="waves-demo"> <TabbedLayout>
<TabbedLayout> <template #preview>
<template #preview> <div class="h-[600px] overflow-hidden demo-container">
<div class="demo-container"> <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
<Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" /> </div>
<Customize>
<PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
<div class="flex items-center gap-4">
<PreviewColor title="Waves Color" v-model="color" />
</div> </div>
</Customize>
<Customize> <PropTable :data="propData" />
<PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
<div class="flex gap-4 items-center"> <Dependencies :dependency-list="[]" />
<PreviewColor title="Waves Color" v-model="color" /> </template>
</div>
</Customize>
<PropTable :data="propData" /> <template #code>
<CodeExample :code-object="waves" />
</template>
<Dependencies :dependency-list="[]" /> <template #cli>
</template> <CliInstallation :command="waves.cli" />
</template>
<template #code> </TabbedLayout>
<CodeExample :code-object="waves" />
</template>
<template #cli>
<CliInstallation :command="waves.cli" />
</template>
</TabbedLayout>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -105,7 +103,6 @@ const propData = [
<style scoped> <style scoped>
.demo-container { .demo-container {
overflow: hidden;
padding: 0; padding: 0;
} }
</style> </style>