Curtain hero

What's included

A complete first screen: a photograph set in a white mount, like a print behind a mat. On load, a black curtain rises to uncover the frame, the photograph settles out of a slight zoom, then the type climbs out of its mask — the heading first, the two lines of the caption after, one at a time.

Two files, the font and the photograph. No dependencies, no build step, no external requests. And above all: the whole entrance is written in CSS. The script only decides when it plays, and knows how to replay it — without it, the component appears and animates in exactly the same way.

Features

• The entrance works without JavaScript — each set of keyframes describes only its starting state, so the finishing state remains the one set by the component's own rules. A duration set to 0s puts the piece straight where it belongs, without breaking anything.
• The heading fills the line, by itself — its size is a fraction of the width of its band, in cqw. It adjusts to any size without a line of script, and its ink touches both edges: the side bearings of the glyphs are compensated for by measurement.
• Held back until it comes into view — data-au-defilement keeps the curtain down until the component is visible. Essential as soon as it isn't the first screen, otherwise it's all over by the time the reader gets there.
• Two variables for the scale — one for the drawing, one for the text. The frame, the height and the gutters follow the first; the caption follows the second.
• A real heading — <h1> and real text: selectable, translatable, findable. The original model shipped an image.
• Reduced motion taken seriously — under prefers-reduced-motion, animations et delays fall away together: the scene appears straight away in its final state.

Dropping it into a page

Two files to load, then the markup:

<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 inside each line isn't decorative: it's what moves, while the block containing it acts as the mask.

What you should know

• Changing the heading takes two measurements. The heading's size is worked out so that the ink of that particular text fills the line exactly. Another word, another width: the component ships with the script that recalculates the two values to carry over, and the README explains the manoeuvre in three lines.
• The frame follows the height of the window. That's what the original model does, and it's what gives the mount a constant thickness on screen. A single variable brings it back to a fraction of the width if the layout demands it — which is exactly what the preview above does to fit inside its frame.
• No inline styles, no inline scripts. The component honours the site's strict security policy, and never uses innerHTML. The test bench checks this by serving the folder over HTTP with the header, rather than assuming it.
• The design comes from elsewhere. The proportions and the durations were measured on a commercial Webflow template — the boxes at five widths, the durations read out of its animation engine. The code itself is original: nothing was taken from its implementation. The photograph has been regenerated and the text replaced.