Feature Sections

hover-reveal-list

stable Bibliothèque Contenu inline (instance)

Montrer les réalisations

Liste editoriale qui revele l'image du projet au survol, dans un carre cadre (image qui suit le curseur ou centree).

Instances sur le site

Global 22 instances sur 22 pages

Page	Position	Contenu	Variante
/services/agent-support-client	`section 11`	L'agent de support ouvre sur le système	paper-3
/services/agents-ia	`section 8`	Autour de l'agent, le reste du système	paper-3
/services/applications-internes	`section 9`	L'outil interne est une brique du système	paper-3
/services/automatisation-n8n	`section 11`	n8n est une brique du système	paper-3
/services/automatisations	`section 8`	L'automatisation est une brique du système	paper-3
/services/cold-email-b2b	`section 10`	Le cold email s'assemble au reste du système commercial	paper-3
/services/consultant-ia-claude	`section 9`	Une fois tranché, le chantier bascule à l'exécution	paper-3
/services/crm-scoring-routing	`section 9`	Le CRM s'assemble au reste du système commercial	paper-3
/services/donnees-reporting	`section 8`	Le reporting est une brique du système	paper-3
/services/integration-claude	`section 10`	Cinq portes vers le même système	paper-3
/services/integration-crm	`section 9`	L'intégration s'assemble au reste du système commercial	paper-3
/services/maintenance-growth	`section 9`	La maintenance est une brique du dispositif	paper-3
/services/mvp-saas	`section 9`	Le MVP SaaS est une brique du système	paper-3
/services/prospection-automatisee	`section 10`	La prospection s'assemble au reste du système commercial	paper-3
/services/relance-devis	`section 9`	La relance de devis s'assemble au reste du système commercial	paper-3
/services/sequences-de-suivi	`section 9`	Le suivi s'assemble au reste du système commercial	paper-3
/services/site-web-ia	`section 9`	Quatre déclinaisons, une même base	paper-3
/services/sur-mesure-headless	`section 9`	Sur mesure, ou une autre base	paper-3
/services/systeme-commercial	`section 9`	Trois leviers, une même base	paper-3
/services/systemes-operationnels-ia	`section 4`	Six modules, une même base	paper-3
/services/webflow	`section 9`	Webflow, ou une autre base	paper-3
/services/wordpress	`section 9`	WordPress, ou une autre base	paper-3

Aperçu

Comment l'utiliser

Intention

Montrer les réalisations

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`kicker`	Contenu	`text`	Non	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`lede`	Contenu	`text`	Non	fr / en	·
`reveal_mode`	Présentation	`enum`	Non	·	cursor · fixed
`items`	Contenu	`array`	Oui	·	2..10

Déclinaisons · 17

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 5 curées, 12 générées.

Liste révélation · papier · image suit le curseur
curée
hover-reveal-list--paper-cursor
Liste révélation · papier · image fixe
curée
hover-reveal-list--paper-fixed
Liste révélation · papier 2 · image fixe
curée
hover-reveal-list--paper-2-fixed
Liste révélation · encre · image suit le curseur
curée
hover-reveal-list--ink-cursor
Liste révélation · encre · image fixe
curée
hover-reveal-list--ink-fixed
hover-reveal-list · grille auto
générée
hover-reveal-list--grid-auto
hover-reveal-list · mosaïque
générée
hover-reveal-list--mosaic
hover-reveal-list · masonry
générée
hover-reveal-list--masonry
hover-reveal-list · matrice 3x3
générée
hover-reveal-list--matrix-3x3
hover-reveal-list · matrice 4x4
générée
hover-reveal-list--matrix-4x4
hover-reveal-list · grille uniforme
générée
hover-reveal-list--grid-uniform
hover-reveal-list · vedette + split
générée
hover-reveal-list--featured-split
hover-reveal-list · défilement aperçu
générée
hover-reveal-list--peek-scroll
hover-reveal-list · masonry 3 colonnes
générée
hover-reveal-list--masonry-3
hover-reveal-list · paire pleine largeur
générée
hover-reveal-list--fullbleed-pair
hover-reveal-list · pellicule
générée
hover-reveal-list--filmstrip
hover-reveal-list · chevauchement
générée
hover-reveal-list--overlap

