Skip to content

Feat/ocm wordmark loading screen #212

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

Closed
mathaix wants to merge 3 commits into from
+99 −24
Closed

Feat/ocm wordmark loading screen #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5710fe4
feat(chromium-headful): replace kernel logo with OCM orange orb anima…
claude Apr 11, 2026
4eac219
feat(chromium-headful): replace orb loader with OpenClaw Machines wor…
claude Apr 11, 2026
b5931d3
chromium-headful: slow down wordmark pop-in from 0.9s to 2.5s
claude Apr 11, 2026
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
58 changes: 46 additions & 12 deletions images/chromium-headful/client/src/components/about.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
<div class="window">
<div class="loading" v-if="loading">
<div class="loader">
<img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
<div class="ocm-wordmark" aria-hidden="true">
<span class="ocm-wordmark__open">OpenClaw</span><span class="ocm-wordmark__machines">Machines</span>
</div>
</div>
</div>

Expand Down Expand Up @@ -72,19 +74,37 @@
}
}

// OCM wordmark — see connect.vue for design notes.
.loader {
width: 90px;
height: 90px;
width: auto;
height: auto;
position: relative;
margin: 0 auto 20px auto;
display: flex;
justify-content: center;
align-items: center;

.kernel-logo {
width: 100%;
height: 100%;
animation: kernel-logo-pulse 1.5s ease-in-out infinite;
.ocm-wordmark {
display: inline-flex;
align-items: baseline;
gap: 0.3em;
font-family: 'Whitney', 'Segoe UI', system-ui, sans-serif;
font-size: 44px;
font-weight: 900;
letter-spacing: -0.01em;
white-space: nowrap;
line-height: 1;
animation:
ocm-wordmark-popin 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
ocm-wordmark-breathe 5s ease-in-out 2.5s infinite;
}

.ocm-wordmark__open {
color: #ef4444;
}

.ocm-wordmark__machines {
color: #2dd4bf;
}
}
}
Expand All @@ -95,14 +115,28 @@
}
}

@keyframes kernel-logo-pulse {
0%,
@keyframes ocm-wordmark-popin {
0% {
transform: scale(0.05);
opacity: 0;
}
70% {
transform: scale(1.06);
opacity: 1;
}
100% {
transform: scale(0.85);
opacity: 0.7;
transform: scale(1);
opacity: 1;
}
}

@keyframes ocm-wordmark-breathe {
0%, 100% {
transform: scale(0.98);
opacity: 0.85;
}
50% {
transform: scale(1);
transform: scale(1.02);
Copy link
Copy Markdown

@cursor cursor bot Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Substantial wordmark styles duplicated across two components

Low Severity

The OCM wordmark template markup, all .ocm-wordmark CSS styles, color declarations, and both @keyframes definitions (ocm-wordmark-popin, ocm-wordmark-breathe) are copied verbatim between about.vue and connect.vue (~50 lines of SCSS each). The about.vue comment "see connect.vue for design notes" acknowledges the coupling but doesn't prevent drift. The keyframes are global in Vue 2 scoped CSS, so they're emitted twice. A shared child component or extracting keyframes into the project's existing shared stylesheets would reduce this risk.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit b5931d3. Configure here.

opacity: 1;
}
}
Expand Down
65 changes: 53 additions & 12 deletions images/chromium-headful/client/src/components/connect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<div class="connect">
<div class="window">
<div class="loader" v-if="connecting">
<img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
<div class="ocm-wordmark" aria-hidden="true">
<span class="ocm-wordmark__open">OpenClaw</span><span class="ocm-wordmark__machines">Machines</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -45,32 +47,71 @@
}
}

// OCM wordmark loading indicator. Pops in small-to-big with an
// overshoot (same cubic-bezier + duration as the prior orb) and then
// gently breathes. Two-tone brand colors match the OCM product
// marks (red "OpenClaw" + teal "Machines"), identical to Layout.tsx
// in the frontend.
.loader {
width: 90px;
height: 90px;
width: auto;
height: auto;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;

.kernel-logo {
width: 100%;
height: 100%;
animation: kernel-logo-pulse 1.5s ease-in-out infinite;
.ocm-wordmark {
display: inline-flex;
align-items: baseline;
gap: 0.3em;
font-family: 'Whitney', 'Segoe UI', system-ui, sans-serif;
font-size: 44px;
font-weight: 900;
letter-spacing: -0.01em;
white-space: nowrap;
line-height: 1;
// Pop-in on mount (same overshoot curve as the orb, but 2.7x
// slower so the grow-from-small-to-big motion is clearly visible
// instead of blinking past), then a slow continuous breathe.
animation:
ocm-wordmark-popin 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
ocm-wordmark-breathe 5s ease-in-out 2.5s infinite;
}

.ocm-wordmark__open {
color: #ef4444; // red-500 — matches Layout.tsx brand red
}

.ocm-wordmark__machines {
color: #2dd4bf; // teal-400 — matches Layout.tsx brand teal
}
}
}
}

@keyframes kernel-logo-pulse {
0%,
@keyframes ocm-wordmark-popin {
0% {
transform: scale(0.05);
opacity: 0;
}
70% {
transform: scale(1.06);
opacity: 1;
}
100% {
transform: scale(0.85);
opacity: 0.7;
transform: scale(1);
opacity: 1;
}
}

@keyframes ocm-wordmark-breathe {
0%, 100% {
transform: scale(0.98);
opacity: 0.85;
}
50% {
transform: scale(1);
transform: scale(1.02);
opacity: 1;
}
}
Expand Down