From 4ec5355014920290efde046945392ed7ec488c19 Mon Sep 17 00:00:00 2001
From: Victor Trofin <victor_trofin@yahoo.com>
Date: Sun, 26 Apr 2026 17:02:04 +0900
Subject: [PATCH] wip animations

---
 src/components/hero_component/index.vue | 323 +++++++++++++++++++++---
 1 file changed, 286 insertions(+), 37 deletions(-)

diff --git a/src/components/hero_component/index.vue b/src/components/hero_component/index.vue
index 984b92d..f8e3d3f 100644
--- a/src/components/hero_component/index.vue
+++ b/src/components/hero_component/index.vue
@@ -16,34 +16,50 @@
         </a>.
       </p>
     </div>
-    <div class="cli-interaction-wrap" aria-hidden="true">
-      <div class="cli-buttons">
-        <span />
-        <span />
-        <span />
-      </div>
-      <div class="cli-container" ref="cliContainer">
-        <div
-          class="bash-history"
-          v-for="(line, i) in animationText"
-          :key="i"
-          :ref="(el) => animationTextRefs.push(el as HTMLElement)"
-        >
-          <span class="animation-text">{{ line }}</span>
+    <div v-if="cliState === 'fullscreen'" class="cli-interaction-wrap cli-placeholder" aria-hidden="true"></div>
+    <Teleport to="body" :disabled="cliState !== 'fullscreen'">
+      <div
+        class="cli-interaction-wrap"
+        :class="{
+          'cli-fullscreen': cliState === 'fullscreen',
+          'cli-minimized': cliState === 'minimized',
+          'cli-closed': cliState === 'closed',
+        }"
+        ref="cliWrap"
+        aria-hidden="true"
+        @click="cliState === 'minimized' ? handleMinimize() : undefined"
+      >
+        <div class="cli-buttons" ref="cliButtons">
+          <span @click.stop="handleClose" title="Close" />
+          <span @click.stop="handleMinimize" title="Minimize" />
+          <span @click.stop="handleFullscreen" title="Fullscreen" />
+        </div>
+        <div class="cli-container" ref="cliContainer">
+          <div
+            class="bash-history"
+            v-for="(line, i) in animationText"
+            :key="i"
+            :ref="(el) => animationTextRefs.push(el as HTMLElement)"
+          >
+            <span class="animation-text">{{ line }}</span>
+          </div>
         </div>
       </div>
-    </div>
+    </Teleport>
   </section>
 </template>
 
 <script lang="ts">
 import type { JSAnimation } from "animejs";
-import { ref, onMounted, onUnmounted, defineComponent } from "vue";
+import { animate } from "animejs";
+import { ref, onMounted, onUnmounted, nextTick, defineComponent } from "vue";
 import { useHeroStore } from '@store/useHeroStore';
 import { getExplodedContent } from "@components/helpers";
 import { getAnimationObserver } from "@components/helpers/intersect";
 import { stopAnimation } from "@components/helpers/animate";
 
