Issue resolved

Signed-off-by: zubairrafi <walleeva2018@gmail.com>

src/constants/code/Components/scrollFloatCode.ts

@@ -2,7 +2,7 @@ import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const scrollFloatCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
   usage: `<template>
   <ScrollFloat
     :children="scrollText"

src/content/TextAnimations/ScrollFloat/ScrollFloat.vue

@@ -1,25 +1,25 @@
 <template>
-    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
-      <span :class="`scroll-float-text ${textClassName}`">
+  <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
         v-for="(char, index) in splitText"
         :key="index"
-          class="char"
+        class="inline-block char"
       >
         {{ char === " " ? "\u00A0" : char }}
       </span>
     </span>
   </h2>
-  </template>
+</template>
 
-  <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-  import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/ScrollTrigger';
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
-  gsap.registerPlugin(ScrollTrigger);
+gsap.registerPlugin(ScrollTrigger);
 
-  interface Props {
+interface Props {
   children: string;
   scrollContainerRef?: { current: HTMLElement | null };
   containerClassName?: string;
@@ -29,9 +29,9 @@
   scrollStart?: string;
   scrollEnd?: string;
   stagger?: number;
-  }
+}
 
-  const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   containerClassName: '',
   textClassName: '',
   animationDuration: 1,
@@ -39,17 +39,17 @@
   scrollStart: 'center bottom+=50%',
   scrollEnd: 'bottom bottom-=40%',
   stagger: 0.03
-  });
+});
 
-  const containerRef = ref<HTMLElement | null>(null);
-  let scrollTriggerInstance: ScrollTrigger | null = null;
+const containerRef = ref<HTMLElement | null>(null);
+let scrollTriggerInstance: ScrollTrigger | null = null;
 
-  const splitText = computed(() => {
+const splitText = computed(() => {
   const text = typeof props.children === 'string' ? props.children : '';
   return text.split("");
-  });
+});
 
-  const initializeAnimation = () => {
+const initializeAnimation = () => {
   const el = containerRef.value;
   if (!el) return;
 
@@ -93,19 +93,19 @@
   );
 
   scrollTriggerInstance = tl.scrollTrigger || null;
-  };
+};
 
-  onMounted(() => {
+onMounted(() => {
   initializeAnimation();
-  });
+});
 
-  onUnmounted(() => {
+onUnmounted(() => {
   if (scrollTriggerInstance) {
     scrollTriggerInstance.kill();
   }
-  });
+});
 
-  watch(
+watch(
   [
     () => props.children,
     () => props.scrollContainerRef,
@@ -119,23 +119,5 @@
     initializeAnimation();
   },
   { deep: true }
-  );
-  </script>
-  
-  <style scoped>
-  .scroll-float {
-    overflow: hidden;
-  }
-  
-  .scroll-float-text {
-    display: inline-block;
-    font-size: clamp(1.6rem, 8vw, 10rem);
-    font-weight: 900;
-    text-align: center;
-    line-height: 1.5;
-  }
-  
-  .char {
-    display: inline-block;
-  }
-  </style>
+);
+</script>

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="profile-card-demo">
     <TabbedLayout>
       <template #preview>
         <div 
@@ -47,7 +46,6 @@
         <CliInstallation :command="scrollFloatCode.cli" />
       </template>
     </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">