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

[ UPDATED ] : Demo Background Content

Browse Source
This commit is contained in:
Utkarsh-Singhal-26
2025-07-18 17:30:23 +05:30
parent ef2aa74f2c
commit 9ac56752bb
9 changed files with 31 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="overflow-hidden demo-container">
<div class="h-[600px] overflow-hidden demo-container">
<Aurora
:color-stops="colorStops"
:amplitude="amplitude"

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

@@ -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>

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

@@ -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-[#271e37] text-[200px]">Balls.</p>
<Ballpit

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

@@ -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>

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

@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="overflow-hidden demo-container">
<div class="h-[600px] overflow-hidden demo-container">
<LetterGlitch
:key="rerenderKey"
:glitch-colors="colors"

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

@@ -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">
<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>

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

@@ -1,7 +1,7 @@
<template>
<TabbedLayout>
<template #preview>
<div class="overflow-hidden demo-container">
<div class="h-[600px] overflow-hidden demo-container">
<Particles
:key="rerenderKey"
:particle-colors="[color]"

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

@@ -2,7 +2,7 @@
<TabbedLayout>
<template #preview>
<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
:squareSize="size"
:speed="speed"

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

@@ -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>