Shared useinview

src/components/animated-text.tsx

@@ -1,5 +1,5 @@
-// src/components/AnimatedText.tsx
-import { ReactNode, useRef } from 'react';
+'use client';
+import { ReactNode } from 'react';
 import useInView from '@/hooks/useInView';
 
 interface AnimatedTextProps {
@@ -7,7 +7,7 @@ interface AnimatedTextProps {
   className?: string;
   startClass?: string;
   finishClass?: string;
-  threshold?: number; // New prop
+  threshold?: number;
 }
 
 export function AnimatedText({
@@ -17,8 +17,7 @@ export function AnimatedText({
   finishClass,
   threshold,
 }: AnimatedTextProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const isVisible = useInView(ref, {
+  const [ref, isVisible] = useInView({
     threshold: threshold ?? 0.1,
     triggerOnce: true,
   });