Simplify demo components

2026-03-09 00:19:31 -06:00 · 2025-07-14 21:09:53 +03:00
parent a65db3c807
commit 07ce88d997
53 changed files with 2254 additions and 2453 deletions
--- 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',
--- 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,
--- 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;
 }
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -1,11 +1,8 @@
 <template>
-  <div class="animated-content-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container relative py-6 overflow-hidden">
+      <div class="demo-container">
        <RefreshButton @click="forceRerender" />
-
-          <div :key="key" class="flex justify-center items-center">
        <AnimatedContent
          :direction="direction"
          :delay="delay"
@@ -17,16 +14,15 @@
          :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>
        </AnimatedContent>
      </div>
-        </div>

      <Customize>
        <PreviewSelect
@@ -127,7 +123,6 @@
      <CliInstallation :command="animatedContent.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- 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"
--- a/src/demo/Animations/ClickSparkDemo.vue
+++ b/src/demo/Animations/ClickSparkDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="click-spark-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container">
@@ -82,7 +81,6 @@
      <CliInstallation :command="clickSpark.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </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>
--- a/src/demo/Animations/CountUpDemo.vue
+++ b/src/demo/Animations/CountUpDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="count-up-demo">
  <TabbedLayout>
    <template #preview>
      <h2 class="demo-title-extra">Default</h2>
@@ -51,7 +50,6 @@
      <CliInstallation :command="countup.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- 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"
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="fade-content-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container">
@@ -74,7 +73,6 @@
      <CliInstallation :command="fadeContent.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Animations/GlareHoverDemo.vue
+++ b/src/demo/Animations/GlareHoverDemo.vue
@@ -1,9 +1,7 @@
 <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">
+      <div class="demo-container min-h-[400px]">
        <GlareHover
          background="#111"
          border-color="#222"
@@ -19,7 +17,6 @@
          <div class="text-center text-5xl font-black text-[#222] m-0">Hover Me</div>
        </GlareHover>
      </div>
-        </div>

      <Customize>
        <PreviewColor title="Glare Color" v-model="glareColor" />
