Image and text animation

diwali

src/components/animated-text.tsx

@@ -0,0 +1,36 @@
+// src/components/AnimatedText.tsx
+import { ReactNode, useRef } from 'react';
+import useInView from '@/hooks/useInView';
+
+interface AnimatedTextProps {
+  children: ReactNode;
+  className?: string;
+  startClass?: string;
+  finishClass?: string;
+  threshold?: number; // New prop
+}
+
+export function AnimatedText({
+  children,
+  className = '',
+  startClass,
+  finishClass,
+  threshold,
+}: AnimatedTextProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisible = useInView(ref, {
+    threshold: threshold ?? 0.1,
+    triggerOnce: true,
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={`transition-[opacity, transform] ease-out duration-1000 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }  ${isVisible ? finishClass : startClass}  ${className}`}
+    >
+      {children}
+    </div>
+  );
+}