diff --git a/components/AsciiHero.tsx b/components/AsciiHero.tsx
index c39f5d6..c3b7c29 100644
--- a/components/AsciiHero.tsx
+++ b/components/AsciiHero.tsx
@@ -1,16 +1,50 @@
+"use client";
+
 import Image from "next/image";
+import { motion } from "motion/react";
 import gpkTriangleLogo from "@/public/gpk_logo_new.webp";
 
 export default function AsciiHero() {
   return (
-    <div className="flex items-center justify-start w-225 max-w-full h-full -translate-y-15">
-      <Image
-        src={gpkTriangleLogo}
-        alt="Graphics Programming Knights logo"
-        
-        className="w-full h-full object-fill"
-        priority
-      />
+    <div className="flex items-center justify-start w-full h-full -translate-y-15">
+      <motion.div
+        className="relative w-full h-full"
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 100, damping: 10, mass: 1 }}
+      >
+        <Image
+          src={gpkTriangleLogo}
+          alt="Graphics Programming Knights logo"
+          className="w-full h-full object-fill"
+          priority
+        />
+
+        <motion.div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          style={{
+            backgroundImage:
+            "linear-gradient(115deg, transparent 48%, rgba(255,255,255,0.15) 50%, transparent 52%)",
+            backgroundSize: "250% 250%",
+            WebkitMaskImage: `url(${gpkTriangleLogo.src})`,
+            maskImage: `url(${gpkTriangleLogo.src})`,
+            WebkitMaskSize: "100% 100%",
+            maskSize: "100% 100%",
+            WebkitMaskRepeat: "no-repeat",
+            maskRepeat: "no-repeat",
+          }}
+          initial={{ backgroundPosition: "0% 0%" }}
+          animate={{ backgroundPosition: "100% 100%" }}
+          transition={{
+            duration: 2.5,
+            ease: "easeInOut",
+            delay: 0.2,
+            repeat: Infinity,
+            repeatDelay: 8.0,
+          }}
+        />
+      </motion.div>
     </div>
   );
 }
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 445666c..a5b3eaa 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -3,7 +3,7 @@ import AsciiHero from "./AsciiHero";
 
 export default function HeroSection() {
   return (
-    <section className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-36 items-center py-8 md:py-16 pr-8 md:pr-16 bg-page-background text-text-primary w-full flex-1">
+    <section className="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] gap-8 md:gap-36 items-center py-8 md:py-16 pr-8 md:pr-16 bg-page-background text-text-primary w-full flex-1">
       {/* Left Column: Heading, Subheading, Button, and Icons */}
       <div className="flex flex-col gap-8 max-w-3xl -ml-24 md:-ml-36">
         <h1 className="text-6xl md:text-8xl font-extrabold tracking-tight">
@@ -48,7 +48,7 @@ export default function HeroSection() {
       </div>
 
       {/* Right Column: Placeholder for ASCII render */}
-      <div className="flex justify-center items-center w-205 h-205">
+      <div className="flex justify-center items-center w-56 sm:w-64 md:w-56 lg:w-70 xl:w-[60rem] 2xl:w-165 max-w-full aspect-square">
         <AsciiHero />
       </div>
     </section>