@@ -51,7 +48,6 @@
      <CliInstallation :command="glareHover.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- 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="
              () => {
--- a/src/demo/Animations/MagnetDemo.vue
+++ b/src/demo/Animations/MagnetDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="magnet-demo">
  <TabbedLayout>
    <template #preview>
      <h2 class="demo-title-extra">Container</h2>
@@ -61,7 +60,6 @@
      <CliInstallation :command="magnet.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Animations/MagnetLinesDemo.vue
+++ b/src/demo/Animations/MagnetLinesDemo.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="magnet-lines-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container overflow-hidden flex justify-center pb-4 items-center">
+      <div class="demo-container">
        <MagnetLines :rows="10" :columns="12" container-size="40vmin" line-width="2px" line-height="30px" />
      </div>

@@ -17,7 +16,6 @@
      <CliInstallation :command="magnetLines.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- 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"
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="metallic-paint-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative h-[500px] overflow-hidden">
@@ -19,14 +18,7 @@
      </div>

      <Customize>
-          <PreviewSlider
-            title="Edge"
-            v-model="edge"
-            :min="0"
-            :max="1"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+        <PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />

        <PreviewSlider
          title="Pattern Scale"
@@ -85,7 +77,6 @@
      <CliInstallation :command="metallicPaint.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Animations/NoiseDemo.vue
+++ b/src/demo/Animations/NoiseDemo.vue
@@ -1,8 +1,7 @@
 <template>
-  <div>
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container h-[400px] overflow-hidden">
+      <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>
@@ -23,7 +22,6 @@
      <CliInstallation :command="noise.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Animations/PixelTransitionDemo.vue
+++ b/src/demo/Animations/PixelTransitionDemo.vue
@@ -1,10 +1,7 @@
 <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"
-        >
+      <div class="demo-container min-h-[400px]">
        <PixelTransition
          :key="key"
          :grid-size="gridSize"
@@ -27,7 +24,7 @@
          </template>
        </PixelTransition>

-          <div class="mt-2 text-[#a6a6a6]">Psst, hover the card!</div>
+        <div class="mt-2 absolute bottom-[2em] text-[#a6a6a6]">Psst, hover the image!</div>
      </div>

      <Customize>
@@ -68,7 +65,6 @@
      <CliInstallation :command="pixelTransition.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Animations/RibbonsDemo.vue
+++ b/src/demo/Animations/RibbonsDemo.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="ribbons-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container" style="height: 500px; position: relative">
+      <div class="demo-container">
        <div class="hover-text">Hover Me.</div>
        <Ribbons
          :base-thickness="baseThickness"
@@ -55,7 +54,6 @@
      <CliInstallation :command="ribbons.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
@@ -180,6 +178,8 @@ const propData = [
 }

 .demo-container {
+  position: relative;
+  height: 500px;
  padding: 0;
  overflow: hidden;
 }
--- a/src/demo/Animations/SplashCursorDemo.vue
+++ b/src/demo/Animations/SplashCursorDemo.vue
@@ -1,9 +1,8 @@
 <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>
+        <span class="text-6xl text-center text-[#333] font-black select-none">Move Your Cursor</span>
      </div>

      <Customize>
@@ -32,7 +31,6 @@
    :DENSITY_DISSIPATION="densityDissipation"
    :SPLAT_FORCE="splatForce"
  />
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/CardSwapDemo.vue
+++ b/src/demo/Components/CardSwapDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="card-swap-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
@@ -125,7 +124,6 @@
      <CliInstallation :command="cardSwap.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/CarouselDemo.vue
+++ b/src/demo/Components/CarouselDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="carousel-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
@@ -61,7 +60,6 @@
      <CliInstallation :command="carousel.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="circular-gallery-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container h-[500px] p-0 overflow-hidden">
+      <div class="demo-container h-[500px]">
        <CircularGallery
          :key="rerenderKey"
          :bend="bend"
@@ -69,7 +68,6 @@
      <CliInstallation :command="circularGallery.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/DecayCardDemo.vue
+++ b/src/demo/Components/DecayCardDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="decay-card-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container" style="overflow: hidden">
@@ -25,7 +24,6 @@
      <CliInstallation :command="decayCard.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/DockDemo.vue
+++ b/src/demo/Components/DockDemo.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="dock-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container" style="min-height: 400px; position: relative">
-          <div class="demo-content">
+      <div class="demo-container">
        <Dock
          :key="rerenderKey"
          :items="items"
@@ -14,7 +12,6 @@
          :dock-height="256"
          :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
        />
-          </div>

        <div
          class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
@@ -80,7 +77,6 @@
      <CliInstallation :command="dock.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </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>
--- a/src/demo/Components/ElasticSliderDemo.vue
+++ b/src/demo/Components/ElasticSliderDemo.vue
@@ -1,7 +1,6 @@
 <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 />
@@ -33,7 +32,6 @@
      </div>

      <PropTable :data="propData" />
-      </div>
    </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>
--- a/src/demo/Components/FlowingMenuDemo.vue
+++ b/src/demo/Components/FlowingMenuDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="flowing-menu-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
@@ -19,7 +18,6 @@
      <CliInstallation :command="flowingMenu.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/FlyingPostersDemo.vue
+++ b/src/demo/Components/FlyingPostersDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="flying-posters-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
@@ -91,7 +90,6 @@
      <CliInstallation :command="flyingPosters.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/GlassIconsDemo.vue
+++ b/src/demo/Components/GlassIconsDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="glass-icons-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container" style="height: 500px; overflow: hidden">
@@ -21,7 +20,6 @@
      <CliInstallation :command="glassIcons.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/GooeyNavDemo.vue
+++ b/src/demo/Components/GooeyNavDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="gooey-nav-demo">
  <TabbedLayout>
    <template #preview>
      <div
@@ -58,7 +57,6 @@
      <CliInstallation :command="gooeyNav.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/InfiniteScrollDemo.vue
+++ b/src/demo/Components/InfiniteScrollDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="infinite-scroll-demo">
  <TabbedLayout>
    <template #preview>
      <div
@@ -46,7 +45,6 @@
      <CliInstallation :command="infiniteScroll.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/MasonryDemo.vue
+++ b/src/demo/Components/MasonryDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="masonry-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container" style="height: 900px; overflow: hidden">
@@ -82,7 +81,6 @@
      <CliInstallation :command="masonry.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
@@ -167,10 +165,3 @@ const propData = [
  }
 ];
 </script>
