Curtain hero

Ce qui est inclus

Un premier écran complet : une photographie posée dans un passe-partout blanc, comme un tirage sous marie-louise. Au chargement, un rideau noir se lève et découvre le cadre, la photographie se pose en sortant d’un léger zoom, puis la typographie monte hors de son masque — le titre d’abord, les deux lignes de la légende ensuite, l’une après l’autre.

Deux fichiers, la police et la photographie. Aucune dépendance, aucune étape de build, aucune requête externe. Et surtout : toute l’entrée est écrite en CSS. Le script ne décide que du moment où elle joue, et sait la rejouer — sans lui, le composant s’affiche et s’anime exactement pareil.

Fonctionnalités

• L’entrée marche sans JavaScript — chaque jeu d’images-clés ne décrit que son état de départ, si bien que l’état d’arrivée reste celui des règles du composant. Une durée mise à 0s pose la pièce directement à sa place, sans rien casser.
• Le titre remplit la ligne, tout seul — son corps est une part de la largeur de sa bande, en cqw. Il s’ajuste à toute taille sans une ligne de script, et son encre touche les deux bords : les approches latérales du caractère sont compensées à la mesure.
• Retenu jusqu’à l’entrée en vue — data-au-defilement garde le rideau baissé tant que le composant n’est pas visible. Indispensable dès qu’il n’est pas le premier écran, sinon tout est déjà passé quand le lecteur arrive dessus.
• Deux variables pour l’échelle — l’une pour le dessin, l’autre pour le texte. Le cadre, la hauteur et les gouttières suivent la première ; la légende suit la seconde.
• Un vrai titre — <h1> et texte véritable : sélectionnable, traduisible, trouvable. Le modèle d’origine livrait une image.
• Mouvement réduit pris au sérieux — sous prefers-reduced-motion, animations et délais tombent ensemble : la scène s’affiche d’emblée dans son état final.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

<link rel="stylesheet" href="curtain-hero.css">
<script src="curtain-hero.js" defer></script>

<section class="curtain-hero">
  <img class="curtain-hero__photo" src="fond.webp" alt="…">

  <div class="curtain-hero__bande">
    <div class="curtain-hero__meta">
      <p class="curtain-hero__ligne">
        <span class="curtain-hero__texte">Saturday Jun, 13 — 2026 at</span>
      </p>
      <p class="curtain-hero__ligne">
        <span class="curtain-hero__texte">Havnegade 12, Copenhagen</span>
      </p>
    </div>
  </div>

  <div class="curtain-hero__bande">
    <h1 class="curtain-hero__titre">
      <span class="curtain-hero__lettrage">IRIS &amp; MALIK</span>
    </h1>
  </div>

  <div class="curtain-hero__rideau" aria-hidden="true"></div>
</section>

Le span à l’intérieur de chaque ligne n’est pas décoratif : c’est lui qui bouge, pendant que le bloc qui le contient sert de masque.

Ce qu’il faut savoir

• Changer le titre demande deux mesures. Le corps du titre est calculé pour que l’encre de ce texte-là remplisse la ligne exactement. Un autre mot, une autre largeur : le composant est livré avec le script qui recalcule les deux valeurs à reporter, et le mode d’emploi explique la manœuvre en trois lignes.
• Le cadre suit la hauteur de la fenêtre. C’est ce que fait le modèle d’origine, et c’est ce qui donne au passe-partout une épaisseur constante à l’écran. Une seule variable le ramène à une part de la largeur si la mise en page l’exige — c’est exactement ce que fait l’aperçu ci-dessus pour tenir dans son cadre.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML. Le banc le vérifie en servant le dossier en HTTP avec l’en-tête, plutôt qu’en le supposant.
• Le dessin vient d’ailleurs. Les proportions et les durées sont relevées sur un gabarit Webflow commercial — les boîtes à cinq largeurs, les durées lues dans son moteur d’animation. Le code, lui, est original : rien n’a été repris de son implémentation. La photographie a été régénérée et le texte remplacé.