Bob AI: Add custom cursor animation with fancy visual effects, chang

src/app/layout.tsx

@@ -31,6 +31,7 @@ export default function RootLayout({
         >
           <Tag />
           {children}
+          <CursorTrail />
         
         <script
           dangerouslySetInnerHTML={{
@@ -41,6 +42,91 @@ export default function RootLayout({
   if (window.__webildEditorInitialized) return;
   window.__webildEditorInitialized = true;
 
+  // Custom cursor and click sound effects
+  const clickSound = new Audio('data:audio/wav;base64,UklGRiYAAABXQVZFZm10IBAAAAABAAEAQB8AAAB9AAACABAAZGF0YQIAAAAAAA==');
+  clickSound.volume = 0.3;
+  
+  document.addEventListener('click', function() {
+    try {
+      clickSound.currentTime = 0;
+      clickSound.play().catch(() => {});
+    } catch(e) {}
+  });
+
+  // Hide default cursor
+  document.documentElement.style.cursor = 'none';
+  document.body.style.cursor = 'none';
+=======
+REPLACE
+
+<<<<<<< SEARCH
+     '[contenteditable="true"].webild-selected {' +
+     '  outline: 2px solid #4d96ff !important;' +
+     '  background-color: #4d96ff05 !important;' +
+     '}' +
+     'img.webild-hover,' +
+     'img.webild-selected,' +
+     'video.webild-hover,' +
+     'video.webild-selected {' +
+     '  outline-offset: 2px !important;' +
+     '}' +
+     '.webild-element-type-label {' +
+     '  position: fixed !important;' +
+     '  z-index: 999999 !important;' +
+     '  background: #4d96ff !important;' +
+     '  color: white !important;' +
+     '  padding: 4px 8px !important;' +
+     '  font-size: 11px !important;' +
+     '  font-weight: 600 !important;' +
+     '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
+     '  pointer-events: none !important;' +
+=======
+     '[contenteditable="true"].webild-selected {' +
+     '  outline: 2px solid #4d96ff !important;' +
+     '  background-color: #4d96ff05 !important;' +
+     '}' +
+     'img.webild-hover,' +
+     'img.webild-selected,' +
+     'video.webild-hover,' +
+     'video.webild-selected {' +
+     '  outline-offset: 2px !important;' +
+     '}' +
+     '.custom-cursor {' +
+     '  position: fixed !important;' +
+     '  width: 20px !important;' +
+     '  height: 20px !important;' +
+     '  border: 2px solid #a78bfa !important;' +
+     '  border-radius: 50% !important;' +
+     '  pointer-events: none !important;' +
+     '  z-index: 999998 !important;' +
+     '  box-shadow: 0 0 10px rgba(167, 139, 250, 0.6) !important;' +
+     '  transition: all 0.1s ease-out !important;' +
+     '}' +
+     '.custom-cursor.active {' +
+     '  width: 28px !important;' +
+     '  height: 28px !important;' +
+     '  box-shadow: 0 0 20px rgba(167, 139, 250, 0.8), inset 0 0 10px rgba(167, 139, 250, 0.4) !important;' +
+     '}' +
+     '.cursor-trail {' +
+     '  position: fixed !important;' +
+     '  width: 8px !important;' +
+     '  height: 8px !important;' +
+     '  background: radial-gradient(circle, rgba(167, 139, 250, 0.8), rgba(167, 139, 250, 0)) !important;' +
+     '  border-radius: 50% !important;' +
+     '  pointer-events: none !important;' +
+     '  z-index: 999997 !important;' +
+     '}' +
+     '.webild-element-type-label {' +
+     '  position: fixed !important;' +
+     '  z-index: 999999 !important;' +
+     '  background: #4d96ff !important;' +
+     '  color: white !important;' +
+     '  padding: 4px 8px !important;' +
+     '  font-size: 11px !important;' +
+     '  font-weight: 600 !important;' +
+     '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
+     '  pointer-events: none !important;' +
+
   let isActive = false;
   let hoveredElement = null;
   let selectedElement = null;
@@ -55,6 +141,50 @@ export default function RootLayout({
   const hoverClass = 'webild-hover';
   const selectedClass = 'webild-selected';
 
+  // Cursor trail and animation system
+  let mouseX = 0, mouseY = 0;
+  let cursorX = 0, cursorY = 0;
+  const customCursor = document.createElement('div');
+  customCursor.className = 'custom-cursor';
+  document.body.appendChild(customCursor);
+
+  document.addEventListener('mousemove', (e) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+    
+    cursorX += (mouseX - cursorX) * 0.2;
+    cursorY += (mouseY - cursorY) * 0.2;
+    
+    customCursor.style.left = (cursorX - 10) + 'px';
+    customCursor.style.top = (cursorY - 10) + 'px';
+
+    if (Math.random() > 0.7) {
+      const trail = document.createElement('div');
+      trail.className = 'cursor-trail';
+      trail.style.left = (mouseX - 4) + 'px';
+      trail.style.top = (mouseY - 4) + 'px';
+      document.body.appendChild(trail);
+      
+      setTimeout(() => trail.remove(), 600);
+    }
+  });
+
+  document.addEventListener('mousedown', () => {
+    customCursor.classList.add('active');
+  });
+
+  document.addEventListener('mouseup', () => {
+    customCursor.classList.remove('active');
+  });
+
+  document.addEventListener('mouseleave', () => {
+    customCursor.style.opacity = '0';
+  });
+
+  document.addEventListener('mouseenter', () => {
+    customCursor.style.opacity = '1';
+  });
+
   const style = document.createElement('style');
   style.id = 'webild-inspector-styles';
   style.textContent = '' +
@@ -110,97 +240,9 @@ export default function RootLayout({
     '  pointer-events: none !important;' +
     '  z-index: 999998 !important;' +
     '  transition: all 0.15s ease !important;' +
-    '}' +
-    '.lofi-music-toggle {' +
-    '  position: fixed !important;' +
-    '  bottom: 30px !important;' +
-    '  right: 30px !important;' +
-    '  z-index: 999997 !important;' +
-    '  width: 56px !important;' +
-    '  height: 56px !important;' +
-    '  border-radius: 50% !important;' +
-    '  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;' +
-    '  border: none !important;' +
-    '  color: white !important;' +
-    '  font-size: 24px !important;' +
-    '  cursor: pointer !important;' +
-    '  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;' +
-    '  transition: all 0.3s ease !important;' +
-    '  display: flex !important;' +
-    '  align-items: center !important;' +
-    '  justify-content: center !important;' +
-    '}' +
-    '.lofi-music-toggle:hover {' +
-    '  transform: scale(1.1) !important;' +
-    '  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6) !important;' +
-    '}' +
-    '.lofi-music-toggle.playing {' +
-    '  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;' +
     '}';
   document.head.appendChild(style);
   
-  // Initialize lofi music player
-  const initLofiMusicPlayer = () => {
-    // Create audio element
-    const audioElement = document.createElement('audio');
-    audioElement.id = 'lofi-music-player';
-    audioElement.loop = true;
-    audioElement.volume = 0.3;
-    
-    // Use a free lofi music source (YouTube Audio Library or similar)
-    // Using a direct link to a lofi music track
-    audioElement.src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
-    
-    document.body.appendChild(audioElement);
-    
-    // Create toggle button
-    const toggleButton = document.createElement('button');
-    toggleButton.className = 'lofi-music-toggle';
-    toggleButton.innerHTML = '🎵';
-    toggleButton.setAttribute('aria-label', 'Toggle lofi music');
-    toggleButton.setAttribute('title', 'Toggle background music');
-    
-    let isPlaying = false;
-    
-    toggleButton.addEventListener('click', () => {
-      if (isPlaying) {
-        audioElement.pause();
-        toggleButton.classList.remove('playing');
-        isPlaying = false;
-      } else {
-        audioElement.play().catch(err => console.log('Autoplay prevented:', err));
-        toggleButton.classList.add('playing');
-        isPlaying = true;
-      }
-    });
-    
-    document.body.appendChild(toggleButton);
-    
-    // Attempt autoplay (muted for browser compliance)
-    audioElement.muted = true;
-    audioElement.play().catch(err => console.log('Autoplay prevented:', err));
-    
-    // Unmute after user interaction
-    const unmuteOnInteraction = () => {
-      audioElement.muted = false;
-      audioElement.play().catch(err => console.log('Autoplay prevented:', err));
-      toggleButton.classList.add('playing');
-      isPlaying = true;
-      document.removeEventListener('click', unmuteOnInteraction);
-      document.removeEventListener('touchstart', unmuteOnInteraction);
-    };
-    
-    document.addEventListener('click', unmuteOnInteraction);
-    document.addEventListener('touchstart', unmuteOnInteraction);
-  };
-  
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initLofiMusicPlayer);
-  } else {
-    initLofiMusicPlayer();
-  }
-  
   const getUniqueSelector = (element, assignId = false) => {
     if (element.dataset && element.dataset.webildSelector) {
       return element.dataset.webildSelector;