Narrative Sections
sticky-scroll-storytelling
stable Bibliothèque Contenu inline (instance)Expliquer une méthode
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.
Instances sur le site
Global 5 instances sur 5 pages
| Page | Position | Contenu | Variante |
|---|---|---|---|
| /services/agent-support-client | section 13 | Du cadrage à l'agent de support en production | paper |
| /services/agents-ia | section 9 | Du cadrage à l'agent en production | paper |
| /services/automatisation-n8n | section 13 | Comment on travaille votre n8n | paper |
| /services/automatisations | section 9 | Comment on travaille ensemble | paper |
| /services/donnees-reporting | section 9 | Comment on travaille ensemble | paper |
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
placement | Présentation | object | Non | · | · |
textSide | Contenu | enum | Non | · | left · right |
proportion | Présentation | enum | Non | · | balanced · text-led · media-led · media-wide |
mediaRatio | Présentation | enum | Non | · | 4-5 · 1-1 · 4-3 · 3-2 |
density | Présentation | enum | Non | · | compact · base · ample |
numbering | Contenu | enum | Non | · | serif · none |
frame | Contenu | enum | Non | · | expand-ink |
mediaMode | Contenu | enum | Non | · | sticky · inline |
mediaTreatment | Contenu | enum | Non | · | card · bleed |
railStyle | Contenu | enum | Non | · | plain · ledger |
kicker | Contenu | text | Non | fr / en | · |
h2 | Contenu | text | Oui | fr / en | · |
lede | Contenu | text | Non | fr / en | · |
steps | Contenu | array | Oui | · | 2..6 |
Déclinaisons · 12
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.
-
sticky-scroll-storytelling · grille auto
généréesticky-scroll-storytelling--grid-auto -
sticky-scroll-storytelling · mosaïque
généréesticky-scroll-storytelling--mosaic -
sticky-scroll-storytelling · masonry
généréesticky-scroll-storytelling--masonry -
sticky-scroll-storytelling · matrice 3x3
généréesticky-scroll-storytelling--matrix-3x3 -
sticky-scroll-storytelling · matrice 4x4
généréesticky-scroll-storytelling--matrix-4x4 -
sticky-scroll-storytelling · grille uniforme
généréesticky-scroll-storytelling--grid-uniform -
sticky-scroll-storytelling · vedette + split
généréesticky-scroll-storytelling--featured-split -
sticky-scroll-storytelling · défilement aperçu
généréesticky-scroll-storytelling--peek-scroll -
sticky-scroll-storytelling · masonry 3 colonnes
généréesticky-scroll-storytelling--masonry-3 -
sticky-scroll-storytelling · paire pleine largeur
généréesticky-scroll-storytelling--fullbleed-pair -
sticky-scroll-storytelling · pellicule
généréesticky-scroll-storytelling--filmstrip -
sticky-scroll-storytelling · chevauchement
généréesticky-scroll-storytelling--overlap
Comparer les déclinaisons · 12
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.
-
sticky-scroll-storytelling · grille auto
généréesticky-scroll-storytelling--grid-autolayout:grid-autoOuvrir dans le builder -
sticky-scroll-storytelling · mosaïque
généréesticky-scroll-storytelling--mosaiclayout:mosaicOuvrir dans le builder -
sticky-scroll-storytelling · masonry
généréesticky-scroll-storytelling--masonrylayout:masonryOuvrir dans le builder -
sticky-scroll-storytelling · matrice 3x3
généréesticky-scroll-storytelling--matrix-3x3layout:matrix-3x3Ouvrir dans le builder -
sticky-scroll-storytelling · matrice 4x4
généréesticky-scroll-storytelling--matrix-4x4layout:matrix-4x4Ouvrir dans le builder -
sticky-scroll-storytelling · grille uniforme
généréesticky-scroll-storytelling--grid-uniformlayout:grid-uniformOuvrir dans le builder -
sticky-scroll-storytelling · vedette + split
généréesticky-scroll-storytelling--featured-splitlayout:featured-splitOuvrir dans le builder -
sticky-scroll-storytelling · défilement aperçu
généréesticky-scroll-storytelling--peek-scrolllayout:peek-scrollOuvrir dans le builder -
sticky-scroll-storytelling · masonry 3 colonnes
généréesticky-scroll-storytelling--masonry-3layout:masonry-3Ouvrir dans le builder -
sticky-scroll-storytelling · paire pleine largeur
généréesticky-scroll-storytelling--fullbleed-pairlayout:fullbleed-pairOuvrir dans le builder -
sticky-scroll-storytelling · pellicule
généréesticky-scroll-storytelling--filmstriplayout:filmstripOuvrir dans le builder -
sticky-scroll-storytelling · chevauchement
généréesticky-scroll-storytelling--overlaplayout:overlapOuvrir dans le builder
Sections liées
Même famille
horizontal-showcase stable Panneaux a defilement horizontal smooth (scroll-snap) avec index numerote cliquable.
Défilement horizontalApparition au scrollDéfilement +6 16 décl.hover-reveal-list stable Liste editoriale qui revele l'image du projet au survol, dans un carre cadre (image qui suit le curseur ou centree).
Révélation au survolApparition au scrollSurvol +5 17 décl.media-bento stable Bento media asymetrique : tuiles image avec grand titre superpose et zoom au survol (layouts feature-2, quad, mosaic).
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.
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).
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.
Média collantFondu enchaînéApparition au scroll +6 17 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.
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.
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.
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.
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.
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.
Apparition au scrollDéfilementListe +1 17 décl.Similaires
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.
Cartes empiléesApparition au scrollDéfilement +6 16 décl.method-stepline stable Timeline de méthode horizontale sur fond clair : ligne hairline traversée de nœuds accent, chaque nœud surmonté d'un numéro mono, d'un titre serif et d'un sous-label mono. En-tête kicker à gauche, durée à droite. Reveal-stagger, empilage en colonne en mobile.
Apparition au scrollDéfilementFrise chronologique +2 19 décl.method-diagram-list stable Bloc methode : entete + diagramme de process (SVG de marque) + liste numerotee de phases (numero mono + titre + corps).
Apparition au scrollIllustration au traitListe +1 10 décl.process-steps stable « Comment ça marche » en étapes numérotées verticales : numéro, titre, description et meta par étape, connecteurs visuels entre paliers, fonds paper à ink.
Illustration au traitListeIcônes +3 14 décl.timeline-block stable Bloc chronologique pour raconter une progression, un historique ou une séquence d'événements.
ListeFrise chronologique2 colonnes +2 12 décl.method-timeline stable Timeline méthodologique pour expliquer les étapes d'un accompagnement ou d'un processus.
Apparition au scrollDéfilementFrise chronologique +2 19 décl.Code
Données de la section (à placer dans sections[])
{
"type": "sticky-scroll-storytelling",
"background": "paper",
"textSide": "left",
"proportion": "media-led",
"mediaRatio": "4-5",
"density": "base",
"numbering": "serif",
"kicker_fr": "Méthode · de bout en bout",
"kicker_en": "Method · end to end",
"h2_fr": "Comment un projet <i>prend forme</i>",
"h2_en": "How a project <i>takes shape</i>",
"lede_fr": "Quatre temps, du diagnostic à la mesure. Chaque étape s'ancre dans la précédente.",
"lede_en": "Four moments, from diagnosis to measurement. Each step builds on the last.",
"steps": [
{
"index_fr": "01",
"index_en": "01",
"eyebrow_fr": "Diagnostic",
"eyebrow_en": "Diagnosis",
"title_fr": "On cartographie le terrain",
"title_en": "We map the terrain",
"body_fr": "On part de vos processus réels, pas d'un idéal théorique. Entretiens, observation des flux, repérage des frictions qui coûtent du temps chaque semaine.",
"body_en": "We start from your real processes, not a theoretical ideal. Interviews, flow observation, spotting the frictions that cost time every week.",
"media_src": "/images/illustrations/ds/chess-paper.webp",
"media_alt_fr": "Diagnostic stratégique des processus",
"media_alt_en": "Strategic process diagnosis"
},
{
"index_fr": "02",
"index_en": "02",
"eyebrow_fr": "Conception",
"eyebrow_en": "Design",
"title_fr": "On dessine le dispositif",
"title_en": "We design the system",
"body_fr": "On choisit les bons agents, les bons modèles, les bonnes intégrations. Une architecture sobre, qui tient la charge et que votre équipe peut comprendre.",
"body_en": "We pick the right agents, the right models, the right integrations. A sober architecture that holds up and that your team can understand.",
"media_src": "/images/illustrations/ds/men-on-hand-paper.webp",
"media_alt_fr": "Conception du dispositif sur mesure",
"media_alt_en": "Tailored system design"
},
{
"index_fr": "03",
"index_en": "03",
"eyebrow_fr": "Déploiement",
"eyebrow_en": "Deployment",
"title_fr": "On met en route, sans casse",
"title_en": "We roll out, without breakage",
"body_fr": "Mise en production progressive, garde-fous en place, formation de vos équipes. On avance par paliers vérifiés plutôt que par un grand saut risqué.",
"body_en": "Progressive go-live, guardrails in place, training for your teams. We move in verified steps rather than one risky leap.",
"media_src": "/images/illustrations/ds/car-on-the-road-paper.webp",
"media_alt_fr": "Déploiement progressif en production",
"media_alt_en": "Progressive production rollout"
},
{
"index_fr": "04",
"index_en": "04",
"eyebrow_fr": "Mesure",
"eyebrow_en": "Measurement",
"title_fr": "On prouve la valeur créée",
"title_en": "We prove the value created",
"body_fr": "Temps gagné, qualité, coût par tâche. Des indicateurs partagés, revus ensemble, pour décider de la suite sur des faits plutôt que des impressions.",
"body_en": "Time saved, quality, cost per task. Shared indicators, reviewed together, to decide what comes next on facts rather than impressions.",
"media_src": "/images/illustrations/ds/money-money-paper.webp",
"media_alt_fr": "Mesure de la valeur et du retour sur investissement",
"media_alt_en": "Value and return on investment measurement",
"link_label_fr": "Voir un cas concret",
"link_label_en": "See a real case",
"link_href": "/cas-clients"
}
]
}/library/section/sticky-scroll-storytelling.json
Chemin du détail machine
/library/section/sticky-scroll-storytelling.json