Another window?

src/app/globals.css

@@ -30,6 +30,18 @@
   }
 }
 
+@keyframes window-popdown {
+  0% {
+    transform: scale(1, 1);
+  }
+  60% {
+    transform: scale(1, 0.03);
+  }
+  100% {
+    transform: scale(0, 0.03);
+  }
+}
+
 h2 {
   @apply text-2xl font-bold
 }

src/app/page.tsx

@@ -4,13 +4,14 @@ import { Sosmed } from "@/components/sosmed";
 import HomeText from "@/components/home-text.mdx"
 
 import Link from "next/link";
-import { FakeWindow } from "@/components/windows";
+import { FakeWindow, HomeWindows } from "@/components/windows";
 import Taskbar from "@/components/taskbar";
 
 export default function Home() {
   return (<>
     <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
       <FakeWindow windowText="Homepage">
+        <HomeWindows />
         <header className="text-center mb-8">
           <h1 className="font-bold text-3xl leading-normal">
             Nonszy Work<span className="text-primary">space</span>

src/components/client-windows.tsx

@@ -2,18 +2,27 @@
 
 import { Icon } from "@iconify/react";
 import clsx from "clsx";
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 
 export const FakeRelativeWindow = ({
-  windowText, className, draggable, children
+  windowText,
+  className,
+  draggable,
+  withAnim,
+  children
 }: {
   windowText: string,
   className?: string,
-  draggable?: boolean
+  draggable?: boolean,
+  withAnim?: boolean,
   children: React.ReactNode
 }) => {
   const [isMinimized, setMinimize] = useState(false);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [animation, setAnimation] = useState({
+    window: "animate-window-popup",
+    content: "animate-[fade-in-half_1s]"
+  });
   const popupRef = useRef<HTMLDivElement>(null);
   const pos = useRef({
     dragging: false,
@@ -23,9 +32,34 @@ export const FakeRelativeWindow = ({
     y: 0
   });
 
+  useEffect(() => {
+    if (!withAnim) return;
+    const node = popupRef.current;
+    if (!node) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setAnimation({
+            window: "animate-window-popup",
+            content: "animate-[fade-in-half_1s]"
+          });
+        } else {
+          setAnimation({
+            window: "scale-x-0 scale-y-[0.03] animate-window-popdown",
+            content: "animate-[fade-out-half_1s]"
+          });
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
   const toggleMinimize = () => setMinimize(!isMinimized);
 
   const onMouseDown = (e: React.MouseEvent) => {
+    if (!draggable) return;
     if (popupRef.current) {
       pos.current.dragging = true;
       pos.current.mouseX = e.clientX;
@@ -57,8 +91,8 @@ export const FakeRelativeWindow = ({
   };
 
   return (
-    <div className={clsx("absolute", className)}>
-      <div className="mx-auto md:border bg-background border-primary animate-window-popup" ref={popupRef}>
+    <div className={clsx("absolute hidden lg:block", className)}>
+      <div className={clsx("mx-auto md:border bg-background border-primary", withAnim && animation.window)} ref={popupRef}>
         <div
           className="hidden md:flex bg-primary p-2 justify-between text-background windowbar"
           onMouseDown={onMouseDown}
@@ -68,10 +102,11 @@ export const FakeRelativeWindow = ({
           </div>
           <div className="flex gap-2">
             <button className="bg-primary border border-[#FFA826] border-outset p-1" onClick={toggleMinimize}><Icon icon="lucide:minus"/></button>
+            <button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:x"/></button>
           </div>
         </div>
         <div className={clsx("m-1 border border-primary", isMinimized ? "h-0 overflow-y-clip" : "h-fit")}>
-          <div className={"md:p-4 animate-[fade-in-half_1s]"}>
+          <div className={clsx("md:p-4", withAnim && animation.content)}>
             {children}
           </div>
         </div>

src/components/home-text.mdx

@@ -1,7 +1,6 @@
 import Image from "next/image"
 import Link from "next/link";
-import { FloatingLabel } from "./floating-label";
-import { FakeRelativeWindow } from "./client-windows";
+import { FloatingLabel } from "@/components/floating-label";
 
 Welcome!
 
@@ -9,22 +8,6 @@ This is our cozy little corner of the internet where we run a bunch of services
 
 We've got tools and resources for us but some we provide it for you, stuff that just works and doesn't burn our wallet.
 
-<div className="relative">
-    <FakeRelativeWindow windowText="Boing-boing" className='hidden lg:inline-block absolute -left-96 -bottom-32'>
-        <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
-            <Image
-                className="animate-silly-bouncing"
-                alt="Nola"
-                src="/images/coral-a1.png"
-                width={200}
-                height={200}
-                quality={10}
-                unoptimized
-            />
-        </Link>
-    </FakeRelativeWindow>
-</div>
-
 ## About Me
 
 Nonszy (Nomi Nonsz or Nonszy whatever, some ppl know my real name).
@@ -62,21 +45,6 @@ We aspire to blend creativity and technical mastery to shape products that empow
 - Build the ability to design and develop web applications that are responsive, intuitive, fast, and visually compelling, with a strong focus on user experience and modern interface principles.
 - Integrate artificial intelligence into digital products, creating smart, helpful, and engaging features that elevate the overall value and interactivity of applications.
 
-<div className="relative">
-    <FakeRelativeWindow draggable windowText="nola.png" className='hidden lg:inline-block -right-[120%]'>
-        <FloatingLabel placeholder="This is Nola, my OC :3">
-            <Image
-                className=""
-                alt="Nola"
-                src="/images/nola.png"
-                width={250}
-                height={250}
-                unoptimized
-            />
-        </FloatingLabel>
-    </FakeRelativeWindow>
-</div>
-
 ## Why Nonsense
 
 Nomi or Nonsense, it's not that we don't understand the each other or its uses, it's just a word you've chosen to dismiss our existence.

src/components/windows.tsx

@@ -1,5 +1,8 @@
 import { Icon } from "@iconify/react";
 import { FloatingLabel } from "@/components/floating-label";
+import { FakeRelativeWindow } from "./client-windows";
+import Image from "next/image"
+import Link from "next/link";
 
 export const FakeWindow = ({
   windowText, children
@@ -28,3 +31,53 @@ export const FakeWindow = ({
     </div>
   </div>
 )
+
+export const HomeWindows = () => (
+  <div className="relative">
+    <FakeRelativeWindow windowText="nola.png" className='-right-[90%] top-[1300px] z-20'>
+      <FloatingLabel placeholder="This is Nola, my OC :3">
+        <Image
+          className=""
+          alt="Nola"
+          src="/images/nola.png"
+          width={250}
+          height={250}
+          unoptimized
+        />
+      </FloatingLabel>
+    </FakeRelativeWindow>
+    <FakeRelativeWindow windowText="bouncing-coral.exe" className='-left-[100%] top-[360px] z-20'>
+      <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
+        <Image
+          className="animate-silly-bouncing"
+          alt="Bounce Coral"
+          src="/images/coral-a1.png"
+          width={240}
+          height={240}
+          quality={10}
+          unoptimized
+        />
+      </Link>
+    </FakeRelativeWindow>
+    <FakeRelativeWindow windowText="coral-1.exe" className='-left-[70%] top-[680px] z-10'>
+      <Image
+        alt="Coral 1"
+        src="https://media.tenor.com/J-gqkU0R8VgAAAAi/coral-glasses-ena-dream-bbq.gif"
+        width={200}
+        height={200}
+        quality={10}
+        unoptimized
+      />
+    </FakeRelativeWindow>
+    <FakeRelativeWindow windowText="coral-cupcake.mkv" className='-right-[110%] top-[680px] z-10'>
+      <Image
+        alt="Coral Cupcake"
+        src="https://media1.tenor.com/m/N5K-4AWj8QcAAAAC/coral-glasses-cupcake.gif"
+        width={320}
+        height={200}
+        quality={10}
+        unoptimized
+      />
+    </FakeRelativeWindow>
+  </div>
+)

tailwind.config.ts

@@ -24,12 +24,17 @@ const config: Config = {
     },
     animation: {
       "silly-bouncing": 'silly-bounce 0.8s infinite',
-      'window-popup': 'window-popup 1s'
+      'window-popup': 'window-popup 1s',
+      'window-popdown': 'window-popdown 1s'
     },
     keyframes: {
       "fade-in-half": {
         '0%, 50%': { opacity: "0" },
         '100%': { opacity: '1' },
+      },
+      "fade-out-half": {
+        '0%, 50%': { opacity: "1" },
+        '100%': { opacity: '0' },
       }
     }
   },