Demo updates

src/content/TextAnimations/ScrollFloat/ScrollFloat.vue

@@ -1,11 +1,8 @@
 <template>
   <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
-    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
+    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`"
-      <span
+      style="font-size: clamp(1.6rem, 8vw, 10rem);">
-        v-for="(char, index) in splitText"
+      <span v-for="(char, index) in splitText" :key="index" class="inline-block char">
-        :key="index"
-        class="inline-block char"
-      >
         {{ char === " " ? "\u00A0" : char }}
       </span>
     </span>

src/content/TextAnimations/TrueFocus/TrueFocus.vue

@@ -121,44 +121,36 @@ onUnmounted(() => {
 
 <template>
   <div class="relative flex flex-wrap justify-center items-center gap-[1em]" ref="containerRef">
-    <span
+    <span v-for="(word, index) in words" :key="index" :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
-      v-for="(word, index) in words"
+      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer" :style="{
-      :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"
-      :style="{
         filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
         '--border-color': borderColor,
         '--glow-color': glowColor,
         transition: `filter ${animationDuration}s ease`,
-      }"
+      }" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave">
-      @mouseenter="handleMouseEnter(index)"
-      @mouseleave="handleMouseLeave"
-    >
       {{ word }}
     </span>
 
-    <motion.div
+    <motion.div class="top-0 left-0 box-content absolute border-none pointer-events-none" :animate="{
-      class="top-0 left-0 box-content absolute border-none pointer-events-none"
-      :animate="{
       x: focusRect.x,
       y: focusRect.y,
       width: focusRect.width,
       height: focusRect.height,
       opacity: currentIndex >= 0 ? 1 : 0,
-      }"
+    }" :transition="{
-      :transition="{
         duration: animationDuration,
-      }"
+      }" :style="{
-      :style="{
         '--border-color': borderColor,
         '--glow-color': glowColor,
-      }"
+      }">
-    >
+      <span
-      <span class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
+        class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
-      <span class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span
-      <span class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
+        class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
-      <span class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span
+        class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span
+        class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
     </motion.div>
   </div>
 </template>

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -1,11 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-        <div 
+      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
-          ref="containerRef"
-          class="demo-container"
-          @wheel="smoothScroll"
-        >
 
         <div class="scroll-instruction">
           Scroll Down
@@ -28,11 +24,8 @@
       </div>
 
       <Customize>
-        
         <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
         <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
-            
-
       </Customize>
 
       <PropTable :data="propData" />
@@ -83,7 +76,7 @@ const smoothScroll = (e: WheelEvent) => {
 
   gsap.to(container, {
     scrollTop: container.scrollTop + scrollAmount,
-    duration: 2,
+    duration: 1,
     ease: "power3.out",
     overwrite: "auto"
   })
@@ -171,9 +164,10 @@ const propData = [
   padding-top: 150vh !important;
   padding-bottom: 50vh;
 }
+
 .scroll-instruction {
   text-align: center;
-  color: #271E37;
+  color: #222;
   font-size: clamp(4rem, 6vw, 4rem);
   font-weight: 900;
   position: absolute;
@@ -182,8 +176,8 @@ const propData = [
   right: 0;
   transform: translateY(-50%);
 }
+
 .scroll-content {
   color: aliceblue;
 }
-
 </style>

src/demo/TextAnimations/TrueFocusDemo.vue

@@ -9,45 +9,18 @@
         </div>
 
         <Customize>
-          <PreviewColor title="Text Color" v-model="borderColor" @update:model-value="forceRerender" />
+          <PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
-            title="Hover Mode"
-            v-model="manualMode"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px"
-            title="Blur Amount"
+            @update:model-value="forceRerender" />
-            v-model="blurAmount"
-            :min="0"
-            :max="15"
-            :step="0.5"
-            value-unit="px"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Animation Duration" v-model="animationDuration" :min="0.1" :max="3" :step="0.1"
-            title="Animation Duration"
+            value-unit="s" :disabled="!manualMode" @update:model-value="forceRerender" />
-            v-model="animationDuration"
-            :min="0.1"
-            :max="3"
-            :step="0.1"
-            value-unit="s"
-            :disabled="!manualMode"
-            @update:model-value="forceRerender"
-          />
 
-          <PreviewSlider
+          <PreviewSlider title="Pause Between Animations" v-model="pauseBetweenAnimations" :min="0" :max="5" :step="0.5"
-            title="Pause Between Animations"
+            value-unit="s" :disabled="manualMode" @update:model-value="forceRerender" />
-            v-model="pauseBetweenAnimations"
-            :min="0"
-            :max="5"
-            :step="0.5"
-            value-unit="s"
-            :disabled="manualMode"
-            @update:model-value="forceRerender"
-          />
         </Customize>
 
         <PropTable :data="propData" />