Skip to content

fix: Animate the running state#3778

Closed
cursor[bot] wants to merge 1 commit intomainfrom
cursor/agent-e2c30735
Closed

fix: Animate the running state#3778
cursor[bot] wants to merge 1 commit intomainfrom
cursor/agent-e2c30735

Conversation

@cursor
Copy link
Copy Markdown
Contributor

@cursor cursor Bot commented Mar 29, 2026

Summary

Adds a visual pulsing animation to canvas nodes in the running state, making it much easier to identify active/working nodes on a busy canvas.

Problem: When many nodes are on a canvas, the static blue color for running nodes isn't visually distinctive enough to quickly spot which nodes are actively working.

Solution: Added a pulsing blue glow (box-shadow animation) to running nodes that provides subtle but noticeable motion, following existing animation patterns in the codebase.

Changes

  • canvas-reset.css: Added sp-running-pulse keyframe animation and .sp-running class that creates a pulsing blue glow effect on the node container
  • componentBase/index.tsx: Detects when any event section is in the "running" state and applies the sp-running animation class to the node wrapper
  • componentHeader/index.tsx: Added isRunning prop; when true, applies Tailwind's animate-pulse to the compact view status dot for additional visual feedback

Visual effect

  • Expanded view: The entire node card gets a subtle pulsing blue glow (box-shadow) that continuously animates
  • Compact view: The status dot in the header also pulses

Closes #1525

Open in Web Open in Cursor 

Add a pulsing blue glow animation to canvas nodes when they are in the
running state, making it easier to identify active nodes on a busy canvas.

Changes:
- Add sp-running CSS animation (pulsing box-shadow) to canvas-reset.css
- Detect running state in ComponentBase and apply the animation class
- Add animate-pulse to compact header status dot when running
- Pass isRunning prop from ComponentBase to ComponentHeader

Closes #1525
@superplanehq-integration
Copy link
Copy Markdown

👋 Commands for maintainers:

  • /sp start - Start an ephemeral machine (takes ~30s)
  • /sp stop - Stop a running machine (auto-executed on pr close)

@shiroyasha shiroyasha closed this Apr 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Animate the running state

2 participants