Format ScrollReveal component and demo for improved readability and consistency

src/constants/code/TextAnimations/scrollRevealCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw'
+import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw';
-import type { CodeObject } from '../../../types/code'
+import type { CodeObject } from '../../../types/code';
 
 export const scrollRevealCode: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollReveal`,
@@ -23,4 +23,4 @@ export const scrollRevealCode: CodeObject = {
   import ScrollReveal from "./ScrollReveal.vue";
 </script>`,
   code
-}
+};

src/content/TextAnimations/ScrollReveal/ScrollReveal.vue

@@ -1,14 +1,7 @@
 <template>
   <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
-      <p 
+    <p :class="`leading-relaxed font-semibold ${textClassName}`" style="font-size: clamp(1.6rem, 4vw, 3rem)">
-        :class="`leading-relaxed font-semibold ${textClassName}`"
+      <span v-for="(word, index) in splitText" :key="index" :class="word.isWhitespace ? '' : 'inline-block word'">
-        style="font-size: clamp(1.6rem, 4vw, 3rem);"
-      >
-        <span 
-          v-for="(word, index) in splitText" 
-          :key="index"
-          :class="word.isWhitespace ? '' : 'inline-block word'"
-        >
         {{ word.text }}
       </span>
     </p>
@@ -66,9 +59,7 @@
   scrollTriggerInstances = [];
 
   const scroller =
-      props.scrollContainerRef && props.scrollContainerRef.current
+    props.scrollContainerRef && props.scrollContainerRef.current ? props.scrollContainerRef.current : window;
-        ? props.scrollContainerRef.current
-        : window;
 
   const rotationTl = gsap.fromTo(
     el,
@@ -81,8 +72,8 @@
         scroller,
         start: 'top bottom',
         end: props.rotationEnd,
-          scrub: true,
+        scrub: true
-        },
+      }
     }
   );
 
@@ -104,8 +95,8 @@
         scroller,
         start: 'top bottom-=20%',
         end: props.wordAnimationEnd,
-          scrub: true,
+        scrub: true
-        },
+      }
     }
   );
 
@@ -126,8 +117,8 @@
           scroller,
           start: 'top bottom-=20%',
           end: props.wordAnimationEnd,
-            scrub: true,
+          scrub: true
-          },
+        }
       }
     );
 
@@ -162,4 +153,3 @@
   { deep: true }
 );
 </script>
-  

src/demo/TextAnimations/ScrollRevealDemo.vue

@@ -1,15 +1,8 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div 
+      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
-        ref="containerRef"
+        <div class="scroll-instruction">Scroll Down</div>
-        class="demo-container"
-        @wheel="smoothScroll"
-      >
-
-        <div class="scroll-instruction">
-          Scroll Down
-        </div>
 
         <div class="scroll-content">
           <ScrollReveal
@@ -29,16 +22,19 @@
       </div>
 
       <Customize>
-
         <PreviewSwitch
           title="Enable Hover"
           :model-value="enableBlur"
-            @update:model-value="(val: boolean) => { enableBlur = val; forceRerender() }" 
+          @update:model-value="
+            (val: boolean) => {
+              enableBlur = val;
+              forceRerender();
+            }
+          "
         />
         <PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
         <PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
         <PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
-
       </Customize>
 
       <PropTable :data="propData" />
@@ -55,62 +51,64 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue';
-import { gsap } from 'gsap'
+import { gsap } from 'gsap';
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue'
+import PropTable from '../../components/common/PropTable.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue'
+import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue'
+import Customize from '../../components/common/Customize.vue';
-import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue'
+import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
-import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode'
+import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
 
-const containerRef = ref<HTMLElement | null>(null)
+const containerRef = ref<HTMLElement | null>(null);
-const scrollText = ref("When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!")
+const scrollText = ref(
-const enableBlur = ref(true)
+  'When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!'
-const baseOpacity = ref(0.1)
+);
-const baseRotation = ref(3)
+const enableBlur = ref(true);
-const blurStrength = ref(4)
+const baseOpacity = ref(0.1);
-const containerClassName = ref("")
+const baseRotation = ref(3);
-const textClassName = ref("")
+const blurStrength = ref(4);
-const rotationEnd = ref("bottom bottom")
+const containerClassName = ref('');
-const wordAnimationEnd = ref("bottom bottom")
+const textClassName = ref('');
-const rerenderKey = ref(0)
+const rotationEnd = ref('bottom bottom');
+const wordAnimationEnd = ref('bottom bottom');
+const rerenderKey = ref(0);
 
 const forceRerender = () => {
-rerenderKey.value++
+  rerenderKey.value++;
-}
+};
 
 const smoothScroll = (e: WheelEvent) => {
-e.preventDefault()
+  e.preventDefault();
-const container = containerRef.value
+  const container = containerRef.value;
-if (!container) return
+  if (!container) return;
-const delta = e.deltaY || e.detail
+  const delta = e.deltaY || e.detail;
-const scrollAmount = delta * 2
+  const scrollAmount = delta * 2;
 
   gsap.to(container, {
     scrollTop: container.scrollTop + scrollAmount,
     duration: 2,
-  ease: "power3.out",
+    ease: 'power3.out',
-  overwrite: "auto"
+    overwrite: 'auto'
-})
+  });
-}
+};
 
 onMounted(() => {
-const container = containerRef.value
+  const container = containerRef.value;
   if (container) {
-  container.addEventListener('wheel', smoothScroll, { passive: false })
+    container.addEventListener('wheel', smoothScroll, { passive: false });
   }
-})
+});
 
 onUnmounted(() => {
-const container = containerRef.value
+  const container = containerRef.value;
   if (container) {
-  container.removeEventListener('wheel', smoothScroll)
+    container.removeEventListener('wheel', smoothScroll);
   }
-})
+});
 
 const propData = [
   {
@@ -173,7 +171,7 @@ const propData = [
     default: '"bottom bottom"',
     description: 'ScrollTrigger end position for word animations'
   }
-]
+];
 </script>
 
 <style scoped>
@@ -189,7 +187,7 @@ padding-bottom: 50vh;
 
 .scroll-instruction {
   text-align: center;
-color: #271E37;
+  color: #222;
   font-size: clamp(4rem, 6vw, 4rem);
   font-weight: 900;
   position: absolute;