Terminal Sections

product-reel

stable Bibliothèque Contenu inline (instance)

Présenter les capacités

Reel produit scroll-driven : étapes à gauche pilotées au scroll, console terminal à droite dont le contenu change par écran. Viewport sticky.

Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Uniquement en bibliothèque (aucune instance en page).

Aperçu

Comment l'utiliser

Intention

Présenter les capacités

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Pas de contrat de slots dérivé.

Déclinaisons · 6

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.

product-reel · grille de cartes
générée
product-reel--cards-grid
product-reel · liste de cartes
générée
product-reel--cards-list
product-reel · produit vedette
générée
product-reel--featured-product
product-reel · grille + filtres
générée
product-reel--grid-with-filters
product-reel · rangée carrousel
générée
product-reel--carousel-row
product-reel · détail 2 colonnes
générée
product-reel--two-col-detail

Comparer les déclinaisons · 6

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.

product-reel · grille de cartes
générée
product-reel--cards-grid
layout:cards-grid
Ouvrir dans le builder
product-reel · liste de cartes
générée
product-reel--cards-list
layout:cards-list
Ouvrir dans le builder
product-reel · produit vedette
générée
product-reel--featured-product
layout:featured-product
Ouvrir dans le builder
product-reel · grille + filtres
générée
product-reel--grid-with-filters
layout:grid-with-filters
Ouvrir dans le builder
product-reel · rangée carrousel
générée
product-reel--carousel-row
layout:carousel-row
Ouvrir dans le builder
product-reel · détail 2 colonnes
générée
product-reel--two-col-detail
layout:two-col-detail
Ouvrir dans le builder

Sections liées

Même famille

agentic-terminal stable

Mockup IDE agentique : fenêtre macOS, explorateur de fichiers, prompt utilisateur et bloc de code qui s'écrit en direct caractère par caractère, puis message de succès, footer stats et badges. Fond encre, accent terracotta.

terminal-shell Terminal Sections Bloc de codeBadge1 colonne 14 décl.

code-showcase stable

Vitrine de code annoté pour devtools/SaaS technique : copy explicative, bloc code mono avec numéros de ligne et commentaires bilingues alignés, label fichier et langage, tone encre ou paper.

terminal-shell Terminal Sections Défilement horizontalGlisser pour faire défilerIllustration au trait +7 18 décl.

terminal-mockup stable

Console terminal configurable (frame TerminalMockup) : copy optionnelle à gauche, lignes cmd/out/ok/comment et curseur clignotant, layout split ou pleine largeur.

terminal-shell Terminal Sections Apparition au scrollDéfilementBloc de code +3 17 décl.

Même catégorie

agentic-terminal stable

terminal-shell Terminal Sections Bloc de codeBadge1 colonne 14 décl.

code-showcase stable

Vitrine de code annoté pour devtools/SaaS technique : copy explicative, bloc code mono avec numéros de ligne et commentaires bilingues alignés, label fichier et langage, tone encre ou paper.

terminal-shell Terminal Sections Défilement horizontalGlisser pour faire défilerIllustration au trait +7 18 décl.

terminal-metrics-strip stable

Strip KPI télémétrie tout mono : 2 à 6 cellules clé/valeur bordées de hairlines, esthétique console (uptime, agents, release), fonds paper, paper-2 ou ink.

band Terminal Sections Chiffres clésBloc de code3 colonnes 16 décl.

terminal-mockup stable

Console terminal configurable (frame TerminalMockup) : copy optionnelle à gauche, lignes cmd/out/ok/comment et curseur clignotant, layout split ou pleine largeur.

terminal-shell Terminal Sections Apparition au scrollDéfilementBloc de code +3 17 décl.

Similaires

why-stalls stable

Section éditoriale "pourquoi X cale" : chapter label sticky à gauche + N FIG rows à droite avec row-lines.

card-grid Feature Sections DéfilementIllustration au trait2 colonnes +2 14 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.

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.

editorial-split-grid stable

Split éditorial deux colonnes pour lister blog et livres blancs, chacun avec cartes connexes et CTA.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 17 décl.

tech-capabilities-specs stable

Inventaire technique en table spec (capacité, description, statut) avec en-tête kicker et aside.

table Feature Sections Défilement horizontalApparition au scrollSurvol +6 9 décl.

feature-tabs stable

Section fonctionnalites en onglets cliquables : barre de tabs aria-compliant + panneau texte/visuel. Interactif vanilla JS, 0 dependance.

tabs Feature Sections Défilement horizontalSurvolClic (bascule) +9 7 décl.

Code

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

{
  "type": "product-reel"
}

Pour un agent / MCP

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

/library/section/product-reel.json

Chemin du détail machine

/library/section/product-reel.json