Comparer les déclinaisons · 17

Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.

Liste révélation · papier · image suit le curseur
curée
hover-reveal-list--paper-cursor
background:paper
Ouvrir dans le builder
Liste révélation · papier · image fixe
curée
hover-reveal-list--paper-fixed
background:paperreveal_mode:fixed
Ouvrir dans le builder
Liste révélation · papier 2 · image fixe
curée
hover-reveal-list--paper-2-fixed
background:paper-2reveal_mode:fixed
Ouvrir dans le builder
Liste révélation · encre · image suit le curseur
curée
hover-reveal-list--ink-cursor
background:ink
Ouvrir dans le builder
Liste révélation · encre · image fixe
curée
hover-reveal-list--ink-fixed
background:inkreveal_mode:fixed
Ouvrir dans le builder
hover-reveal-list · grille auto
générée
hover-reveal-list--grid-auto
layout:grid-auto
Ouvrir dans le builder
hover-reveal-list · mosaïque
générée
hover-reveal-list--mosaic
layout:mosaic
Ouvrir dans le builder
hover-reveal-list · masonry
générée
hover-reveal-list--masonry
layout:masonry
Ouvrir dans le builder
hover-reveal-list · matrice 3x3
générée
hover-reveal-list--matrix-3x3
layout:matrix-3x3
Ouvrir dans le builder
hover-reveal-list · matrice 4x4
générée
hover-reveal-list--matrix-4x4
layout:matrix-4x4
Ouvrir dans le builder
hover-reveal-list · grille uniforme
générée
hover-reveal-list--grid-uniform
layout:grid-uniform
Ouvrir dans le builder
hover-reveal-list · vedette + split
générée
hover-reveal-list--featured-split
layout:featured-split
Ouvrir dans le builder
hover-reveal-list · défilement aperçu
générée
hover-reveal-list--peek-scroll
layout:peek-scroll
Ouvrir dans le builder
hover-reveal-list · masonry 3 colonnes
générée
hover-reveal-list--masonry-3
layout:masonry-3
Ouvrir dans le builder
hover-reveal-list · paire pleine largeur
générée
hover-reveal-list--fullbleed-pair
layout:fullbleed-pair
Ouvrir dans le builder
hover-reveal-list · pellicule
générée
hover-reveal-list--filmstrip
layout:filmstrip
Ouvrir dans le builder
hover-reveal-list · chevauchement
générée
hover-reveal-list--overlap
layout:overlap
Ouvrir dans le builder

Sections liées

Même famille

horizontal-showcase stable

Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.

scroll-interactive Feature Sections Défilement horizontalApparition au scrollDéfilement +6 16 décl.

media-bento stable

Bento media asymetrique : tuiles image avec grand titre superpose et zoom au survol (layouts feature-2, quad, mosaic).

scroll-interactive Feature Sections Zoom au survolApparition au scrollSurvol +4 24 décl.

media-swap-band stable

Bande 2 ou 3 colonnes dont les images changent en fondu (auto ou au survol), avec CTA.

scroll-interactive Feature Sections Fondu enchaînéRotation automatiqueApparition au scroll +7 17 décl.

photo-cluster stable

Composition editoriale : photo lead + grappe de photos decalees (layouts lead-cluster, scatter, duo).

scroll-interactive Feature Sections Apparition au scrollDéfilementPlusieurs images +1 17 décl.

scroll-gallery stable

Liste sticky a gauche, cadre media a droite dont l'image change en fondu au scroll. Ideal pour presenter des domaines d'expertise avec un visuel par item.

scroll-interactive Feature Sections Média collantFondu enchaînéApparition au scroll +6 17 décl.

stack-cards stable

Cartes numerotees qui se superposent en s'empilant au scroll (effet stack sticky, CSS pur). Ideal pour une methode en plusieurs temps.

scroll-interactive Feature Sections Cartes empiléesApparition au scrollDéfilement +6 16 décl.

Même catégorie

architecture-diagram stable

Diagramme d'architecture signature : N canaux d'entrée vers un système central et M sorties, avec boucle d'amélioration continue.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +1 23 décl.

