Héros

De grandes cartes arrondies en retrait des bords : un héros photo pour les pages intérieures, un héros vidéo pour l'accueil.

Héros de page

L'en-tête des pages intérieures. Il laisse la place à l'en-tête flottant en haut, et son titre prend l'accent sur ses derniers mots.

Une page intérieure, en retrait des bords

Photo de fond assombrie, titre fin dont les derniers mots prennent l'accent.

Mis à jour le 24 octobre 2026

TSDemo.tsx

<PageHero
  title="Une page intérieure, en retrait des bords"
  description="Photo de fond assombrie, titre fin dont les derniers mots prennent l'accent."
  meta="Mis à jour le 24 octobre 2026"
  image="/media/page.webp"
/>

Sans photo, un halo discret

Le fond par défaut quand aucune image n'est fournie.

TSDemo.tsx

<PageHero title="Sans photo, un halo discret" description="Le fond par défaut quand aucune image n'est fournie." />

Prop	Type	Défaut	Description
`title`	`string`	–	Titre ; les astérisques marquent l'accent, sinon ce sont les derniers mots.
`accentLast`	`number`	`1 or 2`	Derniers mots en accent sans astérisques (2 pour les titres de plus de trois mots).
`description`	`ReactNode`	–	Chapeau sous le titre.
`meta`	`ReactNode`	–	Ligne discrète : date, fil d'Ariane…
`image`	`string \| ReactNode`	–	URL de la photo de fond, ou un élément prêt comme <Image fill /> de Next.js. Sans elle, un halo d'accent discret.
`imagePosition`	`string`	`"50% 50%"`	object-position de la photo.
`children`	`ReactNode`	–	Pilules sous le texte.

Héros vidéo

Pour l'accueil : des vidéos muettes qui se relaient en fondu enchaîné, une parallaxe douce et des voiles sombres. Aucune vidéo n'est choisie au rendu serveur, pour que serveur et client concordent ; la vidéo apparaît en fondu après l'hydratation. Avec le mouvement réduit, seule l'image fixe s'affiche.

Des interfaces en noir profond.

Des vidéos muettes s'enchaînent en fondu derrière des voiles sombres qui gardent le texte lisible.

Commencer En savoir plus

TSDemo.tsx

<HeroVideo
  clips={[
    { webm: "/videos/hero.webm", mp4: "/videos/hero.mp4", poster: "/videos/hero.jpg" },
    { webm: "/videos/hero-2.webm", mp4: "/videos/hero-2.mp4", poster: "/videos/hero-2.jpg" },
  ]}
>
  <Heading as="h1" size="display" className="trc-enter">Des interfaces en *noir profond.*</Heading>
  <Text size="lg">Des vidéos muettes s'enchaînent en fondu derrière des voiles sombres qui gardent le texte lisible.</Text>
  <PillLink href="/start" solid>Commencer</PillLink>
</HeroVideo>

Préparez chaque vidéo muette, en 1280 px de large, 24 à 30 images par seconde et moins de 25 secondes ; visez 1,5 à 2,5 Mo par fichier :

ffmpeg -i src.mp4 -an -vf "scale=1280:-2,fps=30" -c:v libx264 -preset slow -crf 28 -pix_fmt yuv420p -movflags +faststart hero.mp4
ffmpeg -i src.mp4 -an -vf "scale=1280:-2,fps=30" -c:v libvpx-vp9 -b:v 0 -crf 40 -row-mt 1 hero.webm
ffmpeg -ss 1 -i src.mp4 -frames:v 1 -vf "scale=1280:-2" -q:v 5 hero.jpg

Prop	Type	Défaut	Description
`clips`	`{ webm?, mp4?, poster? }[]`	–	Vidéos muettes jouées à tour de rôle en fondu enchaîné ; la première est tirée au hasard.
`children`	`ReactNode`	–	Texte du héros, en bas à gauche.
`aside`	`ReactNode`	–	Bloc facultatif, en bas à droite sur grand écran.
`fade`	`number`	`1.2`	Durée du fondu, en secondes.
`parallax`	`boolean`	`true`	La vidéo descend moins vite que la page.

Haut de page

Une pastille d'accent flottante qui apparaît une fois le premier écran dépassé. Cette page en a une : faites défiler et regardez en bas à droite.

<BackToTop label="Haut de page" />

Prop	Type	Défaut	Description
`label`	`string`	`"Back to top"`	Nom accessible.
`threshold`	`number`	`0.8`	Défilement, en hauteurs d'écran, avant qu'il apparaisse.