feat: add AntiGravityBackground component for enhanced visual effects…#117
feat: add AntiGravityBackground component for enhanced visual effects…#117prajwallshetty wants to merge 1 commit intoDeveloper-Kommunity-24:mainfrom
Conversation
✅ Deploy Preview for dk24 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR adds an interactive anti-gravity particle background effect to the landing page hero section, replacing the previously static background. The implementation uses HTML5 Canvas with a custom particle system that responds to mouse movements with a repulsion effect.
Changes:
- Added
AntiGravityBackground.tsxcomponent implementing a canvas-based particle system with mouse interaction - Integrated the new component into the hero section with proper z-index layering
- Added responsive container styling to accommodate the background effect
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/components/hero-section.tsx | Integrated AntiGravityBackground component into hero section with positioning styles |
| src/components/Antigravitybackground.tsx | New canvas-based particle system with mouse repulsion physics and connection rendering |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import Link from "next/link"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { siteConfig } from "@/config/site"; | ||
| import { AntiGravityBackground } from "@/components/Antigravitybackground"; |
There was a problem hiding this comment.
The filename "Antigravitybackground.tsx" doesn't follow the codebase's kebab-case naming convention for component files. All other component files in the codebase use kebab-case (e.g., hero-section.tsx, background-pattern.tsx, community-card.tsx). The file should be renamed to "anti-gravity-background.tsx" and the import statement updated accordingly.
| import { AntiGravityBackground } from "@/components/Antigravitybackground"; | |
| import { AntiGravityBackground } from "@/components/anti-gravity-background"; |
| function drawConnections() { | ||
| const particles = particlesRef.current; | ||
| for (let i = 0; i < particles.length; i++) { | ||
| for (let j = i + 1; j < particles.length; j++) { | ||
| const dx = particles[i].x - particles[j].x; | ||
| const dy = particles[i].y - particles[j].y; | ||
| const dist = Math.sqrt(dx * dx + dy * dy); | ||
| if (dist < 100) { | ||
| const alpha = (1 - dist / 100) * 0.18; | ||
| x2d.beginPath(); | ||
| x2d.moveTo(particles[i].x, particles[i].y); | ||
| x2d.lineTo(particles[j].x, particles[j].y); | ||
| x2d.strokeStyle = `rgba(34,197,94,${alpha})`; | ||
| x2d.lineWidth = 0.6; | ||
| x2d.stroke(); | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
The drawConnections function has O(n²) complexity, creating and drawing lines for all particle pairs within range. With 180 particles, this potentially draws up to 16,110 connections per frame. This could cause performance issues, especially on lower-end devices. Consider implementing spatial partitioning (e.g., a grid-based approach) to reduce the number of distance checks, or reduce the PARTICLE_COUNT constant if performance becomes an issue.
| window.addEventListener("mousemove", handleMouseMove); | ||
| window.addEventListener("mouseleave", handleMouseLeave); |
There was a problem hiding this comment.
The mouse event listeners are attached to the window object, which means the component will respond to mouse movements anywhere on the page, not just within the hero section. This could cause unnecessary animation updates when users interact with other parts of the page. Consider attaching the event listeners to the canvas element itself or checking if the mouse position is within the canvas bounds before updating the mouseRef.
There was a problem hiding this comment.
Hey @prajwallshetty, the current implementation of the antigravity like bg for the landing page has a few issues like the end is abrupt and also not well visible in the light mode. Can you please look into it. Also can you please create the ClientX PR seperately for the project addition and the tilt PR for the logo in the landing page? Thank you
PS: update the branch, create different branches for each task.
|
no response - invalid PR |
Add Anti-Gravity Particle Background to Hero Section
Summary
Replaces the static hero background with an interactive anti-gravity particle canvas effect scoped exclusively to the landing page hero section.
Changes
AntiGravityBackground.tsx— a canvas-based particle system with mouse repulsionno build issues @jtuluve
https://deploy-preview-117--dk24.netlify.app/