Simplify demo components

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',

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,

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;
 }

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

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"

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>

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

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"

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

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="demo-container min-h-[400px]">
-          <div class="flex justify-center items-center h-full">
         <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">

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',
+              '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-[#0D0716]'
+              variant === num ? 'bg-[#27FF64] text-black' : 'bg-[#0b0b0b]'
             ]"
             @click="
               () => {

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

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

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"

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

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

src/demo/Animations/PixelTransitionDemo.vue

@@ -1,10 +1,7 @@
 <template>
-  <div class="pixel-transition-demo">
   <TabbedLayout>
     <template #preview>
-        <div
+      <div class="demo-container min-h-[400px]">
-          class="demo-container flex flex-col items-center justify-center min-h-[400px] max-h-[400px] relative overflow-hidden"
-        >
         <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">

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;
 }

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

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

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

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

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

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-container">
-          <div class="demo-content">
         <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;
+  min-height: 400px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
   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>

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>

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

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

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

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

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

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>

src/demo/Components/PixelCardDemo.vue

@@ -1,10 +1,7 @@
 <template>
-  <div class="pixel-card-demo">
   <TabbedLayout>
     <template #preview>
-        <div
+      <div class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
-          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">

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>

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

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

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

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

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

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

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

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>

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

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

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>

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

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>

src/demo/TextAnimations/ScrollRevealDemo.vue

@@ -181,8 +181,7 @@ const propData = [
 }
 
 .scroll-content {
-  padding-top: 150vh !important;
+  padding: 150vh 2em 50vh 2em;
-  padding-bottom: 50vh;
 }
 
 .scroll-instruction {

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

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

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

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="demo-container min-h-[400px]">
-          <div class="w-full h-full">
         <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">

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

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