feat: add BackgroundTile component and it's colours in design system#322
feat: add BackgroundTile component and it's colours in design system#322reach2saksham wants to merge 5 commits intoAOSSIE-Org:new-designfrom
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds theme-aware CSS tokens for tile visuals and a new client-side BackgroundTile React component that renders a responsive, animated canvas waveform with scroll/wheel-driven amplitude controls; adjusts page layout margins for responsive spacing. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Page as Page
participant Tile as BackgroundTile
participant RO as ResizeObserver
participant Canvas as Canvas
User->>Page: opens page / scrolls / wheel
Page->>Tile: mount (attach listeners)
Tile->>RO: observe container/canvas
RO-->>Tile: size change event
Tile->>Canvas: set DPR & resize, draw frame
User->>Tile: wheel/scroll -> update amp target
Tile->>Tile: start/stop RAF loop (animation)
Tile->>Canvas: render waveform frames (requestAnimationFrame)
User-->>Tile: input stops -> amplitude decays -> stop loop
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/`[locale]/globals.css:
- Around line 40-43: The CSS variable --tile-bg uses invalid rgba() syntax with
three components; update the declaration for --tile-bg to use a valid color
function (either change rgba(227, 226, 246) to rgb(227, 226, 246) for an opaque
color or add an alpha channel like rgba(227, 226, 246, 1)). Ensure --tile-bg is
corrected alongside the existing --tile-stroke and --line-color variables so all
color values use valid CSS color syntax.
- Around line 73-76: The dark-mode CSS variables --tile-bg, --tile-stroke, and
--line-color use invalid/ambiguous rgba() syntax; update them to the corrected
color-function form used elsewhere (e.g., include an explicit alpha or use the
modern slash syntax) so they parse consistently in dark mode—for example replace
rgba(30, 29, 28) with a proper value like rgba(30,29,28,1) or rgb(30 29 28 / 1),
and similarly ensure --tile-stroke and --line-color include their alpha channels
correctly (e.g., rgba(80,80,80,0.5) and rgba(0,0,0,0.2)).
In `@src/components/ui/BackgroundTile.tsx`:
- Line 1: The BackgroundTile component uses browser-only APIs (window, document,
ResizeObserver, requestAnimationFrame) but is currently a Server Component; add
the Next.js App Router client directive by inserting "use client" as the very
first line of src/components/ui/BackgroundTile.tsx so the component (and its
useEffect/useRef hooks) run on the client; ensure the directive precedes imports
and keep existing imports and hooks (useEffect, useRef) unchanged.
- Line 77: The per-frame call to getComputedStyle in BackgroundTile.tsx (the
line setting ctx.strokeStyle =
getComputedStyle(document.documentElement).getPropertyValue("--line-color").trim())
causes unnecessary work; cache the computed "--line-color" once (e.g., in a ref
or component state) and use that cached value when painting each frame, and
refresh the cache only when the theme changes (detect via a theme prop, a
MutationObserver on document.documentElement attributes, or a theme change
event) so you avoid calling getComputedStyle inside the animation/render loop.
- Around line 146-148: The canvas currently registers a duplicate wheel listener
causing onWheel to fire twice; remove the redundant
canvas.addEventListener("wheel", onWheel, { passive: true }) registration (or
alternatively modify the canvas handler to call event.stopPropagation()) so only
one wheel handler runs; update any initialization/cleanup code that references
the canvas wheel listener (e.g., where onWheel is added/removed) to avoid double
timeouts and ensure only the window-level onWheel is used.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ae26f369-b133-45cb-97d2-a7d48a1ac9ef
📒 Files selected for processing (2)
src/app/[locale]/globals.csssrc/components/ui/BackgroundTile.tsx
src/app/[locale]/globals.css
Outdated
| /* Background Tile Colors */ | ||
| --tile-bg: rgba(227, 226, 246); | ||
| --tile-stroke: rgba(80, 80, 80, 0.1); | ||
| --line-color: rgba(0, 0, 0, 0.05); |
There was a problem hiding this comment.
Invalid rgba() syntax — missing alpha value.
rgba(227, 226, 246) provides only 3 values but rgba() requires 4 (r, g, b, a). This will cause the property to be ignored or produce unexpected results. Use rgb() for opaque colors or add the alpha channel.
🐛 Proposed fix
/* Background Tile Colors */
- --tile-bg: rgba(227, 226, 246);
+ --tile-bg: rgb(227, 226, 246);
--tile-stroke: rgba(80, 80, 80, 0.1);
--line-color: rgba(0, 0, 0, 0.05);📝 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.
| /* Background Tile Colors */ | |
| --tile-bg: rgba(227, 226, 246); | |
| --tile-stroke: rgba(80, 80, 80, 0.1); | |
| --line-color: rgba(0, 0, 0, 0.05); | |
| /* Background Tile Colors */ | |
| --tile-bg: rgb(227, 226, 246); | |
| --tile-stroke: rgba(80, 80, 80, 0.1); | |
| --line-color: rgba(0, 0, 0, 0.05); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/`[locale]/globals.css around lines 40 - 43, The CSS variable
--tile-bg uses invalid rgba() syntax with three components; update the
declaration for --tile-bg to use a valid color function (either change rgba(227,
226, 246) to rgb(227, 226, 246) for an opaque color or add an alpha channel like
rgba(227, 226, 246, 1)). Ensure --tile-bg is corrected alongside the existing
--tile-stroke and --line-color variables so all color values use valid CSS color
syntax.
src/app/[locale]/globals.css
Outdated
| /* Background Tile Colors */ | ||
| --tile-bg: rgba(30, 29, 28); | ||
| --tile-stroke: rgba(80, 80, 80, 0.5); | ||
| --line-color: rgba(0, 0, 0, 0.2); |
There was a problem hiding this comment.
Same rgba() syntax issue in dark mode.
Apply the same fix here for consistency.
🐛 Proposed fix
/* Background Tile Colors */
- --tile-bg: rgba(30, 29, 28);
+ --tile-bg: rgb(30, 29, 28);
--tile-stroke: rgba(80, 80, 80, 0.5);
--line-color: rgba(0, 0, 0, 0.2);📝 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.
| /* Background Tile Colors */ | |
| --tile-bg: rgba(30, 29, 28); | |
| --tile-stroke: rgba(80, 80, 80, 0.5); | |
| --line-color: rgba(0, 0, 0, 0.2); | |
| /* Background Tile Colors */ | |
| --tile-bg: rgb(30, 29, 28); | |
| --tile-stroke: rgba(80, 80, 80, 0.5); | |
| --line-color: rgba(0, 0, 0, 0.2); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/`[locale]/globals.css around lines 73 - 76, The dark-mode CSS
variables --tile-bg, --tile-stroke, and --line-color use invalid/ambiguous
rgba() syntax; update them to the corrected color-function form used elsewhere
(e.g., include an explicit alpha or use the modern slash syntax) so they parse
consistently in dark mode—for example replace rgba(30, 29, 28) with a proper
value like rgba(30,29,28,1) or rgb(30 29 28 / 1), and similarly ensure
--tile-stroke and --line-color include their alpha channels correctly (e.g.,
rgba(80,80,80,0.5) and rgba(0,0,0,0.2)).
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/`[locale]/page.tsx:
- Around line 13-19: The Home component imports BackgroundTile but never uses
it; either render <BackgroundTile /> inside the Home JSX (e.g., alongside or
wrapping the current div in the Home function) so the tile appears, or remove
the unused BackgroundTile import until you wire it into the page; update the
Home component to include BackgroundTile (or delete its import) and ensure any
required props or classNames are passed when rendering.
In `@src/components/ui/BackgroundTile.tsx`:
- Around line 49-57: The ResizeObserver's setSize function resets the canvas
bitmap (canvas.width/height and ctx.setTransform) but doesn't redraw, leaving
the tile blank until user input; update setSize (used by ResizeObserver and
called once at mount) to call the component's render() after resizing so the
line is immediately redrawn — locate the setSize function and the
ro.observe(canvas) usage along with the render() function and add a render()
invocation at the end of setSize so the canvas is repainted after any
resize/orientation change.
- Around line 97-101: The stroke uses a single flat color (ctx.strokeStyle =
lineColorRef.current) which cannot produce the required light-mode
transition/fade; replace the flat strokeStyle with a CanvasGradient created via
ctx.createLinearGradient(...) (or createRadialGradient if appropriate), add
color stops that use lineColorRef.current and a transparent/alpha-reduced
variant for the fade, assign that gradient to ctx.strokeStyle, and ensure you
recompute the gradient whenever canvas size, path bounds, or theme/mode changes
(where lineColorRef.current is used) before calling ctx.stroke().
- Around line 151-164: onWheel and onScroll conflict because onScroll always
sets ampRef.current = 0.55, overwriting the wheel-computed amplitude; modify the
handlers so wheel input is preferred for a short window: either consolidate both
into a single helper (e.g., handleUserScroll(amplitude)) that sets ampRef, calls
startLoop and resets stopTimer, and have onWheel call it with the
velocity-derived amplitude while onScroll only calls it if no recent wheel event
occurred; alternatively set a flag/lastWheelTime inside onWheel (and clear it
after ~80ms) and make onScroll no-op when that flag/window is active; ensure you
still call startLoop and manage stopTimer/stopLoop in the shared helper to avoid
duplicate logic (references: onWheel, onScroll, ampRef, startLoop, stopTimer,
stopLoop).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 43ef376f-cc8e-4da0-8769-c142cd7dc164
📒 Files selected for processing (3)
src/app/[locale]/globals.csssrc/app/[locale]/page.tsxsrc/components/ui/BackgroundTile.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/[locale]/globals.css
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/ui/BackgroundTile.tsx`:
- Around line 9-12: BackgroundTileProps declares heightVh but the BackgroundTile
component never uses it; update the BackgroundTile component to accept heightVh
(default 50) and apply it to the tile container (e.g., via an inline style or
computed class) so the tile height is set to `${heightVh}vh` instead of relying
on h-full; reference the prop name heightVh and the interface
BackgroundTileProps when making the change and ensure the same fix is applied to
the other instance noted (lines ~195-206) so both components honor the heightVh
prop.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: bd357857-a322-433d-953e-c0542df3ac29
📒 Files selected for processing (1)
src/components/ui/BackgroundTile.tsx
src/components/ui/BackgroundTile.tsx
Outdated
| interface BackgroundTileProps { | ||
| /** Height of the tile in viewport height units. Defaults to 50. */ | ||
| heightVh?: number; | ||
| } |
There was a problem hiding this comment.
The heightVh prop is defined but never applied.
The interface documents heightVh as controlling tile height in viewport units (default 50), but the component never uses this value. The container relies on h-full from parent sizing instead.
🐛 Proposed fix to apply the height prop
return (
<div
style={{
background: "var(--tile-bg, `#1a1a1a`)",
border: "0.8px solid var(--tile-stroke, rgba(255,255,255,0.08))",
borderRadius: "24px",
- width: "100%",
+ height: `${heightVh}vh`,
overflow: "hidden",
position: "relative",
}}
- className="w-full h-full"
+ className="w-full"
>Also applies to: 195-206
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ui/BackgroundTile.tsx` around lines 9 - 12,
BackgroundTileProps declares heightVh but the BackgroundTile component never
uses it; update the BackgroundTile component to accept heightVh (default 50) and
apply it to the tile container (e.g., via an inline style or computed class) so
the tile height is set to `${heightVh}vh` instead of relying on h-full;
reference the prop name heightVh and the interface BackgroundTileProps when
making the change and ensure the same fix is applied to the other instance noted
(lines ~195-206) so both components honor the heightVh prop.
… to BackgrounTile line render
|
@M4dhav This PR is ready to be merged from my side. |
1 participant
Description
Adds a new BackgroundTile UI component, an animated wave canvas that reacts to scroll and wheel events, freezing in place when scrolling stops.
Fixes #291
Type of change
New file:
components/ui/BackgroundTile.tsxheightVhprop (defaults to50vh)--line-colorCSS variable, with light/dark mode support via global CSS tokensResizeObserveruseRefto prevent SSR hydration mismatchUpdated:
globals.cssAdded
--tile-bg,--tile-stroke,--line-colortoken to both light and dark mode in RGB format for better opacity control.How Has This Been Tested?
Checked logs and next for error. No errors have been found:
backgroundtile.mp4
Checklist:
Maintainer Checklist
Summary by CodeRabbit
New Features
Style