mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
Merge pull request #34 from Utkarsh-Singhal-26/feat/demo-content
[ ADDED ] : Demo Background Content
This commit is contained in:
David
GitHub
98
src/components/common/BackgroundContent.vue
Normal file
98
src/components/common/BackgroundContent.vue
Normal 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>
|
||||
@@ -1,65 +1,65 @@
|
||||
<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"
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<Aurora
|
||||
:color-stops="colorStops"
|
||||
:amplitude="amplitude"
|
||||
:blend="blend"
|
||||
:speed="speed"
|
||||
:intensity="intensity"
|
||||
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>
|
||||
|
||||
<Customize>
|
||||
<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="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" />
|
||||
</Customize>
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="aurora" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="aurora" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="aurora.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="aurora.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</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';
|
||||
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 amplitude = ref(1.0);
|
||||
@@ -101,7 +101,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<Balatro
|
||||
:is-rotate="rotate"
|
||||
:mouse-interaction="mouseInteractionEnabled"
|
||||
@@ -9,7 +9,7 @@
|
||||
:color1="colorStops[0]"
|
||||
:color2="colorStops[1]"
|
||||
:color3="colorStops[2]"
|
||||
class="h-full w-full"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -147,9 +147,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<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" />
|
||||
<p class="z-0 absolute font-black text-[#222] text-[140px]">Balls.</p>
|
||||
<Ballpit
|
||||
@@ -14,6 +14,7 @@
|
||||
:followCursor="followCursor"
|
||||
:colors="colors"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="Balls! What's not to like about them?" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
@@ -48,6 +49,7 @@ import { ref, watch } 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 PreviewSlider from '../../components/common/PreviewSlider.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 count = ref(100);
|
||||
const gravity = ref(0.5);
|
||||
const gravity = ref(0.01);
|
||||
const friction = ref(0.9975);
|
||||
const wallBounce = ref(0.95);
|
||||
const followCursor = ref(false);
|
||||
|
||||
@@ -1,66 +1,66 @@
|
||||
<template>
|
||||
<div class="beams-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Beams
|
||||
:beam-width="beamWidth"
|
||||
:beam-height="beamHeight"
|
||||
:beam-number="beamNumber"
|
||||
:light-color="lightColor"
|
||||
:speed="speed"
|
||||
:noise-intensity="noiseIntensity"
|
||||
:scale="scale"
|
||||
:rotation="rotation"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<Beams
|
||||
:beam-width="beamWidth"
|
||||
:beam-height="beamHeight"
|
||||
:beam-number="beamNumber"
|
||||
:light-color="lightColor"
|
||||
:speed="speed"
|
||||
:noise-intensity="noiseIntensity"
|
||||
:scale="scale"
|
||||
:rotation="rotation"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="Radiant beams for creative user interfaces" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Color" v-model="lightColor" />
|
||||
<Customize>
|
||||
<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" />
|
||||
</Customize>
|
||||
<PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="beams" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="beams" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="beams.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="beams.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</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 Dependencies from '@/components/code/Dependencies.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import Beams from '@/content/Backgrounds/Beams/Beams.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 { 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 beamHeight = ref(30);
|
||||
@@ -125,8 +125,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
<template>
|
||||
<div class="dot-grid-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container" style="height: 500px; overflow: hidden">
|
||||
<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"
|
||||
:return-duration="returnDuration"
|
||||
class-name="dot-grid-demo-canvas"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<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"
|
||||
:return-duration="returnDuration"
|
||||
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>
|
||||
|
||||
<Customize>
|
||||
<div class="color-controls">
|
||||
<PreviewColor title="Base Color" v-model="baseColor" />
|
||||
<PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
|
||||
|
||||
<PreviewColor title="Active Color" v-model="activeColor" />
|
||||
</div>
|
||||
<PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
|
||||
|
||||
<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" />
|
||||
</Customize>
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<template #code>
|
||||
<CodeExample :code-object="dotGrid" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="['gsap']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="dotGrid" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="dotGrid.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="dotGrid.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
|
||||
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 Dependencies from '../../components/code/Dependencies.vue';
|
||||
import BackgroundContent from '../../components/common/BackgroundContent.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.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 '@/constants/code/Backgrounds/dotGridCode';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
|
||||
const dotSize = ref(5);
|
||||
const gap = ref(15);
|
||||
@@ -131,10 +131,4 @@ const propData = [
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.color-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,16 +4,14 @@
|
||||
<div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
|
||||
<GridDistortion
|
||||
:key="key"
|
||||
imageSrc="https://picsum.photos/1920/1080?grayscale"
|
||||
imageSrc="https://picsum.photos/1920/1080"
|
||||
:grid="grid"
|
||||
:mouse="mouse"
|
||||
:strength="0.15"
|
||||
:relaxation="0.9"
|
||||
className="grid-distortion"
|
||||
/>
|
||||
<p class="absolute font-black text-8xl text-center pointer-events-none select-none mix-blend-difference">
|
||||
Distortion.
|
||||
</p>
|
||||
<BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
@@ -48,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode';
|
||||
import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue';
|
||||
import BackgroundContent from '../../components/common/BackgroundContent.vue';
|
||||
|
||||
const { rerenderKey: key, forceRerender } = useForceRerender();
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[600px]">
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<GridMotion :items="images" />
|
||||
</div>
|
||||
|
||||
@@ -53,6 +53,5 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,44 +1,43 @@
|
||||
<template>
|
||||
<div class="hyperspeed-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<div class="instruction-text">Click & Hold</div>
|
||||
<Hyperspeed :effect-options="currentPreset" />
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden cursor-pointer demo-container">
|
||||
<Hyperspeed :effect-options="currentPreset" />
|
||||
<BackgroundContent pillText="New Background" headline="Cick & hold to see the real magic of hyperspeed!" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
|
||||
</Customize>
|
||||
<Customize>
|
||||
<PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['three', 'postprocessing']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['three', 'postprocessing']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="hyperspeed" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="hyperspeed" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="hyperspeed.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="hyperspeed.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
|
||||
import { computed, ref } from 'vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import BackgroundContent from '../../components/common/BackgroundContent.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import Hyperspeed from '../../content/Backgrounds/Hyperspeed/Hyperspeed.vue';
|
||||
import { hyperspeedPresets } from '../../content/Backgrounds/Hyperspeed/HyperspeedPresets';
|
||||
import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
|
||||
|
||||
const activePreset = ref<string>('one');
|
||||
|
||||
@@ -67,26 +66,7 @@ const options = [
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hyperspeed-demo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
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>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<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" />
|
||||
<BackgroundContent pillText="New Background" headline="Radiant iridescence with customizable colors" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
@@ -36,19 +37,20 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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 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 TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
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 amplitude = ref(0.1);
|
||||
const mouseInteraction = ref(true);
|
||||
@@ -85,7 +87,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,65 +1,65 @@
|
||||
<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-full"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<LetterGlitch
|
||||
:key="rerenderKey"
|
||||
:glitch-colors="colors"
|
||||
:glitch-speed="speed"
|
||||
:center-vignette="showCenterVignette"
|
||||
:outer-vignette="showOuterVignette"
|
||||
:smooth="smooth"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="Am I finally a real hacker now, mom?" />
|
||||
</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>
|
||||
<Customize>
|
||||
<button
|
||||
@click="randomizeColors"
|
||||
class="bg-[#111] hover:bg-[#222] px-3 py-2 border border-[#333] rounded-lg text-white text-xs transition-colors"
|
||||
>
|
||||
Randomize Colors
|
||||
</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" />
|
||||
</Customize>
|
||||
<PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="letterGlitch" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="letterGlitch" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="letterGlitch.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="letterGlitch.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</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';
|
||||
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 speed = ref(10);
|
||||
@@ -119,7 +119,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
<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-full"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<Lightning
|
||||
:hue="hue"
|
||||
:x-offset="xOffset"
|
||||
:speed="speed"
|
||||
:intensity="intensity"
|
||||
:size="size"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="The power of nature's fury, with React Bits!" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
|
||||
<Customize>
|
||||
<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" />
|
||||
</Customize>
|
||||
<PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="lightning" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="lightning" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="lightning.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="lightning.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</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';
|
||||
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 xOffset = ref(0);
|
||||
@@ -75,7 +75,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<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" />
|
||||
<BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
@@ -39,6 +40,7 @@ import { ref, watch } 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 PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<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
|
||||
:hue="debouncedHue"
|
||||
:hoverIntensity="debouncedHoverIntensity"
|
||||
:rotateOnHover="rotateOnHover"
|
||||
: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>
|
||||
|
||||
<Customize>
|
||||
@@ -40,6 +40,7 @@ import { ref, watch } 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 PreviewSlider from '../../components/common/PreviewSlider.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';
|
||||
|
||||
const hue = ref(100);
|
||||
const hoverIntensity = ref(0.5);
|
||||
const hoverIntensity = ref(2);
|
||||
const rotateOnHover = ref(true);
|
||||
const forceHoverState = ref(false);
|
||||
|
||||
|
||||
@@ -1,56 +1,55 @@
|
||||
<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-full"
|
||||
/>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden 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-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>
|
||||
|
||||
<Customize>
|
||||
<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="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" />
|
||||
</Customize>
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="particles" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="particles" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="particles.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="particles.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -62,6 +61,7 @@ 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 BackgroundContent from '../../components/common/BackgroundContent.vue';
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue';
|
||||
@@ -136,7 +136,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
<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-full"
|
||||
/>
|
||||
</div>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative h-[600px] overflow-hidden demo-container">
|
||||
<Silk
|
||||
:speed="speed"
|
||||
:scale="scale"
|
||||
:color="color"
|
||||
:noise-intensity="noiseIntensity"
|
||||
:rotation="rotation"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="Silk touch is a good enhancement, Steve!" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
|
||||
<Customize>
|
||||
<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" />
|
||||
</Customize>
|
||||
<PreviewColor title="Color" v-model="color" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
<Dependencies :dependency-list="['ogl']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="silk" />
|
||||
</template>
|
||||
<template #code>
|
||||
<CodeExample :code-object="silk" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="silk.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="silk.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</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';
|
||||
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 scale = ref(1);
|
||||
@@ -73,7 +73,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="relative min-h-[200px] demo-container overflow-hidden p-0">
|
||||
<div class="w-full h-[500px] overflow-hidden">
|
||||
<div class="relative p-0 min-h-[200px] overflow-hidden demo-container">
|
||||
<div class="w-full h-[600px] overflow-hidden">
|
||||
<Squares
|
||||
:squareSize="size"
|
||||
:speed="speed"
|
||||
@@ -10,12 +10,13 @@
|
||||
:borderColor="borderColor"
|
||||
:hoverFillColor="hoverColor"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="Customizable squares moving around smoothly" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<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">
|
||||
<button
|
||||
@@ -59,15 +60,16 @@
|
||||
|
||||
<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 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 '../../content/Backgrounds/Squares/Squares.vue';
|
||||
|
||||
const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal');
|
||||
const borderColor = ref('#333');
|
||||
@@ -119,7 +121,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<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
|
||||
:amplitude="amplitude"
|
||||
:distance="distance"
|
||||
:enableMouseInteraction="enableMouseInteraction"
|
||||
:color="[1, 1, 1]"
|
||||
/>
|
||||
<BackgroundContent pillText="New Background" headline="Not to be confused with the Threads app by Meta!" />
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
@@ -35,16 +36,17 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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 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 TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import { threads } from '../../constants/code/Backgrounds/threadsCode';
|
||||
import Threads from '../../content/Backgrounds/Threads/Threads.vue';
|
||||
|
||||
const amplitude = ref(1);
|
||||
const distance = ref(0);
|
||||
@@ -80,7 +82,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,33 +1,31 @@
|
||||
<template>
|
||||
<div class="waves-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="h-[600px] overflow-hidden demo-container">
|
||||
<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>
|
||||
</Customize>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<div class="flex gap-4 items-center">
|
||||
<PreviewColor title="Waves Color" v-model="color" />
|
||||
</div>
|
||||
</Customize>
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<template #code>
|
||||
<CodeExample :code-object="waves" />
|
||||
</template>
|
||||
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="waves" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="waves.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
<template #cli>
|
||||
<CliInstallation :command="waves.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -105,7 +103,6 @@ const propData = [
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user