bento-grid stable

Mosaique bento asymetrique de 5 cellules (1 grande 2x2 + 4 petites) pour valoriser les capacites cles avec une mise en page moderne.

bento Feature Sections IcônesCartesListe +1 26 décl.

challenges-grid stable

Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.

card-grid Feature Sections SurvolIllustration au traitIcônes +4 16 décl.

coming-soon-pills stable

Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.

list Feature Sections ListeBadge1 colonne 16 décl.

commitments-grid stable

Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.

decision-list stable

Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.

list Feature Sections Apparition au scrollDéfilementListe +1 17 décl.

Similaires

media-block stable

Bloc média pour intégrer une image, une vidéo ou un contenu embarqué dans une page marketing.

gallery Gallery Sections Plusieurs imagesVidéo1 colonne 16 décl.

sticky-scroll-storytelling stable

Storytelling au scroll : rail de texte sticky dont l'etape active passe en accent, colonne media sticky dont l'image change en fondu. Mobile = stepper empile.

scroll-interactive Feature Sections Média collantApparition au scrollFondu enchaîné +7 12 décl.

gallery-masonry stable

Galerie editoriale en colonnes CSS (masonry naturel) avec legende au hover par overlay. Hauteurs variees, responsive 3 colonnes -> 2 -> 1.

gallery Gallery Sections Zoom au survolApparition au scrollSurvol +3 16 décl.

site-showcase stable

Vitrine du site livre : captures reelles dans des cadres navigateur, capture pleine page qui defile au survol, lien nofollow vers le site en production.

gallery Gallery Sections Apparition au scrollZoom au survolSurvol +4 16 décl.

guarantee-block stable

Bloc garantie pour expliciter les engagements, réduire le risque perçu et rassurer.

band Feature Sections Liste2 colonnesMédia à droite +1 17 décl.

comparison-duo stable

Deux cartes cote a cote (Sans / Avec) pour mettre en evidence le contraste avant/apres ou nous-vs-eux, avec items a puces et glyphes differencies.

duo Comparison Sections Apparition au scrollDéfilementListe +3 17 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "hover-reveal-list",
  "kicker_fr": "Réalisations · sélection",
  "kicker_en": "Work · selection",
  "h2_fr": "Des systèmes qui <i>tournent</i> en production",
  "h2_en": "Systems that <i>run</i> in production",
  "lede_fr": "Survolez pour voir le projet. Chaque ligne est un système livré, mesuré et transféré.",
  "lede_en": "Hover to preview the project. Each line is a system delivered, measured and handed over.",
  "reveal_mode": "cursor",
  "items": [
    {
      "label_fr": "Plateau",
      "label_en": "Plateau",
      "meta_fr": "Restauration · acquisition",
      "meta_en": "Hospitality · acquisition",
      "media_src": "/images/cas/cas-plateau.webp",
      "media_alt_fr": "Projet Plateau",
      "media_alt_en": "Plateau project",
      "link_href": "/cas-clients"
    },
    {
      "label_fr": "Halcyon",
      "label_en": "Halcyon",
      "meta_fr": "Services · productivité",
      "meta_en": "Services · productivity",
      "media_src": "/images/cas/cas-halcyon.webp",
      "media_alt_fr": "Projet Halcyon",
      "media_alt_en": "Halcyon project",
      "link_href": "/cas-clients"
    },
    {
      "label_fr": "Northbound",
      "label_en": "Northbound",
      "meta_fr": "Industrie · pilotage",
      "meta_en": "Industry · steering",
      "media_src": "/images/cas/cas-northbound.webp",
      "media_alt_fr": "Projet Northbound",
      "media_alt_en": "Northbound project",
      "link_href": "/cas-clients"
    },
    {
      "label_fr": "Caserne",
      "label_en": "Caserne",
      "meta_fr": "Public · support",
      "meta_en": "Public · support",
      "media_src": "/images/cas/cas-caserne.webp",
      "media_alt_fr": "Projet Caserne",
      "media_alt_en": "Caserne project",
      "link_href": "/cas-clients"
    }
  ]
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/hover-reveal-list.json

Chemin du détail machine

/library/section/hover-reveal-list.json