+type CliState = 'normal' | 'fullscreen' | 'minimized' | 'closed';
+
 export default defineComponent({
   name: "HeroSection",
   emits: {
@@ -52,45 +68,222 @@ export default defineComponent({
   setup() {
     let cliObserver: IntersectionObserver | undefined
     const heroStore = useHeroStore();
-    const bashHistory = heroStore.bashHistory;
-    const staticText = heroStore.staticText;
     const cliContainer = ref<HTMLDivElement | null>(null);
-    const cliWrapperActiveText = ref(null);
     const animationText = heroStore.animationTextLines;
-    // Using a function ref in the HTML above because of the bug documented here:
-    // https://github.com/vuejs/core/issues/5525#issuecomment-1059855276
-    // function ref working while regular v-for ref is failing
-    // https://stackblitz.com/edit/vitejs-vite-h42vi4?file=src/App.vue
-    // Type assertion to HTMLElement[] because if ain't broke, don't fix it
     const animationTextRefs = ref<HTMLElement[]>([]);
     let staggeredAnimation = ref<JSAnimation | null>(null);
 
+    const cliWrap = ref<HTMLDivElement | null>(null);
+    const cliButtons = ref<HTMLDivElement | null>(null);
+    const cliState = ref<CliState>('normal');
+    let isAnimating = false;
+    let fullscreenOriginRect: DOMRect | null = null;
+
+    // Shared helper: get clip-path inset percentages for the buttons region
+    const getButtonsClip = () => {
+      const btn = cliButtons.value;
+      const el = cliWrap.value;
+      if (!btn || !el) return null;
+      const btnRect = btn.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      const top = ((elRect.height - btnRect.height) / elRect.height * 100).toFixed(1);
+      const left = ((elRect.width - btnRect.width) / elRect.width * 100).toFixed(1);
+      return { top, left };
+    };
+
+    // Shared helper: convert a DOMRect to viewport-relative clip-path inset values (px)
+    const rectToClipInset = (rect: DOMRect | { top: number; left: number; right: number; bottom: number }) => {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      return {
+        top: rect.top,
+        right: vw - rect.right,
+        bottom: vh - rect.bottom,
+        left: rect.left,
+      };
+    };
+
+    // Red — close
+    const handleClose = () => {
+      if (cliState.value === 'closed' || isAnimating) {
+        return;
+      }
+
+      const el = cliWrap.value;
+      if (!el) return;
+
+      if (cliState.value !== 'normal') {
+        cliState.value = 'normal';
+      }
+
+      isAnimating = true;
+      animate(el, {
+        clipPath: [
+          'inset(0% 0% 0% 0% round 5px)',
+          'inset(50% 50% 50% 50% round 5px)',
+        ],
+        opacity: [1, 0],
+        duration: 350,
+        easing: 'easeInQuad',
+        onComplete: () => {
+          el.style.clipPath = '';
+          el.style.opacity = '';
+          cliState.value = 'closed';
+          isAnimating = false;
+        },
+      });
+    };
+
+    // Yellow — minimize
+    const minimizeCli = () => {
+      const el = cliWrap.value;
+      if (!el) return;
+
+      const clip = getButtonsClip();
+      if (!clip) return;
+
+      isAnimating = true;
+      animate(el, {
+        clipPath: [
+          'inset(0% 0% 0% 0% round 5px)',
+          `inset(${clip.top}% 0% 0% ${clip.left}% round 5px)`,
+        ],
+        duration: 300,
+        easing: 'easeInCubic',
+        onComplete: () => {
+          el.style.clipPath = '';
+          cliState.value = 'minimized';
+          nextTick(() => { isAnimating = false; });
+        },
+      });
+    };
+
+    // Yellow — restore from minimized
+    const restoreCli = () => {
+      const el = cliWrap.value;
+      if (!el) return;
+
+      const clip = getButtonsClip();
+      if (!clip) return;
+
+      isAnimating = true;
+      el.style.clipPath = `inset(${clip.top}% 0% 0% ${clip.left}% round 5px)`;
+      cliState.value = 'normal';
+      nextTick(() => {
+        animate(el, {
+          clipPath: [
+            `inset(${clip.top}% 0% 0% ${clip.left}% round 5px)`,
+            'inset(0% 0% 0% 0% round 5px)',
+          ],
+          duration: 350,
+          easing: 'easeOutQuart',
+          onComplete: () => {
+            el.style.clipPath = '';
+            isAnimating = false;
+          },
+        });
+      });
+    };
+
+    const handleMinimize = () => {
+      if (cliState.value === 'fullscreen' || cliState.value === 'closed' || isAnimating) {
+        return;
+      }
+
+      cliState.value === 'minimized' ? restoreCli() : minimizeCli();
+    };
+
+    // Green — enter fullscreen
+    const enterFullscreen = () => {
+      const el = cliWrap.value;
+      if (!el) return;
+
+      if (!animationsEnabled) {
+        cliState.value = 'fullscreen';
+        return;
+      }
+
+      fullscreenOriginRect = el.getBoundingClientRect();
+      const inset = rectToClipInset(fullscreenOriginRect);
+
+      isAnimating = true;
+      cliState.value = 'fullscreen';
+      nextTick(() => {
+        animate(el, {
+          clipPath: [
+            `inset(${inset.top}px ${inset.right}px ${inset.bottom}px ${inset.left}px round 5px)`,
+            'inset(0px 0px 0px 0px round 0px)',
+          ],
+          duration: 350,
+          easing: 'easeOutQuart',
+          onComplete: () => {
+            el.style.clipPath = '';
+            isAnimating = false;
+          },
+        });
+      });
+    };
+
+    // Green — exit fullscreen
+    const exitFullscreen = () => {
+      const el = cliWrap.value;
+      if (!el) return;
+
+      if (!animationsEnabled) {
+        cliState.value = 'normal';
+        fullscreenOriginRect = null;
+        return;
+      }
+
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const rect = fullscreenOriginRect || { top: 0, left: 0, right: vw, bottom: vh };
+      const inset = rectToClipInset(rect);
+
+      isAnimating = true;
+      animate(el, {
+        clipPath: [
+          'inset(0px 0px 0px 0px round 0px)',
+          `inset(${inset.top}px ${inset.right}px ${inset.bottom}px ${inset.left}px round 5px)`,
+        ],
+        duration: 350,
+        easing: 'easeInQuart',
+        onComplete: () => {
+          el.style.clipPath = '';
+          cliState.value = 'normal';
+          fullscreenOriginRect = null;
+          isAnimating = false;
+        },
+      });
+    };
+
+    const handleFullscreen = () => {
+      if (cliState.value === 'minimized' || cliState.value === 'closed' || isAnimating) {
+        return;
+      }
+
+      cliState.value === 'fullscreen' ? exitFullscreen() : enterFullscreen();
+    };
+
     onMounted(() => {
-      // Defer animation setup to after first paint so it does not block LCP
       requestAnimationFrame(() => {
-        // Disable animation if user prefers reduced motion
-        // DevTools → More tools → Rendering → scroll to "Emulate CSS media feature prefers-reduced-motion"
         const prefersReducedMotion = typeof window !== 'undefined'
           && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
         if (prefersReducedMotion) {
           for (const el of animationTextRefs.value) {
             const span = el.querySelector('.animation-text');
-
             if (span) {
               (span as HTMLElement).style.opacity = '1'
             };
           }
-
           return;
         }
 
-        // prepare text for animation -> explode into single characters
         const formattedText = getExplodedContent(animationText);
         for (let i in formattedText) {
           animationTextRefs.value[i].innerHTML = formattedText[i];
         }
-        //  check that cli is visible & trigger animation
         cliObserver = getAnimationObserver({
           cliContainer,
           staggeredAnimation,
@@ -100,19 +293,21 @@ export default defineComponent({
 
     onUnmounted(() => {
       cliObserver?.disconnect();
-
       if (staggeredAnimation.value) {
         stopAnimation(staggeredAnimation.value)
       };
     });
 
     return {
-      bashHistory,
-      staticText,
       cliContainer,
-      cliWrapperActiveText,
       animationText,
       animationTextRefs,
+      cliWrap,
+      cliButtons,
+      cliState,
+      handleClose,
+      handleMinimize,
+      handleFullscreen,
     };
   },
 });
@@ -120,6 +315,7 @@ export default defineComponent({
 
 <style>
 .hero-section {
+  position: relative;
   padding-top: 6rem;
   display: grid;
   grid-gap: 20px;
@@ -183,9 +379,56 @@ export default defineComponent({
   background-color: var(--color-surface-dark);
   border-radius: var(--radius-base);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: border-radius 0.3s ease;
+}
+
+/* Placeholder — holds grid space while real element is teleported to body */
+.hero-section .cli-interaction-wrap.cli-placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Fullscreen — no .hero-section ancestor because element is teleported to body */
+.cli-interaction-wrap.cli-fullscreen {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--color-surface-dark);
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  border-radius: 0;
+  height: 100dvh !important;
 }
 
-.hero-section .cli-container {
+/* Closed — stays in grid to preserve layout height, invisible and non-interactive */
+.hero-section .cli-interaction-wrap.cli-closed {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Minimized — stays in grid to preserve layout height, transparent background,
+   buttons float to bottom-right inside the preserved grid space */
+.hero-section .cli-interaction-wrap.cli-minimized {
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.hero-section .cli-interaction-wrap.cli-minimized .cli-buttons {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: var(--color-surface-dark);
+  border-radius: var(--radius-base);
+}
+
+.hero-section .cli-interaction-wrap.cli-minimized .cli-container {
+  display: none;
+}
+
+.cli-container {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -206,7 +449,7 @@ export default defineComponent({
   scroll-snap-type: y mandatory;
 }
 
-.hero-section .cli-container::-webkit-scrollbar {
+.cli-container::-webkit-scrollbar {
   display: none;
 }
 
@@ -292,6 +535,12 @@ span.text-block {
   border-radius: var(--radius-circle);
   margin-left: 5px;
   margin-right: 5px;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.cli-buttons>span:hover {
+  opacity: 0.75;
 }
 
 .cli-buttons>span:first-child {