Description
Add a futuristic neon green custom cursor effect to the landing page that aligns with CollabCE's dark-tech aesthetic.
Motivation
The landing page has a strong visual identity with its dark navy background and #4aed88 green accents. A custom cursor effect would enhance the premium, interactive feel of the page and create a more immersive first impression for new visitors.
Proposed Solution
Replace the default cursor on the landing page with a canvas-based custom cursor consisting of:
- A glowing green filled core that smoothly follows the mouse
- A single clean outer ring matching the site's accent color (
#4aed88)
- Full light/dark mode support — adapts colors and blend mode reactively via
MutationObserver
- Effect is scoped to the landing page only, does not affect the editor or join page
Visual Reference
The effect uses mixBlendMode: screen on dark backgrounds and multiply on light, ensuring it blends naturally without washing out in either theme.
Implementation Notes
- New component:
src/components/CursorAura.js , no external dependencies needed
- Minor change to
App.js to conditionally mount the component on / route only
cursor: none scoped to .landing-page in App.css
No breaking changes — fully isolated to the landing page.
Description
Add a futuristic neon green custom cursor effect to the landing page that aligns with CollabCE's dark-tech aesthetic.
Motivation
The landing page has a strong visual identity with its dark navy background and
#4aed88green accents. A custom cursor effect would enhance the premium, interactive feel of the page and create a more immersive first impression for new visitors.Proposed Solution
Replace the default cursor on the landing page with a canvas-based custom cursor consisting of:
#4aed88)MutationObserverVisual Reference
The effect uses
mixBlendMode: screenon dark backgrounds andmultiplyon light, ensuring it blends naturally without washing out in either theme.Implementation Notes
src/components/CursorAura.js, no external dependencies neededApp.jsto conditionally mount the component on/route onlycursor: nonescoped to.landing-pageinApp.cssNo breaking changes — fully isolated to the landing page.