Conversation
…tion The Neko loading screen and About dialog now render an animated orange orb instead of the static kernel.sh wordmark. Pure-CSS port of the OrbBackground component from the OpenClaw Machines frontend (frontend/src/components/hero/OrbBackground.tsx, commit 06c483a). Three layers: - Primary orb: blurred radial gradient, #fb923c → #f97316 → transparent - Secondary bloom: smaller counter-breathing layer, #fbbf24 → #f59e0b - SVG feTurbulence grain overlay at 6% opacity for texture Animations: - ocm-orb-popin: 0.9s cubic-bezier pop-in on mount (replaces the old scale-0.85/opacity-0.7 pulse) - ocm-orb-breathe-primary / -bloom: 3.6s infinite breathe with the two layers scaling inversely for depth No JS required — the React useOrbAnimation rAF driver is not needed for a fixed 140px loading slot. The breathe loop captures the essence of the organic drift motion without the positioning overhead.
…dmark Swap the orange orb (primary + bloom + grain SVG) for a two-tone "OpenClaw Machines" wordmark, keeping the same pop-in animation (0.9s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.05 → 1.06 → 1). - Red "OpenClaw" (#ef4444) and teal "Machines" (#2dd4bf) match the brand treatment in the OCM frontend Layout.tsx. - 44px / font-weight 900 / Whitney with system fallbacks. - Pops in, then continuously breathes at ±2% scale + 0.85–1 opacity. - Applied to both connect.vue (WebRTC connect loading) and about.vue.
The previous timing blinked past too quickly to read. Keep the same cubic-bezier(0.34, 1.56, 0.64, 1) overshoot curve, just extend the duration 2.7x so the small-to-big grow is clearly visible. Also slow the follow-up breathe loop from 3.6s to 5s so the transition from pop-in to breathe feels consistent.
|
Firetiger deploy monitoring skipped This PR didn't match the auto-monitor filter configured on your GitHub connection:
Reason: PR title suggests UI/visual changes (wordmark loading screen) with no indication of kernel API or Temporal workflow modifications. To monitor this PR anyway, reply with |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit b5931d3. Configure here.
| } | ||
| 50% { | ||
| transform: scale(1); | ||
| transform: scale(1.02); |
There was a problem hiding this comment.
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)
Reviewed by Cursor Bugbot for commit b5931d3. Configure here.
2 participants
Checklist
Note
Low Risk
UI-only change that swaps the loading indicator in
connect.vueandabout.vue; risk is limited to potential visual/layout regressions in these overlays.Overview
Replaces the spinning
logo.svgloading indicator inconnect.vueandabout.vuewith a two-tone OpenClaw Machines wordmark.Adds new SCSS for the wordmark styling and introduces
ocm-wordmark-popin/ocm-wordmark-breathekeyframe animations to handle the pop-in + breathing loading effect.Reviewed by Cursor Bugbot for commit b5931d3. Bugbot is set up for automated code reviews on this repo. Configure here.