working animations

src/app/_components/Animated/AnimateIn.tsx

@@ -1,5 +1,6 @@
 import { useGSAP } from "@gsap/react";
-import { useLayoutEffect,
+import { useEffect,
+useLayoutEffect,
 useRef, type ReactNode } from "react";
 import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
@@ -7,7 +8,7 @@ import gsap from 'gsap'
 const AnimateTextIn = ({children,animation="type",position}:{children:ReactNode,animation?:"type"|"slide",position:gsap.Position}) => {
   const el = useRef<HTMLDivElement>(null)
   const gsapContext = useGsapContext();
-  useGSAP(() => {
+  useEffect(() => {
     console.log("aniamte text with:",position)
     const tl = gsap.timeline();
     const chars = new SplitText(el.current,{type:'chars'})

src/app/_components/Animated/AnimatedBackGroundContainer.tsx

@@ -102,7 +102,10 @@ export default function AnimatedBackgroundContainer({
   const [mounted, setMounted] = useState(false);
 
   const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
+  let isDark = resolvedTheme === "dark";
+  if (resolvedTheme == undefined) {
+    isDark = true;
+  }
   const palette = isDark ? PALETTES.dark : PALETTES.light;
 
   /* Spawn particles */
@@ -264,7 +267,6 @@ export default function AnimatedBackgroundContainer({
         minHeight: "100vh",
         width: "100%",
         overflow: "hidden",
-        backgroundColor: palette.base,
         transition: "background-color 0.6s ease",
       }}
     >

src/app/_components/Animated/AnimatedPageTitle.tsx

@@ -7,19 +7,16 @@ const AnimatedPageTitle = (
 ) => {
   const el = useRef<HTMLHeadingElement>(null)
   const gsapContext = useGsapContext();
-  useGSAP(() => {
+  useEffect(() => {
     console.log("add animated title with:",position)
-    const tl = gsap.timeline();
-    tl.addLabel("title")
     const split = new SplitText(el.current, { type: "chars" })
-    tl.from(el.current, { opacity: 0 })
-    tl.from(split.chars, {
+    gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100 }),position)
+    gsapContext?.addAnimation(gsap.from(split.chars, {
       stagger: 0.05, rotate: -90, opacity: 0, x: -10
-    }, '>')
-    gsapContext?.addAnimation(tl,position)
+    }),'>')
   })
   return (
-    <h1 className="text-4xl opacity-100 font-bold text-balance w-full" ref={el}> {text} </h1>
+    <h1 className="text-4xl opacity-0 font-bold text-balance w-full" ref={el}> {text} </h1>
   )
 }
 

src/app/_components/ThemeIcon.tsx

@@ -4,10 +4,18 @@ import { Moon, Sun } from "lucide-react"
 import { useEffect } from "react"
 type Props = {activeTheme:string|undefined}
 const ThemeIcon = (props:Props) => {
-  if (props.activeTheme == "dark") {
-    return (<Sun/>)
-  } else {
-    return (<Moon/>)
-  }
+  return (
+    <>
+      {props.activeTheme && props.activeTheme == 'dark' &&
+        <Sun/>
+      }
+      {props.activeTheme && props.activeTheme == 'light' &&
+        <Moon/>
+      }
+      {!props.activeTheme &&
+        <Sun/>
+      }
+    </>
+  )
 }
 export default ThemeIcon;

src/app/_components/ThemeSwitch.tsx

@@ -8,6 +8,9 @@ import ThemeIcon from "./ThemeIcon"
 
 export function ThemeSwitch() {
   const { setTheme, theme } = useTheme()
+  if (!theme) {
+    setTheme('dark')
+  }
   const toggleTheme = () => {
     setTheme(theme == "dark" ? "light" : "dark")
   }