Nuage d’icônes 3D

{%- comment -%} NAHNAH AI · Nuage d’icônes 3D (bibliothèque Sections & effets) : icônes au trait animées {%- endcomment -%}
<div class="nn-icones-nuage-3d" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-icone: {{ section.settings.couleur_icone }};">
  {%- if section.settings.titre != blank or section.settings.texte != blank -%}
    <div class="nn-icones-nuage-3d__entete">
      {%- if section.settings.titre != blank -%}<h2 class="nn-icones-nuage-3d__titre">{{ section.settings.titre }}</h2>{%- endif -%}
      {%- if section.settings.texte != blank -%}<p class="nn-icones-nuage-3d__intro">{{ section.settings.texte | escape }}</p>{%- endif -%}
    </div>
  {%- endif -%}
  <div class="nn-icones-nuage-3d__corps">
    {%- if section.settings.bouton != blank -%}
      <p class="nn-icones-nuage-3d__action"><a class="nn-icones-nuage-3d__bouton" href="{{ section.settings.lien | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a></p>
    {%- endif -%}
    <div class="nn-icones-nuage-3d__scene" aria-hidden="true" data-nn-vitesse="{{ section.settings.vitesse }}" style="--nn-taille: {{ section.settings.taille }}px;">
      <ul class="nn-icones-nuage-3d__sphere" role="list">
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2"/><circle cx="10" cy="20.5" r="1.3"/><circle cx="17" cy="20.5" r="1.3"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14l-1 12.2a1 1 0 0 1-1 .8H7a1 1 0 0 1-1-.8z"/><path d="M9 10.5V6a3 3 0 0 1 6 0v4.5"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H4a1 1 0 0 0-1 1v8l9 9 9-9z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="8" width="17" height="4" rx="1"/><path d="M5 12v7.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V12M12 8v12.5"/><path d="M12 8C10.5 5 7 4 6.5 6.2 6.1 8 9 8 12 8c3 0 5.9 0 5.5-1.8C17 4 13.5 5 12 8z"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5 4.6 13.2a4.6 4.6 0 0 1 6.5-6.5l.9.9.9-.9a4.6 4.6 0 0 1 6.5 6.5z"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.5h11v9h-11zM13.5 9.5h4l3 3.2v2.8h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="16.5" cy="17.5" r="1.8"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 20 7v10l-8 4-8-4V7z"/><path d="m4 7 8 4 8-4M12 11v10M8 5l8 4"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2"/><path d="M2.5 10h19M6 15h4"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="10" rx="2"/><path d="M8 10.5v-3a4 4 0 0 1 8 0v3"/><path d="M12 14.5v2"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v9a1.5 1.5 0 0 1-1.5 1.5H10l-4.5 4v-4A1.5 1.5 0 0 1 4 14.5z"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19.5C4.5 11 9.5 5 19.5 4.5 20 14 14.5 19.5 5 19.5z"/><path d="M5 19.5 13 11.5"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 2.5 5 13.5h6l-1.5 8 8.5-11h-6z"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h3l1.6-2.5h6.8L17 8h3a1 1 0 0 1 1 1v9.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13.5" r="3.5"/></svg></li>
        <li class="nn-icones-nuage-3d__point"><svg class="nn-icones-nuage-3d__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15v-3a8 8 0 0 1 16 0v3"/><rect x="3.5" y="14" width="4" height="6.5" rx="1.5"/><rect x="16.5" y="14" width="4" height="6.5" rx="1.5"/></svg></li>
      </ul>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Nuage d’icônes 3D",
  "tag": "section",
  "class": "nn-section-icones-nuage-3d",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Tout pour ta boutique"
    },
    {
      "type": "textarea",
      "id": "texte",
      "label": "Texte d’introduction",
      "default": "Livraison suivie, paiement sécurisé, cadeaux et nouveautés : un aperçu de ce qui t’attend."
    },
    {
      "type": "text",
      "id": "bouton",
      "label": "Texte du bouton (vide : aucun bouton)",
      "default": "Découvrir"
    },
    {
      "type": "url",
      "id": "lien",
      "label": "Lien du bouton"
    },
    {
      "type": "range",
      "id": "taille",
      "label": "Taille du nuage",
      "min": 220,
      "max": 420,
      "step": 20,
      "default": 320,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "vitesse",
      "label": "Vitesse de rotation",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 4
    },
    {
      "type": "paragraph",
      "content": "Les animations sont coupées automatiquement si le visiteur a demandé à réduire les animations."
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#0B1220"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#F2F5F9"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_icone",
      "label": "Icône",
      "default": "#2EE6A8"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    }
  ],
  "presets": [
    {
      "name": "Nuage d’icônes 3D"
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-icones-nuage-3d {
  padding: var(--nn-mh) 16px var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-icones-nuage-3d__entete { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.nn-icones-nuage-3d__titre { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; }
.nn-icones-nuage-3d__intro { margin: 0; opacity: 0.8; font-size: 16px; line-height: 1.5; }
.nn-icones-nuage-3d__corps { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.nn-icones-nuage-3d__action { order: 2; margin: 0; }
.nn-icones-nuage-3d__bouton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 999px;
  color: var(--nn-fond);
  background: var(--nn-accent);
  font-weight: 700;
  text-decoration: none;
}
.nn-icones-nuage-3d__bouton:focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 4px; }
.nn-icones-nuage-3d__scene {
  position: relative;
  width: min(100%, var(--nn-taille));
  aspect-ratio: 1;
  touch-action: pan-y;
}
.nn-icones-nuage-3d__scene::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nn-accent) 22%, transparent), transparent 70%);
}
.nn-icones-nuage-3d__sphere { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.nn-icones-nuage-3d__point {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--nn-icone);
  background: color-mix(in srgb, var(--nn-icone) 12%, var(--nn-fond));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nn-icone) 25%, transparent);
  will-change: transform, opacity;
}
.nn-icones-nuage-3d__svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) {
  .nn-icones-nuage-3d *, .nn-icones-nuage-3d *::before, .nn-icones-nuage-3d *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

{% javascript %}
(function () {
  // Sphère d'icônes : points répartis (spirale de Fibonacci), projetés en perspective à chaque image.
  // requestAnimationFrame seulement quand la scène est visible (IntersectionObserver) ; image fixe si le visiteur
  // réduit les animations ; la souris oriente la rotation, le toucher laisse la page défiler.
  var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  function brancher(scene) {
    if (scene.dataset.nnPret) return;
    scene.dataset.nnPret = "1";
    var points = scene.querySelectorAll(".nn-icones-nuage-3d__point");
    var total = points.length;
    if (!total) return;
    var base = (parseFloat(scene.getAttribute("data-nn-vitesse")) || 4) * 0.0012;
    var coords = [];
    for (var i = 0; i < total; i++) {
      var y = 1 - (i / (total - 1)) * 2;
      var r = Math.sqrt(1 - y * y);
      var a = i * Math.PI * (3 - Math.sqrt(5));
      coords.push([Math.cos(a) * r, y, Math.sin(a) * r]);
    }
    var ax = 0.35, ay = 0, vx = base * 0.4, vy = base, cible = [base * 0.4, base];
    var animation = null;
    function dessiner() {
      var rayon = scene.clientWidth / 2 - 26;
      var cx = Math.cos(ax), sx = Math.sin(ax), cy = Math.cos(ay), sy = Math.sin(ay);
      for (var i = 0; i < total; i++) {
        var p = coords[i];
        var x1 = p[0] * cy + p[2] * sy;
        var z1 = -p[0] * sy + p[2] * cy;
        var y2 = p[1] * cx - z1 * sx;
        var z2 = p[1] * sx + z1 * cx;
        var echelle = 0.55 + (z2 + 1) * 0.3;
        var s = points[i].style;
        s.transform = "translate3d(" + (x1 * rayon).toFixed(1) + "px," + (y2 * rayon).toFixed(1) + "px,0) scale(" + echelle.toFixed(3) + ")";
        s.opacity = (0.25 + (z2 + 1) * 0.375).toFixed(2);
        s.zIndex = String(Math.round((z2 + 1) * 50));
      }
    }
    function image() {
      vx += (cible[0] - vx) * 0.05;
      vy += (cible[1] - vy) * 0.05;
      ax += vx;
      ay += vy;
      dessiner();
      animation = requestAnimationFrame(image);
    }
    dessiner();
    if (reduit) return;
    scene.addEventListener("pointermove", function (e) {
      if (e.pointerType !== "mouse") return;
      var b = scene.getBoundingClientRect();
      var dx = (e.clientX - b.left) / b.width - 0.5;
      var dy = (e.clientY - b.top) / b.height - 0.5;
      cible = [-dy * base * 6, dx * base * 6];
    });
    scene.addEventListener("pointerleave", function () { cible = [base * 0.4, base]; });
    if (!("IntersectionObserver" in window)) { image(); return; }
    new IntersectionObserver(function (entrees) {
      if (entrees[0].isIntersecting) { if (!animation) animation = requestAnimationFrame(image); }
      else if (animation) { cancelAnimationFrame(animation); animation = null; }
    }).observe(scene);
  }
  function tout() { document.querySelectorAll(".nn-icones-nuage-3d__scene").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}

Les 16 icônes, une par une

• PanierCopier
• SacCopier
• ÉtiquetteCopier
• CadeauCopier
• CœurCopier
• ÉtoileCopier
• LivraisonCopier
• ColisCopier
• Carte bancaireCopier
• SécuritéCopier
• MessageCopier
• RechercheCopier
• NaturelCopier
• RapideCopier
• PhotoCopier
• AudioCopier