Là où tout commence
Chaque chapitre tient dans un écran, et son image reste posée à côté du texte pendant qu’on le lit.
Au chapitre suivant, l’image change en fondu — c’est ce qui donne à la page son rythme de récit.
Starter T-IN · guide des composants
Les composants pleine page. Hero est montré ici en variante bandeau ; la version plein écran et la Balade se testent sur leurs pages réelles.
Hero photo. height='full' (100svh, page d'accueil — voir /) ou 'tall' (bandeau, ci-dessous). Slot nommé title pour contrôler les <br>, slot par défaut pour les CTA. À combiner avec heroHeader sur Base (header transparent).
Version plein écran avec header transparent : voir l'accueil
<Base title="…" description="…" heroHeader>
<Hero
image={{ src: '/images/hero-home.svg', alt: '…' }}
kicker="Bourgogne — France"
sub="Vigneron en Bourgogne depuis 1852"
>
<Fragment slot="title">Domaine des<br />Trois Pierres</Fragment>
<a class="btn btn-outline-light" href="/contact">Réserver</a>
<a class="link-line" href="/les-vins">Découvrir les vins</a>
</Hero>
</Base> En-tête de page interne : surtitre + H1 + chapô sur fond clair, bande photo optionnelle en dessous. Props : eyebrow, title, lead, image.
Neuf cuvées parcellaires, vendangées à la main et élevées en fût.
<PageHeader
eyebrow="La gamme"
title="Les vins du domaine"
lead="Neuf cuvées parcellaires, vendangées à la main."
image={{ src: '/images/split-2.svg', alt: '…' }}
/> L'accueil signature « un geste = un écran » (récolté d'antonin_lacour) : écrans photo plein écran en fondu, texte qui monte ligne à ligne, stepper vertical (fil, points, compteur) à droite. Pilote le scroll de la page entière : elle ne peut pas être incrustée ici. S'utilise avec heroHeader + noFooter sur Base.
<Base title="…" description="…" heroHeader noFooter>
<Balade
screens={[
{
id: 'ouverture', label: 'Ouverture',
image: { src: '/images/hero-home.svg', alt: '…' },
kicker: 'Meursault · Bourgogne',
title: 'Vignerons aux Trois Pierres', accent: 'depuis 1852.',
link: { href: '#terre', label: 'Commencer la balade' },
},
{ id: 'terre', label: 'La terre', … },
]}
/>
</Base> La photographie tient l'écran pendant que le texte défile à côté, et change de chapitre en chapitre. C'est le composant des pages qui racontent (histoire d'un domaine, d'une maison, d'un parcours) plutôt que de celles qui informent. Sans JavaScript, les chapitres s'empilent, chacun avec sa photo : rien n'est perdu. `reverse` place la colonne d'images à droite.
Chaque chapitre tient dans un écran, et son image reste posée à côté du texte pendant qu’on le lit.
Au chapitre suivant, l’image change en fondu — c’est ce qui donne à la page son rythme de récit.
Le texte n’a pas de longueur imposée : un chapitre court laisse simplement l’image respirer plus longtemps.
Sous 900 px, la colonne collante disparaît : chaque chapitre reprend sa photo dans le flux, ce qui est la bonne lecture sur un téléphone.
<Chapters
items={[
{
eyebrow: 'I · Le lieu',
title: 'Là où tout commence',
text: 'Un paragraphe.
Un deuxième, séparé par un retour à la ligne.',
image: { src: '/images/split-1.svg', alt: '…' },
focus: '50% 35%',
},
// …
]}
/> La liste qui méritait mieux qu'une liste (récoltée d'antonin_lacour) : un écran par entrée, la photographie en fond assombri qui se fond d'une entrée à l'autre, le repère de l'entrée en filigrane géant, le texte dans une carte translucide à droite, et un rail-sommaire collant. Pour des millésimes, des saisons, les trous d'un parcours, les éditions d'un festival. Fond et rail sont collants (pas fixes) : le composant s'incruste dans une page normale, pied de page compris. Sans JavaScript, la première photo reste affichée et le rail reste une liste d'ancres. Les photos non utiles ne sont pas chargées. Sous 900 px, le rail disparaît.
2022 — 2025 · Le livre de cave
Le gel d’avril, les canicules, les vendanges d’août. En descendant, on remonte le temps — l’année s’affiche derrière, le récit devant.
Descendre ↓
2025 1 / 4
Une vendange sans histoire, et des acidités qui ont tenu. Pour une fois, ce sont les décisions prises à la vigne qui ont fait la différence.
2024 2 / 4
Un printemps pluvieux, une pression sanitaire constante, et une récolte sauvée par le travail à la vigne.
2023 3 / 4
La plus grosse récolte depuis cinq ans, et le retour des blancs — pressés de nuit pour préserver la fraîcheur.
2022 4 / 4
Trois canicules, quarante millimètres de pluie — et pourtant des vins équilibrés.
<Chronique
kicker="2017 — 2025 · Le livre de cave"
title="Chaque année laisse"
accent="une trace"
lead="Le gel d’avril, les canicules, les vendanges d’août."
scrollHint="Descendre ↓"
heading="h2"
entries={[
{
key: '2025',
title: 'L’année sans accroc',
text: 'Une vendange sans accroc, et des acidités qui ont tenu.',
image: { src: '/images/gallery-1.svg', alt: '…' },
link: { href: '/millesimes/2025/', label: 'Lire le récit complet' },
},
// …
]}
/> Récolté d'antonin_lacour. Un rail photographique collé à gauche, des écrans de texte à droite : le rail ne bouge pas, c'est l'image qu'il porte qui change en fondu au fil de la lecture, avec sa légende et son rang (« 3 / 6 ») comme sur un tirage. Un écran est soit un chapitre (surtitre, titre, paragraphes, et au choix portraits, chiffres, chute), soit une citation (quote), soit un appel à l'action (link) — le type se déduit des champs, rien à déclarer. Le premier écran porte le H1 dans un corps plus grand : la page n'a pas besoin de bandeau de titre. `*entre astérisques*` passe en italique léger (lib/accent.ts). Sans JavaScript, la première photo reste affichée et les écrans se lisent à la suite ; sous 64rem, le rail cède la place à une bande 4/3 en tête de chaque écran.
© Studio Exemple — Les coteaux, en mars
1 / 5
© Studio Exemple — La taille, en février
2 / 5
© Studio Exemple — La cave, en octobre
3 / 5
© Studio Exemple — Le caveau, un samedi
4 / 5
© Studio Exemple — Le caveau, à la tombée du jour
5 / 5
Le domaine
Le domaine tient son nom des trois bornes de calcaire qui marquent le haut du coteau. Elles sont là depuis plus longtemps que la famille.
Ce qui suit se lit comme un reportage : à gauche la photographie, à droite ce qu’elle raconte.
Descendre ↓
I · La terre
Aucune parcelle ne dépasse deux hectares. C’est peu pratique à travailler, et c’est exactement ce qui fait la différence dans le verre.
On ne choisit pas son terroir : on apprend à l’écouter.
II · La maison
Camille a repris le domaine en 2011, après dix ans passés ailleurs. Marc, son père, n’est jamais vraiment parti de la cave.
On ne fait pas le vin : on l’accompagne, et on essaie de ne pas se mettre en travers.
Nous rendre visite
Du mardi au samedi, sur rendez-vous. La dégustation est gratuite et sans obligation d’achat.
L’abus d’alcool est dangereux pour la santé. À consommer avec modération.
<RecitColonne
heading="h1"
credit="© Studio Exemple"
scrollHint="Descendre ↓"
screens={[
{
image: { src: '/images/hero-home.svg', alt: '…' },
caption: 'Les coteaux, en mars',
eyebrow: 'Le domaine',
title: 'Sept générations, *trois pierres*',
text: 'Un paragraphe.
Un deuxième, séparé par un retour à la ligne.',
},
{
image: { src: '/images/split-1.svg', alt: '…' },
eyebrow: 'I · La terre',
title: 'Douze hectares, *quatorze parcelles*',
text: '…',
facts: [{ value: '12 ha', label: 'en propriété' }],
closing: 'La chute : la phrase qui reste.',
},
{ image: { src: '/images/split-2.svg', alt: '…' },
quote: 'On ne fait pas le vin : on l’accompagne.',
author: 'Camille Berthier', role: 'vigneronne' },
{ image: { src: '/images/fullbleed-1.svg', alt: '…' },
eyebrow: 'Nous rendre visite', title: 'Venir *au caveau*', text: '…',
link: { href: '/contact', label: 'Prendre rendez-vous' },
note: 'L’abus d’alcool est dangereux pour la santé.' },
]}
/> Présents sur toutes les pages via Base — vous les voyez sur ce guide. Entièrement pilotés par site.ts : marque (logo ou nom + brandSub), nav, CTA (null = masqué), coordonnées, réseaux, photo de footer, crédits. Header : prop transparent via heroHeader sur Base ; menu mobile plein écran ; barre CTA fixe sur mobile.
Redimensionner la fenêtre sous 1080px pour le menu mobile, sous 640px pour la barre CTA fixe.