Implement global dynamic grid background#111
Conversation
|
@diksha78dev is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
Introduces a unified, fixed grid background component rendered globally via the root layout, and removes per-page ambient blurs/grid backgrounds from the landing, 404, documentation, and customize pages.
Changes:
- Adds
components/Background.tsxwith a fixed full-screen CSS grid pattern masked by a radial gradient. - Mounts
<Background />once inapp/layout.tsxso it persists across navigation. - Cleans up redundant blur/grid background blocks in
app/page.tsx,app/not-found.tsx,app/documentation/page.tsx, andapp/customize/page.tsx.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| components/Background.tsx | New global background component with grid pattern and radial mask. |
| app/layout.tsx | Mounts the new Background component in the root layout. |
| app/page.tsx | Removes the landing page's local ambient blur layers. |
| app/not-found.tsx | Removes the 404 page's local grid and blur backgrounds. |
| app/documentation/page.tsx | Removes documentation page's colored blur layers; switches main to transparent. |
| app/customize/page.tsx | Removes customize page's colored ambient blur layers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Kindly update the PR description as template. then ping me for review |
|
@JhaSourav07 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This background looks simple and i wanted that pink background animation to be changed |
diksha78dev
force-pushed
the
fix/issue-58
branch
4 times, most recently
from
851ade3 to
5c0a2cf
Compare
can you attach video of it? |
Sure i'll attach testing video |
Screen.Recording.2026-05-16.201236.mp4 |
|
As i said i don't want anything like grid , i want something creative |
|
Thanks for pointing it out. I was a bit confused initially, but I understood it now. I’ll make the required changes and update the PR soon |
|
@JhaSourav07 The PR description has been updated and the new brand‑particles background is live. Please review when you have a moment. |
|
CI is not passing |
|
@JhaSourav07 Resolved those failing checks of CI pipeline |
Screencast.From.2026-05-17.19-03-49.mp4Looks nice Few changes i would like to make before i merge this. |
| <main className="min-h-screen overflow-x-hidden bg-transparent text-white"> | ||
| <div className="fixed inset-0 pointer-events-none overflow-hidden"> | ||
| {/* Layered brand glows for depth */} | ||
| <div className="absolute left-[-10%] top-[-8%] h-[40rem] w-[40rem] rounded-full bg-emerald-500/15 blur-[120px]" /> | ||
| <div className="absolute right-[-5%] top-[10%] h-[35rem] w-[35rem] rounded-full bg-cyan-400/10 blur-[100px]" /> | ||
| <div className="absolute bottom-[-15%] left-[15%] h-[45rem] w-[45rem] rounded-full bg-indigo-500/10 blur-[140px]" /> | ||
| {/* Noise texture overlay for a premium surface feel */} | ||
| <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-[0.03] mix-blend-overlay" /> | ||
| </div> | ||
|
|
||
| <div className="relative mx-auto flex min-h-screen max-w-6xl flex-col px-6 pb-10 pt-6 md:px-8"> |
There was a problem hiding this comment.
what was the point of removing this lines?
JhaSourav07
added
ui / tailwind
|
Apologies for the confusion |
|
Thanks for contributing to CommitPulse 🚀 To make collaboration, PR reviews, issue coordination, and future contributions smoother, we highly recommend joining the CommitPulse Discord community: Inside the server you can: ⚡ discuss implementations with contributors 🛠️ get faster support for setup/issues 🔍 request PR reviews easily 🧠 get guidance and mentorship from assigned mentors 🚀 stay updated with active development discussions Most contributor coordination happens there, so joining will make the contribution experience much smoother 💜 |
JhaSourav07
added
gssoc:approved
Description
Fixes #58
Replaced the pink background animation with a brand‑particles effect that aligns with the visual identity of CommitPulse. The particles are rendered globally via
<BrandParticles />in the root layout, providing a premium, subtle animated background across the entire site.Key changes
components/BrandParticles.tsx(lightweight particle animation).app/layout.tsxto import and render<BrandParticles />instead of the oldCherryBlossomanimation.CherryBlossomcomponent.app/page.tsxapp/not-found.tsxapp/customize/page.tsxapp/documentation/page.tsx(now only the noise overlay remains).Pillar
Visual Preview
Screen.Recording.2026-05-17.183228.mp4
Checklist before requesting a review
CONTRIBUTING.mdfile.localhost:3000).npm run formatandnpm run lintlocally and resolved all errors.README.mdif I added a new theme or URL parameter. (N/A)