Skip to content

feat(studio): make edit with framey stand out in the header #5019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
WaterrrForever merged 1 commit into from
Oct 4, 2026
+23 −4
Merged

feat(studio): make edit with framey stand out in the header #5019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/studio/src/components/OpenInDesktopButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
>
Expand Down
18 changes: 16 additions & 2 deletions packages/studio/src/styles/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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% {
Expand All @@ -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%;
}
Expand All @@ -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;
Expand Down
Loading