recreate

apps/website/src/components/home/logo-hover/logo-hover.css

@@ -1,6 +1,50 @@
+.intro h1 {
+  margin-block: var(--space-m);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  line-height: 1;
+}
+
+.intro h1 span {
+  font-size: var(--step-5);
+  display: flex;
+}
+
 .letter {
   display: inline-block;
   opacity: 0;
   animation: fade-in 0.5s forwards;
   animation-timing-function: var(--qa-fade);
 }
+
+.qwik-logo {
+  box-shadow: var(--shadow-elevation-medium);
+}
+
+.qwik-astro-logos {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-l);
+  padding-block: var(--space-s);
+}
+
+.tooltip {
+  position: absolute;
+  padding-block: var(--space-3xs);
+  padding-inline: var(--space-2xs);
+  background: hsl(var(--dark));
+  border: 2px dotted hsl(var(--primary));
+  color: hsl(var(--light));
+  opacity: 0;
+  scale: 0;
+  transition: scale 200ms ease, opacity 200ms ease;
+  pointer-events: none;
+  top: 0;
+}
+
+.qwik-logo,
+.astro-logo {
+  will-change: transform;
+}

apps/website/src/components/home/logo-hover/logo-hover.tsx

@@ -1,33 +1,71 @@
-import { component$, useStyles$ } from "@builder.io/qwik";
+import { $, component$, useSignal, useStyles$, useVisibleTask$ } from "@builder.io/qwik";
 import { AstroIcon } from "@icons/astro";
 import { QwikIcon } from "@icons/qwik";
 import styles from "./logo-hover.css?inline";
 
 export const LogoHover = component$(() => {
   useStyles$(styles);
 
+  const astroLogoRef = useSignal<HTMLElement>();
+  const qwikLogoRef = useSignal<HTMLElement>();
+
   return (
     <>
-      <span>
-        {"QWIK".split("").map((letter, i) => (
-          <span class="letter" key={letter} style={`animation-delay: ${i * 0.15}s;`}>
-            {letter}
+      <div class="intro">
+        <h1>
+          <span
+            onMouseEnter$={$(() => {
+              if (!qwikLogoRef.value) return;
+              qwikLogoRef.value.style.opacity = "1";
+              qwikLogoRef.value.style.scale = "1";
+            })}
+            onMouseMove$={$(({ clientX, clientY }) => {
+              if (!qwikLogoRef.value) return;
+              const x = clientX - qwikLogoRef.value.offsetWidth / 2;
+              const y = clientY - qwikLogoRef.value.offsetHeight / 2;
+              qwikLogoRef.value.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+            })}
+            onMouseLeave$={$(() => {
+              if (!qwikLogoRef.value) return;
+              qwikLogoRef.value.style.opacity = "0";
+              qwikLogoRef.value.style.scale = "0";
+            })}
+          >
+            {"QWIK".split("").map((letter, i) => (
+              <span class="letter" key={letter} style={`animation-delay: ${i * 0.15}s;`}>
+                {letter}
+              </span>
+            ))}
           </span>
-        ))}
-      </span>
-      <span>
-        {"ASTRO".split("").map((letter, i) => (
           <span
-            class="letter"
-            key={letter}
-            style={`animation-delay: ${(i + 5) * 0.15}s;`}
+            onMouseEnter$={$(() => {
+              if (!astroLogoRef.value) return;
+              astroLogoRef.value.style.opacity = "1";
+              astroLogoRef.value.style.scale = "1";
+            })}
+            onMouseMove$={$(({ clientX, clientY }) => {
+              console.log("hi");
+            })}
+            onMouseLeave$={$(() => {
+              if (!astroLogoRef.value) return;
+              astroLogoRef.value.style.opacity = "0";
+              astroLogoRef.value.style.scale = "0";
+            })}
           >
-            {letter}
+            {"ASTRO".split("").map((letter, i) => (
+              <span
+                class="letter"
+                key={letter}
+                style={`animation-delay: ${(i + 5) * 0.15}s;`}
+              >
+                {letter}
+              </span>
+            ))}
           </span>
-        ))}
-      </span>
-      <QwikIcon />
-      <AstroIcon />
+        </h1>
+      </div>
+      <QwikIcon ref={qwikLogoRef} class="qwik-logo tooltip" />
+      <AstroIcon ref={astroLogoRef} class="astro-logo tooltip" />
     </>
   );
 });

apps/website/src/icons/qwik.tsx

@@ -10,6 +10,7 @@ export const QwikIcon = component$((props: PropsOf<"svg">) => {
       xmlns="http://www.w3.org/2000/svg"
       role="img"
       class="qwik-logo"
+      {...props}
     >
       <title>Qwik Logo</title>
       <path

apps/website/src/layouts/home/Hero.astro

@@ -115,16 +115,6 @@ import { Icon } from "astro-icon/components";
       padding: var(--space-m);
     }
 
-    .intro h1 span {
-      font-size: var(--step-5);
-      display: flex;
-    }
-
-    .intro h1 {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
     .intro > span {
       font-size: var(--step-1);
       margin-block: var(--space-m);