Waimia.

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

Rôle de page

Modèle de contenu

Contrat de slots

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ée
    sticky-scroll-storytelling--grid-auto
  • sticky-scroll-storytelling · mosaïque

    générée
    sticky-scroll-storytelling--mosaic
  • sticky-scroll-storytelling · masonry

    générée
    sticky-scroll-storytelling--masonry
  • sticky-scroll-storytelling · matrice 3x3

    générée
    sticky-scroll-storytelling--matrix-3x3
  • sticky-scroll-storytelling · matrice 4x4

    générée
    sticky-scroll-storytelling--matrix-4x4
  • sticky-scroll-storytelling · grille uniforme

    générée
    sticky-scroll-storytelling--grid-uniform
  • sticky-scroll-storytelling · vedette + split

    générée
    sticky-scroll-storytelling--featured-split
  • sticky-scroll-storytelling · défilement aperçu

    générée
    sticky-scroll-storytelling--peek-scroll
  • sticky-scroll-storytelling · masonry 3 colonnes

    générée
    sticky-scroll-storytelling--masonry-3
  • sticky-scroll-storytelling · paire pleine largeur

    générée
    sticky-scroll-storytelling--fullbleed-pair
  • sticky-scroll-storytelling · pellicule

    générée
    sticky-scroll-storytelling--filmstrip
  • sticky-scroll-storytelling · chevauchement

    générée
    sticky-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ée
    sticky-scroll-storytelling--grid-auto
    layout:grid-auto
    Ouvrir dans le builder
  • sticky-scroll-storytelling · mosaïque

    générée
    sticky-scroll-storytelling--mosaic
    layout:mosaic
    Ouvrir dans le builder
  • sticky-scroll-storytelling · masonry

    générée
    sticky-scroll-storytelling--masonry
    layout:masonry
    Ouvrir dans le builder
  • sticky-scroll-storytelling · matrice 3x3

    générée
    sticky-scroll-storytelling--matrix-3x3
    layout:matrix-3x3
    Ouvrir dans le builder
  • sticky-scroll-storytelling · matrice 4x4

    générée
    sticky-scroll-storytelling--matrix-4x4
    layout:matrix-4x4
    Ouvrir dans le builder
  • sticky-scroll-storytelling · grille uniforme

    générée
    sticky-scroll-storytelling--grid-uniform
    layout:grid-uniform
    Ouvrir dans le builder
  • sticky-scroll-storytelling · vedette + split

    générée
    sticky-scroll-storytelling--featured-split
    layout:featured-split
    Ouvrir dans le builder
  • sticky-scroll-storytelling · défilement aperçu

    générée
    sticky-scroll-storytelling--peek-scroll
    layout:peek-scroll
    Ouvrir dans le builder
  • sticky-scroll-storytelling · masonry 3 colonnes

    générée
    sticky-scroll-storytelling--masonry-3
    layout:masonry-3
    Ouvrir dans le builder
  • sticky-scroll-storytelling · paire pleine largeur

    générée
    sticky-scroll-storytelling--fullbleed-pair
    layout:fullbleed-pair
    Ouvrir dans le builder
  • sticky-scroll-storytelling · pellicule

    générée
    sticky-scroll-storytelling--filmstrip
    layout:filmstrip
    Ouvrir dans le builder
  • sticky-scroll-storytelling · chevauchement

    générée
    sticky-scroll-storytelling--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.
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).

scroll-interactive Feature Sections 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).

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.

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

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.
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.

timeline Timelines 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).

process-steps Process Sections 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.

process-steps Process Sections 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.

timeline Timelines ListeFrise chronologique2 colonnes +2 12 décl.
method-timeline stable

Timeline méthodologique pour expliquer les étapes d'un accompagnement ou d'un processus.

timeline Timelines 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"
    }
  ]
}

Pour un agent / MCP

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

/library/section/sticky-scroll-storytelling.json

Chemin du détail machine

/library/section/sticky-scroll-storytelling.json