atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -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> <template>
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="overflow-hidden demo-container"> <div class="h-[600px] overflow-hidden demo-container">
<Aurora <Aurora
:color-stops="colorStops" :color-stops="colorStops"
:amplitude="amplitude" :amplitude="amplitude"

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>

2
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-[#271e37] text-[200px]">Balls.</p> <p class="z-0 absolute font-black text-[#271e37] text-[200px]">Balls.</p>
<Ballpit <Ballpit

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>

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

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

2
src/demo/Backgrounds/LiquidChromeDemo.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">
<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!" /> <BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
</div> </div>

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

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

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

@@ -2,7 +2,7 @@
<TabbedLayout> <TabbedLayout>
<template #preview> <template #preview>
<div class="relative p-0 min-h-[200px] overflow-hidden demo-container"> <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"

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>