From 07ce88d997f5e84fd3231b10a594c3cb57ed4c2d Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Mon, 14 Jul 2025 21:09:53 +0300
Subject: [PATCH] Simplify demo components

---
 .../code/Animations/imageTrailCode.ts         |   1 -
 .../TextAnimations/TrueFocus/TrueFocus.vue    |   2 +-
 src/css/category.css                          |  17 --
 src/demo/Animations/AnimatedContentDemo.vue   | 223 ++++++++---------
 src/demo/Animations/BlobCursorDemo.vue        |   2 +-
 src/demo/Animations/ClickSparkDemo.vue        | 172 ++++++-------
 src/demo/Animations/CountUpDemo.vue           |  86 ++++---
 src/demo/Animations/CubesDemo.vue             |   2 +-
 src/demo/Animations/FadeContentDemo.vue       | 130 +++++-----
 src/demo/Animations/GlareHoverDemo.vue        |  86 +++----
 src/demo/Animations/ImageTrailDemo.vue        |  10 +-
 src/demo/Animations/MagnetDemo.vue            | 106 ++++----
 src/demo/Animations/MagnetLinesDemo.vue       |  30 ++-
 src/demo/Animations/MetaBallsDemo.vue         |   2 +-
 src/demo/Animations/MetallicPaintDemo.vue     | 147 +++++------
 src/demo/Animations/NoiseDemo.vue             |  40 ++-
 src/demo/Animations/PixelTransitionDemo.vue   | 116 +++++----
 src/demo/Animations/RibbonsDemo.vue           |  94 +++----
 src/demo/Animations/SplashCursorDemo.vue      |  52 ++--
 src/demo/Components/CardSwapDemo.vue          | 236 +++++++++---------
 src/demo/Components/CarouselDemo.vue          | 104 ++++----
 src/demo/Components/CircularGalleryDemo.vue   | 120 +++++----
 src/demo/Components/DecayCardDemo.vue         |  44 ++--
 src/demo/Components/DockDemo.vue              | 166 ++++++------
 src/demo/Components/ElasticSliderDemo.vue     |  67 +++--
 src/demo/Components/FlowingMenuDemo.vue       |  32 ++-
 src/demo/Components/FlyingPostersDemo.vue     | 160 ++++++------
 src/demo/Components/GlassIconsDemo.vue        |  36 ++-
 src/demo/Components/GooeyNavDemo.vue          | 106 ++++----
 src/demo/Components/InfiniteScrollDemo.vue    |  74 +++---
 src/demo/Components/MasonryDemo.vue           | 149 ++++++-----
 src/demo/Components/PixelCardDemo.vue         |  56 ++---
 src/demo/Components/ProfileCardDemo.vue       |  80 +++---
 src/demo/Components/SpotlightCardDemo.vue     |  70 +++---
 src/demo/Components/TiltedCardDemo.vue        |  80 +++---
 src/demo/TextAnimations/AsciiTextDemo.vue     | 136 +++++-----
 src/demo/TextAnimations/BlurTextDemo.vue      | 154 ++++++------
 src/demo/TextAnimations/CircularTextDemo.vue  |  82 +++---
 src/demo/TextAnimations/CurvedLoopDemo.vue    | 120 +++++----
 src/demo/TextAnimations/DecryptedTextDemo.vue | 200 ++++++++-------
 src/demo/TextAnimations/FallingTextDemo.vue   | 102 ++++----
 src/demo/TextAnimations/FuzzyTextDemo.vue     | 122 +++++----
 src/demo/TextAnimations/GlitchTextDemo.vue    |  64 +++--
 src/demo/TextAnimations/GradientTextDemo.vue  |  12 -
 src/demo/TextAnimations/RotatingTextDemo.vue  |   2 +-
 src/demo/TextAnimations/ScrambleTextDemo.vue  | 100 ++++----
 src/demo/TextAnimations/ScrollRevealDemo.vue  |   3 +-
 src/demo/TextAnimations/ShinyTextDemo.vue     |  70 +++---
 src/demo/TextAnimations/SplitTextDemo.vue     | 118 +++++----
 src/demo/TextAnimations/TextCursorDemo.vue    |  90 ++++---
 src/demo/TextAnimations/TextPressureDemo.vue  | 216 ++++++++--------
 src/demo/TextAnimations/TextTrailDemo.vue     | 118 +++++----
 src/demo/TextAnimations/TrueFocusDemo.vue     | 100 ++++----
 53 files changed, 2254 insertions(+), 2453 deletions(-)

