Cleanup

src/demo/TextAnimations/GradientTextDemo.vue

@@ -4,7 +4,7 @@
       <template #preview>
         <h2 class="demo-title-extra">Default</h2>
 
-        <div class="demo-container relative min-h-[150px] flex items-center justify-center">
+        <div class="demo-container">
           <div class="text-[2rem]">
             <GradientText
               text="Add a splash of color!"
@@ -17,7 +17,7 @@
 
         <h2 class="demo-title-extra">Border Animation</h2>
 
-        <div class="demo-container relative min-h-[150px] flex items-center justify-center">
+        <div class="demo-container">
           <div class="text-[2rem]">
             <GradientText
               text="Now with a cool border!"
@@ -130,6 +130,10 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .demo-title-extra {
   font-size: 1.125rem;
   font-weight: 600;

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -59,7 +59,7 @@ import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
 
 const containerRef = ref<HTMLElement | null>(null);
-const scrollText = ref('vuebits');
+const scrollText = ref('Vue Bits!');
 const animationDuration = ref(1);
 const ease = ref('back.inOut(2)');
 const scrollStart = ref('center bottom+=50%');

src/demo/TextAnimations/ShinyTextDemo.vue

@@ -4,13 +4,13 @@
       <template #preview>
         <h2 class="demo-title-extra">Basic</h2>
 
-        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+        <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 relative min-h-[150px] text-2xl flex items-center justify-center">
+        <div class="demo-container">
           <div class="shiny-button">
             <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
           </div>
@@ -87,6 +87,10 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .shiny-button {
   padding: 12px 24px;
   border-radius: 50px;