bug fix: z-index issue

components/website/hero-sec.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable @next/next/no-html-link-for-pages */
 'use client';
-import { ArrowRight, ChevronsRight, Component, MoveRight } from 'lucide-react';
+import { ArrowRight, ChevronsRight, Component, Divide, MoveRight } from 'lucide-react';
 import { Button } from '@/components/website/ui/button';
 import React, { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
@@ -90,29 +90,27 @@ function HeroSec() {
     {
       title: 'Bubble Cursor',
       link: '/components/bubble-cursor',
-      component: <BubbleCursor />,
+      component: <BubbleCursor zIndex={1} />,
     },
     {
       title: 'Character Cursor',
       link: '/components/character-cursor',
-      component: <CharacterCursor />,
+      component: <CharacterCursor zIndex={1} />,
     },
     {
       title: 'Snowflake Cursor',
       link: '/components/character-cursor',
-      component: <SnowflakeCursor />,
+      component: <SnowflakeCursor zIndex={1} />,
     },
 
     {
       title: 'Rainbow Cursor',
       link: '/components/rainbow-cursor',
-
-      component: <RainbowCursor />,
+      component: <RainbowCursor zIndex={1} />,
     },
     {
       title: 'Follow Cursor',
       link: '/components/follow-cursor',
-
       component: <FollowCursor />,
     },
     {
@@ -123,7 +121,7 @@ function HeroSec() {
     {
       title: 'Springy Cursor',
       link: '/components/springy-cursor',
-      component: <SpringyCursor />,
+      component: <SpringyCursor zIndex={1} />,
     },
   ];
   return (

registry/components/cursor/common/bubble-cursor.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react';
 
 interface BubbleCursorProps {
   wrapperElement?: HTMLElement;
+  zIndex?: number;
 }
 
 class Particle {
@@ -49,7 +50,7 @@ class Particle {
     context.closePath();
   }
 }
-const BubbleCursor: React.FC<BubbleCursorProps> = ({ wrapperElement }) => {
+const BubbleCursor: React.FC<BubbleCursorProps> = ({ wrapperElement, zIndex }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const particlesRef = useRef<Particle[]>([]);
   const cursorRef = useRef({ x: 0, y: 0 });
@@ -81,6 +82,7 @@ const BubbleCursor: React.FC<BubbleCursorProps> = ({ wrapperElement }) => {
       canvas.style.top = '0px';
       canvas.style.left = '0px';
       canvas.style.pointerEvents = 'none';
+      canvas.style.zIndex = zIndex ? zIndex.toString() : '';
 
       if (wrapperElement) {
         canvas.style.position = 'absolute';

registry/components/cursor/common/character-cursor.tsx

@@ -17,6 +17,7 @@ interface CharacterCursorProps {
   characters?: string[];
   colors?: string[];
   cursorOffset?: { x: number; y: number };
+  zIndex?: number;
   font?: string;
   characterLifeSpanFunction?: () => number;
   initialCharacterVelocityFunction?: () => { x: number; y: number };
@@ -50,6 +51,7 @@ const CharacterCursor: React.FC<CharacterCursorProps> = ({
     Math.max(((lifeSpan - age) / lifeSpan) * 2, 0),
   characterNewRotationDegreesFunction = (age, lifeSpan) => (lifeSpan - age) / 5,
   wrapperElement,
+  zIndex,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const particlesRef = useRef<Particle[]>([]);
@@ -146,6 +148,7 @@ const CharacterCursor: React.FC<CharacterCursorProps> = ({
       canvas.style.top = '0px';
       canvas.style.left = '0px';
       canvas.style.pointerEvents = 'none';
+      canvas.style.zIndex = zIndex ? zIndex.toString() : '';
 
       if (wrapperElement) {
         canvas.style.position = 'absolute';

registry/components/cursor/common/rainbow-cursor.tsx

@@ -14,6 +14,7 @@ interface RainbowCursorProps {
   pulseSpeed?: number;
   pulseMin?: number;
   pulseMax?: number;
+  zIndex?: number;
 }
 
 const RainbowCursor: React.FC<RainbowCursorProps> = ({
@@ -27,6 +28,7 @@ const RainbowCursor: React.FC<RainbowCursorProps> = ({
   pulseSpeed = 0.01,
   pulseMin = 0.8,
   pulseMax = 1.2,
+  zIndex
 }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const contextRef = useRef<CanvasRenderingContext2D | null>(null);
@@ -99,6 +101,7 @@ const RainbowCursor: React.FC<RainbowCursorProps> = ({
     canvas.style.left = '0px';
     canvas.style.pointerEvents = 'none';
     canvas.style.position = hasWrapperEl ? 'absolute' : 'fixed';
+    canvas.style.zIndex = zIndex ? zIndex.toString() : '';
 
     if (hasWrapperEl) {
       element?.appendChild(canvas);

registry/components/cursor/common/snowflake-cursor.tsx

@@ -4,9 +4,10 @@ import React, { useEffect, useRef } from 'react';
 
 interface SnowflakeCursorOptions {
   element?: HTMLElement;
+  zIndex?: number;
 }
 
-const SnowflakeCursor: React.FC<SnowflakeCursorOptions> = ({ element }) => {
+const SnowflakeCursor: React.FC<SnowflakeCursorOptions> = ({ element, zIndex }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const particles = useRef<any[]>([]);
   const canvImages = useRef<HTMLCanvasElement[]>([]);
@@ -32,6 +33,7 @@ const SnowflakeCursor: React.FC<SnowflakeCursorOptions> = ({ element }) => {
     canvas.style.top = '0';
     canvas.style.left = '0';
     canvas.style.pointerEvents = 'none';
+    canvas.style.zIndex = zIndex ? zIndex.toString() : '';
 
     targetElement.appendChild(canvas);
     canvasRef.current = canvas;

registry/components/cursor/common/springy-cursor.tsx

@@ -5,11 +5,13 @@ import React, { useEffect, useRef } from 'react';
 interface SpringyCursorProps {
   emoji?: string;
   wrapperElement?: HTMLElement;
+  zIndex?: number;
 }
 
 const SpringyCursor: React.FC<SpringyCursorProps> = ({
   emoji = '⚽',
   wrapperElement,
+  zIndex,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const particlesRef = useRef<any[]>([]);
@@ -52,6 +54,7 @@ const SpringyCursor: React.FC<SpringyCursorProps> = ({
       canvas.style.top = '0px';
       canvas.style.left = '0px';
       canvas.style.pointerEvents = 'none';
+      canvas.style.zIndex = zIndex ? zIndex.toString() : '';
 
       if (wrapperElement) {
         canvas.style.position = 'absolute';