diff --git a/src/constants/code/Animations/imageTrailCode.ts b/src/constants/code/Animations/imageTrailCode.ts
index 0721cc6..4d601a5 100644
--- a/src/constants/code/Animations/imageTrailCode.ts
+++ b/src/constants/code/Animations/imageTrailCode.ts
@@ -7,7 +7,6 @@ export const imageTrail: CodeObject = {
   usage: `<template>
   <div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
     <ImageTrail
-        :key="key"
         :items="[
             'https://picsum.photos/id/287/300/300',
             'https://picsum.photos/id/1001/300/300',
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index 609aecf..6e1acfd 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -120,7 +120,7 @@ onUnmounted(() => {
       v-for="(word, index) in words"
       :key="index"
       :ref="el => setWordRef(el as HTMLSpanElement, index)"
-      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
+      class="relative font-black text-7xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
       :style="{
         filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
         '--border-color': borderColor,
diff --git a/src/css/category.css b/src/css/category.css
index 3ad5893..7adb575 100644
--- a/src/css/category.css
+++ b/src/css/category.css
@@ -139,23 +139,6 @@ div:has(> .props-table) {
   margin-top: 4em;
 }
 
-.rotating-text-demo-container {
-  white-space: pre;
-  font-size: clamp(2rem, 6vw, 6rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.rotating-text-demo-container .rotating-text-demo {
-  display: inline-block;
-  color: #0b0b0b;
-  background-color: #27ff64;
-  padding: 0 0.4em;
-  border-radius: 15px;
-  transition: width 0.3s ease;
-}
-
 .ballpit-demo {
   position: relative;
 }
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index ebd93c5..bf827ef 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -1,133 +1,128 @@
 <template>
-  <div class="animated-content-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative py-6 overflow-hidden">
-          <RefreshButton @click="forceRerender" />
-
-          <div :key="key" class="flex justify-center items-center">
-            <AnimatedContent
-              :direction="direction"
-              :delay="delay"
-              :distance="distance"
-              :reverse="reverse"
-              :duration="duration"
-              :ease="ease"
-              :initial-opacity="initialOpacity"
-              :animate-opacity="animateOpacity"
-              :scale="scale"
-              :threshold="threshold"
-              @complete="() => console.log('✅ Animation Complete!')"
-            >
-              <div class="demo-content">
-                <h4>Animated Content</h4>
-
-                <p>It will animate in when it enters the viewport.</p>
-              </div>
-            </AnimatedContent>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <RefreshButton @click="forceRerender" />
+        <AnimatedContent
+          :direction="direction"
+          :delay="delay"
+          :distance="distance"
+          :reverse="reverse"
+          :duration="duration"
+          :ease="ease"
+          :initial-opacity="initialOpacity"
+          :animate-opacity="animateOpacity"
+          :scale="scale"
+          :threshold="threshold"
+          :key="key"
+          @complete="() => console.log('✅ Animation Complete!')"
+        >
+          <div class="demo-content">
+            <h4>Animated Content</h4>
+            <p>It will animate in when it enters the viewport.</p>
           </div>
-        </div>
+        </AnimatedContent>
+      </div>
 
-        <Customize>
-          <PreviewSelect
-            title="Animation Direction"
-            v-model="direction"
-            :options="directionOptions"
-            @update:model-value="
-              val => {
-                direction = val as 'vertical' | 'horizontal';
-                forceRerender();
-              }
-            "
-          />
+      <Customize>
+        <PreviewSelect
+          title="Animation Direction"
+          v-model="direction"
+          :options="directionOptions"
+          @update:model-value="
+            val => {
+              direction = val as 'vertical' | 'horizontal';
+              forceRerender();
+            }
+          "
+        />
 
-          <PreviewSelect
-            title="Easing Function"
-            v-model="ease"
-            :options="easeOptions"
-            @update:model-value="
-              val => {
-                ease = val as string;
-                forceRerender();
-              }
-            "
-          />
+        <PreviewSelect
+          title="Easing Function"
+          v-model="ease"
+          :options="easeOptions"
+          @update:model-value="
+            val => {
+              ease = val as string;
+              forceRerender();
+            }
+          "
+        />
 
-          <PreviewSlider
-            title="Distance"
-            v-model="distance"
-            :min="50"
-            :max="300"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Distance"
+          v-model="distance"
+          :min="50"
+          :max="300"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Duration"
-            v-model="duration"
-            :min="0.1"
-            :max="3"
-            :step="0.1"
-            value-unit="s"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Duration"
+          v-model="duration"
+          :min="0.1"
+          :max="3"
+          :step="0.1"
+          value-unit="s"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Delay"
-            v-model="delay"
-            :min="0"
-            :max="2"
-            :step="0.1"
-            value-unit="s"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Delay"
+          v-model="delay"
+          :min="0"
+          :max="2"
+          :step="0.1"
+          value-unit="s"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Initial Opacity"
-            v-model="initialOpacity"
-            :min="0"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Initial Opacity"
+          v-model="initialOpacity"
+          :min="0"
+          :max="1"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Initial Scale"
-            v-model="scale"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Initial Scale"
+          v-model="scale"
+          :min="0.1"
+          :max="2"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Threshold"
-            v-model="threshold"
-            :min="0.1"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Threshold"
+          v-model="threshold"
+          :min="0.1"
+          :max="1"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
-        </Customize>
+        <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="animatedContent" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="animatedContent" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="animatedContent.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="animatedContent.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/BlobCursorDemo.vue b/src/demo/Animations/BlobCursorDemo.vue
index 0425f16..a051f78 100644
--- a/src/demo/Animations/BlobCursorDemo.vue
+++ b/src/demo/Animations/BlobCursorDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative h-[400px] overflow-hidden demo-container">
+      <div class="demo-container h-[400px]">
         <BlobCursor
           :blobType="blobType"
           :fillColor="fillColor"
diff --git a/src/demo/Animations/ClickSparkDemo.vue b/src/demo/Animations/ClickSparkDemo.vue
index 5e68022..4990dde 100644
--- a/src/demo/Animations/ClickSparkDemo.vue
+++ b/src/demo/Animations/ClickSparkDemo.vue
@@ -1,88 +1,86 @@
 <template>
-  <div class="click-spark-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <ClickSpark
-            :key="rerenderKey"
-            :spark-color="sparkColor"
-            :spark-size="sparkSize"
-            :spark-radius="sparkRadius"
-            :spark-count="sparkCount"
-            :duration="duration"
-            :easing="easing"
-            :extra-scale="extraScale"
-            class="click-spark-demo-area"
-          ></ClickSpark>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <ClickSpark
+          :key="rerenderKey"
+          :spark-color="sparkColor"
+          :spark-size="sparkSize"
+          :spark-radius="sparkRadius"
+          :spark-count="sparkCount"
+          :duration="duration"
+          :easing="easing"
+          :extra-scale="extraScale"
+          class="click-spark-demo-area"
+        ></ClickSpark>
 
-          <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
-          >
-            Click Around!
-          </div>
+        <div
+          class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+        >
+          Click Around!
         </div>
+      </div>
 
-        <Customize>
-          <PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Spark Size"
-            v-model="sparkSize"
-            :min="5"
-            :max="30"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Spark Size"
+          v-model="sparkSize"
+          :min="5"
+          :max="30"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Spark Radius"
-            v-model="sparkRadius"
-            :min="10"
-            :max="50"
-            :step="5"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Spark Radius"
+          v-model="sparkRadius"
+          :min="10"
+          :max="50"
+          :step="5"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Spark Count"
-            v-model="sparkCount"
-            :min="4"
-            :max="20"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Spark Count"
+          v-model="sparkCount"
+          :min="4"
+          :max="20"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Duration (ms)"
-            v-model="duration"
-            :min="200"
-            :max="1000"
-            :step="50"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Duration (ms)"
+          v-model="duration"
+          :min="200"
+          :max="1000"
+          :step="50"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Extra Scale"
-            v-model="extraScale"
-            :min="0.5"
-            :max="2"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Extra Scale"
+          v-model="extraScale"
+          :min="0.5"
+          :max="2"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="clickSpark" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="clickSpark" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="clickSpark.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="clickSpark.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -124,36 +122,18 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 400px;
+}
+
 .click-spark-demo-area {
   position: absolute;
   width: 100%;
-  height: 100%;
+  height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   cursor: pointer;
 }
-
-.demo-text {
-  text-align: center;
-  pointer-events: none;
-  user-select: none;
-}
-
-.demo-text h3 {
-  font-size: 1.2rem;
-  color: #fff;
-  margin-bottom: 0.5rem;
-}
-
-.demo-text p {
-  font-size: 0.9rem;
-  color: #999;
-  margin: 0;
-}
-
-.demo-content {
-  padding: 2rem;
-}
 </style>
diff --git a/src/demo/Animations/CountUpDemo.vue b/src/demo/Animations/CountUpDemo.vue
index f266efb..9a44c03 100644
--- a/src/demo/Animations/CountUpDemo.vue
+++ b/src/demo/Animations/CountUpDemo.vue
@@ -1,57 +1,55 @@
 <template>
-  <div class="count-up-demo">
-    <TabbedLayout>
-      <template #preview>
-        <h2 class="demo-title-extra">Default</h2>
+  <TabbedLayout>
+    <template #preview>
+      <h2 class="demo-title-extra">Default</h2>
 
-        <div class="demo-container relative">
-          <CountUp
-            :key="keyDefault"
-            :from="0"
-            :to="100"
-            separator=","
-            direction="up"
-            :duration="1"
-            class-name="count-up-text"
-          />
+      <div class="demo-container relative">
+        <CountUp
+          :key="keyDefault"
+          :from="0"
+          :to="100"
+          separator=","
+          direction="up"
+          :duration="1"
+          class-name="count-up-text"
+        />
 
-          <RefreshButton @click="forceRerenderDefault" />
-        </div>
+        <RefreshButton @click="forceRerenderDefault" />
+      </div>
 
-        <h2 class="demo-title-extra">Start Programatically</h2>
+      <h2 class="demo-title-extra">Start Programatically</h2>
 
-        <div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
-          <button
-            class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
-            @click="setStartCounting(true)"
-          >
-            Count to 500!
-          </button>
+      <div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
+        <button
+          class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
+          @click="setStartCounting(true)"
+        >
+          Count to 500!
+        </button>
 
-          <CountUp
-            :key="keyProgramatically"
-            :from="100"
-            :to="500"
-            :start-when="startCounting"
-            :duration="5"
-            class-name="count-up-text"
-          />
+        <CountUp
+          :key="keyProgramatically"
+          :from="100"
+          :to="500"
+          :start-when="startCounting"
+          :duration="5"
+          class-name="count-up-text"
+        />
 
-          <RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" />
-        </div>
+        <RefreshButton v-if="startCounting" @click="forceRerenderProgramatically" />
+      </div>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="countup" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="countup" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="countup.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="countup.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/CubesDemo.vue b/src/demo/Animations/CubesDemo.vue
index ac4c71b..5072814 100644
--- a/src/demo/Animations/CubesDemo.vue
+++ b/src/demo/Animations/CubesDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative demo-container h-[650px] overflow-hidden">
+      <div class="demo-container h-[650px]">
         <Cubes
           :borderStyle="borderStyle"
           :gridSize="gridSize"
diff --git a/src/demo/Animations/FadeContentDemo.vue b/src/demo/Animations/FadeContentDemo.vue
index 8bfe129..b7fa5ac 100644
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -1,80 +1,78 @@
 <template>
-  <div class="fade-content-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <RefreshButton @refresh="forceRerender" />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <RefreshButton @refresh="forceRerender" />
 
-          <FadeContent
-            :key="rerenderKey"
-            :blur="blur"
-            :duration="duration"
-            :delay="delay"
-            :threshold="threshold"
-            :initial-opacity="initialOpacity"
-            :easing="easing"
-            class="fade-content-demo-content"
-          >
-            <div class="demo-content">
-              <h4>Fade Content</h4>
+        <FadeContent
+          :key="rerenderKey"
+          :blur="blur"
+          :duration="duration"
+          :delay="delay"
+          :threshold="threshold"
+          :initial-opacity="initialOpacity"
+          :easing="easing"
+          class="fade-content-demo-content"
+        >
+          <div class="demo-content">
+            <h4>Fade Content</h4>
 
-              <p>It will fade in when it enters the viewport.</p>
-            </div>
-          </FadeContent>
-        </div>
+            <p>It will fade in when it enters the viewport.</p>
+          </div>
+        </FadeContent>
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Duration (ms)"
-            v-model="duration"
-            :min="100"
-            :max="3000"
-            :step="100"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Duration (ms)"
+          v-model="duration"
+          :min="100"
+          :max="3000"
+          :step="100"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Delay (ms)"
-            v-model="delay"
-            :min="0"
-            :max="1000"
-            :step="50"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Delay (ms)"
+          v-model="delay"
+          :min="0"
+          :max="1000"
+          :step="50"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Threshold"
-            v-model="threshold"
-            :min="0.1"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Threshold"
+          v-model="threshold"
+          :min="0.1"
+          :max="1"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Initial Opacity"
-            v-model="initialOpacity"
-            :min="0"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Initial Opacity"
+          v-model="initialOpacity"
+          :min="0"
+          :max="1"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="fadeContent" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="fadeContent" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="fadeContent.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="fadeContent.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/GlareHoverDemo.vue b/src/demo/Animations/GlareHoverDemo.vue
index b66ae2c..6f42cc1 100644
--- a/src/demo/Animations/GlareHoverDemo.vue
+++ b/src/demo/Animations/GlareHoverDemo.vue
@@ -1,57 +1,53 @@
 <template>
-  <div class="glare-hover-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[600px] overflow-hidden">
-          <div class="flex justify-center items-center h-full">
-            <GlareHover
-              background="#111"
-              border-color="#222"
-              border-radius="20px"
-              width="400px"
-              height="300px"
-              :glare-color="glareColor"
-              :glare-opacity="glareOpacity"
-              :glare-size="glareSize"
-              :transition-duration="transitionDuration"
-              :play-once="playOnce"
-            >
-              <div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
-            </GlareHover>
-          </div>
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container min-h-[400px]">
+        <GlareHover
+          background="#111"
+          border-color="#222"
+          border-radius="20px"
+          width="400px"
+          height="300px"
+          :glare-color="glareColor"
+          :glare-opacity="glareOpacity"
+          :glare-size="glareSize"
+          :transition-duration="transitionDuration"
+          :play-once="playOnce"
+        >
+          <div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
+        </GlareHover>
+      </div>
 
-        <Customize>
-          <PreviewColor title="Glare Color" v-model="glareColor" />
+      <Customize>
+        <PreviewColor title="Glare Color" v-model="glareColor" />
 
-          <PreviewSlider title="Glare Opacity" v-model="glareOpacity" :min="0" :max="1" :step="0.1" />
+        <PreviewSlider title="Glare Opacity" v-model="glareOpacity" :min="0" :max="1" :step="0.1" />
 
-          <PreviewSlider title="Glare Size" v-model="glareSize" :min="100" :max="500" :step="25" value-unit="%" />
+        <PreviewSlider title="Glare Size" v-model="glareSize" :min="100" :max="500" :step="25" value-unit="%" />
 
-          <PreviewSlider
-            title="Transition Duration"
-            v-model="transitionDuration"
-            :min="200"
-            :max="2000"
-            :step="50"
-            value-unit="ms"
-          />
+        <PreviewSlider
+          title="Transition Duration"
+          v-model="transitionDuration"
+          :min="200"
+          :max="2000"
+          :step="50"
+          value-unit="ms"
+        />
 
-          <PreviewSwitch title="Play Once" v-model="playOnce" />
-        </Customize>
+        <PreviewSwitch title="Play Once" v-model="playOnce" />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="glareHover" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="glareHover" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="glareHover.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="glareHover.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/ImageTrailDemo.vue b/src/demo/Animations/ImageTrailDemo.vue
index 30f247d..3ba9c47 100644
--- a/src/demo/Animations/ImageTrailDemo.vue
+++ b/src/demo/Animations/ImageTrailDemo.vue
@@ -1,11 +1,11 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+      <div class="demo-container h-[500px] overflow-hidden">
         <ImageTrail :key="key" :items="items" :variant="variant" />
 
         <div class="absolute flex flex-col justify-center items-center">
-          <p class="mb-0 font-black text-[#271E37] text-[clamp(2rem,6vw,6rem)]">Hover Me.</p>
+          <p class="mb-0 font-black text-[#333] text-[clamp(2rem,6vw,6rem)]">Hover Me.</p>
           <p class="mt-0 font-black text-[#a6a6a6] text-[18px]">Variant {{ variant }}</p>
         </div>
       </div>
@@ -13,7 +13,7 @@
       <Customize>
         <div class="inline-flex gap-2" role="group">
           <button
-            class="bg-[#271E37] px-3 border border-[#271E37] h-8 font-bold text-white text-xs cursor-not-allowed"
+            class="bg-[#0b0b0b] rounded px-3 border border-[#333] h-8 font-bold text-white text-xs cursor-not-allowed"
             disabled
           >
             Variant
@@ -23,8 +23,8 @@
             v-for="num in 8"
             :key="num"
             :class="[
-              'text-xs h-8 px-3 border border-[#271E37] font-bold',
-              variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0D0716]'
+              'text-xs h-8 px-3 border border-[#333] font-bold rounded cursor-pointer hover:bg-[#222] transition-colors',
+              variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0b0b0b]'
             ]"
             @click="
               () => {
diff --git a/src/demo/Animations/MagnetDemo.vue b/src/demo/Animations/MagnetDemo.vue
index f171907..cef343f 100644
--- a/src/demo/Animations/MagnetDemo.vue
+++ b/src/demo/Animations/MagnetDemo.vue
@@ -1,67 +1,65 @@
 <template>
-  <div class="magnet-demo">
-    <TabbedLayout>
-      <template #preview>
-        <h2 class="demo-title-extra">Container</h2>
+  <TabbedLayout>
+    <template #preview>
+      <h2 class="demo-title-extra">Container</h2>
 
-        <div class="demo-container">
-          <Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
-            <div class="magnet-container">Hover Me!</div>
-          </Magnet>
-        </div>
+      <div class="demo-container">
+        <Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
+          <div class="magnet-container">Hover Me!</div>
+        </Magnet>
+      </div>
 
-        <h2 class="demo-title-extra">Link</h2>
+      <h2 class="demo-title-extra">Link</h2>
 
-        <div class="demo-container">
-          <Magnet
-            :key="rerenderKey + 1"
-            :padding="Math.floor(padding / 2)"
-            :disabled="disabled"
-            :magnetStrength="magnetStrength"
-          >
-            <a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
-              Star
-              <span class="accent">Vue Bits</span>
-              on GitHub!
-            </a>
-          </Magnet>
-        </div>
+      <div class="demo-container">
+        <Magnet
+          :key="rerenderKey + 1"
+          :padding="Math.floor(padding / 2)"
+          :disabled="disabled"
+          :magnetStrength="magnetStrength"
+        >
+          <a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noreferrer" class="magnet-link">
+            Star
+            <span class="accent">Vue Bits</span>
+            on GitHub!
+          </a>
+        </Magnet>
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Padding"
-            v-model="padding"
-            :min="0"
-            :max="300"
-            :step="10"
-            value-unit="px"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Padding"
+          v-model="padding"
+          :min="0"
+          :max="300"
+          :step="10"
+          value-unit="px"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Strength"
-            v-model="magnetStrength"
-            :min="1"
-            :max="10"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Strength"
+          v-model="magnetStrength"
+          :min="1"
+          :max="10"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="magnet" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="magnet" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="magnet.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="magnet.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/MagnetLinesDemo.vue b/src/demo/Animations/MagnetLinesDemo.vue
index a0d4087..46d3094 100644
--- a/src/demo/Animations/MagnetLinesDemo.vue
+++ b/src/demo/Animations/MagnetLinesDemo.vue
@@ -1,23 +1,21 @@
 <template>
-  <div class="magnet-lines-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container overflow-hidden flex justify-center pb-4 items-center">
-          <MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
+      </div>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="magnetLines" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="magnetLines" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="magnetLines.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="magnetLines.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/MetaBallsDemo.vue b/src/demo/Animations/MetaBallsDemo.vue
index a4f1480..d547fcf 100644
--- a/src/demo/Animations/MetaBallsDemo.vue
+++ b/src/demo/Animations/MetaBallsDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative h-[500px] overflow-hidden demo-container">
+      <div class="demo-container h-[500px]">
         <MetaBalls
           :color="color"
           :cursorBallColor="color"
diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
index 969ddc4..5d73edb 100644
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -1,91 +1,82 @@
 <template>
-  <div class="metallic-paint-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden">
-          <MetallicPaint
-            v-if="imageData"
-            :key="rerenderKey"
-            :image-data="imageData"
-            :params="{
-              edge,
-              patternBlur,
-              patternScale,
-              refraction,
-              speed,
-              liquid
-            }"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[500px] overflow-hidden">
+        <MetallicPaint
+          v-if="imageData"
+          :key="rerenderKey"
+          :image-data="imageData"
+          :params="{
+            edge,
+            patternBlur,
+            patternScale,
+            refraction,
+            speed,
+            liquid
+          }"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Edge"
-            v-model="edge"
-            :min="0"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Pattern Scale"
-            v-model="patternScale"
-            :min="1"
-            :max="5"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Pattern Scale"
+          v-model="patternScale"
+          :min="1"
+          :max="5"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Pattern Blur"
-            v-model="patternBlur"
-            :min="0"
-            :max="0.1"
-            :step="0.001"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Pattern Blur"
+          v-model="patternBlur"
+          :min="0"
+          :max="0.1"
+          :step="0.001"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Refraction"
-            v-model="refraction"
-            :min="0"
-            :max="0.1"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Refraction"
+          v-model="refraction"
+          :min="0"
+          :max="0.1"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Liquid"
-            v-model="liquid"
-            :min="0"
-            :max="1"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Liquid"
+          v-model="liquid"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Speed"
-            v-model="speed"
-            :min="0"
-            :max="1"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Speed"
+          v-model="speed"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="metallicPaint" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="metallicPaint" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="metallicPaint.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="metallicPaint.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/NoiseDemo.vue b/src/demo/Animations/NoiseDemo.vue
index dc9757c..bbed28a 100644
--- a/src/demo/Animations/NoiseDemo.vue
+++ b/src/demo/Animations/NoiseDemo.vue
@@ -1,29 +1,27 @@
 <template>
-  <div>
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container h-[400px] overflow-hidden">
-          <div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
-          <Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container overflow-hidden h-[400px]">
+        <div class="text-[#27FF64] text-[6rem] font-extrabold text-center opacity-50">Ooh, edgy!</div>
+        <Noise :pattern-alpha="patternAlpha" :mix-blend-mode="mixBlendMode" />
+      </div>
 
-        <Customize>
-          <PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
-          <PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
-        </Customize>
+      <Customize>
+        <PreviewSlider title="Noise Alpha" v-model="patternAlpha" :min="0" :max="100" :step="5" />
+        <PreviewSelect title="Mix Blend Mode" v-model="mixBlendMode" :options="blendModeOptions" />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="noise" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="noise" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="noise.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="noise.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/PixelTransitionDemo.vue b/src/demo/Animations/PixelTransitionDemo.vue
index 29bd6a8..a83125e 100644
--- a/src/demo/Animations/PixelTransitionDemo.vue
+++ b/src/demo/Animations/PixelTransitionDemo.vue
@@ -1,74 +1,70 @@
 <template>
-  <div class="pixel-transition-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div
-          class="demo-container flex flex-col items-center justify-center min-h-[400px] max-h-[400px] relative overflow-hidden"
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container min-h-[400px]">
+        <PixelTransition
+          :key="key"
+          :grid-size="gridSize"
+          :pixel-color="pixelColor"
+          :animation-step-duration="animationStepDuration"
+          class-name="custom-pixel-card"
         >
-          <PixelTransition
-            :key="key"
-            :grid-size="gridSize"
-            :pixel-color="pixelColor"
-            :animation-step-duration="animationStepDuration"
-            class-name="custom-pixel-card"
-          >
-            <template #firstContent>
-              <img
-                src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
-                alt="Default"
-                style="width: 100%; height: 100%; object-fit: cover"
-              />
-            </template>
+          <template #firstContent>
+            <img
+              src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
+              alt="Default"
+              style="width: 100%; height: 100%; object-fit: cover"
+            />
+          </template>
 
-            <template #secondContent>
-              <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111">
-                <p style="font-weight: 900; font-size: 3rem; color: #fff">Meow!</p>
-              </div>
-            </template>
-          </PixelTransition>
+          <template #secondContent>
+            <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111">
+              <p style="font-weight: 900; font-size: 3rem; color: #fff">Meow!</p>
+            </div>
+          </template>
+        </PixelTransition>
 
-          <div class="mt-2 text-[#a6a6a6]">Psst, hover the card!</div>
-        </div>
+        <div class="mt-2 absolute bottom-[2em] text-[#a6a6a6]">Psst, hover the image!</div>
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Grid Size"
-            v-model="gridSize"
-            :min="2"
-            :max="50"
-            :step="1"
-            @update:model-value="forceRerender"
-            width="200"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Grid Size"
+          v-model="gridSize"
+          :min="2"
+          :max="50"
+          :step="1"
+          @update:model-value="forceRerender"
+          width="200"
+        />
 
-          <PreviewSlider
-            title="Animation Duration"
-            v-model="animationStepDuration"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-            value-unit="s"
-            @update:model-value="forceRerender"
-            width="200"
-          />
+        <PreviewSlider
+          title="Animation Duration"
+          v-model="animationStepDuration"
+          :min="0.1"
+          :max="2"
+          :step="0.1"
+          value-unit="s"
+          @update:model-value="forceRerender"
+          width="200"
+        />
 
-          <PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
-        </Customize>
+        <PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="pixelTransition" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="pixelTransition" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="pixelTransition.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="pixelTransition.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Animations/RibbonsDemo.vue b/src/demo/Animations/RibbonsDemo.vue
index 08f21a1..752e699 100644
--- a/src/demo/Animations/RibbonsDemo.vue
+++ b/src/demo/Animations/RibbonsDemo.vue
@@ -1,61 +1,59 @@
 <template>
-  <div class="ribbons-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="height: 500px; position: relative">
-          <div class="hover-text">Hover Me.</div>
-          <Ribbons
-            :base-thickness="baseThickness"
-            :colors="colors"
-            :speed-multiplier="speedMultiplier"
-            :max-age="maxAge"
-            :enable-fade="enableFade"
-            :enable-shader-effect="enableWaves"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <div class="hover-text">Hover Me.</div>
+        <Ribbons
+          :base-thickness="baseThickness"
+          :colors="colors"
+          :speed-multiplier="speedMultiplier"
+          :max-age="maxAge"
+          :enable-fade="enableFade"
+          :enable-shader-effect="enableWaves"
+        />
+      </div>
+
+      <Customize>
+        <div class="count-controls">
+          <span class="count-label">Count</span>
+          <button @click="removeColor" :disabled="colors.length <= 1" class="count-button">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+          </button>
+          <span class="count-value">{{ colors.length }}</span>
+          <button @click="addColor" :disabled="colors.length >= 10" class="count-button">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+          </button>
         </div>
 
-        <Customize>
-          <div class="count-controls">
-            <span class="count-label">Count</span>
-            <button @click="removeColor" :disabled="colors.length <= 1" class="count-button">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-            </button>
-            <span class="count-value">{{ colors.length }}</span>
-            <button @click="addColor" :disabled="colors.length >= 10" class="count-button">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-              </svg>
-            </button>
-          </div>
+        <PreviewSlider title="Thickness" v-model="baseThickness" :min="1" :max="60" :step="1" />
 
-          <PreviewSlider title="Thickness" v-model="baseThickness" :min="1" :max="60" :step="1" />
+        <PreviewSlider title="Speed" v-model="speedMultiplier" :min="0.3" :max="0.7" :step="0.01" />
 
-          <PreviewSlider title="Speed" v-model="speedMultiplier" :min="0.3" :max="0.7" :step="0.01" />
+        <PreviewSlider title="Max Age" v-model="maxAge" :min="300" :max="1000" :step="100" />
 
-          <PreviewSlider title="Max Age" v-model="maxAge" :min="300" :max="1000" :step="100" />
+        <PreviewSwitch title="Enable Fade" v-model="enableFade" />
 
-          <PreviewSwitch title="Enable Fade" v-model="enableFade" />
+        <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
+      </Customize>
 
-          <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
-        </Customize>
+      <PropTable :data="propData" />
 
-        <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
 
-        <Dependencies :dependency-list="['ogl']" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="ribbons" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="ribbons" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="ribbons.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="ribbons.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -180,6 +178,8 @@ const propData = [
 }
 
 .demo-container {
+  position: relative;
+  height: 500px;
   padding: 0;
   overflow: hidden;
 }
diff --git a/src/demo/Animations/SplashCursorDemo.vue b/src/demo/Animations/SplashCursorDemo.vue
index f3776c9..707b47c 100644
--- a/src/demo/Animations/SplashCursorDemo.vue
+++ b/src/demo/Animations/SplashCursorDemo.vue
@@ -1,38 +1,36 @@
 <template>
-  <div class="splash-cursor-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <span class="text-6xl text-center text-[#222] font-black select-none">Move Your Cursor</span>
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <span class="text-6xl text-center text-[#333] font-black select-none">Move Your Cursor</span>
+      </div>
 
-        <Customize>
-          <PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" />
+      <Customize>
+        <PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" />
 
-          <PreviewSlider title="Density Dissipation" v-model="densityDissipation" :min="1" :max="10" :step="0.5" />
+        <PreviewSlider title="Density Dissipation" v-model="densityDissipation" :min="1" :max="10" :step="0.5" />
 
-          <PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" />
-        </Customize>
+        <PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="splashCursor" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="splashCursor" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="splashCursor.cli" />
-      </template>
-    </TabbedLayout>
+    <template #cli>
+      <CliInstallation :command="splashCursor.cli" />
+    </template>
+  </TabbedLayout>
 
-    <SplashCursor
-      :key="rerenderKey"
-      :SIM_RESOLUTION="simResolution"
-      :DENSITY_DISSIPATION="densityDissipation"
-      :SPLAT_FORCE="splatForce"
-    />
-  </div>
+  <SplashCursor
+    :key="rerenderKey"
+    :SIM_RESOLUTION="simResolution"
+    :DENSITY_DISSIPATION="densityDissipation"
+    :SPLAT_FORCE="splatForce"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/CardSwapDemo.vue b/src/demo/Components/CardSwapDemo.vue
index aae9e0c..87b1570 100644
--- a/src/demo/Components/CardSwapDemo.vue
+++ b/src/demo/Components/CardSwapDemo.vue
@@ -1,131 +1,129 @@
 <template>
-  <div class="card-swap-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
-          <div
-            class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4"
-          >
-            <h2 class="text-2xl md:text-3xl lg:text-4xl mb-4 font-medium leading-tight pl-0 lg:pl-24">
-              Card stacks have never
-              <span class="inline lg:block">looked so good</span>
-            </h2>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
+        <div
+          class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4"
+        >
+          <h2 class="text-2xl md:text-3xl lg:text-4xl mb-4 font-medium leading-tight pl-0 lg:pl-24">
+            Card stacks have never
+            <span class="inline lg:block">looked so good</span>
+          </h2>
 
-            <p class="text-lg lg:text-xl mb-4 font-normal leading-tight text-gray-400 pl-0 lg:pl-24">
-              Just look at it go!
-            </p>
-          </div>
-
-          <div class="w-full lg:w-1/2 h-full lg:h-full relative">
-            <CardSwap
-              :key="rerenderKey"
-              :width="500"
-              :height="400"
-              :card-distance="cardDistance"
-              :vertical-distance="verticalDistance"
-              :delay="delay"
-              :skew-amount="skewAmount"
-              :easing="easing"
-              :pause-on-hover="pauseOnHover"
-              @card-click="handleCardClick"
-            >
-              <template #card-0>
-                <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
-                  <div class="m-2 flex items-center">
-                    <i class="pi pi-circle-fill mr-2"></i>
-
-                    <span>Smooth</span>
-                  </div>
-                </div>
-
-                <div class="relative p-2">
-                  <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
-                    <source
-                      src="https://cdn.dribbble.com/userupload/7053861/file/original-7956be57144058795db6bb24875bdab9.mp4"
-                      type="video/mp4"
-                    />
-                    Your browser does not support the video tag.
-                  </video>
-                </div>
-              </template>
-
-              <template #card-1>
-                <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
-                  <div class="m-2 flex items-center">
-                    <i class="pi pi-code mr-2"></i>
-
-                    <span>Reliable</span>
-                  </div>
-                </div>
-
-                <div class="relative p-2">
-                  <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
-                    <source
-                      src="https://cdn.dribbble.com/userupload/7078020/file/original-b071e9063d9e3ba86a85a61b9d5a7c42.mp4"
-                      type="video/mp4"
-                    />
-                    Your browser does not support the video tag.
-                  </video>
-                </div>
-              </template>
-
-              <template #card-2>
-                <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
-                  <div class="m-2 flex items-center">
-                    <i class="pi pi-sliders-h mr-2"></i>
-
-                    <span>Customizable</span>
-                  </div>
-                </div>
-
-                <div class="relative p-2">
-                  <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
-                    <source
-                      src="https://cdn.dribbble.com/userupload/7098541/file/original-0b063b12ca835421580e6034368ad95a.mp4"
-                      type="video/mp4"
-                    />
-                    Your browser does not support the video tag.
-                  </video>
-                </div>
-              </template>
-            </CardSwap>
-          </div>
+          <p class="text-lg lg:text-xl mb-4 font-normal leading-tight text-gray-400 pl-0 lg:pl-24">
+            Just look at it go!
+          </p>
         </div>
 
-        <Customize>
-          <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" @update:model-value="forceRerender" />
-
-          <PreviewSlider title="Card Distance" v-model="cardDistance" :min="30" :max="100" :step="5" />
-
-          <PreviewSlider title="Vertical Distance" v-model="verticalDistance" :min="40" :max="120" :step="5" />
-
-          <PreviewSlider title="Delay (ms)" v-model="delay" :min="3000" :max="8000" :step="500" />
-
-          <PreviewSlider title="Skew Amount" v-model="skewAmount" :min="0" :max="12" :step="1" />
-
-          <button
-            class="text-xs bg-[#111] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors"
-            @click="toggleEasing"
+        <div class="w-full lg:w-1/2 h-full lg:h-full relative">
+          <CardSwap
+            :key="rerenderKey"
+            :width="500"
+            :height="400"
+            :card-distance="cardDistance"
+            :vertical-distance="verticalDistance"
+            :delay="delay"
+            :skew-amount="skewAmount"
+            :easing="easing"
+            :pause-on-hover="pauseOnHover"
+            @card-click="handleCardClick"
           >
-            Easing:
-            <span class="text-zinc-400">&nbsp;{{ easing }}</span>
-          </button>
-        </Customize>
+            <template #card-0>
+              <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+                <div class="m-2 flex items-center">
+                  <i class="pi pi-circle-fill mr-2"></i>
 
-        <PropTable :data="propData" />
+                  <span>Smooth</span>
+                </div>
+              </div>
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+              <div class="relative p-2">
+                <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
+                  <source
+                    src="https://cdn.dribbble.com/userupload/7053861/file/original-7956be57144058795db6bb24875bdab9.mp4"
+                    type="video/mp4"
+                  />
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            </template>
 
-      <template #code>
-        <CodeExample :code-object="cardSwap" />
-      </template>
+            <template #card-1>
+              <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+                <div class="m-2 flex items-center">
+                  <i class="pi pi-code mr-2"></i>
 
-      <template #cli>
-        <CliInstallation :command="cardSwap.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+                  <span>Reliable</span>
+                </div>
+              </div>
+
+              <div class="relative p-2">
+                <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
+                  <source
+                    src="https://cdn.dribbble.com/userupload/7078020/file/original-b071e9063d9e3ba86a85a61b9d5a7c42.mp4"
+                    type="video/mp4"
+                  />
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            </template>
+
+            <template #card-2>
+              <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+                <div class="m-2 flex items-center">
+                  <i class="pi pi-sliders-h mr-2"></i>
+
+                  <span>Customizable</span>
+                </div>
+              </div>
+
+              <div class="relative p-2">
+                <video autoplay loop muted playsinline class="rounded-[15px] w-full h-full">
+                  <source
+                    src="https://cdn.dribbble.com/userupload/7098541/file/original-0b063b12ca835421580e6034368ad95a.mp4"
+                    type="video/mp4"
+                  />
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            </template>
+          </CardSwap>
+        </div>
+      </div>
+
+      <Customize>
+        <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" @update:model-value="forceRerender" />
+
+        <PreviewSlider title="Card Distance" v-model="cardDistance" :min="30" :max="100" :step="5" />
+
+        <PreviewSlider title="Vertical Distance" v-model="verticalDistance" :min="40" :max="120" :step="5" />
+
+        <PreviewSlider title="Delay (ms)" v-model="delay" :min="3000" :max="8000" :step="500" />
+
+        <PreviewSlider title="Skew Amount" v-model="skewAmount" :min="0" :max="12" :step="1" />
+
+        <button
+          class="text-xs bg-[#111] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-8 px-3 transition-colors"
+          @click="toggleEasing"
+        >
+          Easing:
+          <span class="text-zinc-400">&nbsp;{{ easing }}</span>
+        </button>
+      </Customize>
+
+      <PropTable :data="propData" />
+
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="cardSwap" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="cardSwap.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/CarouselDemo.vue b/src/demo/Components/CarouselDemo.vue
index 17c72f9..590c158 100644
--- a/src/demo/Components/CarouselDemo.vue
+++ b/src/demo/Components/CarouselDemo.vue
@@ -1,67 +1,65 @@
 <template>
-  <div class="carousel-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
-          <Carousel
-            :key="rerenderKey"
-            :base-width="width"
-            :autoplay="autoplay"
-            :autoplay-delay="autoplayDelay"
-            :pause-on-hover="pauseOnHover"
-            :loop="loop"
-            :round="round"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
+        <Carousel
+          :key="rerenderKey"
+          :base-width="width"
+          :autoplay="autoplay"
+          :autoplay-delay="autoplayDelay"
+          :pause-on-hover="pauseOnHover"
+          :loop="loop"
+          :round="round"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Width"
-            v-model="width"
-            :min="250"
-            :max="330"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Width"
+          v-model="width"
+          :min="250"
+          :max="330"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Delay"
-            v-model="autoplayDelay"
-            :min="1000"
-            :max="4000"
-            :step="1000"
-            :disabled="!autoplay"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Delay"
+          v-model="autoplayDelay"
+          :min="1000"
+          :max="4000"
+          :step="1000"
+          :disabled="!autoplay"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSwitch
-            title="Pause On Hover"
-            v-model="pauseOnHover"
-            :disabled="!autoplay"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSwitch
+          title="Pause On Hover"
+          v-model="pauseOnHover"
+          :disabled="!autoplay"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="carousel" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="carousel" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="carousel.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="carousel.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
index 5e69fcd..a4d9245 100644
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -1,75 +1,73 @@
 <template>
-  <div class="circular-gallery-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container h-[500px] p-0 overflow-hidden">
-          <CircularGallery
-            :key="rerenderKey"
-            :bend="bend"
-            :border-radius="borderRadius"
-            :scroll-speed="scrollSpeed"
-            :scroll-ease="scrollEase"
-            :text-color="textColor"
-            :font="font"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[500px]">
+        <CircularGallery
+          :key="rerenderKey"
+          :bend="bend"
+          :border-radius="borderRadius"
+          :scroll-speed="scrollSpeed"
+          :scroll-ease="scrollEase"
+          :text-color="textColor"
+          :font="font"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Bend Level"
-            v-model="bend"
-            :min="-10"
-            :max="10"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Bend Level"
+          v-model="bend"
+          :min="-10"
+          :max="10"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Border Radius"
-            v-model="borderRadius"
-            :min="0"
-            :max="0.5"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Border Radius"
+          v-model="borderRadius"
+          :min="0"
+          :max="0.5"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Scroll Speed"
-            v-model="scrollSpeed"
-            :min="0.5"
-            :max="5"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Scroll Speed"
+          v-model="scrollSpeed"
+          :min="0.5"
+          :max="5"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Scroll Ease"
-            v-model="scrollEase"
-            :min="0.01"
-            :max="0.15"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Scroll Ease"
+          v-model="scrollEase"
+          :min="0.01"
+          :max="0.15"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
 
-          <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
-        </Customize>
+        <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['ogl']" />
-      </template>
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="circularGallery" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="circularGallery" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="circularGallery.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="circularGallery.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/DecayCardDemo.vue b/src/demo/Components/DecayCardDemo.vue
index 1acc289..2e93537 100644
--- a/src/demo/Components/DecayCardDemo.vue
+++ b/src/demo/Components/DecayCardDemo.vue
@@ -1,31 +1,29 @@
 <template>
-  <div class="decay-card-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="overflow: hidden">
-          <DecayCard>
-            <div class="text-[2rem]">
-              Decay
-              <br />
-              Card
-            </div>
-          </DecayCard>
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container" style="overflow: hidden">
+        <DecayCard>
+          <div class="text-[2rem]">
+            Decay
+            <br />
+            Card
+          </div>
+        </DecayCard>
+      </div>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="decayCard" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="decayCard" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="decayCard.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="decayCard.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/DockDemo.vue b/src/demo/Components/DockDemo.vue
index 47ee769..cfc2c06 100644
--- a/src/demo/Components/DockDemo.vue
+++ b/src/demo/Components/DockDemo.vue
@@ -1,86 +1,82 @@
 <template>
-  <div class="dock-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="min-height: 400px; position: relative">
-          <div class="demo-content">
-            <Dock
-              :key="rerenderKey"
-              :items="items"
-              :panel-height="panelHeight"
-              :base-item-size="baseItemSize"
-              :magnification="magnification"
-              :distance="200"
-              :dock-height="256"
-              :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
-            />
-          </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <Dock
+          :key="rerenderKey"
+          :items="items"
+          :panel-height="panelHeight"
+          :base-item-size="baseItemSize"
+          :magnification="magnification"
+          :distance="200"
+          :dock-height="256"
+          :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
+        />
 
-          <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
-          >
-            Try It!
-          </div>
+        <div
+          class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+        >
+          Try It!
         </div>
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Background Height"
-            :min="30"
-            :max="200"
-            :step="10"
-            :model-value="panelHeight"
-            @update:model-value="
-              (val: number) => {
-                panelHeight = val;
-                forceRerender();
-              }
-            "
-          />
+      <Customize>
+        <PreviewSlider
+          title="Background Height"
+          :min="30"
+          :max="200"
+          :step="10"
+          :model-value="panelHeight"
+          @update:model-value="
+            (val: number) => {
+              panelHeight = val;
+              forceRerender();
+            }
+          "
+        />
 
-          <PreviewSlider
-            title="Item Size"
-            :min="20"
-            :max="60"
-            :step="10"
-            :model-value="baseItemSize"
-            @update:model-value="
-              (val: number) => {
-                baseItemSize = val;
-                forceRerender();
-              }
-            "
-          />
+        <PreviewSlider
+          title="Item Size"
+          :min="20"
+          :max="60"
+          :step="10"
+          :model-value="baseItemSize"
+          @update:model-value="
+            (val: number) => {
+              baseItemSize = val;
+              forceRerender();
+            }
+          "
+        />
 
-          <PreviewSlider
-            title="Magnification"
-            :min="50"
-            :max="100"
-            :step="10"
-            :model-value="magnification"
-            @update:model-value="
-              (val: number) => {
-                magnification = val;
-                forceRerender();
-              }
-            "
-          />
-        </Customize>
+        <PreviewSlider
+          title="Magnification"
+          :min="50"
+          :max="100"
+          :step="10"
+          :model-value="magnification"
+          @update:model-value="
+            (val: number) => {
+              magnification = val;
+              forceRerender();
+            }
+          "
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="dock" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="dock" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="dock.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="dock.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -179,29 +175,7 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+  min-height: 400px;
   padding: 2rem;
 }
-
-.demo-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  width: 100%;
-  max-width: 800px;
-}
-
-.demo-title {
-  font-size: 2rem;
-  font-weight: 900;
-  color: #271e37;
-  margin: 0;
-  text-align: center;
-}
 </style>
diff --git a/src/demo/Components/ElasticSliderDemo.vue b/src/demo/Components/ElasticSliderDemo.vue
index fe4c427..c68f52d 100644
--- a/src/demo/Components/ElasticSliderDemo.vue
+++ b/src/demo/Components/ElasticSliderDemo.vue
@@ -1,39 +1,37 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="space-y-8">
-        <div class="demo-section">
-          <div class="demo-container relative min-h-[200px] flex items-center justify-center">
-            <ElasticSlider />
-          </div>
+      <div class="demo-section">
+        <div class="demo-container relative min-h-[200px] flex items-center justify-center">
+          <ElasticSlider />
         </div>
-
-        <div class="demo-section">
-          <h2 class="demo-title-extra">Using Steps</h2>
-
-          <div class="demo-container relative min-h-[200px] flex items-center justify-center">
-            <ElasticSlider :is-stepped="true" :step-size="10" />
-          </div>
-        </div>
-
-        <div class="demo-section">
-          <h2 class="demo-title-extra">Custom Range & Icons</h2>
-
-          <div class="demo-container relative min-h-[200px] flex items-center justify-center">
-            <ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
-              <template #left-icon>
-                <i class="pi pi-thumbs-down text-xl"></i>
-              </template>
-
-              <template #right-icon>
-                <i class="pi pi-thumbs-up text-xl"></i>
-              </template>
-            </ElasticSlider>
-          </div>
-        </div>
-
-        <PropTable :data="propData" />
       </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title-extra">Using Steps</h2>
+
+        <div class="demo-container relative min-h-[200px] flex items-center justify-center">
+          <ElasticSlider :is-stepped="true" :step-size="10" />
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title-extra">Custom Range & Icons</h2>
+
+        <div class="demo-container relative min-h-[200px] flex items-center justify-center">
+          <ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
+            <template #left-icon>
+              <i class="pi pi-thumbs-down text-xl"></i>
+            </template>
+
+            <template #right-icon>
+              <i class="pi pi-thumbs-up text-xl"></i>
+            </template>
+          </ElasticSlider>
+        </div>
+      </div>
+
+      <PropTable :data="propData" />
     </template>
 
     <template #code>
@@ -112,11 +110,4 @@ const propData = [
   min-height: 300px;
   overflow: hidden;
 }
-
-.demo-title-extra {
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: #fff;
-  margin-bottom: 0.5rem;
-}
 </style>
diff --git a/src/demo/Components/FlowingMenuDemo.vue b/src/demo/Components/FlowingMenuDemo.vue
index 5640b52..4d1b3ff 100644
--- a/src/demo/Components/FlowingMenuDemo.vue
+++ b/src/demo/Components/FlowingMenuDemo.vue
@@ -1,25 +1,23 @@
 <template>
-  <div class="flowing-menu-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
-          <FlowingMenu :items="demoItems" />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
+        <FlowingMenu :items="demoItems" />
+      </div>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="flowingMenu" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="flowingMenu" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="flowingMenu.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="flowingMenu.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/FlyingPostersDemo.vue b/src/demo/Components/FlyingPostersDemo.vue
index 4b5d774..9dafd70 100644
--- a/src/demo/Components/FlyingPostersDemo.vue
+++ b/src/demo/Components/FlyingPostersDemo.vue
@@ -1,97 +1,95 @@
 <template>
-  <div class="flying-posters-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
-          <FlyingPosters
-            :key="rerenderKey"
-            :items="items"
-            :plane-width="planeWidth"
-            :plane-height="planeHeight"
-            :distortion="distortion"
-            :scroll-ease="scrollEase"
-            :camera-fov="cameraFov"
-            :camera-z="cameraZ"
-            class="h-full w-full"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
+        <FlyingPosters
+          :key="rerenderKey"
+          :items="items"
+          :plane-width="planeWidth"
+          :plane-height="planeHeight"
+          :distortion="distortion"
+          :scroll-ease="scrollEase"
+          :camera-fov="cameraFov"
+          :camera-z="cameraZ"
+          class="h-full w-full"
+        />
 
-          <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
-          >
-            Scroll.
-          </div>
+        <div
+          class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+        >
+          Scroll.
         </div>
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Plane Width"
-            v-model="planeWidth"
-            :min="200"
-            :max="400"
-            :step="20"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Plane Width"
+          v-model="planeWidth"
+          :min="200"
+          :max="400"
+          :step="20"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Plane Height"
-            v-model="planeHeight"
-            :min="200"
-            :max="400"
-            :step="20"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Plane Height"
+          v-model="planeHeight"
+          :min="200"
+          :max="400"
+          :step="20"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Distortion"
-            v-model="distortion"
-            :min="0"
-            :max="10"
-            :step="0.5"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Distortion"
+          v-model="distortion"
+          :min="0"
+          :max="10"
+          :step="0.5"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Scroll Ease"
-            v-model="scrollEase"
-            :min="0.005"
-            :max="0.05"
-            :step="0.005"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Scroll Ease"
+          v-model="scrollEase"
+          :min="0.005"
+          :max="0.05"
+          :step="0.005"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Camera FOV"
-            v-model="cameraFov"
-            :min="30"
-            :max="90"
-            :step="5"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Camera FOV"
+          v-model="cameraFov"
+          :min="30"
+          :max="90"
+          :step="5"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Camera Z"
-            v-model="cameraZ"
-            :min="10"
-            :max="40"
-            :step="2"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Camera Z"
+          v-model="cameraZ"
+          :min="10"
+          :max="40"
+          :step="2"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['ogl']" />
-      </template>
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="flyingPosters" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="flyingPosters" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="flyingPosters.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="flyingPosters.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/GlassIconsDemo.vue b/src/demo/Components/GlassIconsDemo.vue
index 12db255..0d930fd 100644
--- a/src/demo/Components/GlassIconsDemo.vue
+++ b/src/demo/Components/GlassIconsDemo.vue
@@ -1,27 +1,25 @@
 <template>
-  <div class="glass-icons-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="height: 500px; overflow: hidden">
-          <GlassIcons :items="items" class="my-glass-icons" />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container" style="height: 500px; overflow: hidden">
+        <GlassIcons :items="items" class="my-glass-icons" />
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Colorful" v-model="colorful" />
-        </Customize>
+      <Customize>
+        <PreviewSwitch title="Colorful" v-model="colorful" />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="glassIcons" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="glassIcons" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="glassIcons.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="glassIcons.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/GooeyNavDemo.vue b/src/demo/Components/GooeyNavDemo.vue
index cbcf11d..36cf7cd 100644
--- a/src/demo/Components/GooeyNavDemo.vue
+++ b/src/demo/Components/GooeyNavDemo.vue
@@ -1,64 +1,62 @@
 <template>
-  <div class="gooey-nav-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div
-          class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center"
-        >
-          <GooeyNav
-            :key="rerenderKey"
-            :items="navItems"
-            :animation-time="500"
-            :particle-count="particleCount"
-            :particle-distances="[90, 0]"
-            :particle-r="particleR"
-            :time-variance="timeVariance"
-            :initial-active-index="0"
-            :colors="[1, 2, 3, 1, 2, 3, 1, 4]"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div
+        class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center"
+      >
+        <GooeyNav
+          :key="rerenderKey"
+          :items="navItems"
+          :animation-time="500"
+          :particle-count="particleCount"
+          :particle-distances="[90, 0]"
+          :particle-r="particleR"
+          :time-variance="timeVariance"
+          :initial-active-index="0"
+          :colors="[1, 2, 3, 1, 2, 3, 1, 4]"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Particle Count"
-            v-model="particleCount"
-            :min="1"
-            :max="50"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Particle Count"
+          v-model="particleCount"
+          :min="1"
+          :max="50"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Animation Variance"
-            v-model="timeVariance"
-            :min="0"
-            :max="2000"
-            :step="100"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Animation Variance"
+          v-model="timeVariance"
+          :min="0"
+          :max="2000"
+          :step="100"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Radius Factor"
-            v-model="particleR"
-            :min="0"
-            :max="1000"
-            :step="100"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Radius Factor"
+          v-model="particleR"
+          :min="0"
+          :max="1000"
+          :step="100"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="gooeyNav" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="gooeyNav" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="gooeyNav.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="gooeyNav.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/InfiniteScrollDemo.vue b/src/demo/Components/InfiniteScrollDemo.vue
index 19c0313..5d24f09 100644
--- a/src/demo/Components/InfiniteScrollDemo.vue
+++ b/src/demo/Components/InfiniteScrollDemo.vue
@@ -1,52 +1,50 @@
 <template>
-  <div class="infinite-scroll-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div
-          class="demo-container"
-          style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center"
-        >
-          <InfiniteScroll
-            :items="items"
-            :is-tilted="isTilted"
-            :tilt-direction="tiltDirection"
-            :autoplay="autoplay"
-            :autoplay-speed="1"
-            :autoplay-direction="autoplayDirection"
-            :pause-on-hover="pauseOnHover"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div
+        class="demo-container"
+        style="height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center"
+      >
+        <InfiniteScroll
+          :items="items"
+          :is-tilted="isTilted"
+          :tilt-direction="tiltDirection"
+          :autoplay="autoplay"
+          :autoplay-speed="1"
+          :autoplay-direction="autoplayDirection"
+          :pause-on-hover="pauseOnHover"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Tilt" v-model="isTilted" />
+      <Customize>
+        <PreviewSwitch title="Tilt" v-model="isTilted" />
 
-          <PreviewSelect v-if="isTilted" title="Tilt Direction" :options="tiltOptions" v-model="tiltDirection" />
+        <PreviewSelect v-if="isTilted" title="Tilt Direction" :options="tiltOptions" v-model="tiltDirection" />
 
-          <hr style="margin: 1rem 0; border-color: #222" />
+        <hr style="margin: 1rem 0; border-color: #222" />
 
-          <PreviewSwitch title="Autoplay" v-model="autoplay" />
+        <PreviewSwitch title="Autoplay" v-model="autoplay" />
 
-          <template v-if="autoplay">
-            <PreviewSelect title="Autoplay Direction" :options="autoplayOptions" v-model="autoplayDirection" />
+        <template v-if="autoplay">
+          <PreviewSelect title="Autoplay Direction" :options="autoplayOptions" v-model="autoplayDirection" />
 
-            <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
-          </template>
-        </Customize>
+          <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
+        </template>
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="infiniteScroll" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="infiniteScroll" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="infiniteScroll.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="infiniteScroll.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/MasonryDemo.vue b/src/demo/Components/MasonryDemo.vue
index 32fbfd7..ccd2290 100644
--- a/src/demo/Components/MasonryDemo.vue
+++ b/src/demo/Components/MasonryDemo.vue
@@ -1,88 +1,86 @@
 <template>
-  <div class="masonry-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="height: 900px; overflow: hidden">
-          <RefreshButton @refresh="forceRerender" />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container" style="height: 900px; overflow: hidden">
+        <RefreshButton @refresh="forceRerender" />
 
-          <Masonry
-            :key="rerenderKey"
-            :items="sampleItems"
-            :ease="ease"
-            :duration="duration"
-            :stagger="stagger"
-            :animate-from="animateFrom"
-            :scale-on-hover="scaleOnHover"
-            :hover-scale="hoverScale"
-            :blur-to-focus="blurToFocus"
-            :color-shift-on-hover="colorShiftOnHover"
-            class="masonry-demo-container"
-          />
-        </div>
+        <Masonry
+          :key="rerenderKey"
+          :items="sampleItems"
+          :ease="ease"
+          :duration="duration"
+          :stagger="stagger"
+          :animate-from="animateFrom"
+          :scale-on-hover="scaleOnHover"
+          :hover-scale="hoverScale"
+          :blur-to-focus="blurToFocus"
+          :color-shift-on-hover="colorShiftOnHover"
+          class="masonry-demo-container"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Blur to Focus" v-model="blurToFocus" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Blur to Focus" v-model="blurToFocus" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" />
 
-          <PreviewSelect
-            title="Animation Direction"
-            v-model="animateFrom"
-            :options="[
-              { label: 'Bottom', value: 'bottom' },
-              { label: 'Top', value: 'top' },
-              { label: 'Left', value: 'left' },
-              { label: 'Right', value: 'right' },
-              { label: 'Center', value: 'center' },
-              { label: 'Random', value: 'random' }
-            ]"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSelect
+          title="Animation Direction"
+          v-model="animateFrom"
+          :options="[
+            { label: 'Bottom', value: 'bottom' },
+            { label: 'Top', value: 'top' },
+            { label: 'Left', value: 'left' },
+            { label: 'Right', value: 'right' },
+            { label: 'Center', value: 'center' },
+            { label: 'Random', value: 'random' }
+          ]"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Duration (s)"
-            v-model="duration"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Duration (s)"
+          v-model="duration"
+          :min="0.1"
+          :max="2"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Stagger Delay (s)"
-            v-model="stagger"
-            :min="0.01"
-            :max="0.2"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Stagger Delay (s)"
+          v-model="stagger"
+          :min="0.01"
+          :max="0.2"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Hover Scale"
-            v-model="hoverScale"
-            :min="0.8"
-            :max="1.2"
-            :step="0.05"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Hover Scale"
+          v-model="hoverScale"
+          :min="0.8"
+          :max="1.2"
+          :step="0.05"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="masonry" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="masonry" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="masonry.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="masonry.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -167,10 +165,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.masonry-demo-container {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/demo/Components/PixelCardDemo.vue b/src/demo/Components/PixelCardDemo.vue
index 92027b6..3dc0d51 100644
--- a/src/demo/Components/PixelCardDemo.vue
+++ b/src/demo/Components/PixelCardDemo.vue
@@ -1,38 +1,34 @@
 <template>
-  <div class="pixel-card-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div
-          class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center"
-        >
-          <PixelCard :key="rerenderKey" :variant="selectedVariant">
-            <div class="absolute mix-blend-screen z-10 inset-0 flex items-center justify-center w-full h-full">
-              <h2 class="text-5xl font-black select-none text-[#222]">Hover Me.</h2>
-            </div>
-          </PixelCard>
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
+        <PixelCard :key="rerenderKey" :variant="selectedVariant">
+          <div class="absolute mix-blend-screen z-10 inset-0 flex items-center justify-center w-full h-full">
+            <h2 class="text-5xl font-black select-none text-[#222]">Hover Me.</h2>
+          </div>
+        </PixelCard>
+      </div>
 
-        <Customize>
-          <PreviewSelect
-            title="Animation Variant"
-            :options="variantOptions"
-            v-model="selectedVariant"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+      <Customize>
+        <PreviewSelect
+          title="Animation Variant"
+          :options="variantOptions"
+          v-model="selectedVariant"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="pixelCard" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="pixelCard" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="pixelCard.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="pixelCard.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/ProfileCardDemo.vue b/src/demo/Components/ProfileCardDemo.vue
index 83cdaf6..b25fee8 100644
--- a/src/demo/Components/ProfileCardDemo.vue
+++ b/src/demo/Components/ProfileCardDemo.vue
@@ -1,48 +1,46 @@
 <template>
-  <div class="profile-card-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
-          <ProfileCard
-            :key="rerenderKey"
-            name="Javi A. Torres"
-            title="Software Engineer"
-            handle="javicodes"
-            status="Online"
-            contact-text="Contact Me"
-            avatar-url="/assets/person.png"
-            :icon-url="showIcon ? '/assets/iconpattern.png' : ''"
-            :show-user-info="showUserInfo"
-            :show-behind-gradient="showBehindGradient"
-            grain-url="/assets/grain.webp"
-            :behind-gradient="customBehindGradient"
-            :inner-gradient="customInnerGradient"
-            @contact-click="handleContactClick"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
+        <ProfileCard
+          :key="rerenderKey"
+          name="Javi A. Torres"
+          title="Software Engineer"
+          handle="javicodes"
+          status="Online"
+          contact-text="Contact Me"
+          avatar-url="/assets/person.png"
+          :icon-url="showIcon ? '/assets/iconpattern.png' : ''"
+          :show-user-info="showUserInfo"
+          :show-behind-gradient="showBehindGradient"
+          grain-url="/assets/grain.webp"
+          :behind-gradient="customBehindGradient"
+          :inner-gradient="customInnerGradient"
+          @contact-click="handleContactClick"
+        />
+      </div>
 
-        <Customize>
-          <button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
+      <Customize>
+        <button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
 
-          <PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
-        </Customize>
+        <PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="profileCard" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="profileCard" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="profileCard.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="profileCard.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -208,12 +206,4 @@ const propData = [
 .randomize-btn:hover {
   background: #222;
 }
-
-.demo-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
 </style>
diff --git a/src/demo/Components/SpotlightCardDemo.vue b/src/demo/Components/SpotlightCardDemo.vue
index 5399c8d..30496ca 100644
--- a/src/demo/Components/SpotlightCardDemo.vue
+++ b/src/demo/Components/SpotlightCardDemo.vue
@@ -1,49 +1,47 @@
 <template>
-  <div class="spotlight-card-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative py-10">
-          <SpotlightCard class-name="custom-spotlight-card">
-            <div class="flex h-full flex-col items-start justify-center">
-              <i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative py-10">
+        <SpotlightCard class-name="custom-spotlight-card">
+          <div class="flex h-full flex-col items-start justify-center">
+            <i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
 
-              <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Boost Your Experience</h3>
+            <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Boost Your Experience</h3>
 
-              <p class="text-sm text-zinc-400">
-                Get exclusive benefits, features & 24/7 support as a permanent club member.
-              </p>
-            </div>
-          </SpotlightCard>
-        </div>
+            <p class="text-sm text-zinc-400">
+              Get exclusive benefits, features & 24/7 support as a permanent club member.
+            </p>
+          </div>
+        </SpotlightCard>
+      </div>
 
-        <h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2>
+      <h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2>
 
-        <div class="demo-container relative py-10">
-          <SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)">
-            <div class="flex h-full flex-col items-start justify-center">
-              <i class="pi pi-lock text-3xl mb-3 text-white"></i>
+      <div class="demo-container relative py-10">
+        <SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)">
+          <div class="flex h-full flex-col items-start justify-center">
+            <i class="pi pi-lock text-3xl mb-3 text-white"></i>
 
-              <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Enhanced Security</h3>
+            <h3 class="text-2xl font-semibold tracking-tight mb-1 text-white">Enhanced Security</h3>
 
-              <p class="text-sm text-zinc-400">
-                Our state of the art software offers peace of mind through strict security measures.
-              </p>
-            </div>
-          </SpotlightCard>
-        </div>
+            <p class="text-sm text-zinc-400">
+              Our state of the art software offers peace of mind through strict security measures.
+            </p>
+          </div>
+        </SpotlightCard>
+      </div>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="spotlightCard" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="spotlightCard" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="spotlightCard.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="spotlightCard.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/Components/TiltedCardDemo.vue b/src/demo/Components/TiltedCardDemo.vue
index 4f9806c..e95ccca 100644
--- a/src/demo/Components/TiltedCardDemo.vue
+++ b/src/demo/Components/TiltedCardDemo.vue
@@ -1,53 +1,51 @@
 <template>
-  <div class="tilted-card-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
-          <TiltedCard
-            image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
-            alt-text="Kendrick Lamar - GNX Album Cover"
-            caption-text="Kendrick Lamar - GNX"
-            container-height="300px"
-            container-width="300px"
-            image-height="300px"
-            image-width="300px"
-            :rotate-amplitude="rotateAmplitude"
-            :scale-on-hover="scaleOnHover"
-            :show-mobile-warning="false"
-            :show-tooltip="showTooltip"
-            :display-overlay-content="displayOverlayContent"
-            :overlay-content="displayOverlayContent"
-          >
-            <template #overlay>
-              <p class="tilted-card-demo-text">Kendrick Lamar - GNX</p>
-            </template>
-          </TiltedCard>
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
+        <TiltedCard
+          image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
+          alt-text="Kendrick Lamar - GNX Album Cover"
+          caption-text="Kendrick Lamar - GNX"
+          container-height="300px"
+          container-width="300px"
+          image-height="300px"
+          image-width="300px"
+          :rotate-amplitude="rotateAmplitude"
+          :scale-on-hover="scaleOnHover"
+          :show-mobile-warning="false"
+          :show-tooltip="showTooltip"
+          :display-overlay-content="displayOverlayContent"
+          :overlay-content="displayOverlayContent"
+        >
+          <template #overlay>
+            <p class="tilted-card-demo-text">Kendrick Lamar - GNX</p>
+          </template>
+        </TiltedCard>
+      </div>
 
-        <Customize>
-          <PreviewSlider title="Rotate Amplitude" v-model="rotateAmplitude" :min="0" :max="30" :step="1" />
+      <Customize>
+        <PreviewSlider title="Rotate Amplitude" v-model="rotateAmplitude" :min="0" :max="30" :step="1" />
 
-          <PreviewSlider title="Scale on Hover" v-model="scaleOnHover" :min="1" :max="1.5" :step="0.05" />
+        <PreviewSlider title="Scale on Hover" v-model="scaleOnHover" :min="1" :max="1.5" :step="0.05" />
 
-          <PreviewSwitch title="Show Tooltip" v-model="showTooltip" />
+        <PreviewSwitch title="Show Tooltip" v-model="showTooltip" />
 
-          <PreviewSwitch title="Show Overlay Content" v-model="displayOverlayContent" />
-        </Customize>
+        <PreviewSwitch title="Show Overlay Content" v-model="displayOverlayContent" />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="tiltedCard" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="tiltedCard" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="tiltedCard.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="tiltedCard.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/AsciiTextDemo.vue b/src/demo/TextAnimations/AsciiTextDemo.vue
index 4e75d5d..a52e9b8 100644
--- a/src/demo/TextAnimations/AsciiTextDemo.vue
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -1,77 +1,75 @@
 <template>
-  <div class="ascii-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <AsciiText
-            :key="rerenderKey"
-            :text="text"
-            :ascii-font-size="asciiFontSize"
-            :text-font-size="textFontSize"
-            :text-color="textColor"
-            :plane-base-height="planeBaseHeight"
-            :enable-waves="enableWaves"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <AsciiText
+          :key="rerenderKey"
+          :text="text"
+          :ascii-font-size="asciiFontSize"
+          :text-font-size="textFontSize"
+          :text-color="textColor"
+          :plane-base-height="planeBaseHeight"
+          :enable-waves="enableWaves"
+        />
+      </div>
+
+      <Customize>
+        <PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
+
+        <PreviewSlider
+          title="ASCII Font Size"
+          v-model="asciiFontSize"
+          :min="2"
+          :max="20"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
+
+        <PreviewSlider
+          title="Text Font Size"
+          v-model="textFontSize"
+          :min="100"
+          :max="400"
+          :step="25"
+          @update:model-value="forceRerender"
+        />
+
+        <PreviewSlider
+          title="Base Height"
+          v-model="planeBaseHeight"
+          :min="4"
+          :max="16"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
+
+        <PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
+
+        <div class="flex gap-2 flex-wrap">
+          <button
+            v-for="color in colorOptions"
+            :key="color.name"
+            class="text-xs cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#333] text-white h-8 px-3 transition-colors"
+            :class="{ 'bg-[#333]': textColor === color.value }"
+            @click="changeColor(color.value)"
+          >
+            {{ color.name }}
+          </button>
         </div>
+      </Customize>
 
-        <Customize>
-          <PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['three', '@types/three']" />
+    </template>
 
-          <PreviewSlider
-            title="ASCII Font Size"
-            v-model="asciiFontSize"
-            :min="2"
-            :max="20"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+    <template #code>
+      <CodeExample :code-object="asciiText" />
+    </template>
 
-          <PreviewSlider
-            title="Text Font Size"
-            v-model="textFontSize"
-            :min="100"
-            :max="400"
-            :step="25"
-            @update:model-value="forceRerender"
-          />
-
-          <PreviewSlider
-            title="Base Height"
-            v-model="planeBaseHeight"
-            :min="4"
-            :max="16"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
-
-          <PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
-
-          <div class="flex gap-2 flex-wrap">
-            <button
-              v-for="color in colorOptions"
-              :key="color.name"
-              class="text-xs cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#333] text-white h-8 px-3 transition-colors"
-              :class="{ 'bg-[#333]': textColor === color.value }"
-              @click="changeColor(color.value)"
-            >
-              {{ color.name }}
-            </button>
-          </div>
-        </Customize>
-
-        <PropTable :data="propData" />
-        <Dependencies :dependency-list="['three', '@types/three']" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="asciiText" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="asciiText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="asciiText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/BlurTextDemo.vue b/src/demo/TextAnimations/BlurTextDemo.vue
index e54544c..168e13a 100644
--- a/src/demo/TextAnimations/BlurTextDemo.vue
+++ b/src/demo/TextAnimations/BlurTextDemo.vue
@@ -1,91 +1,89 @@
 <template>
-  <div class="blur-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative min-h-[400px] overflow-hidden">
-          <RefreshButton @refresh="forceRerender" />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative min-h-[400px] overflow-hidden">
+        <RefreshButton @refresh="forceRerender" />
 
-          <BlurText
-            :key="rerenderKey"
-            text="Isn't this so cool?!"
-            :delay="delay"
-            class-name="text-3xl md:text-6xl font-bold text-center"
-            :animate-by="animateBy"
-            :direction="direction"
-            :threshold="threshold"
-            :root-margin="rootMargin"
-            :step-duration="stepDuration"
-            @animation-complete="
-              () => {
-                showCallback && showToast();
-              }
-            "
-          />
+        <BlurText
+          :key="rerenderKey"
+          text="Isn't this so cool?!"
+          :delay="delay"
+          class-name="blur-text-demo"
+          :animate-by="animateBy"
+          :direction="direction"
+          :threshold="threshold"
+          :root-margin="rootMargin"
+          :step-duration="stepDuration"
+          @animation-complete="
+            () => {
+              showCallback && showToast();
+            }
+          "
+        />
+      </div>
+
+      <Customize>
+        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
+
+        <div class="flex gap-4 flex-wrap">
+          <button
+            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
+            @click="toggleAnimateBy"
+          >
+            Animate By:
+            <span class="text-[#a1a1aa]">&nbsp;{{ animateBy }}</span>
+          </button>
+
+          <button
+            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
+            @click="toggleDirection"
+          >
+            Direction:
+            <span class="text-[#a1a1aa]">&nbsp;{{ direction }}</span>
+          </button>
         </div>
 
-        <Customize>
-          <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
+        <PreviewSlider
+          title="Delay (ms)"
+          v-model="delay"
+          :min="50"
+          :max="500"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
 
-          <div class="flex gap-4 flex-wrap">
-            <button
-              class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-              @click="toggleAnimateBy"
-            >
-              Animate By:
-              <span class="text-[#a1a1aa]">&nbsp;{{ animateBy }}</span>
-            </button>
+        <PreviewSlider
+          title="Step Duration (s)"
+          v-model="stepDuration"
+          :min="0.1"
+          :max="1"
+          :step="0.05"
+          @update:model-value="forceRerender"
+        />
 
-            <button
-              class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-              @click="toggleDirection"
-            >
-              Direction:
-              <span class="text-[#a1a1aa]">&nbsp;{{ direction }}</span>
-            </button>
-          </div>
+        <PreviewSlider
+          title="Threshold"
+          v-model="threshold"
+          :min="0.1"
+          :max="1"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-          <PreviewSlider
-            title="Delay (ms)"
-            v-model="delay"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+      <PropTable :data="propData" />
 
-          <PreviewSlider
-            title="Step Duration (s)"
-            v-model="stepDuration"
-            :min="0.1"
-            :max="1"
-            :step="0.05"
-            @update:model-value="forceRerender"
-          />
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-          <PreviewSlider
-            title="Threshold"
-            v-model="threshold"
-            :min="0.1"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+    <template #code>
+      <CodeExample :code-object="blurText" />
+    </template>
 
-        <PropTable :data="propData" />
-
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="blurText" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="blurText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="blurText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/CircularTextDemo.vue b/src/demo/TextAnimations/CircularTextDemo.vue
index 37a2adf..195bb97 100644
--- a/src/demo/TextAnimations/CircularTextDemo.vue
+++ b/src/demo/TextAnimations/CircularTextDemo.vue
@@ -1,52 +1,50 @@
 <template>
-  <div class="circular-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
-          <CircularText
-            :key="rerenderKey"
-            text="VUE * BITS * IS * AWESOME * "
-            :spin-duration="spinDuration"
-            :on-hover="onHover"
-            class-name="text-blue-500"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
+        <CircularText
+          :key="rerenderKey"
+          text="VUE * BITS * IS * AWESOME * "
+          :spin-duration="spinDuration"
+          :on-hover="onHover"
+          class-name="text-blue-500"
+        />
+      </div>
+
+      <Customize>
+        <div class="flex gap-4 flex-wrap">
+          <button
+            class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
+            @click="toggleOnHover"
+          >
+            On Hover:
+            <span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span>
+          </button>
         </div>
 
-        <Customize>
-          <div class="flex gap-4 flex-wrap">
-            <button
-              class="text-xs bg-[#0b0b0b] rounded-[10px] border border-[#1e3721] hover:bg-[#1e3721] text-white h-8 px-3 transition-colors"
-              @click="toggleOnHover"
-            >
-              On Hover:
-              <span class="text-[#a1a1aa]">&nbsp;{{ onHover }}</span>
-            </button>
-          </div>
+        <PreviewSlider
+          title="Spin Duration (s)"
+          v-model="spinDuration"
+          :min="1"
+          :max="50"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-          <PreviewSlider
-            title="Spin Duration (s)"
-            v-model="spinDuration"
-            :min="1"
-            :max="50"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+      <PropTable :data="propData" />
 
-        <PropTable :data="propData" />
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="circularText" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="circularText" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="circularText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="circularText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/CurvedLoopDemo.vue b/src/demo/TextAnimations/CurvedLoopDemo.vue
index 26b4961..e83dd96 100644
--- a/src/demo/TextAnimations/CurvedLoopDemo.vue
+++ b/src/demo/TextAnimations/CurvedLoopDemo.vue
@@ -1,73 +1,71 @@
 <template>
-  <div class="curved-loop-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden p-0">
-          <CurvedLoop
-            :key="rerenderKey"
-            :marquee-text="marqueeText"
-            :speed="speed"
-            :curve-amount="curveAmount"
-            :interactive="interactive"
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[500px] overflow-hidden p-0">
+        <CurvedLoop
+          :key="rerenderKey"
+          :marquee-text="marqueeText"
+          :speed="speed"
+          :curve-amount="curveAmount"
+          :interactive="interactive"
+        />
+      </div>
+
+      <Customize>
+        <div class="mb-4">
+          <label class="block text-sm font-medium mb-2">Marquee Text</label>
+
+          <input
+            v-model="marqueeText"
+            type="text"
+            placeholder="Enter text..."
+            class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+            @input="forceRerender"
           />
         </div>
 
-        <Customize>
-          <div class="mb-4">
-            <label class="block text-sm font-medium mb-2">Marquee Text</label>
+        <PreviewSlider
+          title="Speed"
+          v-model="speed"
+          :min="0"
+          :max="10"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-            <input
-              v-model="marqueeText"
-              type="text"
-              placeholder="Enter text..."
-              class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
-              @input="forceRerender"
-            />
-          </div>
+        <PreviewSlider
+          title="Curve Amount"
+          v-model="curveAmount"
+          :min="-400"
+          :max="400"
+          :step="10"
+          value-unit="px"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Speed"
-            v-model="speed"
-            :min="0"
-            :max="10"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSwitch
+          title="Draggable"
+          :model-value="interactive"
+          @update:model-value="
+            (val: boolean) => {
+              interactive = val;
+              forceRerender();
+            }
+          "
+        />
+      </Customize>
 
-          <PreviewSlider
-            title="Curve Amount"
-            v-model="curveAmount"
-            :min="-400"
-            :max="400"
-            :step="10"
-            value-unit="px"
-            @update:model-value="forceRerender"
-          />
+      <PropTable :data="propData" />
+    </template>
 
-          <PreviewSwitch
-            title="Draggable"
-            :model-value="interactive"
-            @update:model-value="
-              (val: boolean) => {
-                interactive = val;
-                forceRerender();
-              }
-            "
-          />
-        </Customize>
+    <template #code>
+      <CodeExample :code-object="curvedLoop" />
+    </template>
 
-        <PropTable :data="propData" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="curvedLoop" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="curvedLoop.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="curvedLoop.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/DecryptedTextDemo.vue b/src/demo/TextAnimations/DecryptedTextDemo.vue
index 262714e..d5c7eb2 100644
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/src/demo/TextAnimations/DecryptedTextDemo.vue
@@ -1,119 +1,117 @@
 <template>
-  <div class="decrypted-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative py-6 overflow-hidden">
-          <RefreshButton @click="forceRerender" />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative py-6 overflow-hidden">
+        <RefreshButton @click="forceRerender" />
 
-          <div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
-            <DecryptedText
-              :speed="speed"
-              text="Ahoy, matey!"
-              :max-iterations="maxIterations"
-              :sequential="sequential"
-              :reveal-direction="revealDirection"
-              parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly"
-              :animate-on="animateOn"
-            />
+        <div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">
+          <DecryptedText
+            :speed="speed"
+            text="Ahoy, matey!"
+            :max-iterations="maxIterations"
+            :sequential="sequential"
+            :reveal-direction="revealDirection"
+            parent-class-name="decrypted-text"
+            :use-original-chars-only="useOriginalCharsOnly"
+            :animate-on="animateOn"
+          />
 
-            <DecryptedText
-              :speed="speed"
-              text="Set yer eyes on this"
-              :max-iterations="maxIterations"
-              :sequential="sequential"
-              :reveal-direction="revealDirection"
-              parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly"
-              :animate-on="animateOn"
-            />
+          <DecryptedText
+            :speed="speed"
+            text="Set yer eyes on this"
+            :max-iterations="maxIterations"
+            :sequential="sequential"
+            :reveal-direction="revealDirection"
+            parent-class-name="decrypted-text"
+            :use-original-chars-only="useOriginalCharsOnly"
+            :animate-on="animateOn"
+          />
 
-            <DecryptedText
-              :speed="speed"
-              text="And try tinkerin' round'"
-              :max-iterations="maxIterations"
-              :sequential="sequential"
-              :reveal-direction="revealDirection"
-              parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly"
-              :animate-on="animateOn"
-            />
+          <DecryptedText
+            :speed="speed"
+            text="And try tinkerin' round'"
+            :max-iterations="maxIterations"
+            :sequential="sequential"
+            :reveal-direction="revealDirection"
+            parent-class-name="decrypted-text"
+            :use-original-chars-only="useOriginalCharsOnly"
+            :animate-on="animateOn"
+          />
 
-            <DecryptedText
-              :speed="speed"
-              text="with these here props, arr!"
-              :max-iterations="maxIterations"
-              :sequential="sequential"
-              :reveal-direction="revealDirection"
-              parent-class-name="decrypted-text"
-              :use-original-chars-only="useOriginalCharsOnly"
-              :animate-on="animateOn"
-              @animation-complete="() => console.log('✅ Animation Finished!')"
-            />
-          </div>
+          <DecryptedText
+            :speed="speed"
+            text="with these here props, arr!"
+            :max-iterations="maxIterations"
+            :sequential="sequential"
+            :reveal-direction="revealDirection"
+            parent-class-name="decrypted-text"
+            :use-original-chars-only="useOriginalCharsOnly"
+            :animate-on="animateOn"
+            @animation-complete="() => console.log('✅ Animation Finished!')"
+          />
         </div>
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Speed"
-            v-model="speed"
-            :min="10"
-            :max="200"
-            :step="10"
-            value-unit="ms"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Speed"
+          v-model="speed"
+          :min="10"
+          :max="200"
+          :step="10"
+          value-unit="ms"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Iterations"
-            v-model="maxIterations"
-            :min="1"
-            :max="50"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Iterations"
+          v-model="maxIterations"
+          :min="1"
+          :max="50"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSelect
-            title="Animation Trigger"
-            v-model="animateOn"
-            :options="animateOptions"
-            @update:model-value="
-              val => {
-                animateOn = val as 'view' | 'hover';
-                forceRerender();
-              }
-            "
-          />
+        <PreviewSelect
+          title="Animation Trigger"
+          v-model="animateOn"
+          :options="animateOptions"
+          @update:model-value="
+            val => {
+              animateOn = val as 'view' | 'hover';
+              forceRerender();
+            }
+          "
+        />
 
-          <PreviewSelect
-            title="Animation Direction"
-            v-model="revealDirection"
-            :options="directionOptions"
-            @update:model-value="
-              val => {
-                revealDirection = val as 'start' | 'end' | 'center';
-                forceRerender();
-              }
-            "
-          />
-        </Customize>
+        <PreviewSelect
+          title="Animation Direction"
+          v-model="revealDirection"
+          :options="directionOptions"
+          @update:model-value="
+            val => {
+              revealDirection = val as 'start' | 'end' | 'center';
+              forceRerender();
+            }
+          "
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="decryptedText" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="decryptedText" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="decryptedText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="decryptedText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/FallingTextDemo.vue b/src/demo/TextAnimations/FallingTextDemo.vue
index b087cc7..2dfb07f 100644
--- a/src/demo/TextAnimations/FallingTextDemo.vue
+++ b/src/demo/TextAnimations/FallingTextDemo.vue
@@ -1,64 +1,62 @@
 <template>
-  <div class="falling-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
-          <FallingText
-            :key="key"
-            text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow."
-            :highlight-words="['Vue', 'Bits', 'animated', 'components', 'simplify']"
-            :trigger="trigger"
-            :gravity="gravity"
-            font-size="2rem"
-            :mouse-constraint-stiffness="mouseConstraintStiffness"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
+        <FallingText
+          :key="key"
+          text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow."
+          :highlight-words="['Vue', 'Bits', 'animated', 'components', 'simplify']"
+          :trigger="trigger"
+          :gravity="gravity"
+          font-size="2rem"
+          :mouse-constraint-stiffness="mouseConstraintStiffness"
+        />
 
-          <div class="absolute z-0 text-[4rem] font-[900] text-[#222] select-none" v-if="!effectStarted">
-            {{ trigger === 'hover' ? 'Hover Me' : trigger === 'click' ? 'Click Me' : 'Auto Start' }}
-          </div>
+        <div class="absolute z-0 text-[4rem] font-[900] text-[#222] select-none" v-if="!effectStarted">
+          {{ trigger === 'hover' ? 'Hover Me' : trigger === 'click' ? 'Click Me' : 'Auto Start' }}
         </div>
+      </div>
 
-        <Customize>
-          <PreviewSelect
-            title="Animation Trigger"
-            v-model="trigger"
-            :options="triggerOptions"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSelect
+          title="Animation Trigger"
+          v-model="trigger"
+          :options="triggerOptions"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Gravity"
-            v-model="gravity"
-            :min="0.1"
-            :max="2"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Gravity"
+          v-model="gravity"
+          :min="0.1"
+          :max="2"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Mouse Constraint Stiffness"
-            v-model="mouseConstraintStiffness"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Mouse Constraint Stiffness"
+          v-model="mouseConstraintStiffness"
+          :min="0.1"
+          :max="2"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['matter-js']" />
-      </template>
+      <Dependencies :dependency-list="['matter-js']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="fallingText" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="fallingText" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="fallingText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="fallingText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -141,5 +139,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped></style>
diff --git a/src/demo/TextAnimations/FuzzyTextDemo.vue b/src/demo/TextAnimations/FuzzyTextDemo.vue
index 06a4fcc..5ee549a 100644
--- a/src/demo/TextAnimations/FuzzyTextDemo.vue
+++ b/src/demo/TextAnimations/FuzzyTextDemo.vue
@@ -1,75 +1,73 @@
 <template>
-  <div class="fuzzy-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden">
-          <div class="flex flex-col items-center justify-center h-full">
-            <FuzzyText
-              :key="`main-${rerenderKey}`"
-              text="404"
-              :base-intensity="baseIntensity"
-              :hover-intensity="hoverIntensity"
-              :enable-hover="enableHover"
-              :font-size="140"
-            />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[500px] overflow-hidden">
+        <div class="flex flex-col items-center justify-center h-full">
+          <FuzzyText
+            :key="`main-${rerenderKey}`"
+            text="404"
+            :base-intensity="baseIntensity"
+            :hover-intensity="hoverIntensity"
+            :enable-hover="enableHover"
+            :font-size="140"
+          />
 
-            <div class="my-1" />
+          <div class="my-1" />
 
-            <FuzzyText
-              :key="`sub-${rerenderKey}`"
-              text="not found"
-              :base-intensity="baseIntensity"
-              :hover-intensity="hoverIntensity"
-              :enable-hover="enableHover"
-              :font-size="70"
-              font-family="Gochi Hand"
-            />
-          </div>
+          <FuzzyText
+            :key="`sub-${rerenderKey}`"
+            text="not found"
+            :base-intensity="baseIntensity"
+            :hover-intensity="hoverIntensity"
+            :enable-hover="enableHover"
+            :font-size="70"
+            font-family="Gochi Hand"
+          />
         </div>
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Base Intensity"
-            v-model="baseIntensity"
-            :min="0"
-            :max="1"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Base Intensity"
+          v-model="baseIntensity"
+          :min="0"
+          :max="1"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Hover Intensity"
-            v-model="hoverIntensity"
-            :min="0"
-            :max="2"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Hover Intensity"
+          v-model="hoverIntensity"
+          :min="0"
+          :max="2"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSwitch
-            title="Enable Hover"
-            :model-value="enableHover"
-            @update:model-value="
-              (val: boolean) => {
-                enableHover = val;
-                forceRerender();
-              }
-            "
-          />
-        </Customize>
+        <PreviewSwitch
+          title="Enable Hover"
+          :model-value="enableHover"
+          @update:model-value="
+            (val: boolean) => {
+              enableHover = val;
+              forceRerender();
+            }
+          "
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-      </template>
+      <PropTable :data="propData" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="fuzzyText" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="fuzzyText" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="fuzzyText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="fuzzyText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/GlitchTextDemo.vue b/src/demo/TextAnimations/GlitchTextDemo.vue
index 5cf850e..2c9d0b7 100644
--- a/src/demo/TextAnimations/GlitchTextDemo.vue
+++ b/src/demo/TextAnimations/GlitchTextDemo.vue
@@ -1,41 +1,39 @@
 <template>
-  <div class="glitchtext-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden">
-          <GlitchText
-            :children="text"
-            :speed="speed"
-            :enable-shadows="enableShadows"
-            :enable-on-hover="enableOnHover"
-            class-name="demo-glitch-text"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative h-[500px] overflow-hidden">
+        <GlitchText
+          :children="text"
+          :speed="speed"
+          :enable-shadows="enableShadows"
+          :enable-on-hover="enableOnHover"
+          class-name="demo-glitch-text"
+        />
+      </div>
+
+      <Customize>
+        <div class="mb-4">
+          <PreviewText title="Text" v-model="text" />
+
+          <PreviewSlider title="Refresh Delay" v-model="speed" :min="0.1" :max="5" :step="0.1" />
+
+          <PreviewSwitch title="Glitch Colors" v-model="enableShadows" />
+
+          <PreviewSwitch title="Glitch On Hover" v-model="enableOnHover" />
         </div>
+      </Customize>
 
-        <Customize>
-          <div class="mb-4">
-            <PreviewText title="Text" v-model="text" />
+      <PropTable :data="propData" />
+    </template>
 
-            <PreviewSlider title="Refresh Delay" v-model="speed" :min="0.1" :max="5" :step="0.1" />
+    <template #code>
+      <CodeExample :code-object="glitchText" />
+    </template>
 
-            <PreviewSwitch title="Glitch Colors" v-model="enableShadows" />
-
-            <PreviewSwitch title="Glitch On Hover" v-model="enableOnHover" />
-          </div>
-        </Customize>
-
-        <PropTable :data="propData" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="glitchText" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="glitchText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="glitchText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/GradientTextDemo.vue b/src/demo/TextAnimations/GradientTextDemo.vue
index cc3fe96..d5a710f 100644
--- a/src/demo/TextAnimations/GradientTextDemo.vue
+++ b/src/demo/TextAnimations/GradientTextDemo.vue
@@ -133,16 +133,4 @@ const propData = [
 .demo-container {
   min-height: 200px;
 }
-
-.demo-title-extra {
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  color: #e5e7eb;
-}
-
-.demo-extra-info {
-  color: #a1a1aa;
-  font-size: 0.875rem;
-}
 </style>
diff --git a/src/demo/TextAnimations/RotatingTextDemo.vue b/src/demo/TextAnimations/RotatingTextDemo.vue
index 73321df..6a905ed 100644
--- a/src/demo/TextAnimations/RotatingTextDemo.vue
+++ b/src/demo/TextAnimations/RotatingTextDemo.vue
@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative min-h-[400px] max-h-[400px] overflow-hidden demo-container">
+      <div class="min-h-[400px] demo-container">
         <div
           class="flex flex-row justify-center items-center p-12 sm:p-20 md:p-24 w-full h-full overflow-hidden font-light text-[1.5rem] text-white sm:text-[1.875rem] md:text-[3rem] dark:text-muted leading-8 sm:leading-9 md:leading-none"
         >
diff --git a/src/demo/TextAnimations/ScrambleTextDemo.vue b/src/demo/TextAnimations/ScrambleTextDemo.vue
index 0633106..9b30b3e 100644
--- a/src/demo/TextAnimations/ScrambleTextDemo.vue
+++ b/src/demo/TextAnimations/ScrambleTextDemo.vue
@@ -1,3 +1,52 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[500px]">
+        <ScrambleText
+          :className="'m-[6vw] max-w-[680px] font-mono font-medium text-[clamp(14px,4vw,28px)] text-white'"
+          :radius="radius"
+          :duration="duration"
+          :speed="speed"
+          :scrambleChars="scrambleChars"
+        >
+          Once you hover over me, you will see the effect in action! You can customize the radius, duration, and speed
+          of the scramble effect.
+        </ScrambleText>
+      </div>
+
+      <Customize>
+        <div class="mb-4">
+          <label class="block text-sm font-medium mb-2">Scramble Characters</label>
+          <input
+            v-model="scrambleChars"
+            type="text"
+            placeholder="Enter text..."
+            maxlength="5"
+            class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+          />
+        </div>
+
+        <PreviewSlider title="Radius" v-model="radius" :min="10" :max="300" :step="10" />
+
+        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="5" :step="0.1" />
+
+        <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="2" :step="0.1" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="scrambleTextCode" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="scrambleTextCode.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
 <script setup lang="ts">
 import { ref } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
@@ -54,54 +103,3 @@ const propData = [
   }
 ];
 </script>
-
-<template>
-  <div class="scramble-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden">
-          <ScrambleText
-            :className="'m-[7vw] max-w-[800px] font-mono font-medium text-[clamp(14px,4vw,32px)] text-white'"
-            :radius="radius"
-            :duration="duration"
-            :speed="speed"
-            :scrambleChars="scrambleChars"
-          >
-            Once you hover over me, you will see the effect in action! You can customize the radius, duration, and speed
-            of the scramble effect.
-          </ScrambleText>
-        </div>
-
-        <Customize>
-          <div class="mb-4">
-            <label class="block text-sm font-medium mb-2">Scramble Characters</label>
-            <input
-              v-model="scrambleChars"
-              type="text"
-              placeholder="Enter text..."
-              maxlength="5"
-              class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
-            />
-          </div>
-
-          <PreviewSlider title="Radius" v-model="radius" :min="10" :max="300" :step="10" />
-
-          <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="5" :step="0.1" />
-
-          <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="2" :step="0.1" />
-        </Customize>
-
-        <PropTable :data="propData" />
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="scrambleTextCode" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="scrambleTextCode.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
-</template>
diff --git a/src/demo/TextAnimations/ScrollRevealDemo.vue b/src/demo/TextAnimations/ScrollRevealDemo.vue
index 65ab320..4e11965 100644
--- a/src/demo/TextAnimations/ScrollRevealDemo.vue
+++ b/src/demo/TextAnimations/ScrollRevealDemo.vue
@@ -181,8 +181,7 @@ const propData = [
 }
 
 .scroll-content {
-  padding-top: 150vh !important;
-  padding-bottom: 50vh;
+  padding: 150vh 2em 50vh 2em;
 }
 
 .scroll-instruction {
diff --git a/src/demo/TextAnimations/ShinyTextDemo.vue b/src/demo/TextAnimations/ShinyTextDemo.vue
index 56c1b00..d0768b9 100644
--- a/src/demo/TextAnimations/ShinyTextDemo.vue
+++ b/src/demo/TextAnimations/ShinyTextDemo.vue
@@ -1,48 +1,46 @@
 <template>
-  <div class="shiny-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <h2 class="demo-title-extra">Basic</h2>
+  <TabbedLayout>
+    <template #preview>
+      <h2 class="demo-title-extra">Basic</h2>
 
-        <div class="demo-container">
-          <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
+      <div class="demo-container">
+        <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
+      </div>
+
+      <h2 class="demo-title-extra">Button Text</h2>
+
+      <div class="demo-container">
+        <div class="shiny-button">
+          <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
         </div>
+      </div>
 
-        <h2 class="demo-title-extra">Button Text</h2>
+      <h2 class="demo-title-extra">Configurable Speed</h2>
 
-        <div class="demo-container">
-          <div class="shiny-button">
-            <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
-          </div>
-        </div>
+      <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+        <ShinyText
+          :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
+          :disabled="false"
+          :speed="speed"
+          class-name="shiny-text-demo"
+        />
+      </div>
 
-        <h2 class="demo-title-extra">Configurable Speed</h2>
+      <Customize>
+        <PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
+      </Customize>
 
-        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
-          <ShinyText
-            :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
-            :disabled="false"
-            :speed="speed"
-            class-name="shiny-text-demo"
-          />
-        </div>
+      <PropTable :data="propData" />
+    </template>
 
-        <Customize>
-          <PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
-        </Customize>
+    <template #code>
+      <CodeExample :code-object="shinyText" />
+    </template>
 
-        <PropTable :data="propData" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="shinyText" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="shinyText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="shinyText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/SplitTextDemo.vue b/src/demo/TextAnimations/SplitTextDemo.vue
index d6fb0c1..9958516 100644
--- a/src/demo/TextAnimations/SplitTextDemo.vue
+++ b/src/demo/TextAnimations/SplitTextDemo.vue
@@ -1,72 +1,70 @@
 <template>
-  <div class="split-text-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container">
-          <RefreshButton @refresh="forceRerender" />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <RefreshButton @refresh="forceRerender" />
 
-          <SplitText
-            :key="rerenderKey"
-            text="Hello, Vue!"
-            :delay="delay"
-            :duration="duration"
-            :ease="ease"
-            :split-type="splitType"
-            :threshold="threshold"
-            class="split-text-demo-text"
-            @animation-complete="
-              () => {
-                showCallback && showToast();
-              }
-            "
-          />
-        </div>
+        <SplitText
+          :key="rerenderKey"
+          text="Hello, Vue!"
+          :delay="delay"
+          :duration="duration"
+          :ease="ease"
+          :split-type="splitType"
+          :threshold="threshold"
+          class="split-text-demo"
+          @animation-complete="
+            () => {
+              showCallback && showToast();
+            }
+          "
+        />
+      </div>
 
-        <Customize>
-          <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Stagger Delay (ms)"
-            v-model="delay"
-            :min="10"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Stagger Delay (ms)"
+          v-model="delay"
+          :min="10"
+          :max="500"
+          :step="10"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Duration (s)"
-            v-model="duration"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Duration (s)"
+          v-model="duration"
+          :min="0.1"
+          :max="3"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Threshold"
-            v-model="threshold"
-            :min="0.1"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Threshold"
+          v-model="threshold"
+          :min="0.1"
+          :max="1"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['gsap']" />
-      </template>
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="splitText" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="splitText" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="splitText.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="splitText.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -86,7 +84,7 @@ import { useToast } from 'primevue/usetoast';
 import { useForceRerender } from '@/composables/useForceRerender';
 
 const delay = ref(10);
-const duration = ref(2);
+const duration = ref(3);
 const ease = ref('elastic.out(1, 0.3)');
 const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars');
 const threshold = ref(0.1);
diff --git a/src/demo/TextAnimations/TextCursorDemo.vue b/src/demo/TextAnimations/TextCursorDemo.vue
index ec45013..3fd7df8 100644
--- a/src/demo/TextAnimations/TextCursorDemo.vue
+++ b/src/demo/TextAnimations/TextCursorDemo.vue
@@ -1,58 +1,56 @@
 <template>
-  <div class="text-cursor-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden">
-          <TextCursor
-            :key="key"
-            :text="text"
-            :follow-mouse-direction="followMouseDirection"
-            :random-float="randomFloat"
-          />
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[500px]">
+        <TextCursor
+          :key="key"
+          :text="text"
+          :follow-mouse-direction="followMouseDirection"
+          :random-float="randomFloat"
+        />
 
-          <div
-            class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
-          >
-            Hover Around!
-          </div>
+        <div
+          class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
+        >
+          Hover Around!
+        </div>
+      </div>
+
+      <Customize>
+        <div class="mb-4">
+          <label class="block text-sm font-medium mb-2">Text</label>
+
+          <input
+            v-model="text"
+            type="text"
+            placeholder="Enter text..."
+            maxlength="10"
+            class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+          />
         </div>
 
-        <Customize>
-          <div class="mb-4">
-            <label class="block text-sm font-medium mb-2">Text</label>
+        <PreviewSwitch
+          title="Follow Mouse Direction"
+          v-model="followMouseDirection"
+          @update:model-value="forceRerender"
+        />
 
-            <input
-              v-model="text"
-              type="text"
-              placeholder="Enter text..."
-              maxlength="10"
-              class="w-[160px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
-            />
-          </div>
+        <PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
+      </Customize>
 
-          <PreviewSwitch
-            title="Follow Mouse Direction"
-            v-model="followMouseDirection"
-            @update:model-value="forceRerender"
-          />
+      <PropTable :data="propData" />
 
-          <PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
-        </Customize>
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-        <PropTable :data="propData" />
+    <template #code>
+      <CodeExample :code-object="textCursor" />
+    </template>
 
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="textCursor" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="textCursor.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="textCursor.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/TextPressureDemo.vue b/src/demo/TextAnimations/TextPressureDemo.vue
index 06a79cc..441eb52 100644
--- a/src/demo/TextAnimations/TextPressureDemo.vue
+++ b/src/demo/TextAnimations/TextPressureDemo.vue
@@ -1,127 +1,123 @@
 <template>
-  <div class="text-pressure-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative bg-[#060010] min-h-[400px] max-h-[450px] overflow-hidden mb-6">
-          <div class="w-full h-full">
-            <TextPressure
-              :key="rerenderKey"
-              :text="text"
-              :flex="flex"
-              :alpha="alpha"
-              :stroke="stroke"
-              :width="width"
-              :weight="weight"
-              :italic="italic"
-              :text-color="textColor"
-              :stroke-color="strokeColor"
-              :min-font-size="36"
-            />
-          </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container min-h-[400px]">
+        <TextPressure
+          :key="rerenderKey"
+          :text="text"
+          :flex="flex"
+          :alpha="alpha"
+          :stroke="stroke"
+          :width="width"
+          :weight="weight"
+          :italic="italic"
+          :text-color="textColor"
+          :stroke-color="strokeColor"
+          :min-font-size="36"
+        />
+      </div>
+
+      <Customize>
+        <div class="mb-4">
+          <label class="block text-sm font-medium mb-2">Text</label>
+
+          <input
+            v-model="text"
+            type="text"
+            placeholder="Your text here..."
+            maxlength="10"
+            class="w-[200px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
+          />
         </div>
 
-        <Customize>
-          <div class="mb-4">
-            <label class="block text-sm font-medium mb-2">Text</label>
+        <div class="color-controls">
+          <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
 
-            <input
-              v-model="text"
-              type="text"
-              placeholder="Your text here..."
-              maxlength="10"
-              class="w-[200px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
-            />
-          </div>
+          <PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
+        </div>
 
-          <div class="color-controls">
-            <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
+        <p class="mt-6 text-[#999] text-sm">Animation Settings</p>
 
-            <PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
-          </div>
+        <div class="flex gap-4 flex-wrap">
+          <PreviewSwitch
+            title="Flex"
+            :model-value="flex"
+            @update:model-value="
+              (val: boolean) => {
+                flex = val;
+                forceRerender();
+              }
+            "
+          />
 
-          <p class="mt-6 text-[#999] text-sm">Animation Settings</p>
+          <PreviewSwitch
+            title="Alpha"
+            :model-value="alpha"
+            @update:model-value="
+              (val: boolean) => {
+                alpha = val;
+                forceRerender();
+              }
+            "
+          />
 
-          <div class="flex gap-4 flex-wrap">
-            <PreviewSwitch
-              title="Flex"
-              :model-value="flex"
-              @update:model-value="
-                (val: boolean) => {
-                  flex = val;
-                  forceRerender();
-                }
-              "
-            />
+          <PreviewSwitch
+            title="Stroke"
+            :model-value="stroke"
+            @update:model-value="
+              (val: boolean) => {
+                stroke = val;
+                forceRerender();
+              }
+            "
+          />
 
-            <PreviewSwitch
-              title="Alpha"
-              :model-value="alpha"
-              @update:model-value="
-                (val: boolean) => {
-                  alpha = val;
-                  forceRerender();
-                }
-              "
-            />
+          <PreviewSwitch
+            title="Width"
+            :model-value="width"
+            @update:model-value="
+              (val: boolean) => {
+                width = val;
+                forceRerender();
+              }
+            "
+          />
 
-            <PreviewSwitch
-              title="Stroke"
-              :model-value="stroke"
-              @update:model-value="
-                (val: boolean) => {
-                  stroke = val;
-                  forceRerender();
-                }
-              "
-            />
+          <PreviewSwitch
+            title="Weight"
+            :model-value="weight"
+            @update:model-value="
+              (val: boolean) => {
+                weight = val;
+                forceRerender();
+              }
+            "
+          />
 
-            <PreviewSwitch
-              title="Width"
-              :model-value="width"
-              @update:model-value="
-                (val: boolean) => {
-                  width = val;
-                  forceRerender();
-                }
-              "
-            />
+          <PreviewSwitch
+            title="Italic"
+            :model-value="italic"
+            @update:model-value="
+              (val: boolean) => {
+                italic = val;
+                forceRerender();
+              }
+            "
+          />
+        </div>
+      </Customize>
 
-            <PreviewSwitch
-              title="Weight"
-              :model-value="weight"
-              @update:model-value="
-                (val: boolean) => {
-                  weight = val;
-                  forceRerender();
-                }
-              "
-            />
+      <PropTable :data="propData" />
+    </template>
 
-            <PreviewSwitch
-              title="Italic"
-              :model-value="italic"
-              @update:model-value="
-                (val: boolean) => {
-                  italic = val;
-                  forceRerender();
-                }
-              "
-            />
-          </div>
-        </Customize>
+    <template #code>
+      <CodeExample :code-object="textPressure" />
+    </template>
 
-        <PropTable :data="propData" />
-      </template>
-
-      <template #code>
-        <CodeExample :code-object="textPressure" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="textPressure.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="textPressure.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/TextTrailDemo.vue b/src/demo/TextAnimations/TextTrailDemo.vue
index 17b4084..a89572f 100644
--- a/src/demo/TextAnimations/TextTrailDemo.vue
+++ b/src/demo/TextAnimations/TextTrailDemo.vue
@@ -1,73 +1,71 @@
 <template>
-  <div class="text-trail-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden p-0">
-          <TextTrail
-            :key="`${key}-${animateColor}`"
-            :noise-factor="noiseFactor"
-            :noise-scale="noiseScale / 10000"
-            :font-weight="fontWeight"
-            :alpha-persist-factor="alphaPersistFactor"
-            :animate-color="animateColor"
-            :text-color="animateColor ? undefined : '#ffffff'"
-          />
-        </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container h-[500px]">
+        <TextTrail
+          :key="`${key}-${animateColor}`"
+          :noise-factor="noiseFactor"
+          :noise-scale="noiseScale / 10000"
+          :font-weight="fontWeight"
+          :alpha-persist-factor="alphaPersistFactor"
+          :animate-color="animateColor"
+          :text-color="animateColor ? undefined : '#ffffff'"
+        />
+      </div>
 
-        <Customize>
-          <PreviewSlider
-            title="Noise Factor"
-            v-model="noiseFactor"
-            :min="1"
-            :max="25"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+      <Customize>
+        <PreviewSlider
+          title="Noise Factor"
+          v-model="noiseFactor"
+          :min="1"
+          :max="25"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Noise Scale"
-            v-model="noiseScale"
-            :min="0"
-            :max="100"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Noise Scale"
+          v-model="noiseScale"
+          :min="0"
+          :max="100"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Font Weight"
-            v-model="fontWeight"
-            :min="100"
-            :max="900"
-            :step="100"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Font Weight"
+          v-model="fontWeight"
+          :min="100"
+          :max="900"
+          :step="100"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Alpha Persist Factor"
-            v-model="alphaPersistFactor"
-            :min="0.5"
-            :max="0.95"
-            :step="0.01"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Alpha Persist Factor"
+          v-model="alphaPersistFactor"
+          :min="0.5"
+          :max="0.95"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
-        </Customize>
+        <PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['three']" />
-      </template>
+      <Dependencies :dependency-list="['three']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="textTrail" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="textTrail" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="textTrail.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="textTrail.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index 06f4a58..2e6aeec 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -1,65 +1,63 @@
 <template>
-  <div class="truefocus-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
-          <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
-            <TrueFocus v-bind="config" />
-          </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container">
+        <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
+          <TrueFocus :key="key" v-bind="config" />
         </div>
+      </div>
 
-        <Customize>
-          <PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
+      <Customize>
+        <PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
 
-          <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
 
-          <PreviewSlider
-            title="Blur Amount"
-            v-model="blurAmount"
-            :min="0"
-            :max="15"
-            :step="0.5"
-            value-unit="px"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Blur Amount"
+          v-model="blurAmount"
+          :min="0"
+          :max="15"
+          :step="0.5"
+          value-unit="px"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Animation Duration"
-            v-model="animationDuration"
-            :min="0.1"
-            :max="3"
-            :step="0.1"
-            value-unit="s"
-            :disabled="!manualMode"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider
+          title="Animation Duration"
+          v-model="animationDuration"
+          :min="0.1"
+          :max="3"
+          :step="0.1"
+          value-unit="s"
+          :disabled="!manualMode"
+          @update:model-value="forceRerender"
+        />
 
-          <PreviewSlider
-            title="Pause Between Animations"
-            v-model="pauseBetweenAnimations"
-            :min="0"
-            :max="5"
-            :step="0.5"
-            value-unit="s"
-            :disabled="manualMode"
-            @update:model-value="forceRerender"
-          />
-        </Customize>
+        <PreviewSlider
+          title="Pause Between Animations"
+          v-model="pauseBetweenAnimations"
+          :min="0"
+          :max="5"
+          :step="0.5"
+          value-unit="s"
+          :disabled="manualMode"
+          @update:model-value="forceRerender"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="trueFocus" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="trueFocus" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="trueFocus.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="trueFocus.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">