Revamp UI with liquid glass style and colorful background#60
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information |
|
Review changes with |
❌ Deploy Preview for lsngames failed.
|
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
Code Review by Qodo
1. Missing reduced-motion override
|
Reviewer's GuideRefines the global dark theme visuals to a brighter, glassmorphism-inspired aesthetic with a more colorful animated background and enhanced hover/focus treatments for key UI elements. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
…isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf This commit fixes the style issues introduced in 0d7dd7a according to the output from Autopep8, Black, ClangFormat, dotnet-format, isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf. Details: #60
|
View changes in DiffLens |
builder-io-integration
Bot
changed the title
|
View changes in DiffLens |
📝 WalkthroughSummary by CodeRabbit
WalkthroughUpdated global CSS theme variables (background, surface, card, and border colors) and refined animated background effects by adding a colorCycle animation with hue-rotation and saturation filtering. Reworked the Coming Soon card styling with increased glass opacity and blur, adjusted borders and shadows in default and hover states, and changed the title from gradient text to solid white with text-shadow. Updated the language selector dropdown with lighter translucent backgrounds, stronger blur, and a purple glow on hover. ChangesTheme and Component Styling Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![codereviewbot-ai[bot]](https://avatars.githubusercontent.com/in/309638?s=60&v=4){kind=small}
| backdrop-filter: blur(60px); | ||
| -webkit-backdrop-filter: blur(60px); |
There was a problem hiding this comment.
The use of backdrop-filter: blur(60px); and -webkit-backdrop-filter: blur(60px); in the .coming-soon-card class can cause significant performance degradation, especially on lower-end devices or browsers with limited hardware acceleration. Consider reducing the blur radius or providing a fallback for environments where backdrop-filter is not well supported.
| box-shadow: | ||
| 0 20px 40px -10px rgba(0, 0, 0, 0.2), | ||
| 0 0 0 1px rgba(255, 255, 255, 0.08) inset; | ||
| 0 25px 80px -15px rgba(0, 0, 0, 0.2), | ||
| 0 0 0 1px rgba(255, 255, 255, 0.3) inset, | ||
| 0 0 40px rgba(99, 102, 241, 0.1); |
There was a problem hiding this comment.
Multiple large box-shadows applied to .coming-soon-card may negatively impact rendering performance, particularly on mobile devices. Consider simplifying the box-shadow or using fewer layers to improve performance while maintaining visual depth.
|
Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information |
|
View changes in DiffLens |
Hard-Coded Secrets (1)
More info on how to fix Hard-Coded Secrets in General. Vulnerable Libraries (2)
More info on how to fix Vulnerable Libraries in JavaScript. 👉 Go to the dashboard for detailed results. 📥 Happy? Share your feedback with us. |
|
View changes in DiffLens |
| cursor: pointer; | ||
| transition: all 0.2s ease-in-out; | ||
| min-width: 120px; | ||
| background-color: rgba(30, 41, 59, 0.5); | ||
| } | ||
|
|
||
| .language-selector select:hover { | ||
| border-color: var(--accent); | ||
| background: rgba(30, 41, 59, 0.6); | ||
| background: rgba(255, 255, 255, 0.18); | ||
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); | ||
| } | ||
|
|
||
| .language-selector select:focus { |
There was a problem hiding this comment.
Accessibility Concern: Custom Select Styling
The .language-selector select element is heavily styled, which can sometimes interfere with native accessibility features, especially for keyboard and screen reader users. Ensure that the select element remains fully accessible and that custom styling does not obscure focus indicators or reduce usability for assistive technologies.
Recommendation:
- Test the select element with keyboard navigation and screen readers.
- If replacing the native arrow, ensure the custom arrow (created with
.language-selector::after) does not interfere with click or focus events. - Consider adding
aria-labeloraria-labelledbyattributes if the select lacks a visible label.
|
View changes in DiffLens |
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
PR Summary by QodoEnhance global UI styling with animated gradient and glassmorphism WalkthroughsDescription• Refresh global theme colors with lighter glass surfaces and stronger borders • Add dynamic animated background gradient with hue-rotation color cycling • Improve “Coming Soon” hero card and language selector visual clarity and hover states Diagramgraph TD
A["App layout"] --> B["app/globals.css"] --> C["Animated gradient"]
B --> D["Coming Soon card"]
B --> E["Language selector"]
High-Level AssessmentThe following are alternative approaches to this PR: 1. Move styling into Tailwind theme + utilities
2. Gate heavy animations behind reduced-motion and/or feature flags
Recommendation: Current approach (global CSS variables + keyframes + targeted selectors) is appropriate for a cohesive, site-wide visual refresh. Consider adding/ensuring File ChangesEnhancement (1)
|
codeant-ai
Bot
added
the
size:M
 |
|
Overall Grade |
Security Reliability Complexity Hygiene |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| JavaScript |  |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Python | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Rust | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Secrets | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Ruby | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Shell | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Scala | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| SQL | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Terraform | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Code coverage |  |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Swift | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| C & C++ | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| C# | |
Jun 12, 2026 5:08p.m. | Review ↗ |
| Ansible | |
Jun 12, 2026 5:09p.m. | Review ↗ |
Important
AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.
|
View changes in DiffLens |
There was a problem hiding this comment.
Gates Passed
See analysis details in CodeScene
Quality Gate Profile: Customizable Safeguards
Install CodeScene MCP: safeguard and uplift AI-generated code. Catch issues early with our IDE extension and CLI tool.
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| --bg-surface: rgba(226, 232, 240, 0.1); | ||
| --bg-card: rgba(255, 255, 255, 0.08); | ||
| --text-primary: #f1f5f9; | ||
| --text-secondary: #cbd5e1; | ||
| --border-default: rgba(148, 163, 184, 0.1); | ||
| --border-hover: rgba(148, 163, 184, 0.3); | ||
| --border-default: rgba(255, 255, 255, 0.2); | ||
| --border-hover: rgba(255, 255, 255, 0.3); |
There was a problem hiding this comment.
📝 Info: Unused CSS custom properties: --bg-card, --bg-surface, --border-hover
The variables --bg-card (app/globals.css:6), --bg-surface (app/globals.css:5), and --border-hover (app/globals.css:10) are defined but never referenced anywhere in the codebase. They were also unused before this PR, but since this PR changed their values, it's worth noting that these value changes have zero effect. These could be cleaned up or they may be intended for future use.
Was this helpful? React with 👍 or 👎 to provide feedback.
| } | ||
|
|
||
| @keyframes colorCycle { | ||
| 0% { | ||
| filter: hue-rotate(0deg) saturate(1); | ||
| } | ||
| 25% { | ||
| filter: hue-rotate(60deg) saturate(1.2); | ||
| } | ||
| 50% { | ||
| filter: hue-rotate(120deg) saturate(1.1); | ||
| } | ||
| 75% { | ||
| filter: hue-rotate(240deg) saturate(1.2); | ||
| } | ||
| 100% { | ||
| filter: hue-rotate(360deg) saturate(1); |
There was a problem hiding this comment.
📝 Info: colorCycle filter animation creates a new stacking context but is safe here
The new colorCycle animation applies filter: hue-rotate() to .animated-gradient. In CSS, a non-none filter value creates a new stacking context and can cause issues if descendant elements use position: fixed (they'd become relative to the filtered ancestor instead of the viewport). However, this is safe here because .animated-gradient (app/globals.css:53-68) is a standalone position: fixed background div with aria-hidden="true" and no children (except the ::after pseudo-element which is position: absolute). The main content and other UI elements are siblings, not descendants, so the filter won't affect their positioning.
Was this helpful? React with 👍 or 👎 to provide feedback.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The new
gradientShift+colorCycleanimations introduce continuous motion on the body; consider respectingprefers-reduced-motionto avoid issues for motion-sensitive users and reduce unnecessary GPU work. - Several colors are now hard-coded (e.g., pure white for
.coming-soon-titleand specific rgba values) instead of using CSS variables; aligning these with the existing design tokens would make future theming and adjustments easier. - The brighter glassmorphism styles and lighter borders/backgrounds may reduce contrast against the new multicolor gradient; it’s worth quickly checking key text and control states for sufficient contrast, especially on the
coming-soon-cardand.language-selector select.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The new `gradientShift` + `colorCycle` animations introduce continuous motion on the body; consider respecting `prefers-reduced-motion` to avoid issues for motion-sensitive users and reduce unnecessary GPU work.
- Several colors are now hard-coded (e.g., pure white for `.coming-soon-title` and specific rgba values) instead of using CSS variables; aligning these with the existing design tokens would make future theming and adjustments easier.
- The brighter glassmorphism styles and lighter borders/backgrounds may reduce contrast against the new multicolor gradient; it’s worth quickly checking key text and control states for sufficient contrast, especially on the `coming-soon-card` and `.language-selector select`.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the global CSS styling, introducing a new colorful background gradient, a color-cycling animation, and translucent white styling for the cards and selectors. While these changes enhance the visual design, several critical issues were identified. First, the translucent white card background creates poor text contrast, violating accessibility guidelines; a dark translucent background is recommended instead. Second, animating CSS filters on a full-screen element introduces significant performance overhead, so the color-cycling animation should be removed. Finally, explicitly styling dropdown options is necessary to prevent rendering issues across different browsers.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| .coming-soon-card { | ||
| position: relative; | ||
| background: rgba(30, 41, 59, 0.25); | ||
| backdrop-filter: blur(40px); | ||
| -webkit-backdrop-filter: blur(40px); | ||
| border: 1px solid rgba(148, 163, 184, 0.15); | ||
| background: rgba(255, 255, 255, 0.18); | ||
| backdrop-filter: blur(60px); |
There was a problem hiding this comment.
Using a highly translucent white background (rgba(255, 255, 255, 0.18)) for the card over a bright, colorful gradient background makes the white text (#ffffff) and light secondary text (#cbd5e1) extremely difficult to read, violating WCAG accessibility guidelines for contrast.
To ensure readability and maintain a beautiful glassmorphism effect, consider using a dark translucent background (e.g., rgba(15, 23, 42, 0.6)) with a subtle white border. This provides excellent contrast for light text while still letting the colorful background gradient blur through beautifully.
| .coming-soon-card { | |
| position: relative; | |
| background: rgba(30, 41, 59, 0.25); | |
| backdrop-filter: blur(40px); | |
| -webkit-backdrop-filter: blur(40px); | |
| border: 1px solid rgba(148, 163, 184, 0.15); | |
| background: rgba(255, 255, 255, 0.18); | |
| backdrop-filter: blur(60px); | |
| background: rgba(15, 23, 42, 0.6); | |
| backdrop-filter: blur(40px); | |
| -webkit-backdrop-filter: blur(40px); | |
| border: 1px solid rgba(255, 255, 255, 0.15); |
| ); | ||
| background-size: 400% 400%; | ||
| animation: gradientShift 20s ease infinite; | ||
| animation: |
There was a problem hiding this comment.
Animating CSS filters like hue-rotate and saturate on a full-screen element (such as the background gradient) is extremely resource-intensive. It forces the browser to perform continuous repaints and compositing on every frame, which can lead to high CPU/GPU usage, stuttering animations, and rapid battery drain, especially on mobile devices.
Since the gradientShift animation already shifts the gradient position to create a smooth, dynamic color-shifting effect, the colorCycle animation is largely redundant and can be safely removed to significantly improve rendering performance.
| animation: | |
| animation: gradientShift 20s ease infinite; |
| } | ||
|
|
||
| @keyframes colorCycle { | ||
| 0% { | ||
| filter: hue-rotate(0deg) saturate(1); | ||
| } | ||
| 25% { | ||
| filter: hue-rotate(60deg) saturate(1.2); | ||
| } | ||
| 50% { | ||
| filter: hue-rotate(120deg) saturate(1.1); | ||
| } | ||
| 75% { | ||
| filter: hue-rotate(240deg) saturate(1.2); | ||
| } | ||
| 100% { | ||
| filter: hue-rotate(360deg) saturate(1); |
There was a problem hiding this comment.
If the colorCycle animation is removed from the background element to improve performance, this @keyframes colorCycle block becomes unused and should be removed to keep the stylesheet clean and maintainable.
/* Keyframes removed */|
|
||
| .coming-soon-card:hover { | ||
| background: rgba(30, 41, 59, 0.35); | ||
| border-color: rgba(148, 163, 184, 0.25); | ||
| background: rgba(255, 255, 255, 0.22); | ||
| border-color: rgba(255, 255, 255, 0.45); | ||
| box-shadow: | ||
| 0 20px 40px -10px rgba(99, 102, 241, 0.15), | ||
| 0 0 0 1px rgba(148, 163, 184, 0.15) inset; | ||
| 0 30px 100px -15px rgba(99, 102, 241, 0.25), |
There was a problem hiding this comment.
If the card's base background is updated to a dark translucent style to improve text contrast, the hover state should be updated accordingly to maintain visual consistency.
| .coming-soon-card:hover { | |
| background: rgba(30, 41, 59, 0.35); | |
| border-color: rgba(148, 163, 184, 0.25); | |
| background: rgba(255, 255, 255, 0.22); | |
| border-color: rgba(255, 255, 255, 0.45); | |
| box-shadow: | |
| 0 20px 40px -10px rgba(99, 102, 241, 0.15), | |
| 0 0 0 1px rgba(148, 163, 184, 0.15) inset; | |
| 0 30px 100px -15px rgba(99, 102, 241, 0.25), | |
| background: rgba(15, 23, 42, 0.7); | |
| border-color: rgba(255, 255, 255, 0.25); | |
| box-shadow: | |
| 0 30px 100px -15px rgba(99, 102, 241, 0.3), | |
| 0 0 0 1.5px rgba(255, 255, 255, 0.2) inset, | |
| 0 0 60px rgba(99, 102, 241, 0.2); |
| @@ -283,9 +302,9 @@ body { | |||
|
|
|||
| .language-selector select { | |||
There was a problem hiding this comment.
When styling a <select> element with a light translucent background and light text, some browsers (like Chrome/Firefox on certain operating systems) will render the dropdown options (<option>) with a default light background while inheriting the light text color, making the options completely invisible or unreadable.
To ensure cross-browser compatibility and readability, explicitly style the option elements with a solid, dark background.
| .language-selector select { | |
| background: rgba(255, 255, 255, 0.12); | |
| & option { | |
| background-color: #1a1f35; | |
| color: var(--text-primary); | |
| } |
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| --bg-surface: rgba(226, 232, 240, 0.1); | ||
| --bg-card: rgba(255, 255, 255, 0.08); | ||
| --text-primary: #f1f5f9; | ||
| --text-secondary: #cbd5e1; | ||
| --border-default: rgba(148, 163, 184, 0.1); | ||
| --border-hover: rgba(148, 163, 184, 0.3); | ||
| --border-default: rgba(255, 255, 255, 0.2); | ||
| --border-hover: rgba(255, 255, 255, 0.3); |
There was a problem hiding this comment.
Suggestion: These newly introduced custom properties are not referenced anywhere in the stylesheet or related UI files, so they are dead configuration and create misleading theme contracts that are easy to drift from real styling logic. Remove them or wire them into actual selectors to keep the design token system consistent. [code quality]
Severity Level: Major ⚠️
- ⚠️ Theme tokens suggest surfaces not actually configurable.
- ⚠️ Future designers may rely on nonfunctional CSS variables.
- ⚠️ Increases drift between documented and real visual system.Steps of Reproduction ✅
1. Open `app/globals.css` and inspect the `:root` block at lines 3–14 where the design
tokens are declared, including `--bg-surface` (line 5), `--bg-card` (line 6), and
`--border-hover` (line 10).
2. Search the codebase for usages of these tokens; `rg 'var\(--bg-surface'
/workspace/Games` and `rg 'var\(--bg-card' /workspace/Games` return no matches, confirming
that these background tokens are never referenced in any selector or component styles.
3. Search for `border-hover` usages via `rg 'border-hover' /workspace/Games`; the only
match is the definition at `app/globals.css:10`, and there is no `var(--border-hover)`
anywhere, while related styles such as `.language-selector select:hover` at lines 319–323
use `var(--accent)` instead.
4. From this, conclude that `--bg-surface`, `--bg-card`, and `--border-hover` are
currently dead design tokens that do not affect the rendered UI but suggest a theme
contract that is not actually wired into the layout, which can mislead future maintainers
expecting these variables to drive surface and hover styling.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** app/globals.css
**Line:** 5:10
**Comment:**
*Code Quality: These newly introduced custom properties are not referenced anywhere in the stylesheet or related UI files, so they are dead configuration and create misleading theme contracts that are easy to drift from real styling logic. Remove them or wire them into actual selectors to keep the design token system consistent.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| ); | ||
| background-size: 400% 400%; | ||
| animation: gradientShift 20s ease infinite; | ||
| animation: |
There was a problem hiding this comment.
Suggestion: The new full-screen background now animates filter (hue-rotate/saturate) continuously via colorCycle, which forces expensive per-frame repaint/compositing on the entire viewport and can cause visible jank and high battery/CPU usage on lower-end devices. Prefer animating gradient stops/positions only, or move color shifting to a smaller overlay layer instead of a viewport-wide filter animation. [performance]
Severity Level: Critical 🚨
- ⚠️ Home page always runs full-viewport filter animation.
- ⚠️ Lower-end devices may experience reduced frame rates.
- ⚠️ Increased CPU/GPU usage while user keeps tab open.Steps of Reproduction ✅
1. Open `app/page.tsx` and note that the `Home` component renders a full-viewport
background via `<div className="animated-gradient" aria-hidden="true" />` at lines 16–18.
2. Open `app/globals.css` and see the `.animated-gradient` rule at lines 53–68, which
fixes the element to cover the entire viewport (`position: fixed; inset: 0;`) and applies
`animation: gradientShift 20s ease infinite, colorCycle 45s ease-in-out infinite;` at line
67.
3. In the same file, inspect the `@keyframes colorCycle` block at lines 82–97, which
animates the `filter` property (`hue-rotate` and `saturate`) on the animated element
itself for the full duration of the app session.
4. Run the app, load the home page, and observe in browser devtools (Performance or
Rendering/FPS overlay) that the full-screen `.animated-gradient` element is continuously
animating a GPU/compositor-affecting `filter` across the entire viewport, which on
lower-end devices will increase CPU/GPU usage and can lower frame rate during the entire
time the page is open.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** app/globals.css
**Line:** 67:67
**Comment:**
*Performance: The new full-screen background now animates `filter` (`hue-rotate`/`saturate`) continuously via `colorCycle`, which forces expensive per-frame repaint/compositing on the entire viewport and can cause visible jank and high battery/CPU usage on lower-end devices. Prefer animating gradient stops/positions only, or move color shifting to a smaller overlay layer instead of a viewport-wide filter animation.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| ); | ||
| background-size: 400% 400%; | ||
| animation: gradientShift 20s ease infinite; | ||
| animation: gradientShift 20s ease infinite, colorCycle 45s ease-in-out infinite; |
There was a problem hiding this comment.
1. Missing reduced-motion override 🐞 Bug ☼ Reliability
.animated-gradient runs continuous gradientShift + colorCycle animations unconditionally, so users with prefers-reduced-motion: reduce will still see full-screen motion effects. This is an accessibility regression for motion-sensitive users.
Agent Prompt
### Issue description
The animated background runs indefinitely and does not respect the user’s reduced-motion preference.
### Issue Context
The `.animated-gradient` element is a fixed, full-viewport background and is always animated via the `animation` property.
### Fix
Add a `@media (prefers-reduced-motion: reduce)` block that disables (or significantly simplifies) the animation for `.animated-gradient`.
### Fix Focus Areas
- app/globals.css[59-67]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Code Review SummaryStatus: No Issues Found | Recommendation: Merge This PR introduces purely visual/styling changes to
No security vulnerabilities, runtime errors, or logic bugs were identified. All changes are cosmetic CSS updates. Files Reviewed (1 file)
Reviewed by laguna-m.1-20260312:free · 282,738 tokens |
| @@ -78,6 +81,24 @@ body { | |||
| } | |||
| } | |||
|
|
|||
| @keyframes colorCycle { | |||
| 0% { | |||
| filter: hue-rotate(0deg) saturate(1); | |||
| } | |||
| 25% { | |||
| filter: hue-rotate(60deg) saturate(1.2); | |||
| } | |||
| 50% { | |||
| filter: hue-rotate(120deg) saturate(1.1); | |||
| } | |||
| 75% { | |||
| filter: hue-rotate(240deg) saturate(1.2); | |||
| } | |||
| 100% { | |||
| filter: hue-rotate(360deg) saturate(1); | |||
| } | |||
| } | |||
There was a problem hiding this comment.
🎨 Design Review — MEDIUM
Do you think we should provide a reduced-motion variant for the new dual infinite animations, so users who prefer less motion are not forced to view continuous hue/position shifts?
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a **Design Review** comment — a question about the UX/design of frontend code. It is intentionally framed as a question, not a prescription. The author may agree or disagree.
**Path:** app/globals.css
**Line:** 67:100
**Comment:**
*MEDIUM: Do you think we should provide a reduced-motion variant for the new dual infinite animations, so users who prefer less motion are not forced to view continuous hue/position shifts?
- If you agree with the proposal, apply a small, localized change (swap a color token, bump a font size, adjust spacing, add an aria-label, etc.).
- If you disagree, or the answer depends on a design decision a human should make, explain your reasoning and ask the user how to proceed.
Do NOT refactor surrounding components or apply other design changes that weren't asked about.
|
CodeAnt AI finished reviewing your PR. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| } | ||
|
|
||
| @keyframes colorCycle { | ||
| 0% { | ||
| filter: hue-rotate(0deg) saturate(1); | ||
| } | ||
| 25% { | ||
| filter: hue-rotate(60deg) saturate(1.2); | ||
| } | ||
| 50% { | ||
| filter: hue-rotate(120deg) saturate(1.1); | ||
| } | ||
| 75% { | ||
| filter: hue-rotate(240deg) saturate(1.2); | ||
| } | ||
| 100% { | ||
| filter: hue-rotate(360deg) saturate(1); |
There was a problem hiding this comment.
gradientShift and the new colorCycle) run indefinitely with no reduced-motion guard. The colorCycle animation continuously rotates the hue across the full 360° spectrum, which can be disorienting or physically uncomfortable for users with vestibular disorders — and the prefers-reduced-motion: reduce media query is absent from the entire file. Wrapping the animations so they pause for users who have requested reduced motion follows WCAG 2.3.3 and is a simple addition.
| } | |
| @keyframes colorCycle { | |
| 0% { | |
| filter: hue-rotate(0deg) saturate(1); | |
| } | |
| 25% { | |
| filter: hue-rotate(60deg) saturate(1.2); | |
| } | |
| 50% { | |
| filter: hue-rotate(120deg) saturate(1.1); | |
| } | |
| 75% { | |
| filter: hue-rotate(240deg) saturate(1.2); | |
| } | |
| 100% { | |
| filter: hue-rotate(360deg) saturate(1); | |
| @keyframes colorCycle { | |
| 0% { | |
| filter: hue-rotate(0deg) saturate(1); | |
| } | |
| 25% { | |
| filter: hue-rotate(60deg) saturate(1.2); | |
| } | |
| 50% { | |
| filter: hue-rotate(120deg) saturate(1.1); | |
| } | |
| 75% { | |
| filter: hue-rotate(240deg) saturate(1.2); | |
| } | |
| 100% { | |
| filter: hue-rotate(360deg) saturate(1); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .animated-gradient { | |
| animation: none; | |
| } | |
| } |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
View changes in DiffLens |
Up to standards ✅🟢 Issues
|
![llamapreview[bot]](https://avatars.githubusercontent.com/in/1023541?s=60&v=4){kind=small}
There was a problem hiding this comment.
AI Code Review by LlamaPReview
🎯 TL;DR & Recommendation
Recommendation: Request Changes
This PR modernizes the UI with a vibrant glass aesthetic but introduces a breaking change via a global CSS variable that will silently affect all components relying on --bg-base. Additionally, the new colorCycle animation may cause performance issues on lower-end devices.
🌟 Strengths
- The new liquid glass design and animated gradient significantly improve visual appeal.
- Good use of CSS custom properties for maintainable styling.
⚡ Key Risks & Improvements (P1)
- app/globals.css: The change to
--bg-basefrom#0f172ato#1a1f35globally in:rootwill silently alter the background of all components relying on this variable, breaking visual consistency across the app.
💡 Suggestions (P2)
- app/globals.css: The
colorCycleanimation applyingfilterproperties may cause jank, battery drain, and poor performance on mobile devices, and the filter may unintentionally affect the overlay appearance.
📈 Risk Diagram
This diagram illustrates the risk of the global CSS variable change affecting unmodified components.
sequenceDiagram
participant D as Developer
participant CSS as :root variable
participant C as Unmodified Component
D->>CSS: Change --bg-base to #35;1a1f35
CSS->>C: Inherits new --bg-base value
note over CSS,C: R1(P1): Inconsistent background for unmodified pages
💡 Have feedback? We'd love to hear it in our GitHub Discussions.
✨ This review was generated by LlamaPReview Advanced, which is free for all open-source projects. Learn more.
| :root { | ||
| --bg-base: #0f172a; | ||
| --bg-surface: rgba(226, 232, 240, 0.08); | ||
| --bg-card: rgba(30, 41, 59, 0.4); | ||
| --bg-base: #1a1f35; | ||
| --bg-surface: rgba(226, 232, 240, 0.1); | ||
| --bg-card: rgba(255, 255, 255, 0.08); |
There was a problem hiding this comment.
P1 | Confidence: High
The CSS variable --bg-base was changed from #0f172a (very dark navy) to #1a1f35 (a lighter, slightly purplish dark) globally in :root. This variable is intended to be the base background color for the application, and other components or pages not modified in this PR rely on var(--bg-base) to render a dark background. The change will silently alter the background appearance of any such component, potentially breaking visual consistency if those components assumed the original dark tone. This is a breaking change in the global design system that should be coordinated across the entire codebase.
Code Suggestion:
/* Retain old variable for backward compatibility or only change locally */
:root {
--bg-base: #0f172a; /* keep original */
}
.revamped-section {
--bg-base: #1a1f35; /* override in scoped context */
}| } | ||
| } | ||
|
|
||
| @keyframes colorCycle { |
There was a problem hiding this comment.
P2 | Confidence: High
The colorCycle animation is applied to the .animated-gradient element and uses filter properties (hue-rotate and saturate) over a 45‑second infinite loop. filter triggers a full paint of the element and its descendants on every frame, including the ::after pseudo‑element overlay. This will cause continuous GPU composition work and may lead to visible jank, high battery drain, and poor scrolling performance, especially on mobile or lower‑end devices. Additionally, the filter on the parent also modifies the appearance of the overlay (which uses a dark radial gradient), potentially causing unintended color shifts that make the overlay less effective at providing depth.
Code Suggestion:
/* Instead of animating filter, animate background-position or background-size for better performance */
@keyframes colorCycle {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Combine with gradientShift if needed, but avoid filter animations */Evidence: method:colorCycle, search:filter
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 1 file (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="app/globals.css">
<violation number="1" location="app/globals.css:69">
P2: `colorCycle` animates `filter: hue-rotate()/saturate()` on a viewport-sized fixed element, which forces a full repaint every frame (filter is not compositor-friendly). This runs indefinitely for the lifetime of the page and can cause jank and battery drain on lower-end/mobile devices. Consider removing `colorCycle` since `gradientShift` already provides dynamic color movement via background-position, or move the hue-rotate effect to a smaller overlay layer.</violation>
<violation number="2" location="app/globals.css:69">
P1: These infinite animations (`gradientShift` + `colorCycle`) run unconditionally on a full-viewport element without a `@media (prefers-reduced-motion: reduce)` guard. Users who have requested reduced motion at the OS level will still see continuous full-screen color shifting, which can trigger vestibular disorders or discomfort. Add a reduced-motion media query to pause or disable both animations.</violation>
</file>
Shadow auto-approve: would not auto-approve because issues were found.
Re-trigger cubic
| animation: gradientShift 20s ease infinite; | ||
| animation: | ||
| gradientShift 20s ease infinite, | ||
| colorCycle 45s ease-in-out infinite; |
There was a problem hiding this comment.
P1: These infinite animations (gradientShift + colorCycle) run unconditionally on a full-viewport element without a @media (prefers-reduced-motion: reduce) guard. Users who have requested reduced motion at the OS level will still see continuous full-screen color shifting, which can trigger vestibular disorders or discomfort. Add a reduced-motion media query to pause or disable both animations.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 69:
<comment>These infinite animations (`gradientShift` + `colorCycle`) run unconditionally on a full-viewport element without a `@media (prefers-reduced-motion: reduce)` guard. Users who have requested reduced motion at the OS level will still see continuous full-screen color shifting, which can trigger vestibular disorders or discomfort. Add a reduced-motion media query to pause or disable both animations.</comment>
<file context>
@@ -64,7 +64,9 @@ body {
- animation: gradientShift 20s ease infinite, colorCycle 45s ease-in-out infinite;
+ animation:
+ gradientShift 20s ease infinite,
+ colorCycle 45s ease-in-out infinite;
}
</file context>
| animation: gradientShift 20s ease infinite; | ||
| animation: | ||
| gradientShift 20s ease infinite, | ||
| colorCycle 45s ease-in-out infinite; |
There was a problem hiding this comment.
P2: colorCycle animates filter: hue-rotate()/saturate() on a viewport-sized fixed element, which forces a full repaint every frame (filter is not compositor-friendly). This runs indefinitely for the lifetime of the page and can cause jank and battery drain on lower-end/mobile devices. Consider removing colorCycle since gradientShift already provides dynamic color movement via background-position, or move the hue-rotate effect to a smaller overlay layer.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 69:
<comment>`colorCycle` animates `filter: hue-rotate()/saturate()` on a viewport-sized fixed element, which forces a full repaint every frame (filter is not compositor-friendly). This runs indefinitely for the lifetime of the page and can cause jank and battery drain on lower-end/mobile devices. Consider removing `colorCycle` since `gradientShift` already provides dynamic color movement via background-position, or move the hue-rotate effect to a smaller overlay layer.</comment>
<file context>
@@ -64,7 +64,9 @@ body {
- animation: gradientShift 20s ease infinite, colorCycle 45s ease-in-out infinite;
+ animation:
+ gradientShift 20s ease infinite,
+ colorCycle 45s ease-in-out infinite;
}
</file context>
| colorCycle 45s ease-in-out infinite; | |
| gradientShift 20s ease infinite; |
There was a problem hiding this comment.
3 issues found and verified against the latest diff
Confidence score: 3/5
- In
app/globals.css, the translucent surface color (rgba(255, 255, 255, 0.18)) against the bright animated gradient can make#ffffffand#cbd5e1text hard to read, creating a likely accessibility/legibility regression for core UI content—raise contrast (darker surface, darker text, or both) and verify contrast ratios before merging. - In
app/globals.css, styling<select>with a translucent background plus light text can produce light-on-light<option>rendering in some browsers, making dropdown choices unreadable and blocking form use for affected users—add explicit<option>background/text colors (or browser-safe select styling) and smoke-test across major browsers. - In
app/globals.css,--bg-surface,--bg-card, and--border-hoverappear unused, so these token edits add noise without user-visible benefit and can confuse future styling changes—remove unused tokens or wire them into actual selectors before merge to keep the stylesheet maintainable.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="app/globals.css">
<violation number="1" location="app/globals.css:6">
P3: The custom properties `--bg-surface`, `--bg-card`, and `--border-hover` are defined/modified here but never referenced anywhere in the codebase — these value changes have no visual effect. Either remove these dead tokens or wire them into actual selectors to prevent a misleading theme contract.</violation>
<violation number="2" location="app/globals.css:121">
P1: Using a highly translucent white background (`rgba(255, 255, 255, 0.18)`) over the bright, colorful animated gradient makes white text (`#ffffff`) and light secondary text (`#cbd5e1`) difficult to read, likely violating WCAG 4.5:1 contrast requirements. The dynamic hue-rotating gradient makes contrast unpredictable. Consider using a dark translucent background (e.g., `rgba(15, 23, 42, 0.6)`) with a subtle white border to maintain legibility while preserving the glassmorphism aesthetic.</violation>
<violation number="3" location="app/globals.css:305">
P2: When styling a `<select>` with a translucent background and light text (`color: var(--text-primary)`), some browsers render dropdown `<option>` elements with a default light background while inheriting the light text color, making options invisible or unreadable. Explicitly style the `option` elements with a solid dark background to ensure cross-browser readability:
```css
.language-selector select option {
background: #1a1f35;
color: #f1f5f9;
}
```</violation>
</file>
Shadow auto-approve: would not auto-approve because issues were found.
Re-trigger cubic
| backdrop-filter: blur(40px); | ||
| -webkit-backdrop-filter: blur(40px); | ||
| border: 1px solid rgba(148, 163, 184, 0.15); | ||
| background: rgba(255, 255, 255, 0.18); |
There was a problem hiding this comment.
P1: Using a highly translucent white background (rgba(255, 255, 255, 0.18)) over the bright, colorful animated gradient makes white text (#ffffff) and light secondary text (#cbd5e1) difficult to read, likely violating WCAG 4.5:1 contrast requirements. The dynamic hue-rotating gradient makes contrast unpredictable. Consider using a dark translucent background (e.g., rgba(15, 23, 42, 0.6)) with a subtle white border to maintain legibility while preserving the glassmorphism aesthetic.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 119:
<comment>Using a highly translucent white background (`rgba(255, 255, 255, 0.18)`) over the bright, colorful animated gradient makes white text (`#ffffff`) and light secondary text (`#cbd5e1`) difficult to read, likely violating WCAG 4.5:1 contrast requirements. The dynamic hue-rotating gradient makes contrast unpredictable. Consider using a dark translucent background (e.g., `rgba(15, 23, 42, 0.6)`) with a subtle white border to maintain legibility while preserving the glassmorphism aesthetic.</comment>
<file context>
@@ -97,15 +116,16 @@ body {
- backdrop-filter: blur(40px);
- -webkit-backdrop-filter: blur(40px);
- border: 1px solid rgba(148, 163, 184, 0.15);
+ background: rgba(255, 255, 255, 0.18);
+ backdrop-filter: blur(60px);
+ -webkit-backdrop-filter: blur(60px);
</file context>
| background: rgba(255, 255, 255, 0.18); | |
| background: rgba(15, 23, 42, 0.6); |
| background: rgba(30, 41, 59, 0.5); | ||
| backdrop-filter: blur(12px); | ||
| -webkit-backdrop-filter: blur(12px); | ||
| background: rgba(255, 255, 255, 0.12); |
There was a problem hiding this comment.
P2: When styling a <select> with a translucent background and light text (color: var(--text-primary)), some browsers render dropdown <option> elements with a default light background while inheriting the light text color, making options invisible or unreadable. Explicitly style the option elements with a solid dark background to ensure cross-browser readability:
.language-selector select option {
background: #1a1f35;
color: #f1f5f9;
}Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 303:
<comment>When styling a `<select>` with a translucent background and light text (`color: var(--text-primary)`), some browsers render dropdown `<option>` elements with a default light background while inheriting the light text color, making options invisible or unreadable. Explicitly style the `option` elements with a solid dark background to ensure cross-browser readability:
```css
.language-selector select option {
background: #1a1f35;
color: #f1f5f9;
}
```</comment>
<file context>
@@ -283,9 +300,9 @@ body {
- background: rgba(30, 41, 59, 0.5);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
+ background: rgba(255, 255, 255, 0.12);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
</file context>
| --bg-card: rgba(30, 41, 59, 0.4); | ||
| --bg-base: #1a1f35; | ||
| --bg-surface: rgba(226, 232, 240, 0.1); | ||
| --bg-card: rgba(255, 255, 255, 0.08); |
There was a problem hiding this comment.
P3: The custom properties --bg-surface, --bg-card, and --border-hover are defined/modified here but never referenced anywhere in the codebase — these value changes have no visual effect. Either remove these dead tokens or wire them into actual selectors to prevent a misleading theme contract.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 6:
<comment>The custom properties `--bg-surface`, `--bg-card`, and `--border-hover` are defined/modified here but never referenced anywhere in the codebase — these value changes have no visual effect. Either remove these dead tokens or wire them into actual selectors to prevent a misleading theme contract.</comment>
<file context>
@@ -1,13 +1,13 @@
- --bg-card: rgba(30, 41, 59, 0.4);
+ --bg-base: #1a1f35;
+ --bg-surface: rgba(226, 232, 240, 0.1);
+ --bg-card: rgba(255, 255, 255, 0.08);
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
</file context>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/globals.css`:
- Line 84: Rename the `@keyframes` declaration named "colorCycle" to kebab-case
"color-cycle" and update any animation references that use the old name (e.g.,
where you set animation: colorCycle ...) to the new "color-cycle" identifier so
the keyframe name and all usages match the stylelint kebab-case convention.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 9bb9785d-0f4e-4b1f-8f60-6ab6bf89581c
📒 Files selected for processing (1)
app/globals.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: gitStream.cm
- GitHub Check: gitStream.cm
- GitHub Check: guardrails/scan
- GitHub Check: gitStream.cm
- GitHub Check: cubic · AI code reviewer
- GitHub Check: gitStream.cm
- GitHub Check: gitStream.cm
- GitHub Check: Mergify Merge Protections
🧰 Additional context used
🪛 Stylelint (17.12.0)
app/globals.css
[error] 84-84: Expected keyframe name "colorCycle" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
🔇 Additional comments (8)
app/globals.css (8)
3-6: Breaking change: Global--bg-basecolor updated.This duplicates a prior concern. The change from
#0f172ato#1a1f35affects any component relying onvar(--bg-base)globally. Ensure visual consistency is maintained across the codebase.
84-100: Performance:filteranimation triggers continuous repaints.This duplicates a prior concern. The
colorCycleanimation usesfilter(hue-rotate, saturate) which forces full element repaints every frame, causing GPU overhead and potential jank on mobile/lower-end devices.
120-123: Performance: Large backdrop-filter blur.This duplicates a prior concern. The
blur(60px)can cause rendering performance issues on lower-end devices.
127-130: Performance: Multiple layered box-shadows.This duplicates a prior concern. The three-layer box-shadow may impact rendering performance on mobile devices.
303-323: Accessibility: Custom select styling.This duplicates a prior concern. Ensure keyboard navigation and screen reader compatibility remain functional with the updated translucent styling.
143-149: LGTM!
180-192: LGTM!
110-110: Check contrast/readability over the lighter gradient overlay.The overlay is now
rgba(0, 0, 0, 0.15)on.animated-gradient::after, and the text sits on.coming-soon-cardwith a very light frosted background (rgba(255, 255, 255, 0.18)). Title uses#ffffffwith text-shadow and subtitle usesrgba(203, 213, 225, 0.85), but since the card is highly transparent, the lighter overlay can still wash out light text in bright environments—visually/contrast-check on high-brightness devices and adjust text shadow or card/text styling if needed.
| } | ||
| } | ||
|
|
||
| @keyframes colorCycle { |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | 💤 Low value
Use kebab-case for keyframe name.
Stylelint convention expects color-cycle instead of colorCycle for CSS keyframe names.
♻️ Proposed fix
-@keyframes colorCycle {
+@keyframes color-cycle {Then update the animation reference on line 69:
animation:
gradientShift 20s ease infinite,
- colorCycle 45s ease-in-out infinite;
+ color-cycle 45s ease-in-out infinite;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @keyframes colorCycle { | |
| `@keyframes` color-cycle { |
🧰 Tools
🪛 Stylelint (17.12.0)
[error] 84-84: Expected keyframe name "colorCycle" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/globals.css` at line 84, Rename the `@keyframes` declaration named
"colorCycle" to kebab-case "color-cycle" and update any animation references
that use the old name (e.g., where you set animation: colorCycle ...) to the new
"color-cycle" identifier so the keyframe name and all usages match the stylelint
kebab-case convention.
Source: Linters/SAST tools
|
@BuilderIO You are an expert developer AI agent. I am deploying a Next.js (v15.5.19) project from Replit to Vercel, and the build is failing during the compilation phase with a TypeScript type error. Here is the exact error log from Vercel:./app/layout.tsx:2:8 1 | import type { Metadata, Viewport } from "next";
The root cause is likely a Linux case-sensitivity issue or file placement issue during the Vercel build environment, as Replit can be case-insensitive but Vercel requires strict matching. Please perform the following actions to resolve this:
|
|
Great! The dev server is now running properly. Regarding the Vercel build error mentioned in the PR comment about Current Status: The Vercel error is likely due to:
To ensure Vercel rebuilds successfully: The changes have already been pushed to the remote branch. When you trigger a redeploy on Vercel, it should pick up the correct file. The If Vercel still fails after redeployment, it may be a one-time cache issue that can be resolved by:
The local environment is now working perfectly with all your UI changes intact. |
2 participants
User description
Summary
This PR overhauls the visual design with a liquid glass aesthetic, a vibrant animated gradient background, and improved readability for the "Coming Soon" card and language selector.
Problem
The original UI had a dark, bland gradient background and a card design that lacked visual clarity. The "Coming Soon" title used a purple gradient text that was hard to read, and the overall glassmorphism effect was too subtle and dark.
Solution
Replaced the muted dark color palette with lighter, more translucent glass-style surfaces and a vivid multi-color animated gradient background. The "Coming Soon" title was switched to solid white with a soft glow text-shadow for better visibility.
Key Changes
#a78bfa,#60a5fa,#34d399,#f472b6) and added acolorCyclekeyframe animation usinghue-rotateandsaturatefilters for dynamic color shifting over time0.3to0.15for a less heavy feel40pxto60px, switched card background torgba(255,255,255,0.18), and enhanced borders and box shadows with stronger white highlights and a subtle indigo glow#ffffff) and a layeredtext-shadowfor a glowing, readable appearancergba(255,255,255,0.12)) with increased blur and an indigo glow on hover--bg-base,--bg-card,--border-default, and--border-hoverto use lighter, more translucent white-based valuesTip
This PR wasn't reviewed by Quality Agent. Enable it in Project Settings to get AI-powered code review on every PR.
To clone this PR locally use the Github CLI with command
gh pr checkout 60You can tag me at @BuilderIO for anything you want me to fix or change
Summary by cubic
Refreshes the global UI with a vibrant animated background, glassmorphic cards, and clearer typography for better readability and polish. Also updates the language selector styling for better contrast and hover feedback.
Written for commit 0d7dd7a. Summary will update on new commits.
CodeAnt-AI Description
Refresh the Coming Soon screen with a brighter glass-style look
What Changed
Impact
✅ Clearer Coming Soon headline✅ Brighter landing page appearance✅ Easier-to-spot language selector💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Greptile Summary
This PR is a visual theme refresh of
app/globals.css, shifting the background palette from muted dark blues to a vibrant multi-color gradient (purple → blue → green → pink) and adding a newcolorCyclekeyframe animation that continuously rotates the hue of the background element across the full 360° spectrum over 45 seconds..animated-gradientelement now runs two parallel animations — the existinggradientShiftand the newcolorCycle(usingfilter: hue-rotate()) — to create a dynamic, colour-cycling background effect..coming-soon-cardglass effect is intensified (blur increased from 40 px to 60 px, higher background opacity, stronger borders and shadow spreads)..coming-soon-titledrops the-webkit-background-clip: textgradient approach in favour of solid white withtext-shadow, which is more broadly compatible.Confidence Score: 4/5
Safe to merge; all changes are purely visual CSS with no functional regressions. The main thing worth revisiting before shipping is motion accessibility.
The change is entirely cosmetic — no logic, no data, no API surface touched. The one gap worth addressing is that neither the new colorCycle animation nor the existing gradientShift are guarded by prefers-reduced-motion, which matters for users with vestibular sensitivity. Everything else is straightforward colour and shadow value tuning.
app/globals.css — specifically the animation declarations and the absence of a reduced-motion media query.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[".animated-gradient (fixed, z-index:0)"] -->|"animation: gradientShift 20s"| B["Background position shift\n(0% → 100% → 0%)"] A -->|"animation: colorCycle 45s NEW"| C["filter: hue-rotate(0→360deg)\nsaturate(1→1.2→1)"] A -->|"::after pseudo-element"| D["Radial gradient overlay\n(rgba(0,0,0,0.15))"] B --> E["Combined visual effect\non background layer"] C --> E D --> E E --> F[".coming-soon-card\nbackdrop-filter: blur(60px)"] F --> G[".coming-soon-title\nwhite + text-shadow"] F --> H[".language-selector select\nbackdrop-filter: blur(20px)"]Reviews (1): Last reviewed commit: "style: format code with Autopep8, Black,..." | Re-trigger Greptile