From da0567b8f306dd36cf45a940c2139461730eeb2b Mon Sep 17 00:00:00 2001
From: Miao Yang <miao.yang@heygen.com>
Date: Sun, 4 Oct 2026 23:22:04 +0800
Subject: [PATCH] feat(studio): make edit with framey stand out in the header

Wenbo's feedback: the button read like the ghost controls beside it.
It now wears an accent tint and border, a larger Framey and a permanent
New badge, and pulses three times as Studio opens (none under reduced
motion).
---
 .../src/components/OpenInDesktopButton.tsx     |  9 +++++++--
 packages/studio/src/styles/components.css      | 18 ++++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/studio/src/components/OpenInDesktopButton.tsx b/packages/studio/src/components/OpenInDesktopButton.tsx
index a5e5698c40b..22d2f324115 100644
--- a/packages/studio/src/components/OpenInDesktopButton.tsx
+++ b/packages/studio/src/components/OpenInDesktopButton.tsx
@@ -119,10 +119,15 @@ export function OpenInDesktopButton() {
           data-testid="header-open-in-desktop"
           data-opening={opening || undefined}
           title="Open this project in the HyperFrames desktop app and edit it with Framey"
-          className="hf-framey-trigger gap-1.5 pl-1.5"
-          icon={<FrameyGlyph size={20} className="hf-framey" eyeRef={eye} />}
+          className="hf-framey-trigger gap-1.5 border border-accent/40 bg-accent/10 pl-1 font-semibold text-text-0 enabled:hover:bg-accent/20"
+          icon={<FrameyGlyph size={24} className="hf-framey" eyeRef={eye} />}
         >
           {opening ? "Opening in the app…" : "Edit with Framey"}
+          {!opening && (
+            <span className="rounded-full bg-accent px-1.5 text-[10px] leading-4 font-bold text-on-accent">
+              New
+            </span>
+          )}
         </Button>
       }
     >
diff --git a/packages/studio/src/styles/components.css b/packages/studio/src/styles/components.css
index fe27c4db224..d2731444001 100644
--- a/packages/studio/src/styles/components.css
+++ b/packages/studio/src/styles/components.css
@@ -952,8 +952,8 @@
   }
 }
 
-/* Framey on the header's "Edit with Framey" (OpenInDesktopButton.tsx): a wiggle on hover, a flight towards
- * the app while it opens. The eye follows the pointer from script. */
+/* Framey on the header's "Edit with Framey" (OpenInDesktopButton.tsx): a pulse as the page opens, a wiggle
+ * on hover, a flight towards the app while it opens. The eye follows the pointer from script. */
 @keyframes hf-framey-wiggle {
   0%,
   100% {
@@ -977,6 +977,19 @@
   }
 }
 
+@keyframes hf-framey-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 45%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+
+.hf-framey-trigger {
+  animation: hf-framey-pulse 1.6s ease-out 3;
+}
+
 .hf-framey {
   transform-origin: 30% 30%;
 }
@@ -994,6 +1007,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .hf-framey-trigger,
   .hf-framey-trigger:hover .hf-framey,
   .hf-framey-trigger[data-opening] .hf-framey {
     animation: none;