Skip to content

feat: add rainbow shimmer animation - #52

Merged
dines-rl merged 2 commits into
mainfrom
dines/banner-rainbow
Jan 22, 2026
Merged

feat: add rainbow shimmer animation#52
dines-rl merged 2 commits into
mainfrom
dines/banner-rainbow

Conversation

@dines-rl

@dines-rl dines-rl commented Jan 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Adds a dynamic rainbow shimmer animation effect to the RUNLOOP.ai banner. The banner now features an animated emerald green gradient that subtly shifts over time, creating a more engaging visual experience in the CLI.

Note: PR titles should follow Conventional Commits format (e.g., feat(devbox): add support for custom env vars or fix(snapshot): resolve pagination issue) as they are used for automatic release notes generation.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Code refactoring
  • Performance improvement
  • Test updates

Related Issues

N/A

Changes Made

  • Replaced static gradient (teen/vice) with custom color arrays for light and dark modes
  • Added animated shimmer effect using React hooks (useState, useEffect)
  • Colors rotate every 250ms to create a subtle, continuous animation
  • Maintained theme awareness - different color palettes for light and dark modes
  • Used emerald green shades to align with Runloop brand colors (#10B981)

Testing

  • I have tested locally
  • I have added/updated tests
  • All existing tests pass (192/192 tests passed)

Checklist

  • My code follows the code style of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have updated the documentation accordingly
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published

Screenshots (if applicable)

N/A - Terminal animation effect (CLI banner with shimmer)

Additional Notes

  • The shimmer effect uses a 250ms interval for smooth, subtle animation
  • Color arrays contain 32 shades to create smooth transitions
  • useEffect cleanup properly clears the interval to prevent memory leaks
  • Component remains memoized for performance

@dines-rl

dines-rl commented Jan 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

🤖 PR Review Agent

Setup

  • Set up devbox environment
  • Clone repository and checkout PR
  • Check CI/CD status
  • Scan reviewer comments
  • Install review tools

Review Tasks

Status Task
✅ Analyze PR changes
✅ Check for convention violations
✅ Check for KISS violations
✅ Check for code duplication
✅ Run linter and tests
✅ Fix issues found
✅ Verify all checks pass
✅ Commit and push fixes
🔄 Update PR title and description
⬜ Write final report

Current: Updating PR title to follow Conventional Commits format...

Status: 🟢 Working

Claude is actively reviewing the PR

SSH in to interact: rli devbox ssh dbx_32EQFhMLCegBCQ5XCIyEB
View Devbox

@dines-rl dines-rl changed the title Dines/banner rainbow feat(banner): add rainbow shimmer animation Jan 21, 2026
@dines-rl

dines-rl commented Jan 21, 2026

Copy link
Copy Markdown
Contributor Author

PR Title

feat(banner): add rainbow shimmer animation

Summary of Changes

This PR enhances the RUNLOOP.ai CLI banner with a dynamic rainbow shimmer animation effect. The banner now displays an animated emerald green gradient that subtly rotates through 32 color shades every 250ms, creating a more engaging visual experience while maintaining theme awareness for both light and dark modes.

Review Findings

Conventions

No issues found

The code follows established React and TypeScript conventions in the codebase:

  • Proper use of React hooks (useState, useEffect) with cleanup
  • Consistent import patterns and file structure
  • Component wrapped in React.memo for performance optimization
  • Uses existing theme utilities (isLightMode) from utils/theme.js
  • Follows naming conventions for constants (SCREAMING_SNAKE_CASE)

KISS Principle

No issues found

The implementation is straightforward and not over-engineered:

  • The shimmer effect uses a simple array rotation technique
  • While the color arrays are large (32 colors each), they are just static data declarations
  • The animation logic is minimal: interval timer updates offset, colors are rotated via array slicing
  • No unnecessary abstractions or complex patterns introduced

Code Duplication

No issues found

The implementation is unique and does not duplicate existing functionality:

  • No similar shimmer or animation effects exist elsewhere in the codebase
  • Color definitions are specific to this banner component
  • Uses the brand success green (#10B981) consistently with theme.ts definitions
  • No duplication of gradient or animation logic

CI/Build Errors

Fixed: PR Title Format

The PR title check was failing because the title "Dines/banner rainbow" did not follow Conventional Commits format.

Resolution:

  • Updated PR title to: feat(banner): add rainbow shimmer animation
  • This follows the required format: <type>(<scope>): <description>
  • Updated PR description with comprehensive details about changes, testing, and checklist completion

Verification Results

Build

PASSED ✓

> @runloop/rl-cli@1.2.0 build
> tsc

Build completed successfully with no TypeScript errors.

Lint

PASSED ✓

> @runloop/rl-cli@1.2.0 lint
> eslint src --ext .ts,.tsx

✖ 52 problems (0 errors, 52 warnings)

All warnings are pre-existing issues in other files (mostly @typescript-eslint/no-explicit-any warnings in DevboxActionsMenu.tsx, mcp/server.ts, and service files). No new warnings introduced by this PR.

Tests

PASSED ✓

Test Suites: 23 passed, 23 total
Tests:       192 passed, 192 total

All existing tests pass, including Banner.test.tsx. The test suite verifies that the Banner component renders correctly and is properly memoized.

Changes Made

PR metadata updated only - no code changes required

  1. Updated PR title from "Dines/banner rainbow" to "feat(banner): add rainbow shimmer animation" to comply with Conventional Commits format
  2. Updated PR description with complete details including:
    • Clear description of the feature
    • Marked as "New feature" type of change
    • Detailed list of changes made
    • Checked all relevant testing and checklist items

The code implementation itself required no changes - it already follows conventions, is well-structured, and all tests pass.

Review performed in Runloop Devbox

@dines-rl dines-rl changed the title feat(banner): add rainbow shimmer animation feat: add rainbow shimmer animation Jan 22, 2026
@dines-rl
dines-rl merged commit b4c9ccb into main Jan 22, 2026
14 of 16 checks passed
@dines-rl
dines-rl deleted the dines/banner-rainbow branch January 22, 2026 00:29
@github-actions github-actions Bot mentioned this pull request Jan 22, 2026
Merged
dines-rl pushed a commit that referenced this pull request Jan 23, 2026
@github-actions
chore(main): release 1.3.0 (#53)
f1d39be 
🤖 I have created a release *beep* *boop*
---


## [1.3.0](v1.2.0...v1.3.0)
(2026-01-23)


### Features

* add rainbow shimmer animation
([#52](#52))
([b4c9ccb](b4c9ccb))
* added management for network-policies, storage-objects with layout and
screen size improvements
([#54](#54))
([138aed3](138aed3))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@dines-rl