feat: replace Montoya slash with vibe echo effect

Cards now show vibration echoes on hover — two offset ghost borders
(violet and indigo) that shift in opposite directions, creating a
visual resonance effect. Buttons get a smaller single-echo variant.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: devakone

apps/web/src/app/globals.css

@@ -132,31 +132,58 @@ body {
   }
 }
 
-/* Montoya slash — signature diagonal accent */
-.montoya-slash {
+/* Vibe echo — cards that look like they're vibrating */
+.vibe-echo {
   position: relative;
-  overflow: hidden;
 }
 
-.montoya-slash::after {
+.vibe-echo::before,
+.vibe-echo::after {
   content: "";
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(
-    225deg,
-    transparent calc(50% - 2px),
-    #6366f1 calc(50% - 2px),
-    #4f46e5 calc(50% + 2px),
-    transparent calc(50% + 2px)
-  );
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid;
   pointer-events: none;
-  opacity: 0.35;
-  transition: opacity 0.3s;
+  opacity: 0;
+  transition: opacity 0.4s, transform 0.4s;
 }
 
-.montoya-slash:hover::after {
-  opacity: 0.7;
+.vibe-echo::before {
+  border-color: #7c3aed;
+}
+
+.vibe-echo::after {
+  border-color: #6366f1;
+}
+
+.vibe-echo:hover::before {
+  opacity: 0.25;
+  transform: translate(-3px, -2px);
+}
+
+.vibe-echo:hover::after {
+  opacity: 0.15;
+  transform: translate(3px, 2px);
+}
+
+/* Smaller echo for buttons */
+.vibe-echo-sm {
+  position: relative;
+}
+
+.vibe-echo-sm::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid #6366f1;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.vibe-echo-sm:hover::after {
+  opacity: 0.3;
+  transform: translate(2px, 1px);
 }

apps/web/src/app/login/LoginButton.tsx

@@ -78,7 +78,7 @@ export default function LoginButton({ provider = "github" }: LoginButtonProps) {
     <div className="flex flex-col gap-3">
       <button
         type="button"
-        className="montoya-slash flex items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white disabled:opacity-60"
+        className="vibe-echo-sm flex items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white disabled:opacity-60"
         onClick={signIn}
         disabled={isLoading}
       >

apps/web/src/lib/theme.ts

@@ -52,7 +52,7 @@ export const wrappedTheme = {
   },
   container: "mx-auto max-w-6xl px-6 sm:px-10 lg:px-20",
   pageY: "py-12",
-  card: "montoya-slash rounded-3xl border border-black/5 bg-white shadow-[0_25px_80px_rgba(30,27,75,0.06)]",
+  card: "vibe-echo rounded-3xl border border-black/5 bg-white shadow-[0_25px_80px_rgba(30,27,75,0.06)]",
   cardInner: "rounded-2xl border border-black/5 bg-white",
   // Unified gradient text
   gradientText: