From ef2aa74f2c0b6bb542a021f59d83109a70848067 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Fri, 18 Jul 2025 12:27:18 +0530
Subject: [PATCH] [ ADDED ] : Demo Background Content

---
 src/components/common/BackgroundContent.vue |  98 +++++++++++++++++
 src/demo/Backgrounds/AuroraDemo.vue         |  91 ++++++++--------
 src/demo/Backgrounds/BallpitDemo.vue        |   4 +-
 src/demo/Backgrounds/BeamsDemo.vue          |  84 +++++++--------
 src/demo/Backgrounds/DotGridDemo.vue        | 112 +++++++++-----------
 src/demo/Backgrounds/GridDistortionDemo.vue |   7 +-
 src/demo/Backgrounds/HyperspeedDemo.vue     |  70 +++++-------
 src/demo/Backgrounds/IridescenceDemo.vue    |  19 ++--
 src/demo/Backgrounds/LetterGlitchDemo.vue   |  93 ++++++++--------
 src/demo/Backgrounds/LightningDemo.vue      |  79 +++++++-------
 src/demo/Backgrounds/LiquidChromeDemo.vue   |   2 +
 src/demo/Backgrounds/OrbDemo.vue            |   7 +-
 src/demo/Backgrounds/ParticlesDemo.vue      |  81 +++++++-------
 src/demo/Backgrounds/SilkDemo.vue           |  79 +++++++-------
 src/demo/Backgrounds/SquaresDemo.vue        |  21 ++--
 src/demo/Backgrounds/ThreadsDemo.vue        |  15 +--
 16 files changed, 467 insertions(+), 395 deletions(-)
 create mode 100644 src/components/common/BackgroundContent.vue

diff --git a/src/components/common/BackgroundContent.vue b/src/components/common/BackgroundContent.vue
new file mode 100644
index 0000000..7356f37
--- /dev/null
+++ b/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>
diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 406db22..31c819f 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -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="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>
diff --git a/src/demo/Backgrounds/BallpitDemo.vue b/src/demo/Backgrounds/BallpitDemo.vue
index bf93e23..e8db43e 100644
--- a/src/demo/Backgrounds/BallpitDemo.vue
+++ b/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);
diff --git a/src/demo/Backgrounds/BeamsDemo.vue b/src/demo/Backgrounds/BeamsDemo.vue
index adaaa4a..d71f985 100644
--- a/src/demo/Backgrounds/BeamsDemo.vue
+++ b/src/demo/Backgrounds/BeamsDemo.vue
@@ -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>
diff --git a/src/demo/Backgrounds/DotGridDemo.vue b/src/demo/Backgrounds/DotGridDemo.vue
index 8ffa255..2557d69 100644
--- a/src/demo/Backgrounds/DotGridDemo.vue
+++ b/src/demo/Backgrounds/DotGridDemo.vue
@@ -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>
diff --git a/src/demo/Backgrounds/GridDistortionDemo.vue b/src/demo/Backgrounds/GridDistortionDemo.vue
index 208e714..9b609d9 100644
--- a/src/demo/Backgrounds/GridDistortionDemo.vue
+++ b/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">
-          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();
 
diff --git a/src/demo/Backgrounds/HyperspeedDemo.vue b/src/demo/Backgrounds/HyperspeedDemo.vue
index 15dacbc..12b12e5 100644
--- a/src/demo/Backgrounds/HyperspeedDemo.vue
+++ b/src/demo/Backgrounds/HyperspeedDemo.vue
@@ -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>
diff --git a/src/demo/Backgrounds/IridescenceDemo.vue b/src/demo/Backgrounds/IridescenceDemo.vue
index 6d459b6..790955b 100644
--- a/src/demo/Backgrounds/IridescenceDemo.vue
+++ b/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 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>
diff --git a/src/demo/Backgrounds/LetterGlitchDemo.vue b/src/demo/Backgrounds/LetterGlitchDemo.vue
index 6ef15a3..912e94e 100644
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/src/demo/Backgrounds/LetterGlitchDemo.vue
@@ -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="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>
diff --git a/src/demo/Backgrounds/LightningDemo.vue b/src/demo/Backgrounds/LightningDemo.vue
index 73310ac..b135521 100644
--- a/src/demo/Backgrounds/LightningDemo.vue
+++ b/src/demo/Backgrounds/LightningDemo.vue
@@ -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>
diff --git a/src/demo/Backgrounds/LiquidChromeDemo.vue b/src/demo/Backgrounds/LiquidChromeDemo.vue
index 845465e..5b25638 100644
--- a/src/demo/Backgrounds/LiquidChromeDemo.vue
+++ b/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';
diff --git a/src/demo/Backgrounds/OrbDemo.vue b/src/demo/Backgrounds/OrbDemo.vue
index 11dbf88..6ed2421 100644
--- a/src/demo/Backgrounds/OrbDemo.vue
+++ b/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);
 
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index c85e505..2234b2a 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -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="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>
diff --git a/src/demo/Backgrounds/SilkDemo.vue b/src/demo/Backgrounds/SilkDemo.vue
index 672055c..33e522c 100644
--- a/src/demo/Backgrounds/SilkDemo.vue
+++ b/src/demo/Backgrounds/SilkDemo.vue
@@ -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>
diff --git a/src/demo/Backgrounds/SquaresDemo.vue b/src/demo/Backgrounds/SquaresDemo.vue
index cda0e33..fec0806 100644
--- a/src/demo/Backgrounds/SquaresDemo.vue
+++ b/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>
diff --git a/src/demo/Backgrounds/ThreadsDemo.vue b/src/demo/Backgrounds/ThreadsDemo.vue
index 3c11734..8644062 100644
--- a/src/demo/Backgrounds/ThreadsDemo.vue
+++ b/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 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>