Skip to content

Comments

Add wave animation on terminal attention events in grid mode#210

Merged
forketyfork merged 3 commits intomainfrom
claude/terminal-wave-animation-4OtLQ
Feb 11, 2026
Merged

Add wave animation on terminal attention events in grid mode#210
forketyfork merged 3 commits intomainfrom
claude/terminal-wave-animation-4OtLQ

Conversation

@forketyfork
Copy link
Owner

@forketyfork forketyfork commented Feb 10, 2026

Summary

When a terminal receives an attention event (green/yellow highlight) in grid mode, a wave animation plays across the entire terminal tile, including the border. The tile is rendered into a cache texture with borders baked in, then blitted as 8px horizontal strips with per-strip width scaling. The wave sweeps bottom-to-top over 400ms, with a sine envelope that tapers amplitude to zero at the edges so the corners stay fixed.

Changes

  • Wave rendering moved from per-text-row scaling in renderSessionContent to a strip-blit approach in renderGridSessionCached
  • During the wave, overlays (border, attention tint) are baked into the cache texture so they participate in the wave distortion
  • setAttention takes a now_ms parameter for consistent clock usage, and always restarts the wave when attention is set to true (handles green-to-yellow transitions)
  • Timing fix: >= instead of > in wave_active check so the attention color appears on the same frame the wave starts
  • Wave constants centralized in session_interaction.zig: 400ms duration, 150ms per-strip animation, 8% amplitude, 8px strip height
  • Sine envelope tapers amplitude at tile edges so corners stay fixed
  • Per-frame markDirty removed during wave since only the blit destination changes, not the cache content

Test plan

  • In grid mode with 2+ terminals, trigger attention events (Claude start/done/awaiting_approval) and verify the wave ripples across the whole tile including border
  • Verify green-to-yellow transition re-triggers the wave animation
  • Verify the attention color (green/yellow tint + border) appears immediately before the wave starts moving
  • Verify corners of the terminal tile stay fixed during the wave
  • Verify the wave animation ends cleanly with no visual artifacts

When a terminal receives an attention event (green/yellow highlight),
a bottom-to-top wave animation plays where each row briefly scales up
25% then returns to normal size, creating a ripple effect across the
terminal content. The wave sweeps from bottom to top over 600ms with
each row animating for 200ms, staggered across the sweep.

https://claude.ai/code/session_01646Zd7whMAww9t9odJ6exF
@forketyfork forketyfork requested a review from Copilot February 10, 2026 20:18
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adds a bottom-to-top “wave” scale animation when a session receives an attention event, ensuring the UI continues to render frames during the animation window.

Changes:

  • Track wave animation start time per session view (wave_start_time).
  • Start the wave timer on attention events and keep sessions dirty while the wave is running.
  • Apply per-row scaling and alignment adjustments during terminal content rendering.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File Description
src/ui/session_view_state.zig Adds state (wave_start_time) to drive the wave animation lifecycle.
src/ui/components/session_interaction.zig Starts/stops the animation timer and requests frames/dirty renders while active.
src/render/renderer.zig Implements the per-row wave scaling effect during session content rendering.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ca1e8673c7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Issue: PR review flagged inconsistent clock sources between setAttention
and update loop, duplicated wave timing constants across modules,
per-row recomputation of a loop-invariant denominator, and a missing
markDirty call when the wave animation ends.

Solution: Pass now_ms into setAttention instead of calling
std.time.milliTimestamp() directly, so the wave start time uses the
same clock as the update loop. Centralize wave constants (duration, row
animation time, amplitude) as pub const in session_interaction.zig and
reference them from renderer.zig. Hoist the visible_rows_inv
computation before the row loop. Add markDirty when resetting
wave_start_time so the grid cache refreshes to a clean final frame.
…p-blit wave

Issue: The wave animation only affected text rows inside the terminal,
leaving borders static. The color appeared after the wave instead of
before it, and green-to-yellow transitions didn't re-trigger the wave.

Solution: Move wave rendering from per-text-row scaling in
renderSessionContent to a strip-blit approach in renderGridSessionCached.
During the wave, borders and content are baked together into the cache
texture, then blitted as 8px horizontal strips with independent width
scaling that sweeps bottom-to-top. A sine envelope tapers amplitude to
zero at the tile edges so corners stay fixed. Fix the wave_active timing
check (>= instead of >) so color appears on the first frame, and always
restart the wave on setAttention(true) to handle status transitions.
@forketyfork forketyfork merged commit 522f5ef into main Feb 11, 2026
4 checks passed
@forketyfork forketyfork deleted the claude/terminal-wave-animation-4OtLQ branch February 11, 2026 10:45
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.

2 participants