From a0e049e447d72a074b4e17a6cab7e035d6cf568c Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 12:05:16 +0300
Subject: [PATCH] Format ScrollReveal component and demo for improved
 readability and consistency

---
 .../code/TextAnimations/scrollRevealCode.ts   |   6 +-
 .../ScrollReveal/ScrollReveal.vue             | 286 +++++++++---------
 src/demo/TextAnimations/ScrollRevealDemo.vue  | 280 +++++++++--------
 3 files changed, 280 insertions(+), 292 deletions(-)

diff --git a/src/constants/code/TextAnimations/scrollRevealCode.ts b/src/constants/code/TextAnimations/scrollRevealCode.ts
index 1919eba..d60d817 100644
--- a/src/constants/code/TextAnimations/scrollRevealCode.ts
+++ b/src/constants/code/TextAnimations/scrollRevealCode.ts
@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw';
+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
-}
\ No newline at end of file
+};
diff --git a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
index e8db1c2..b9dda72 100644
--- a/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
+++ b/src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
@@ -1,165 +1,155 @@
 <template>
-    <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
-      <p 
-        :class="`leading-relaxed font-semibold ${textClassName}`"
-        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>
-    </h2>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-  import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  
-  gsap.registerPlugin(ScrollTrigger);
-  
-  interface Props {
-    children: string;
-    scrollContainerRef?: { current: HTMLElement | null };
-    enableBlur?: boolean;
-    baseOpacity?: number;
-    baseRotation?: number;
-    blurStrength?: number;
-    containerClassName?: string;
-    textClassName?: string;
-    rotationEnd?: string;
-    wordAnimationEnd?: string;
-  }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    enableBlur: true,
-    baseOpacity: 0.1,
-    baseRotation: 3,
-    blurStrength: 4,
-    containerClassName: '',
-    textClassName: '',
-    rotationEnd: 'bottom bottom',
-    wordAnimationEnd: 'bottom bottom'
-  });
-  
-  const containerRef = ref<HTMLElement | null>(null);
-  let scrollTriggerInstances: ScrollTrigger[] = [];
-  
-  const splitText = computed(() => {
-    const text = typeof props.children === 'string' ? props.children : '';
-    return text.split(/(\s+)/).map((word, index) => ({
-      text: word,
-      isWhitespace: word.match(/^\s+$/) !== null,
-      key: index
-    }));
-  });
-  
-  const initializeAnimation = () => {
-    const el = containerRef.value;
-    if (!el) return;
-  
-    scrollTriggerInstances.forEach(trigger => trigger.kill());
-    scrollTriggerInstances = [];
-  
-    const scroller =
-      props.scrollContainerRef && props.scrollContainerRef.current
-        ? props.scrollContainerRef.current
-        : window;
-  
-    const rotationTl = gsap.fromTo(
-      el,
-      { transformOrigin: '0% 50%', rotate: props.baseRotation },
-      {
-        ease: 'none',
-        rotate: 0,
-        scrollTrigger: {
-          trigger: el,
-          scroller,
-          start: 'top bottom',
-          end: props.rotationEnd,
-          scrub: true,
-        },
+  <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
+    <p :class="`leading-relaxed font-semibold ${textClassName}`" 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>
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface Props {
+  children: string;
+  scrollContainerRef?: { current: HTMLElement | null };
+  enableBlur?: boolean;
+  baseOpacity?: number;
+  baseRotation?: number;
+  blurStrength?: number;
+  containerClassName?: string;
+  textClassName?: string;
+  rotationEnd?: string;
+  wordAnimationEnd?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  enableBlur: true,
+  baseOpacity: 0.1,
+  baseRotation: 3,
+  blurStrength: 4,
+  containerClassName: '',
+  textClassName: '',
+  rotationEnd: 'bottom bottom',
+  wordAnimationEnd: 'bottom bottom'
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+let scrollTriggerInstances: ScrollTrigger[] = [];
+
+const splitText = computed(() => {
+  const text = typeof props.children === 'string' ? props.children : '';
+  return text.split(/(\s+)/).map((word, index) => ({
+    text: word,
+    isWhitespace: word.match(/^\s+$/) !== null,
+    key: index
+  }));
+});
+
+const initializeAnimation = () => {
+  const el = containerRef.value;
+  if (!el) return;
+
+  scrollTriggerInstances.forEach(trigger => trigger.kill());
+  scrollTriggerInstances = [];
+
+  const scroller =
+    props.scrollContainerRef && props.scrollContainerRef.current ? props.scrollContainerRef.current : window;
+
+  const rotationTl = gsap.fromTo(
+    el,
+    { transformOrigin: '0% 50%', rotate: props.baseRotation },
+    {
+      ease: 'none',
+      rotate: 0,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: 'top bottom',
+        end: props.rotationEnd,
+        scrub: true
       }
-    );
-  
-    if (rotationTl.scrollTrigger) {
-      scrollTriggerInstances.push(rotationTl.scrollTrigger);
     }
-  
-    const wordElements = el.querySelectorAll('.word');
-  
-    const opacityTl = gsap.fromTo(
+  );
+
+  if (rotationTl.scrollTrigger) {
+    scrollTriggerInstances.push(rotationTl.scrollTrigger);
+  }
+
+  const wordElements = el.querySelectorAll('.word');
+
+  const opacityTl = gsap.fromTo(
+    wordElements,
+    { opacity: props.baseOpacity, willChange: 'opacity' },
+    {
+      ease: 'none',
+      opacity: 1,
+      stagger: 0.05,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: 'top bottom-=20%',
+        end: props.wordAnimationEnd,
+        scrub: true
+      }
+    }
+  );
+
+  if (opacityTl.scrollTrigger) {
+    scrollTriggerInstances.push(opacityTl.scrollTrigger);
+  }
+
+  if (props.enableBlur) {
+    const blurTl = gsap.fromTo(
       wordElements,
-      { opacity: props.baseOpacity, willChange: 'opacity' },
+      { filter: `blur(${props.blurStrength}px)` },
       {
         ease: 'none',
-        opacity: 1,
+        filter: 'blur(0px)',
         stagger: 0.05,
         scrollTrigger: {
           trigger: el,
           scroller,
           start: 'top bottom-=20%',
           end: props.wordAnimationEnd,
-          scrub: true,
-        },
+          scrub: true
+        }
       }
     );
-  
-    if (opacityTl.scrollTrigger) {
-      scrollTriggerInstances.push(opacityTl.scrollTrigger);
-    }
 
-    if (props.enableBlur) {
-      const blurTl = gsap.fromTo(
-        wordElements,
-        { filter: `blur(${props.blurStrength}px)` },
-        {
-          ease: 'none',
-          filter: 'blur(0px)',
-          stagger: 0.05,
-          scrollTrigger: {
-            trigger: el,
-            scroller,
-            start: 'top bottom-=20%',
-            end: props.wordAnimationEnd,
-            scrub: true,
-          },
-        }
-      );
-  
-      if (blurTl.scrollTrigger) {
-        scrollTriggerInstances.push(blurTl.scrollTrigger);
-      }
+    if (blurTl.scrollTrigger) {
+      scrollTriggerInstances.push(blurTl.scrollTrigger);
     }
-  };
-  
-  onMounted(() => {
+  }
+};
+
+onMounted(() => {
+  initializeAnimation();
+});
+
+onUnmounted(() => {
+  scrollTriggerInstances.forEach(trigger => trigger.kill());
+});
+
+watch(
+  [
+    () => props.children,
+    () => props.scrollContainerRef,
+    () => props.enableBlur,
+    () => props.baseRotation,
+    () => props.baseOpacity,
+    () => props.rotationEnd,
+    () => props.wordAnimationEnd,
+    () => props.blurStrength
+  ],
+  () => {
     initializeAnimation();
-  });
-  
-  onUnmounted(() => {
-    scrollTriggerInstances.forEach(trigger => trigger.kill());
-  });
-  
-  watch(
-    [
-      () => props.children,
-      () => props.scrollContainerRef,
-      () => props.enableBlur,
-      () => props.baseRotation,
-      () => props.baseOpacity,
-      () => props.rotationEnd,
-      () => props.wordAnimationEnd,
-      () => props.blurStrength
-    ],
-    () => {
-      initializeAnimation();
-    },
-    { deep: true }
-  );
-  </script>
-  
\ No newline at end of file
+  },
+  { deep: true }
+);
+</script>
diff --git a/src/demo/TextAnimations/ScrollRevealDemo.vue b/src/demo/TextAnimations/ScrollRevealDemo.vue
index 518ee48..65ab320 100644
--- a/src/demo/TextAnimations/ScrollRevealDemo.vue
+++ b/src/demo/TextAnimations/ScrollRevealDemo.vue
@@ -1,15 +1,8 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div 
-        ref="containerRef"
-        class="demo-container"
-        @wheel="smoothScroll"
-      >
-
-        <div class="scroll-instruction">
-          Scroll Down
-        </div>
+      <div ref="containerRef" 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() }" 
-          />
-          <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" />
-
+        <PreviewSwitch
+          title="Enable Hover"
+          :model-value="enableBlur"
+          @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,151 +51,153 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { gsap } from 'gsap'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
-import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode'
+import { ref, onMounted, onUnmounted } from 'vue';
+import { gsap } from 'gsap';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
 
-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 enableBlur = ref(true)
-const baseOpacity = ref(0.1)
-const baseRotation = ref(3)
-const blurStrength = ref(4)
-const containerClassName = ref("")
-const textClassName = ref("")
-const rotationEnd = ref("bottom bottom")
-const wordAnimationEnd = ref("bottom bottom")
-const rerenderKey = ref(0)
+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 enableBlur = ref(true);
+const baseOpacity = ref(0.1);
+const baseRotation = ref(3);
+const blurStrength = ref(4);
+const containerClassName = ref('');
+const textClassName = ref('');
+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()
-const container = containerRef.value
-if (!container) return
-const delta = e.deltaY || e.detail
-const scrollAmount = delta * 2
+  e.preventDefault();
+  const container = containerRef.value;
+  if (!container) return;
+  const delta = e.deltaY || e.detail;
+  const scrollAmount = delta * 2;
 
-gsap.to(container, {
-  scrollTop: container.scrollTop + scrollAmount,
-  duration: 2,
-  ease: "power3.out",
-  overwrite: "auto"
-})
-}
+  gsap.to(container, {
+    scrollTop: container.scrollTop + scrollAmount,
+    duration: 2,
+    ease: 'power3.out',
+    overwrite: 'auto'
+  });
+};
 
 onMounted(() => {
-const container = containerRef.value
-if (container) {
-  container.addEventListener('wheel', smoothScroll, { passive: false })
-}
-})
+  const container = containerRef.value;
+  if (container) {
+    container.addEventListener('wheel', smoothScroll, { passive: false });
+  }
+});
 
 onUnmounted(() => {
-const container = containerRef.value
-if (container) {
-  container.removeEventListener('wheel', smoothScroll)
-}
-})
+  const container = containerRef.value;
+  if (container) {
+    container.removeEventListener('wheel', smoothScroll);
+  }
+});
 
 const propData = [
-{
-  name: 'children',
-  type: 'string',
-  default: '""',
-  description: 'The text content to be animated word by word'
-},
-{
-  name: 'scrollContainerRef',
-  type: 'object',
-  default: 'undefined',
-  description: 'Ref to a custom scroll container (defaults to window)'
-},
-{
-  name: 'enableBlur',
-  type: 'boolean',
-  default: 'true',
-  description: 'Whether to enable blur animation'
-},
-{
-  name: 'baseOpacity',
-  type: 'number',
-  default: '0.1',
-  description: 'Starting opacity value for words'
-},
-{
-  name: 'baseRotation',
-  type: 'number',
-  default: '3',
-  description: 'Starting rotation value in degrees'
-},
-{
-  name: 'blurStrength',
-  type: 'number',
-  default: '4',
-  description: 'Blur strength in pixels'
-},
-{
-  name: 'containerClassName',
-  type: 'string',
-  default: '""',
-  description: 'Additional CSS classes for the container element'
-},
-{
-  name: 'textClassName',
-  type: 'string',
-  default: '""',
-  description: 'Additional CSS classes for the text element'
-},
-{
-  name: 'rotationEnd',
-  type: 'string',
-  default: '"bottom bottom"',
-  description: 'ScrollTrigger end position for rotation animation'
-},
-{
-  name: 'wordAnimationEnd',
-  type: 'string',
-  default: '"bottom bottom"',
-  description: 'ScrollTrigger end position for word animations'
-}
-]
+  {
+    name: 'children',
+    type: 'string',
+    default: '""',
+    description: 'The text content to be animated word by word'
+  },
+  {
+    name: 'scrollContainerRef',
+    type: 'object',
+    default: 'undefined',
+    description: 'Ref to a custom scroll container (defaults to window)'
+  },
+  {
+    name: 'enableBlur',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether to enable blur animation'
+  },
+  {
+    name: 'baseOpacity',
+    type: 'number',
+    default: '0.1',
+    description: 'Starting opacity value for words'
+  },
+  {
+    name: 'baseRotation',
+    type: 'number',
+    default: '3',
+    description: 'Starting rotation value in degrees'
+  },
+  {
+    name: 'blurStrength',
+    type: 'number',
+    default: '4',
+    description: 'Blur strength in pixels'
+  },
+  {
+    name: 'containerClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the container element'
+  },
+  {
+    name: 'textClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the text element'
+  },
+  {
+    name: 'rotationEnd',
+    type: 'string',
+    default: '"bottom bottom"',
+    description: 'ScrollTrigger end position for rotation animation'
+  },
+  {
+    name: 'wordAnimationEnd',
+    type: 'string',
+    default: '"bottom bottom"',
+    description: 'ScrollTrigger end position for word animations'
+  }
+];
 </script>
 
 <style scoped>
 .demo-container {
-height: 60vh;
-overflow-y: auto;
+  height: 60vh;
+  overflow-y: auto;
 }
 
 .scroll-content {
-padding-top: 150vh !important; 
-padding-bottom: 50vh;
+  padding-top: 150vh !important;
+  padding-bottom: 50vh;
 }
 
 .scroll-instruction {
-text-align: center;
-color: #271E37;
-font-size: clamp(4rem, 6vw, 4rem);
-font-weight: 900;
-position: absolute;
-top: 50%;
-left: 0;
-right: 0;
-transform: translateY(-50%);
+  text-align: center;
+  color: #222;
+  font-size: clamp(4rem, 6vw, 4rem);
+  font-weight: 900;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
 }
 
 .scroll-content {
-color: aliceblue;
+  color: aliceblue;
 }
-</style>
\ No newline at end of file
+</style>