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"
+      x: focusRect.x,
-      :animate="{
+      y: focusRect.y,
-        x: focusRect.x,
+      width: focusRect.width,
-        y: focusRect.y,
+      height: focusRect.height,
-        width: focusRect.width,
+      opacity: currentIndex >= 0 ? 1 : 0,
-        height: focusRect.height,
+    }" :transition="{
-        opacity: currentIndex >= 0 ? 1 : 0,
-      }"
-      :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,51 +1,44 @@
 <template>
-    <TabbedLayout>
+  <TabbedLayout>
-      <template #preview>
+    <template #preview>
-        <div 
+      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
-          ref="containerRef"
-          class="demo-container"
-          @wheel="smoothScroll"
-        >
 
-          <div class="scroll-instruction">
+        <div class="scroll-instruction">
-            Scroll Down
+          Scroll Down
-          </div>
-          
-          <div class="scroll-content">
-            <ScrollFloat
-              :children="scrollText"
-              :animation-duration="animationDuration"
-              :ease="ease"
-              :scroll-start="scrollStart"
-              :scroll-end="scrollEnd"
-              :stagger="stagger"
-              :container-class-name="containerClassName"
-              :text-class-name="textClassName"
-              :scroll-container-ref="{ current: containerRef }"
-              :key="rerenderKey"
-            />
-          </div>
         </div>
 
-        <Customize>
+        <div class="scroll-content">
+          <ScrollFloat 
+            :children="scrollText" 
+            :animation-duration="animationDuration" 
+            :ease="ease"
+            :scroll-start="scrollStart" 
+            :scroll-end="scrollEnd" 
+            :stagger="stagger"
+            :container-class-name="containerClassName" 
+            :text-class-name="textClassName"
+            :scroll-container-ref="{ current: containerRef }" 
+            :key="rerenderKey" 
+          />
+        </div>
+      </div>
 
-            <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
+      <Customize>
-            <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+        <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" />
+    </template>
 
-        </Customize>
+    <template #code>
+      <CodeExample :code-object="scrollFloatCode" />
+    </template>
 
-        <PropTable :data="propData" />
+    <template #cli>
-      </template>
+      <CliInstallation :command="scrollFloatCode.cli" />
-
+    </template>
-      <template #code>
+  </TabbedLayout>
-        <CodeExample :code-object="scrollFloatCode" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="scrollFloatCode.cli" />
-      </template>
-    </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -83,7 +76,7 @@ const smoothScroll = (e: WheelEvent) => {
 
   gsap.to(container, {
     scrollTop: container.scrollTop + scrollAmount,
-    duration: 2,
+    duration: 1,
     ease: "power3.out",
     overwrite: "auto"
   })
@@ -163,7 +156,7 @@ const propData = [
 </script>
 <style scoped>
 .demo-container {
-  height: 60vh ;
+  height: 60vh;
   overflow-y: 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{
+
+.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" />