Resolve animation lifecycle, hydration mismatch, and rendering stability issues in FeatureCard (JhaSourav07#2162)

* fix: GSAP-animation-SSR-hydration-mismatch

* fix: formatting issues

* fix: GSAP error

* fix: useEffect error

* fix: format error

* fix: formatting errors

* fix: formatting errors

---------

Co-authored-by: Sourav Jha <souravkjha2007@gmail.com>

Author: ANSHIKATYAGI30

app/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { trackUser } from '@/utils/tracking';
-import InteractiveViewer from '@/components/InteractiveViewer';
 import Link from 'next/link';
 import { useRef, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';

components/FeatureCards.tsx

@@ -4,9 +4,7 @@ import { useRef, useState, useEffect, type ReactNode } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
-if (typeof window !== 'undefined') {
-  gsap.registerPlugin(ScrollTrigger);
-}
+let gsapRegistered = false;
 
 /* ─── Types ─── */
 interface FeatureCardProps {
@@ -44,7 +42,7 @@ function FloatingParticle({
     tl.to(ref.current, {
       opacity: 0.6,
       y: -60,
-      x: `random(-30, 30)`,
+      x: Math.random() * 60 - 30,
       duration: duration * 0.4,
       ease: 'power2.out',
     })
@@ -119,8 +117,6 @@ function AnimatedBorder({ color, isHovered }: { color: string; isHovered: boolea
       style={{
         opacity: 0,
         background: `conic-gradient(from 0deg, transparent, ${color}, transparent, ${color}44, transparent)`,
-        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-        maskComposite: 'exclude',
         WebkitMaskComposite: 'xor',
         padding: '1.5px',
       }}
@@ -417,6 +413,13 @@ export function FeatureCard({ icon, title, desc, accent, index, accentColor }: F
 
 /* ─── Section Wrapper (optional heading + background glow) ─── */
 export function FeatureCardsSection({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    if (!gsapRegistered) {
+      gsap.registerPlugin(ScrollTrigger);
+      gsapRegistered = true;
+    }
+  }, []);
+
   const sectionRef = useRef<HTMLDivElement>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);