diff --git a/app/Section/Characters.tsx b/app/Section/Characters.tsx
index ec39e7c..457c2fc 100644
--- a/app/Section/Characters.tsx
+++ b/app/Section/Characters.tsx
@@ -1,8 +1,13 @@
+"use client";
+
 import Link from "next/link";
 import { IconWithText } from "../components/IconWithText";
 import { Section } from "../components/Section";
 import { CharacterImage } from "../components/CharacterImage";
 
+import { useInView } from "motion/react"
+import { useEffect, useRef } from "react";
+
 const links = [
   {
     icon: "/icons/furaffinity.svg",
@@ -19,6 +24,12 @@ const links = [
 ];
 
 export const Characters = () => {
+
+  const imagesRedPandaRef = useRef(null)
+  const imagesRedPandaIsInView = useInView(imagesRedPandaRef, { once: true })
+  const imagesProtogenRef = useRef(null)
+  const imagesProtogenIsInView = useInView(imagesProtogenRef, { once: true })
+
   return (
     <Section>
       <div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
@@ -59,23 +70,21 @@ export const Characters = () => {
           />
           <div className="flex flex-col">
             <p className="text-5xl">Kentai</p>
-            <p className="mt-2 text-3xl">Red Panda</p>
+            <p className="mt-2 text-3xl" ref={imagesRedPandaRef}>Red Panda</p>
             <p className="text-3xl">Male</p>
             <div className="flex-1"></div>
             <button className="rounded-full bg-[#491f1f] px-4 py-2 text-3xl">
               about
             </button>
           </div>
-          <div className="ml-21 hidden xl:block">
+          <div className="top-0 left-[488px] absolute hidden xl:flex gap-4 transition-transform duration-1000 ease-out" style={{ transform: !imagesRedPandaIsInView ? "translateX(100vw)" : "translateX(0)" }}>
             <img
-              className="rounded-4xl w-[372px] h-[288px] object-cover"
+              className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
               src="/images/red_panda2.png"
               alt=""
             />
-          </div>
-          <div className="hidden xl:block absolute -right-72">
             <img
-              className="rounded-4xl w-[372px] h-[288px] object-cover"
+              className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
               src="/images/red_panda3.png"
               alt=""
             />
@@ -90,19 +99,17 @@ export const Characters = () => {
           />
           <div className="flex flex-col xl:text-right">
             <p className="mt-2 text-3xl">Protogen</p>
-            <p className="text-3xl">Male</p>
+            <p className="text-3xl" ref={imagesProtogenRef}>Male</p>
           </div>
-          <div className="mr-16 hidden xl:block">
+          <div className="bottom-0 right-[488px] absolute hidden xl:flex gap-4 transition-transform duration-1000 ease-out" style={{ transform: !imagesProtogenIsInView ? "translateX(-100vw)" : "translateX(0)" }}>
             <img
-              className="rounded-4xl w-[372px] h-[288px] object-cover"
-              src="/images/protogen2.png"
+              className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
+              src="/images/protogen3.png"
               alt=""
             />
-          </div>
-          <div className="ml-10 hidden xl:block absolute -left-72">
             <img
-              className="rounded-4xl w-[372px] h-[288px] object-cover"
-              src="/images/protogen3.png"
+              className="rounded-4xl w-[372px] h-[288px] object-cover flex-shrink-0"
+              src="/images/protogen2.png"
               alt=""
             />
           </div>
diff --git a/app/Section/Intro.tsx b/app/Section/Intro.tsx
index 721becb..3a744c6 100644
--- a/app/Section/Intro.tsx
+++ b/app/Section/Intro.tsx
@@ -1,20 +1,45 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
 export const Intro = () => {
+  const [isAnimated, setIsAnimated] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsAnimated(true);
+  }, []);
+
   return (
     <div className="flex gap-4 flex-col xl:gap-8">
       <div className="w-full flex items-center justify-center py-24 bg-[#101316] rounded-tl-[256px] rounded-br-[256px]">
-        <h1 className="text-[#FFB1CD] tracking-tight font-bold text-[90px] text-center md:text-[128px] xl:text-[200px] 2xl:text-[232px]">
+        <h1 className="text-[#FFB1CD] tracking-tight font-bold text-[80px] text-center md:text-[128px] xl:text-[200px]">
           Radiquum
         </h1>
       </div>
-      <div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px] md:rounded-bl-[256px] md:rounded-tr-[256px]">
+      <div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px] md:rounded-bl-[256px] md:rounded-tr-[256px] overflow-hidden">
         <div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center 2xl:gap-16">
-          <p className="text-[#C8E8FE] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
+          <p
+            className="text-[#C8E8FE] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform duration-1000 ease-out"
+            style={{
+              transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
+            }}
+          >
             Photographer
           </p>
-          <p className="text-[#FF8686] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
+          <p
+            className="text-[#FF8686] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-150 duration-1000 ease-out"
+            style={{
+              transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
+            }}
+          >
             Developer
           </p>
-          <p className="text-[#FF851A] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
+          <p
+            className="text-[#FF851A] font-medium text-4xl md:text-5xl xl:text-8xl transition-transform delay-300 duration-1000 ease-out"
+            style={{
+              transform: !isAnimated ? "translateY(600%)" : "translateY(0)",
+            }}
+          >
             Self-Hosting admirer
           </p>
         </div>
diff --git a/app/components/CharacterImage.tsx b/app/components/CharacterImage.tsx
index a4f124c..dd836d8 100644
--- a/app/components/CharacterImage.tsx
+++ b/app/components/CharacterImage.tsx
@@ -14,8 +14,8 @@ export const CharacterImage = ({
 }: CharacterImageProps) => {
   return (
     <div className="relative rounded-4xl overflow-hidden">
-      <img src={image} alt="" className="rounded-4xl md:w-[288px] aspect-square" />
-      <div className="absolute left-0 right-0 bottom-0 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden">
+      <img src={image} alt="" className="rounded-4xl w-full md:w-[288px] aspect-square" />
+      <div className="absolute left-0 right-0 bottom-0 z-10 from-[#131314] to-[#131314]/0 bg-gradient-to-t md:hidden">
         <div className="p-4 flex gap-2 justify-between items-end">
           <p className="text-5xl">{name}</p>
           <p className="flex-1 text-right text-3xl">
diff --git a/package-lock.json b/package-lock.json
index 3f412ac..d5dec41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "embla-carousel-react": "^8.6.0",
+        "motion": "^12.23.9",
         "next": "15.4.2",
         "react": "19.1.0",
         "react-dom": "19.1.0"
@@ -3355,6 +3356,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.9",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.9.tgz",
+      "integrity": "sha512-TqEHXj8LWfQSKqfdr5Y4mYltYLw96deu6/K9kGDd+ysqRJPNwF9nb5mZcrLmybHbU7gcJ+HQar41U3UTGanbbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.9",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4627,6 +4655,47 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.9",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.9.tgz",
+      "integrity": "sha512-5PDgsbNtZ4cpfew3STYL0p06rIiy8vOveQuQBXUAa2+m1WMzjf65DXYn6eo88dM2s+XLxAQq3ZiOjcnKMACEtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.9",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.9",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.9.tgz",
+      "integrity": "sha512-6Sv++iWS8XMFCgU1qwKj9l4xuC47Hp4+2jvPfyTXkqDg2tTzSgX6nWKD4kNFXk0k7llO59LZTPuJigza4A2K1A==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 4fa0c2a..6d8c79b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "embla-carousel-react": "^8.6.0",
+    "motion": "^12.23.9",
     "next": "15.4.2",
     "react": "19.1.0",
     "react-dom": "19.1.0"