-
-<style scoped>
-.masonry-demo-container {
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/src/demo/Components/PixelCardDemo.vue
+++ b/src/demo/Components/PixelCardDemo.vue
@@ -1,10 +1,7 @@
 <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"
-        >
+      <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>
@@ -32,7 +29,6 @@
      <CliInstallation :command="pixelCard.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/ProfileCardDemo.vue
+++ b/src/demo/Components/ProfileCardDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="profile-card-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container" style="height: 700px; overflow: hidden; position: relative">
@@ -42,7 +41,6 @@
      <CliInstallation :command="profileCard.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </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>
--- a/src/demo/Components/SpotlightCardDemo.vue
+++ b/src/demo/Components/SpotlightCardDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="spotlight-card-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative py-10">
@@ -43,7 +42,6 @@
      <CliInstallation :command="spotlightCard.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/Components/TiltedCardDemo.vue
+++ b/src/demo/Components/TiltedCardDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="tilted-card-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
@@ -47,7 +46,6 @@
      <CliInstallation :command="tiltedCard.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/AsciiTextDemo.vue
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="ascii-text-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container">
@@ -71,7 +70,6 @@
      <CliInstallation :command="asciiText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/BlurTextDemo.vue
+++ b/src/demo/TextAnimations/BlurTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="blur-text-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative min-h-[400px] overflow-hidden">
@@ -9,7 +8,7 @@
          :key="rerenderKey"
          text="Isn't this so cool?!"
          :delay="delay"
-            class-name="text-3xl md:text-6xl font-bold text-center"
+          class-name="blur-text-demo"
          :animate-by="animateBy"
          :direction="direction"
          :threshold="threshold"
@@ -85,7 +84,6 @@
      <CliInstallation :command="blurText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/CircularTextDemo.vue
+++ b/src/demo/TextAnimations/CircularTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="circular-text-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
@@ -46,7 +45,6 @@
      <CliInstallation :command="circularText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/CurvedLoopDemo.vue
+++ b/src/demo/TextAnimations/CurvedLoopDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="curved-loop-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative h-[500px] overflow-hidden p-0">
@@ -67,7 +66,6 @@
      <CliInstallation :command="curvedLoop.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/src/demo/TextAnimations/DecryptedTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="decrypted-text-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative py-6 overflow-hidden">
@@ -113,7 +112,6 @@
      <CliInstallation :command="decryptedText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/FallingTextDemo.vue
+++ b/src/demo/TextAnimations/FallingTextDemo.vue
@@ -1,5 +1,4 @@
 <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">
@@ -58,7 +57,6 @@
      <CliInstallation :command="fallingText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
@@ -141,5 +139,3 @@ const propData = [
  }
 ];
 </script>
-
-<style scoped></style>
--- a/src/demo/TextAnimations/FuzzyTextDemo.vue
+++ b/src/demo/TextAnimations/FuzzyTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="fuzzy-text-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative h-[500px] overflow-hidden">
@@ -69,7 +68,6 @@
      <CliInstallation :command="fuzzyText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/GlitchTextDemo.vue
+++ b/src/demo/TextAnimations/GlitchTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="glitchtext-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container relative h-[500px] overflow-hidden">
@@ -35,7 +34,6 @@
      <CliInstallation :command="glitchText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- 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>
--- 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"
        >
--- 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>
--- 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 {
--- a/src/demo/TextAnimations/ShinyTextDemo.vue
+++ b/src/demo/TextAnimations/ShinyTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="shiny-text-demo">
  <TabbedLayout>
    <template #preview>
      <h2 class="demo-title-extra">Basic</h2>
@@ -42,7 +41,6 @@
      <CliInstallation :command="shinyText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/SplitTextDemo.vue
+++ b/src/demo/TextAnimations/SplitTextDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="split-text-demo">
  <TabbedLayout>
    <template #preview>
      <div class="demo-container">
@@ -13,7 +12,7 @@
          :ease="ease"
          :split-type="splitType"
          :threshold="threshold"
-            class="split-text-demo-text"
+          class="split-text-demo"
          @animation-complete="
            () => {
              showCallback && showToast();
@@ -38,7 +37,7 @@
          title="Duration (s)"
          v-model="duration"
          :min="0.1"
-            :max="2"
+          :max="3"
          :step="0.1"
          @update:model-value="forceRerender"
        />
@@ -66,7 +65,6 @@
      <CliInstallation :command="splitText.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </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);
--- a/src/demo/TextAnimations/TextCursorDemo.vue
+++ b/src/demo/TextAnimations/TextCursorDemo.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="text-cursor-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden">
+      <div class="demo-container h-[500px]">
        <TextCursor
          :key="key"
          :text="text"
@@ -52,7 +51,6 @@
      <CliInstallation :command="textCursor.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/TextPressureDemo.vue
+++ b/src/demo/TextAnimations/TextPressureDemo.vue
@@ -1,9 +1,7 @@
 <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">
+      <div class="demo-container min-h-[400px]">
        <TextPressure
          :key="rerenderKey"
          :text="text"
@@ -18,7 +16,6 @@
          :min-font-size="36"
        />
      </div>
-        </div>

      <Customize>
        <div class="mb-4">
@@ -121,7 +118,6 @@
      <CliInstallation :command="textPressure.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/TextTrailDemo.vue
+++ b/src/demo/TextAnimations/TextTrailDemo.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="text-trail-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="demo-container relative h-[500px] overflow-hidden p-0">
+      <div class="demo-container h-[500px]">
        <TextTrail
          :key="`${key}-${animateColor}`"
          :noise-factor="noiseFactor"
@@ -67,7 +66,6 @@
      <CliInstallation :command="textTrail.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -1,10 +1,9 @@
 <template>
-  <div class="truefocus-demo">
  <TabbedLayout>
    <template #preview>
-        <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
+      <div class="demo-container">
        <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
-            <TrueFocus v-bind="config" />
+          <TrueFocus :key="key" v-bind="config" />
        </div>
      </div>

@@ -59,7 +58,6 @@
      <CliInstallation :command="trueFocus.cli" />
    </template>
  </TabbedLayout>
-  </div>
 </template>

 <script setup lang="ts">