Aller au contenu

🌅 HérosGratuit · 0 NahnahPar NAHNAH AI

Héros Console nocturne

Fond nuit, coins de cadrage, légendes en petites capitales à chasse fixe et titre fin dont les mots sortent du flou un à un ; ligne de balayage et légende basse tapée en boucle.

Voir le codeModifier avec l’IA · 1 Nahnah

Aperçu en direct

Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.

Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).

Code à copier

Fichier complet sections/nahnah-hero-console.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Héros Console nocturne (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-hero-console" 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-bouton: {{ section.settings.couleur_bouton }}; --nn-texte-bouton: {{ section.settings.couleur_texte_bouton }};">
  <div class="nn-hero-console__cadre nn-hero-console--h-{{ section.settings.hauteur }}">
    {%- if section.settings.coins -%}
      <span class="nn-hero-console__coin nn-hero-console__coin--hg" aria-hidden="true"></span>
      <span class="nn-hero-console__coin nn-hero-console__coin--hd" aria-hidden="true"></span>
      <span class="nn-hero-console__coin nn-hero-console__coin--bg" aria-hidden="true"></span>
      <span class="nn-hero-console__coin nn-hero-console__coin--bd" aria-hidden="true"></span>
    {%- endif -%}
    {%- if section.settings.balayage -%}<span class="nn-hero-console__balayage" aria-hidden="true"></span>{%- endif -%}
    <p class="nn-hero-console__legende">{{ section.settings.legende_haut | escape }}</p>
    <div class="nn-hero-console__centre">
      {%- if section.settings.titre != blank -%}
        {%- assign mots = section.settings.titre | split: ' ' -%}
        <h2 class="nn-hero-console__titre">{%- for mot in mots -%}<span class="nn-hero-console__mot" style="--i: {{ forloop.index0 }};">{{ mot | escape }}</span>{%- unless forloop.last %} {% endunless -%}{%- endfor -%}</h2>
      {%- endif -%}
      {%- if section.settings.texte != blank -%}<p class="nn-hero-console__sous">{{ section.settings.texte | escape }}</p>{%- endif -%}
      {%- if section.settings.bouton_texte != blank -%}
      <div class="nn-hero-console__boutons">
        {%- if section.settings.bouton_texte != blank -%}
          <a class="nn-hero-console__bouton" href="{{ section.settings.bouton_lien | default: routes.all_products_collection_url }}">{{ section.settings.bouton_texte | escape }}</a>
        {%- endif -%}
      </div>
    {%- endif -%}
    </div>
    <p class="nn-hero-console__legende nn-hero-console__legende--bas">{%- if section.settings.legende_bas != blank -%}<span class="nn-hero-console__ligne"><span class="nn-hero-console__frappe">{{ section.settings.legende_bas | escape }}</span><span class="nn-hero-console__curseur" aria-hidden="true"></span></span>{%- endif -%}</p>
  </div>
</div>

{% schema %}
{
  "name": "Héros Console nocturne",
  "tag": "section",
  "class": "nn-section-hero-console",
  "settings": [
    {
      "type": "text",
      "id": "legende_haut",
      "label": "Légende du haut (vide : masquée)",
      "default": "Bienvenue — des essentiels choisis avec soin"
    },
    {
      "type": "text",
      "id": "titre",
      "label": "Titre (chaque mot apparaît tour à tour)",
      "default": "Des produits pensés pour durer, livrés sans détour."
    },
    {
      "type": "text",
      "id": "texte",
      "label": "Sous-titre souligné (vide : masqué)",
      "default": "Choisis, commande et reçois : tout se passe au même endroit."
    },
    {
      "type": "text",
      "id": "legende_bas",
      "label": "Légende du bas, tapée en boucle (vide : masquée)",
      "default": "Paiement sécurisé · Suivi de commande · Service client à l’écoute"
    },
    {
      "type": "checkbox",
      "id": "coins",
      "label": "Coins de cadrage",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "balayage",
      "label": "Ligne de balayage lumineuse",
      "default": true
    },
    {
      "type": "select",
      "id": "hauteur",
      "label": "Hauteur",
      "options": [
        {
          "value": "petite",
          "label": "Petite"
        },
        {
          "value": "moyenne",
          "label": "Moyenne"
        },
        {
          "value": "grande",
          "label": "Grande"
        },
        {
          "value": "ecran",
          "label": "Plein écran"
        }
      ],
      "default": "moyenne"
    },
    {
      "type": "header",
      "content": "Boutons"
    },
    {
      "type": "text",
      "id": "bouton_texte",
      "label": "Texte du bouton (vide : masqué)",
      "default": "Explorer la boutique"
    },
    {
      "type": "url",
      "id": "bouton_lien",
      "label": "Lien du bouton (vide : tous les produits)"
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#0A0A0B"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#EDEDED"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#9BE7C4"
    },
    {
      "type": "color",
      "id": "couleur_bouton",
      "label": "Bouton",
      "default": "#EDEDED"
    },
    {
      "type": "color",
      "id": "couleur_texte_bouton",
      "label": "Texte du bouton",
      "default": "#0A0A0B"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Héros Console nocturne"
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-hero-console {
  position: relative;
  display: block;
  padding: var(--nn-mh) 0 var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
  overflow-x: clip;
}
.nn-hero-console *, .nn-hero-console *::before, .nn-hero-console *::after { box-sizing: border-box; }
.nn-hero-console :where(a, button):focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
.nn-hero-console__surtitre { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nn-accent); }
.nn-hero-console__titre { margin: 0 0 16px; font-size: clamp(32px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; color: inherit; }
.nn-hero-console__texte { margin: 0 0 28px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; opacity: 0.88; max-width: 560px; }
.nn-hero-console__texte p { margin: 0 0 0.6em; }
.nn-hero-console__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.nn-hero-console__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 14px 28px;
  border-radius: var(--nn-arrondi-bouton, 8px);
  background: var(--nn-bouton);
  color: var(--nn-texte-bouton);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nn-hero-console__bouton--second { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) {
  .nn-hero-console__bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--nn-bouton) 35%, transparent); }
  .nn-hero-console__bouton--second:hover { box-shadow: inset 0 0 0 2px currentColor, 0 12px 26px rgba(0, 0, 0, 0.12); }
}
.nn-hero-console__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nn-hero-console__cadre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 6vw, 64px) 20px;
  text-align: center;
  background: radial-gradient(110% 80% at 50% 50%, color-mix(in srgb, var(--nn-texte) 6%, var(--nn-fond)), var(--nn-fond));
}
.nn-hero-console--h-petite { min-height: 380px; }
.nn-hero-console--h-moyenne { min-height: clamp(440px, 62vh, 620px); }
.nn-hero-console--h-grande { min-height: clamp(520px, 80vh, 780px); }
.nn-hero-console--h-ecran { min-height: 100vh; min-height: 100svh; }
.nn-hero-console__coin { position: absolute; width: 22px; height: 22px; border: 0 solid color-mix(in srgb, var(--nn-texte) 45%, transparent); pointer-events: none; animation: nn-hero-console-coin 1s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.nn-hero-console__coin--hg { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.nn-hero-console__coin--hd { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.nn-hero-console__coin--bg { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.nn-hero-console__coin--bd { right: 14px; bottom: 14px; border-right-width: 1px; border-bottom-width: 1px; }
@keyframes nn-hero-console-coin { from { opacity: 0; transform: scale(1.8); } }
.nn-hero-console__balayage { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 80%, color-mix(in srgb, var(--nn-accent) 9%, transparent) 97%, transparent 100%); animation: nn-hero-console-balaye 7s linear infinite; }
@keyframes nn-hero-console-balaye { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.nn-hero-console__legende { min-height: 1.6em; max-width: 100%; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.3em; line-height: 1.6; text-transform: uppercase; overflow-wrap: anywhere; opacity: 0.6; }
.nn-hero-console__frappe { display: inline; animation: nn-hero-console-frappe 9s steps(36) 1.4s infinite both; }
@keyframes nn-hero-console-frappe { 0% { clip-path: inset(0 100% 0 0); } 45%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.nn-hero-console__ligne { position: relative; }
/* Curseur : calque de la largeur de la ligne, translaté de 0 à 100 % au rythme de la découpe ; le pavé clignote */
.nn-hero-console__curseur { position: absolute; top: 0; bottom: 0; left: 0; display: none; width: 100%; pointer-events: none; animation: nn-hero-console-suit 9s steps(36) 1.4s infinite both; }
.nn-hero-console__curseur::before { content: ""; position: absolute; top: 0.15em; left: 4px; width: 0.6em; height: 1.1em; background: var(--nn-accent); animation: nn-hero-console-curseur 1s steps(1) infinite; }
@keyframes nn-hero-console-curseur { 50% { opacity: 0; } }
@keyframes nn-hero-console-suit { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(100%); } }
/* Ordinateur : légende sur une ligne, le curseur suit la découpe lettre à lettre (mêmes durée et crans) */
@media (min-width: 990px) {
  .nn-hero-console__ligne { display: inline-block; white-space: nowrap; }
  .nn-hero-console__curseur { display: block; }
}
.nn-hero-console__centre { width: 100%; max-width: 920px; }
.nn-hero-console__titre { margin: 0 auto 18px; font-size: clamp(30px, 5vw, 56px); font-weight: 300; line-height: 1.15; }
.nn-hero-console__mot { display: inline-block; animation: nn-hero-console-mot 0.9s calc(0.35s + var(--i) * 90ms) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes nn-hero-console-mot { from { opacity: 0; filter: blur(10px); transform: translateY(0.35em); } }
.nn-hero-console__sous { position: relative; display: inline-block; max-width: 100%; margin: 0 0 30px; padding-bottom: 12px; font-size: clamp(15px, 1.7vw, 19px); font-weight: 300; color: color-mix(in srgb, var(--nn-texte) 78%, transparent); }
.nn-hero-console__sous::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); animation: nn-hero-console-trait 1.4s 1.2s ease both; }
@keyframes nn-hero-console-trait { from { transform: scaleX(0); } }
.nn-hero-console__boutons { justify-content: center; }
.nn-hero-console__bouton { border-radius: 999px; font-weight: 500; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
  .nn-hero-console, .nn-hero-console *, .nn-hero-console *::before, .nn-hero-console *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}
Télécharger le fichier .liquid

Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.

Prompt à copier

À coller dans Claude ou ChatGPT avec le fichier téléchargé (ou le code copié) : l’assistant t’aide à l’installer et à l’adapter à ta marque.

Tu es un expert des thèmes Shopify Online Store 2.0. Aide-moi à installer puis à adapter à ma marque cet élément gratuit de la bibliothèque NAHNAH AI.

Élément : « Héros Console nocturne » (Héros)
Description : Fond nuit, coins de cadrage, légendes en petites capitales à chasse fixe et titre fin dont les mots sortent du flou un à un ; ligne de balayage et légende basse tapée en boucle.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/hero-console
Fichier : nahnah-hero-console.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-hero-console.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).

Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-hero-console ».
3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Ce que j’attends de toi :
- Guide-moi pas à pas dans Shopify : Boutique en ligne → Thèmes → « … » → Modifier le code → dossier sections → Ajouter une section, puis Personnaliser → Ajouter une section.
- Propose-moi d’adapter les couleurs, les textes et les liens à ma marque : demande d’abord mes couleurs (codes hexadécimaux), mon ton et mes liens.
- Garde le bloc {% schema %} et tous ses réglages (identifiants, types, presets) : je dois pouvoir tout régler ensuite dans l’éditeur de thème.
- Rends-moi le fichier complet modifié, prêt à coller, sans faux avis, fausse urgence ni chiffre inventé.

Si tu as le connecteur NAHNAH AI (MCP), récupère directement le code exact avec l’outil obtenir_code_element (id : hero-console).

Installer dans ma boutique

En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).

Chargement de tes boutiques…

Installer dans Shopify

  1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
  2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-hero-console ».
  3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
  4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Installer via le MCP

Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément hero-console de la bibliothèque NAHNAH AI et les étapes pour l’installer ». L’assistant récupère le code et les étapes (outil obtenir_code_element), gratuitement.

Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element).

Connecter le MCP

Dans la même catégorie