Interactive Dynamic Shadows Script

Try this...

/* -----------------------------------------------------------
 * Ombre dynamique plein-écran + facteur d'accentuation
 * Version Ciblée sur l'ID : 5ZAZJ8sOw9l
 * --------------------------------------------------------- */
(function () {
  /* Réglages */
  const MAX_OFFSET = 18;   // décalage max. de base (px)
  const MIN_BLUR   = 1;    // flou mini (px)
  const MAX_BLUR   = 8;    // flou maxi (px)
  const OPACITY    = 0.35; // opacité
  const INTENSITY  = 1.6;  // facteur d'accentuation (1 = normal)

  /* --- MODIFICATION ICI : CIBLAGE PAR ID --- */
  const targetID = '5ZAZJ8sOw9l'; 
  
  // On récupère l'élément du DOM qui correspond à cet ID Storyline
  const rectangle1 = document.querySelector(`[data-model-id="${targetID}"]`);

  // Sécurité : si l'objet n'est pas sur la diapo, on arrête le script
  if (!rectangle1) return;

  // On place l'élément dans un tableau pour garder la logique du script original
  // (au cas où tu voudrais ajouter d'autres IDs plus tard)
  const elements = [rectangle1];


  /* Fonction pour appliquer l'ombre à un élément spécifique */
  function applyShadowToElement(element, clientX, clientY) {
    const rect = element.getBoundingClientRect();
    const cx   = rect.left + rect.width  / 2;
    const cy   = rect.top  + rect.height / 2;

    /* Normalisés sur toute la largeur / hauteur de la fenêtre */
    const dxNorm = Math.max(-1, Math.min(1, (clientX - cx) / (window.innerWidth  / 2)));
    const dyNorm = Math.max(-1, Math.min(1, (clientY - cy) / (window.innerHeight / 2)));

    /* Décalage opposé au curseur, amplifié par INTENSITY */
    const offsetX = -dxNorm * MAX_OFFSET * INTENSITY;
    const offsetY = -dyNorm * MAX_OFFSET * INTENSITY;

    /* Flou : on amplifie la partie variable (MAX_BLUR-MIN_BLUR) */
    const distance = Math.min(1, Math.hypot(dxNorm, dyNorm));
    const blur     = MIN_BLUR + distance * (MAX_BLUR - MIN_BLUR) * INTENSITY;

    // Application du style CSS
    element.style.filter = `drop-shadow(${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blur.toFixed(1)}px rgba(0,0,0,${OPACITY}))`;
  }

  /* Fonction pour appliquer l'ombre à tous les éléments de la liste */
  function applyGlobalShadow(clientX, clientY) {
    elements.forEach(element => {
      applyShadowToElement(element, clientX, clientY);
    });
  }

  /* Affichage immédiat de l'ombre par défaut (simulation curseur en haut à gauche) */
  elements.forEach(element => {
    const rect = element.getBoundingClientRect();
    const btnCenterX = rect.left + rect.width / 2;
    const btnCenterY = rect.top + rect.height / 2;
    
    const offsetCursorX = btnCenterX - 50; 
    const offsetCursorY = btnCenterY - 50;
    
    applyShadowToElement(element, offsetCursorX, offsetCursorY);
  });

  /* Mise à jour lors du mouvement de la souris */
  document.addEventListener('mousemove', (e) => {
    applyGlobalShadow(e.clientX, e.clientY);
  });

  /* Capture initiale */
  document.addEventListener('mouseenter', (e) => {
    applyGlobalShadow(e.clientX, e.clientY);
  });

  /* Réinitialisation lors de la sortie de la fenêtre */
  window.addEventListener('mouseleave', () => {
    applyGlobalShadow(window.innerWidth / 2, window.innerHeight / 2);
  });

})();