[ ADDED ] : Demo Background Content

src/components/common/BackgroundContent.vue

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

src/demo/Backgrounds/AuroraDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="aurora-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="overflow-hidden demo-container">
         <Aurora
           :color-stops="colorStops"
           :amplitude="amplitude"
@@ -11,6 +10,7 @@
           :intensity="intensity"
           class="w-full"
         />
+        <BackgroundContent pillText="New Background" headline="Bring the Arctic to you, with one line of code" />
       </div>
 
       <Customize>
@@ -45,21 +45,21 @@
       <CliInstallation :command="aurora.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import { aurora } from '@/constants/code/Backgrounds/auroraCode';
+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>

src/demo/Backgrounds/BallpitDemo.vue

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

src/demo/Backgrounds/BeamsDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="beams-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <Beams
           :beam-width="beamWidth"
           :beam-height="beamHeight"
@@ -13,6 +12,7 @@
           :scale="scale"
           :rotation="rotation"
         />
+        <BackgroundContent pillText="New Background" headline="Radiant beams for creative user interfaces" />
       </div>
 
       <Customize>
@@ -46,21 +46,21 @@
       <CliInstallation :command="beams.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '@/components/common/TabbedLayout.vue';
-import PropTable from '@/components/common/PropTable.vue';
-import Dependencies from '@/components/code/Dependencies.vue';
 import CliInstallation from '@/components/code/CliInstallation.vue';
 import CodeExample from '@/components/code/CodeExample.vue';
+import 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>

src/demo/Backgrounds/DotGridDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="dot-grid-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container" style="height: 500px; overflow: hidden">
+      <div class="h-[600px] overflow-hidden demo-container">
         <DotGrid
           :key="rerenderKey"
           :dot-size="dotSize"
@@ -18,10 +17,11 @@
           :return-duration="returnDuration"
           class-name="dot-grid-demo-canvas"
         />
+        <BackgroundContent pillText="New Background" headline="Organized chaos with every cursor movement!" />
       </div>
 
       <Customize>
-          <div class="color-controls">
+        <div class="flex gap-4 mb-4">
           <PreviewColor title="Base Color" v-model="baseColor" />
 
           <PreviewColor title="Active Color" v-model="activeColor" />
@@ -59,22 +59,22 @@
       <CliInstallation :command="dotGrid.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </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>

src/demo/Backgrounds/GridDistortionDemo.vue

@@ -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">
+        <BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
-          Distortion.
-        </p>
       </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();
 

src/demo/Backgrounds/HyperspeedDemo.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="hyperspeed-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="h-[600px] overflow-hidden cursor-pointer demo-container">
-          <div class="instruction-text">Click & Hold</div>
         <Hyperspeed :effect-options="currentPreset" />
+        <BackgroundContent pillText="New Background" headline="Cick & hold to see the real magic of hyperspeed!" />
       </div>
 
       <Customize>
@@ -24,21 +23,21 @@
       <CliInstallation :command="hyperspeed.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <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 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>

src/demo/Backgrounds/IridescenceDemo.vue

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

src/demo/Backgrounds/LetterGlitchDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="letter-glitch-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="overflow-hidden demo-container">
         <LetterGlitch
           :key="rerenderKey"
           :glitch-colors="colors"
@@ -12,12 +11,13 @@
           :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"
+          class="bg-[#111] hover:bg-[#222] px-3 py-2 border border-[#333] rounded-lg text-white text-xs transition-colors"
         >
           Randomize Colors
         </button>
@@ -44,22 +44,22 @@
       <CliInstallation :command="letterGlitch.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
-import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
 import { useForceRerender } from '@/composables/useForceRerender';
+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>

src/demo/Backgrounds/LightningDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="lightning-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <Lightning
           :hue="hue"
           :x-offset="xOffset"
@@ -11,6 +10,7 @@
           :size="size"
           class="w-full h-full"
         />
+        <BackgroundContent pillText="New Background" headline="The power of nature's fury, with React Bits!" />
       </div>
 
       <Customize>
@@ -38,20 +38,20 @@
       <CliInstallation :command="lightning.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import { lightning } from '@/constants/code/Backgrounds/lightningCode';
+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>

src/demo/Backgrounds/LiquidChromeDemo.vue

@@ -3,6 +3,7 @@
     <template #preview>
       <div class="relative p-0 h-[500px] 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';

src/demo/Backgrounds/OrbDemo.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);
 

src/demo/Backgrounds/ParticlesDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="particles-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="overflow-hidden demo-container">
         <Particles
           :key="rerenderKey"
           :particle-colors="[color]"
@@ -15,10 +14,11 @@
           :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 gap-4 items-center">
+        <div class="flex items-center gap-4">
           <PreviewColor title="Color" v-model="color" />
         </div>
 
@@ -50,7 +50,6 @@
       <CliInstallation :command="particles.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </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>

src/demo/Backgrounds/SilkDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="silk-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container">
+      <div class="relative h-[600px] overflow-hidden demo-container">
         <Silk
           :speed="speed"
           :scale="scale"
@@ -11,6 +10,7 @@
           :rotation="rotation"
           class="w-full h-full"
         />
+        <BackgroundContent pillText="New Background" headline="Silk touch is a good enhancement, Steve!" />
       </div>
 
       <Customize>
@@ -38,21 +38,21 @@
       <CliInstallation :command="silk.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import Silk from '@/content/Backgrounds/Silk/Silk.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import { silk } from '@/constants/code/Backgrounds/silkCode';
+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>

src/demo/Backgrounds/SquaresDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <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">
           <Squares
             :squareSize="size"
@@ -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>

src/demo/Backgrounds/ThreadsDemo.vue

@@ -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 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 '../../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>